/* NetBlue Creation - Modern Professional Design */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--primary: #1e40af;
	--secondary: #3b82f6;
	--accent: #60a5fa;
	--light: #dbeafe;
	--dark: #1e3a8a;
	--white: #ffffff;
	--gray-50: #f9fafb;
	--gray-100: #f3f4f6;
	--gray-200: #e5e7eb;
	--gray-300: #d1d5db;
	--gray-600: #4b5563;
	--gray-800: #1f2937;
	--gray-900: #111827;
	--success: #10b981;
	--warning: #f59e0b;
	--error: #ef4444;
	--gradient-main: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	--gradient-blue: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
	--gradient-bg: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

html {
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
	background: var(--gradient-bg);
	background-attachment: fixed;
	background-size: 100% 120vh;
	background-repeat: no-repeat;
	background-position: center top;
	color: var(--gray-800);
	line-height: 1.6;
	overflow-x: hidden;
	font-size: 16px;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	height: auto;
	position: relative;
}

/* Empêcher les éléments positionnés absolument de créer du scroll vertical */
body {
	overflow-y: auto;
	overflow-x: hidden;
}

body::before {
	content: '';
	position: fixed;
	top: -20vh;
	left: 0;
	right: 0;
	bottom: -20vh;
	background: var(--gradient-bg);
	z-index: -2;
}

/* Enhanced Floating Stars - Points lumineux fixes et colorés - tailles réduites */
.star {
	position: fixed;
	border-radius: 50%;
	pointer-events: none;
	z-index: 80;
	width: 3px;
	height: 3px;
	animation: twinkle 1.5s ease-in-out infinite alternate;
}

/* Étoiles blanches */
.star.white {
	background: white;
	box-shadow:
		0 0 8px rgba(255, 255, 255, 1),
		0 0 16px rgba(255, 255, 255, 0.9),
		0 0 24px rgba(255, 255, 255, 0.8),
		0 0 32px rgba(255, 255, 255, 0.6);
}

/* Étoiles bleues */
.star.blue {
	background: #3b82f6;
	box-shadow:
		0 0 8px rgba(59, 130, 246, 1),
		0 0 16px rgba(59, 130, 246, 0.9),
		0 0 24px rgba(59, 130, 246, 0.8),
		0 0 32px rgba(59, 130, 246, 0.6);
}

.star.small {
	width: 2px;
	height: 2px;
}

.star.small.white {
	box-shadow:
		0 0 6px rgba(255, 255, 255, 1),
		0 0 12px rgba(255, 255, 255, 0.9),
		0 0 18px rgba(255, 255, 255, 0.7);
}

.star.small.blue {
	box-shadow:
		0 0 6px rgba(59, 130, 246, 1),
		0 0 12px rgba(59, 130, 246, 0.9),
		0 0 18px rgba(59, 130, 246, 0.7);
}

.star.medium {
	width: 4px;
	height: 4px;
}

.star.medium.white {
	box-shadow:
		0 0 10px rgba(255, 255, 255, 1),
		0 0 20px rgba(255, 255, 255, 0.9),
		0 0 30px rgba(255, 255, 255, 0.8),
		0 0 40px rgba(255, 255, 255, 0.6);
}

.star.medium.blue {
	box-shadow:
		0 0 10px rgba(59, 130, 246, 1),
		0 0 20px rgba(59, 130, 246, 0.9),
		0 0 30px rgba(59, 130, 246, 0.8),
		0 0 40px rgba(59, 130, 246, 0.6);
}

.star.large {
	width: 5px;
	height: 5px;
}

.star.large.white {
	box-shadow:
		0 0 12px rgba(255, 255, 255, 1),
		0 0 24px rgba(255, 255, 255, 0.9),
		0 0 36px rgba(255, 255, 255, 0.8),
		0 0 48px rgba(255, 255, 255, 0.6);
}

.star.large.blue {
	box-shadow:
		0 0 12px rgba(59, 130, 246, 1),
		0 0 24px rgba(59, 130, 246, 0.9),
		0 0 36px rgba(59, 130, 246, 0.8),
		0 0 48px rgba(59, 130, 246, 0.6);
}

@keyframes twinkle {
	0% {
		opacity: 0.5;
		transform: scale(0.8);
	}

	50% {
		opacity: 1;
		transform: scale(1.3);
	}

	100% {
		opacity: 0.7;
		transform: scale(1);
	}
}

/* Star Animations */
@keyframes float1 {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
		opacity: 0.7;
	}

	25% {
		transform: translate(25px, -15px) scale(1.2);
		opacity: 1;
	}

	50% {
		transform: translate(-20px, 30px) scale(0.8);
		opacity: 0.5;
	}

	75% {
		transform: translate(35px, 10px) scale(1.1);
		opacity: 0.9;
	}
}

@keyframes float2 {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
		opacity: 0.8;
	}

	30% {
		transform: translate(-30px, 20px) scale(1.3);
		opacity: 1;
	}

	60% {
		transform: translate(40px, -25px) scale(0.7);
		opacity: 0.6;
	}
}

@keyframes float3 {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
		opacity: 0.6;
	}

	40% {
		transform: translate(-35px, 40px) scale(0.6);
		opacity: 0.7;
	}

	80% {
		transform: translate(-20px, 25px) scale(0.9);
		opacity: 0.8;
	}
}

@keyframes float4 {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
		opacity: 0.9;
	}

	35% {
		transform: translate(-25px, -35px) scale(1.1);
		opacity: 0.7;
	}

	70% {
		transform: translate(50px, 20px) scale(0.8);
		opacity: 1;
	}
}

@keyframes float5 {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
		opacity: 0.75;
	}

	50% {
		transform: translate(-40px, -20px) scale(0.7);
		opacity: 0.6;
	}
}

@keyframes float6 {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
		opacity: 0.8;
	}

	50% {
		transform: translate(-20px, -40px) scale(1.2);
		opacity: 0.9;
	}
}

@keyframes float7 {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
		opacity: 0.65;
	}

	33% {
		transform: translate(-30px, -15px) scale(1.1);
		opacity: 0.7;
	}

	66% {
		transform: translate(20px, 40px) scale(1.05);
		opacity: 0.85;
	}
}

@keyframes float8 {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
		opacity: 0.7;
	}

	50% {
		transform: translate(25px, -35px) scale(0.8);
		opacity: 1;
	}
}

@keyframes float9 {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
		opacity: 0.85;
	}

	50% {
		transform: translate(40px, -20px) scale(1.15);
		opacity: 0.6;
	}
}

@keyframes float10 {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
		opacity: 0.9;
	}

	50% {
		transform: translate(30px, -25px) scale(1.2);
		opacity: 1;
	}
}

@keyframes float11 {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
		opacity: 0.6;
	}

	60% {
		transform: translate(25px, 30px) scale(1.1);
		opacity: 0.95;
	}
}

@keyframes float12 {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
		opacity: 0.8;
	}

	40% {
		transform: translate(35px, 15px) scale(0.9);
		opacity: 1;
	}
}

/* Logo Float Animation */
@keyframes logoFloat {

	0%,
	100% {
		transform: translate(0, 0) rotate(0deg);
	}

	25% {
		transform: translate(4px, -6px) rotate(2deg);
	}

	50% {
		transform: translate(-3px, -4px) rotate(-1deg);
	}

	75% {
		transform: translate(5px, 2px) rotate(3deg);
	}
}

/* Professional Navigation - Ultra Liquid Glassmorphism Effect */
.navbar {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 95%;
	max-width: 1200px;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(35px) saturate(1.8);
	-webkit-backdrop-filter: blur(35px) saturate(1.8);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50px;
	padding: 0.75rem 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 100;
	box-shadow:
		0 8px 32px rgba(31, 81, 255, 0.08),
		0 1px 1px rgba(255, 255, 255, 0.4) inset,
		0 -1px 1px rgba(0, 0, 0, 0.05) inset;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
}

.navbar::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background: linear-gradient(135deg,
			rgba(15, 23, 42, 0.8) 0%,
			rgba(30, 64, 175, 0.7) 100%);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: inherit;
	transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
}

.navbar::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg,
			rgba(255, 255, 255, 0.2) 0%,
			rgba(255, 255, 255, 0.05) 50%,
			rgba(255, 255, 255, 0.15) 100%);
	border-radius: inherit;
	z-index: -1;
	transition: opacity 0.3s ease;
}

.navbar:hover {
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(40px) saturate(2);
	-webkit-backdrop-filter: blur(40px) saturate(2);
	border-color: rgba(255, 255, 255, 0.5);
	box-shadow:
		0 12px 48px rgba(31, 81, 255, 0.12),
		0 1px 1px rgba(255, 255, 255, 0.6) inset,
		0 -1px 1px rgba(0, 0, 0, 0.03) inset;
	transform: translateX(-50%) translateY(-3px) scale(1.02);
}

.navbar:hover::before {
	opacity: 0.8;
}

.logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	transition: transform 0.3s ease;
	text-decoration: none;
	color: inherit;
}

.logo:hover {
	transform: scale(1.05);
}

.logo-img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	border-radius: 8px;
	transition: all 0.3s ease;
	animation: logoFloat 8s ease-in-out infinite;
}

.logo:hover .logo-img {
	transform: rotate(5deg);
	animation-play-state: paused;
}

.logo-placeholder {
	width: 56px;
	height: 56px;
	background: var(--gradient-blue);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	color: white;
	box-shadow: var(--shadow);
	transition: all 0.3s ease;
}

.logo:hover .logo-placeholder {
	box-shadow: var(--shadow-lg);
	transform: rotate(5deg);
}

.brand-name {
	font-size: 1.5rem;
	font-weight: 700;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing: -0.025em;
}

.nav-links {
	display: flex;
	gap: 2rem;
	z-index: 40;
}

/* Navigation Desktop - visible par défaut et bien stylée */
.nav-links.desktop-nav {
	display: flex;
	gap: 2rem;
}

.nav-links.desktop-nav a {
	color: var(--gray-800);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9rem;
	padding: 0.5rem 0.8rem;
	border-radius: 35px;
	transition: all 0.3s ease;
	position: relative;
}

.nav-links.desktop-nav a:hover,
.nav-links.desktop-nav a.active {
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	transform: translateY(-2px);
}

.nav-links.desktop-nav a.active {
	font-weight: 600;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Navigation Mobile - cachée par défaut */
.nav-links.mobile-nav {
	display: none;
}

.nav-links a {
	text-decoration: none;
	color: var(--gray-600);
	font-weight: 500;
	font-size: 0.95rem;
	padding: 0.5rem 1rem;
	border-radius: 25px;
	transition: all 0.3s ease;
	position: relative;
}

.nav-links a:hover,
.nav-links a.active {
	color: var(--primary);
	background: rgba(59, 130, 246, 0.05);
	transform: translateY(-2px);
}

.nav-links a.active {
	font-weight: 600;
	background: rgba(59, 130, 246, 0.1);
}

.contact-button {
	background: var(--gradient-blue);
	color: white;
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: 35px;
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: var(--shadow);
}

.contact-button:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-xl);
}

/* Modern Layout */
.main {
	padding-top: 120px;
	position: relative;
	z-index: 90;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
	position: relative;
	z-index: 90;
}

/* Enhanced Hero Section */
.hero {
	text-align: center;
	padding: 6rem 2rem;
	background:
		radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, rgba(30, 64, 175, 0.1) 0%, transparent 50%);
	position: relative;
	overflow: hidden;
	z-index: 90;
}

.hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		linear-gradient(45deg, transparent 48%, rgba(59, 130, 246, 0.05) 49%, rgba(59, 130, 246, 0.05) 51%, transparent 52%),
		linear-gradient(-45deg, transparent 48%, rgba(30, 64, 175, 0.05) 49%, rgba(30, 64, 175, 0.05) 51%, transparent 52%);
	background-size: 60px 60px;
	opacity: 0.5;
	animation: patternMove 20s linear infinite;
}

@keyframes patternMove {
	0% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(60px, 60px);
	}
}

.hero h1 {
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 800;
	margin-bottom: 1.5rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1.2;
	position: relative;
	z-index: 1;
}

.hero p {
	font-size: 1.25rem;
	color: var(--gray-600);
	max-width: 600px;
	margin: 0 auto 2.5rem;
	line-height: 1.6;
	position: relative;
	z-index: 1;
}

.hero-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}

.cta-hero {
	background: var(--gradient-blue);
	color: white;
	border: none;
	padding: 1rem 2rem;
	border-radius: 30px;
	font-weight: 600;
	font-size: 1.1rem;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: var(--shadow-lg);
	position: relative;
	overflow: hidden;
}

.cta-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.5s ease;
}

.cta-hero:hover::before {
	left: 100%;
}

.cta-hero:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-2xl);
}

.cta-secondary {
	background: transparent;
	color: var(--primary);
	border: 2px solid var(--primary);
	padding: 1rem 2rem;
	border-radius: 30px;
	font-weight: 600;
	font-size: 1.1rem;
	cursor: pointer;
	transition: all 0.3s ease;
}

.cta-secondary:hover {
	background: var(--primary);
	color: white;
	transform: translateY(-3px);
	box-shadow: var(--shadow-xl);
}

/* Modern Stats Section */
.stats-section {
	padding: 4rem 0;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(10px);
	position: relative;
	z-index: 90;
}

.stats-section h2 {
	text-align: center;
	font-size: 3rem;
	font-weight: 800;
	margin-bottom: 1rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	justify-items: center;
	max-width: 1100px;
	margin: 0 auto;
}

.stat-item {
	text-align: center;
	padding: 2rem;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20px;
	border: 1px solid rgba(59, 130, 246, 0.1);
	transition: all 0.3s ease;
	box-shadow: var(--shadow-sm);
	min-height: 120px;
	width: 320px;
	max-width: 320px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 95;
}

.stat-item:hover {
	transform: translateY(-10px);
	box-shadow: var(--shadow-xl);
	background: rgba(255, 255, 255, 0.95);
}

.stat-number {
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--primary);
	margin-bottom: 0.5rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1.2;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transform-origin: center;
}

.stat-label {
	font-size: 1rem;
	color: var(--gray-700);
	font-weight: 600;
	white-space: nowrap;
	overflow: visible;
}

/* Enhanced Service Cards */
.services-preview {
	padding: 6rem 0;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(10px);
	position: relative;
	z-index: 90;
}

.services-preview h2 {
	text-align: center;
	font-size: 3rem;
	font-weight: 800;
	margin-bottom: 1rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.section-subtitle {
	text-align: center;
	font-size: 1.25rem;
	color: var(--gray-600);
	margin-bottom: 4rem;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.service-card {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 24px;
	padding: 2.5rem;
	text-align: center;
	transition: all 0.4s ease;
	border: 1px solid rgba(59, 130, 246, 0.1);
	box-shadow: var(--shadow);
	position: relative;
	overflow: hidden;
	z-index: 95;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.service-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--gradient-blue);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.service-card:hover::before {
	transform: scaleX(1);
}

.service-card:hover {
	transform: translateY(-15px);
	box-shadow: var(--shadow-2xl);
	background: rgba(255, 255, 255, 1);
}

.service-header h3 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 1rem;
}

.price {
	font-size: 2.5rem;
	font-weight: 800;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 0.5rem;
}

.payment {
	color: var(--gray-600);
	font-size: 0.9rem;
	margin-bottom: 2rem;
}

.service-features {
	text-align: left;
	margin: 2rem 0;
	flex-grow: 1;
}

.feature {
	padding: 0.75rem 0;
	color: var(--gray-700);
	font-weight: 500;
	border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.feature:last-child {
	border-bottom: none;
}

.service-btn {
	background: var(--gradient-blue);
	color: white;
	border: none;
	padding: 1rem 2rem;
	border-radius: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	width: 100%;
	margin-top: auto;
}

.service-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.popular-badge {
	position: absolute;
	top: -10px;
	right: 20px;
	background: var(--warning);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 600;
	box-shadow: var(--shadow);
}

/* ==========================================
   PRIX PROMOTIONNELS SUR CARTES SERVICES
   ========================================== */

.price-container {
	position: relative;
	margin-bottom: 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.original-price {
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--gray-500);
	text-decoration: line-through;
	text-decoration-color: #ef4444;
	text-decoration-thickness: 3px;
	opacity: 0.7;
	position: relative;
	z-index: 1;
}

.promo-price {
	font-size: 2.5rem;
	font-weight: 800;
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	position: relative;
	animation: price-glow 2s ease-in-out infinite;
}

.promo-badge-small {
	position: absolute;
	top: -8px;
	right: -15px;
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
	color: white;
	padding: 0.25rem 0.6rem;
	border-radius: 12px;
	font-size: 0.7rem;
	font-weight: 700;
	box-shadow:
		0 4px 15px rgba(239, 68, 68, 0.3),
		0 0 0 2px rgba(239, 68, 68, 0.1);
	animation: badge-pulse 2s ease-in-out infinite;
	z-index: 2;
}

/* Animations pour les prix promotionnels */
@keyframes price-glow {

	0%,
	100% {
		text-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
		filter: brightness(1);
	}

	50% {
		text-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
		filter: brightness(1.1);
	}
}

@keyframes badge-pulse {

	0%,
	100% {
		transform: scale(1);
		box-shadow:
			0 4px 15px rgba(239, 68, 68, 0.3),
			0 0 0 2px rgba(239, 68, 68, 0.1);
	}

	50% {
		transform: scale(1.05);
		box-shadow:
			0 6px 20px rgba(239, 68, 68, 0.4),
			0 0 0 3px rgba(239, 68, 68, 0.2);
	}
}

/* Responsive pour les prix promotionnels */
@media (max-width: 768px) {
	.original-price {
		font-size: 1.5rem;
	}

	.promo-price {
		font-size: 2rem;
	}

	.ultimate-promo-text {
		font-size: 1.2rem;
	}

	.promo-badge-small {
		font-size: 0.6rem;
		padding: 0.2rem 0.5rem;
		top: -6px;
		right: -12px;
	}
}

@media (max-width: 480px) {
	.original-price {
		font-size: 1.3rem;
	}

	.promo-price {
		font-size: 1.8rem;
	}

	.ultimate-promo-text {
		font-size: 1rem;
		line-height: 1.2;
	}
}

/* Modern Image Carousel */
.carousel-section {
	padding: 6rem 0;
	background: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(10px);
	overflow: hidden;
	position: relative;
	z-index: 90;
}

.carousel-section h2 {
	text-align: center;
	font-size: 3rem;
	font-weight: 800;
	margin-bottom: 1rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.carousel-container {
	position: relative;
	max-width: 1200px;
	margin: 3rem auto 0;
	overflow: hidden;
	border-radius: 24px;
	box-shadow: var(--shadow-2xl);
}

.carousel-track {
	display: flex;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.carousel-slide {
	min-width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gradient-blue);
	height: 400px;
	overflow: hidden;
}

.slide-content {
	text-align: center;
	color: white;
	z-index: 2;
	position: relative;
	padding: 2rem;
}

.slide-content h3 {
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 1rem;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.slide-content p {
	font-size: 1.25rem;
	opacity: 0.9;
	max-width: 600px;
	margin: 0 auto;
	text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
	line-height: 1.6;
}

.slide-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.3;
	z-index: 1;
}

.carousel-controls {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 10;
	color: white;
	font-size: 1.5rem;
	font-weight: bold;
}

.carousel-controls:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: translateY(-50%) scale(1.1);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.carousel-prev {
	left: 20px;
}

.carousel-next {
	right: 20px;
}

.carousel-indicators {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2rem;
}

.indicator {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(59, 130, 246, 0.3);
	cursor: pointer;
	transition: all 0.3s ease;
	border: 2px solid transparent;
}

.indicator.active {
	background: var(--primary);
	transform: scale(1.2);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.indicator:hover {
	background: rgba(59, 130, 246, 0.6);
	transform: scale(1.1);
}

/* Auto-scrolling animation */
@keyframes autoSlide {

	0%,
	20% {
		transform: translateX(0);
	}

	25%,
	45% {
		transform: translateX(-100%);
	}

	50%,
	70% {
		transform: translateX(-200%);
	}

	75%,
	95% {
		transform: translateX(-300%);
	}

	100% {
		transform: translateX(0);
	}
}

.carousel-track.auto-scroll {
	animation: autoSlide 16s infinite ease-in-out;
}

.carousel-track.auto-scroll:hover {
	animation-play-state: paused;
}

/* Responsive carousel */
@media (max-width: 768px) {
	.carousel-section {
		padding: 4rem 0;
	}

	.carousel-slide {
		height: 300px;
	}

	.slide-content h3 {
		font-size: 2rem;
	}

	.slide-content p {
		font-size: 1.1rem;
	}

	.carousel-controls {
		width: 40px;
		height: 40px;
		font-size: 1.2rem;
	}

	.carousel-prev {
		left: 10px;
	}

	.carousel-next {
		right: 10px;
	}
}

@media (max-width: 480px) {
	.carousel-slide {
		height: 250px;
	}

	.slide-content {
		padding: 1rem;
	}

	.slide-content h3 {
		font-size: 1.5rem;
	}

	.slide-content p {
		font-size: 1rem;
	}
}

/* Responsive Stats Section */
@media (max-width: 768px) {
	.stats-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
		max-width: 800px;
	}

	.stat-item {
		padding: 1.5rem;
		min-height: 100px;
		width: 240px;
		max-width: 240px;
	}

	.stat-number {
		font-size: 2rem;
	}

	.stat-label {
		font-size: 0.9rem;
		white-space: normal;
		word-wrap: break-word;
	}
}

@media (max-width: 480px) {
	.stats-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
		max-width: 300px;
	}

	.stat-item {
		padding: 1rem;
		min-height: 80px;
		width: 280px;
		max-width: 280px;
	}

	.stat-number {
		font-size: 1.8rem;
		margin-bottom: 0.25rem;
	}

	.stat-label {
		font-size: 0.8rem;
		line-height: 1.2;
	}
}

/* Messages de statut pour contact_process.php - Design Ultra Moderne */
.message-status {
	padding: 6rem 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	position: relative;
}

.success-message,
.error-message,
.info-message {
	background: rgba(255, 255, 255, 0.98);
	border-radius: 32px;
	padding: 4rem 3rem;
	text-align: center;
	max-width: 650px;
	box-shadow:
		0 25px 80px rgba(0, 0, 0, 0.1),
		0 0 0 1px rgba(255, 255, 255, 0.6) inset,
		0 1px 0 rgba(255, 255, 255, 0.8) inset;
	backdrop-filter: blur(30px) saturate(1.5);
	border: 1px solid rgba(255, 255, 255, 0.3);
	position: relative;
	overflow: hidden;
	animation: slideUpFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
	transform-origin: center bottom;
}

.success-message::before,
.error-message::before,
.info-message::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: linear-gradient(90deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.8) 50%,
			rgba(255, 255, 255, 0) 100%);
	border-radius: 32px 32px 0 0;
}

.success-message {
	border-top: 6px solid var(--success);
	background: linear-gradient(135deg,
			rgba(16, 185, 129, 0.05) 0%,
			rgba(255, 255, 255, 0.98) 30%,
			rgba(255, 255, 255, 0.98) 100%);
}

.error-message {
	border-top: 6px solid var(--error);
	background: linear-gradient(135deg,
			rgba(239, 68, 68, 0.05) 0%,
			rgba(255, 255, 255, 0.98) 30%,
			rgba(255, 255, 255, 0.98) 100%);
}

.info-message {
	border-top: 6px solid var(--primary);
	background: linear-gradient(135deg,
			rgba(59, 130, 246, 0.05) 0%,
			rgba(255, 255, 255, 0.98) 30%,
			rgba(255, 255, 255, 0.98) 100%);
}

.success-message h1,
.error-message h1,
.info-message h1 {
	font-size: 2.75rem;
	margin-bottom: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	position: relative;
	animation: titleGlow 0.6s ease-out 0.3s both;
}

.success-message h1 {
	color: var(--success);
	text-shadow: 0 0 30px rgba(16, 185, 129, 0.3);
}

.error-message h1 {
	color: var(--error);
	text-shadow: 0 0 30px rgba(239, 68, 68, 0.3);
}

.info-message h1 {
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 200% 200%;
	animation: gradientShift 3s ease-in-out infinite, titleGlow 0.6s ease-out 0.3s both;
}

.success-message p,
.error-message p,
.info-message p {
	font-size: 1.3rem;
	color: var(--gray-700);
	margin-bottom: 2.5rem;
	line-height: 1.7;
	font-weight: 500;
	opacity: 0;
	animation: fadeInUp 0.6s ease-out 0.5s both;
}

.success-message .cta-hero,
.error-message .cta-hero,
.info-message .cta-hero {
	margin-top: 1.5rem;
	transform: translateY(20px);
	opacity: 0;
	animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.7s both;
	font-size: 1.1rem;
	padding: 1.25rem 2.5rem;
	position: relative;
	overflow: hidden;
}

.success-message .cta-hero::before,
.error-message .cta-hero::before,
.info-message .cta-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: left 0.6s ease;
}

.success-message .cta-hero:hover::before,
.error-message .cta-hero:hover::before,
.info-message .cta-hero:hover::before {
	left: 100%;
}

/* Animations */
@keyframes slideUpFadeIn {
	0% {
		transform: translateY(40px) scale(0.95);
		opacity: 0;
	}

	100% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

@keyframes titleGlow {
	0% {
		transform: translateY(10px);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes fadeInUp {
	0% {
		transform: translateY(20px);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes bounceIn {
	0% {
		transform: translateY(20px) scale(0.9);
		opacity: 0;
	}

	60% {
		transform: translateY(-5px) scale(1.02);
		opacity: 1;
	}

	100% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

@keyframes gradientShift {

	0%,
	100% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

/* Effet de particules flottantes pour le succès */
.success-message::after {
	content: '✨';
	position: absolute;
	top: 10%;
	right: 10%;
	font-size: 1.5rem;
	animation: float1 4s ease-in-out infinite;
	opacity: 0.7;
}

.error-message::after {
	content: '⚠️';
	position: absolute;
	top: 10%;
	right: 10%;
	font-size: 1.5rem;
	animation: pulse 2s ease-in-out infinite;
	opacity: 0.7;
}

.info-message::after {
	content: '💫';
	position: absolute;
	top: 10%;
	right: 10%;
	font-size: 1.5rem;
	animation: rotate 3s linear infinite;
	opacity: 0.7;
}

@keyframes pulse {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Responsive pour messages */
@media (max-width: 768px) {
	.message-status {
		padding: 4rem 1rem;
	}

	.success-message,
	.error-message,
	.info-message {
		padding: 3rem 2rem;
		border-radius: 24px;
	}

	.success-message h1,
	.error-message h1,
	.info-message h1 {
		font-size: 2.25rem;
	}

	.success-message p,
	.error-message p,
	.info-message p {
		font-size: 1.15rem;
	}

	.success-message .cta-hero,
	.error-message .cta-hero,
	.info-message .cta-hero {
		padding: 1rem 2rem;
		font-size: 1rem;
	}
}

@media (max-width: 480px) {

	.success-message,
	.error-message,
	.info-message {
		padding: 2.5rem 1.5rem;
		margin: 0 1rem;
	}

	.success-message h1,
	.error-message h1,
	.info-message h1 {
		font-size: 2rem;
	}

	.success-message p,
	.error-message p,
	.info-message p {
		font-size: 1.1rem;
	}
}

/* Ultra-Modern Ticker - Style Premium */
.ticker-section {
	padding: 6rem 0;
	background:
		radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, rgba(30, 64, 175, 0.03) 0%, transparent 50%);
	overflow: hidden;
	position: relative;
}

.ticker-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		linear-gradient(45deg, transparent 48%, rgba(59, 130, 246, 0.02) 49%, rgba(59, 130, 246, 0.02) 51%, transparent 52%),
		linear-gradient(-45deg, transparent 48%, rgba(30, 64, 175, 0.02) 49%, rgba(30, 64, 175, 0.02) 51%, transparent 52%);
	background-size: 80px 80px;
	opacity: 0.3;
	animation: patternMove 25s linear infinite;
}

.ticker-container {
	width: 100%;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.02);
	backdrop-filter: blur(40px) saturate(1.8);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 30px;
	padding: 2rem 0;
	margin: 3rem 0;
	position: relative;
	box-shadow:
		0 20px 60px rgba(59, 130, 246, 0.05),
		0 0 0 1px rgba(255, 255, 255, 0.05) inset,
		0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

.ticker-container::before,
.ticker-container::after {
	content: '';
	position: absolute;
	top: 0;
	width: 120px;
	height: 100%;
	z-index: 3;
	pointer-events: none;
}

.ticker-container::before {
	left: 0;
	background: linear-gradient(90deg,
			rgba(241, 245, 249, 1) 0%,
			rgba(241, 245, 249, 0.8) 30%,
			rgba(241, 245, 249, 0.4) 60%,
			transparent 100%);
}

.ticker-container::after {
	right: 0;
	background: linear-gradient(270deg,
			rgba(241, 245, 249, 1) 0%,
			rgba(241, 245, 249, 0.8) 30%,
			rgba(241, 245, 249, 0.4) 60%,
			transparent 100%);
}

.ticker-track {
	display: flex;
	align-items: center;
	gap: 0;
	animation: ultraTicker 40s linear infinite;
	will-change: transform;
}

.ticker-track:hover {
	animation-play-state: paused;
}

.ticker-item {
	flex-shrink: 0;
	padding: 1.5rem 3rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(20px);
	border-radius: 20px;
	margin: 0 1rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow:
		0 8px 32px rgba(59, 130, 246, 0.08),
		0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.ticker-item:hover {
	transform: translateY(-8px) scale(1.05);
	background: rgba(255, 255, 255, 0.85);
	box-shadow:
		0 20px 60px rgba(59, 130, 246, 0.15),
		0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.ticker-item .icon {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	background: var(--gradient-blue);
	border-radius: 15px;
	color: white;
	box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
	transition: all 0.3s ease;
}

.ticker-item:hover .icon {
	transform: rotate(10deg) scale(1.1);
	box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
}

.ticker-item .content {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ticker-item .title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--primary);
	margin: 0;
	line-height: 1.2;
}

.ticker-item .subtitle {
	font-size: 0.9rem;
	color: var(--gray-600);
	margin: 0;
	opacity: 0.8;
}

.ticker-item .number {
	font-size: 1.4rem;
	font-weight: 800;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin: 0;
}

@keyframes ultraTicker {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

/* Ultra-Modern Counter Animation */
.stats-section {
	padding: 6rem 0;
	background: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(20px);
	position: relative;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.counter-container {
	text-align: center;
	padding: 3rem 2rem;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(30px) saturate(1.5);
	border-radius: 25px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow:
		0 15px 50px rgba(59, 130, 246, 0.08),
		0 0 0 1px rgba(255, 255, 255, 0.1) inset,
		0 1px 0 rgba(255, 255, 255, 0.2) inset;
	position: relative;
	overflow: hidden;
}

.counter-container::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--gradient-blue);
	transform: scaleX(0);
	transition: transform 0.6s ease;
	border-radius: 25px 25px 0 0;
}

.counter-container:hover::before {
	transform: scaleX(1);
}

.counter-container:hover {
	transform: translateY(-15px) scale(1.02);
	background: rgba(255, 255, 255, 0.9);
	box-shadow:
		0 25px 80px rgba(59, 130, 246, 0.15),
		0 0 0 1px rgba(255, 255, 255, 0.2) inset,
		0 1px 0 rgba(255, 255, 255, 0.3) inset;
}

.animated-counter {
	font-size: 3.5rem;
	font-weight: 900;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 1rem;
	display: block;
	letter-spacing: -0.02em;
	line-height: 1;
	text-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
}

.counter-suffix {
	font-size: 2rem;
	font-weight: 800;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline;
}

.stat-label {
	font-size: 1.1rem;
	color: var(--gray-700);
	font-weight: 600;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	opacity: 0.9;
}

.counter-container.counting .animated-counter {
	animation: ultraPulse 0.15s ease-in-out;
}

.counter-container.counting::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0);
	animation: ripple 0.8s ease-out;
}

@keyframes ultraPulse {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
	}
}

@keyframes ripple {
	0% {
		transform: translate(-50%, -50%) scale(0);
		opacity: 1;
	}

	100% {
		transform: translate(-50%, -50%) scale(3);
		opacity: 0;
	}
}

/* Compact Ticker Variant */
.ticker-compact {
	padding: 1.5rem 0;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 20px;
	margin: 2rem 0;
}

.ticker-compact .ticker-track {
	animation-duration: 30s;
}

.ticker-compact .ticker-item {
	padding: 1rem 2rem;
	margin: 0 0.5rem;
	border-radius: 15px;
}

.ticker-compact .ticker-item .icon {
	width: 40px;
	height: 40px;
	font-size: 1.4rem;
	border-radius: 12px;
}

.ticker-compact .ticker-item .title {
	font-size: 1rem;
}

.ticker-compact .ticker-item .subtitle {
	font-size: 0.8rem;
}

/* Premium Testimonials Ticker */
.testimonial-ticker .ticker-item {
	min-width: 350px;
	background: linear-gradient(135deg,
			rgba(255, 255, 255, 0.8) 0%,
			rgba(255, 255, 255, 0.6) 100%);
}

.testimonial-ticker .ticker-item .icon {
	background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
}

.testimonial-ticker .ticker-item .content {
	text-align: left;
	max-width: 250px;
}

.testimonial-ticker .ticker-item .title {
	font-style: italic;
	color: var(--gray-800);
}

.testimonial-ticker .ticker-item .subtitle {
	font-weight: 600;
	color: var(--primary);
}

/* Responsive Design */
@media (max-width: 768px) {
	.ticker-item {
		padding: 1rem 1.5rem;
		margin: 0 0.5rem;
		min-width: 280px;
	}

	.ticker-item .icon {
		width: 40px;
		height: 40px;
		font-size: 1.4rem;
	}

	.ticker-item .title {
		font-size: 1rem;
	}

	.ticker-item .subtitle {
		font-size: 0.8rem;
	}

	.animated-counter {
		font-size: 2.5rem;
	}

	.counter-container {
		padding: 2rem 1.5rem;
	}

	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
}

@media (max-width: 480px) {
	.ticker-item {
		min-width: 250px;
		padding: 1rem;
	}

	.animated-counter {
		font-size: 2rem;
	}

	.stats-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.ticker-track {
		animation-duration: 50s;
	}
}

/* Page Headers */
.page-header {
	text-align: center;
	padding: 4rem 2rem;
	background:
		radial-gradient(circle at 30% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 70% 30%, rgba(30, 64, 175, 0.1) 0%, transparent 50%);
}

.page-header h1 {
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	font-weight: 800;
	margin-bottom: 1rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.page-header p {
	font-size: 1.25rem;
	color: var(--gray-600);
	max-width: 600px;
	margin: 0 auto;
}

/* Modern Footer */
.footer {
	background: var(--gray-900);
	color: var(--gray-300);
	text-align: center;
	padding: 2rem;
	margin-top: 0;
	position: relative;
	z-index: 90;
}

/* Beautiful Testimonials Section */
.testimonials {
	padding: 8rem 0;
	/* Plus d'espace pour l'agrandissement */
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(10px);
	position: relative;
	z-index: 90;
	overflow: visible;
	/* Permettre le débordement */
}

.testimonials h2 {
	text-align: center;
	font-size: 3rem;
	font-weight: 800;
	margin-bottom: 1rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.testimonial-card {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 24px;
	padding: 2.5rem;
	text-align: center;
	transition: all 0.4s ease;
	border: 1px solid rgba(59, 130, 246, 0.1);
	box-shadow: var(--shadow);
	position: relative;
	overflow: hidden;
}

.testimonial-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--gradient-blue);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.testimonial-card:hover::before {
	transform: scaleX(1);
}

.testimonial-card:hover {
	transform: translateY(-10px);
	box-shadow: var(--shadow-2xl);
	background: rgba(255, 255, 255, 1);
}

.testimonial-card .stars {
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
	color: var(--warning);
}

.testimonial-card p {
	font-size: 1.1rem;
	line-height: 1.7;
	color: var(--gray-700);
	margin-bottom: 2rem;
	font-style: italic;
}

.testimonial-card .author {
	text-align: center;
}

.testimonial-card .author strong {
	display: block;
	font-size: 1.1rem;
	color: var(--primary);
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.testimonial-card .author span {
	color: var(--gray-600);
	font-size: 0.9rem;
}

/* Carousel automatique pour testimonials */
.testimonials-carousel {
	margin-top: 3rem;
	overflow-x: hidden;
	/* Seulement caché horizontalement pour le mask */
	overflow-y: visible;
	/* Visible verticalement pour l'agrandissement */
	position: relative;
	padding: 3rem 0;
	/* Plus d'espace pour l'agrandissement */
	mask: linear-gradient(90deg,
			transparent 0%,
			black 5%,
			black 95%,
			transparent 100%);
	-webkit-mask: linear-gradient(90deg,
			transparent 0%,
			black 5%,
			black 95%,
			transparent 100%);
}

.testimonials-track {
	display: flex;
	gap: 2rem;
	animation: scroll-testimonials 45s linear infinite;
	width: max-content;
}

.testimonials-track:hover {
	animation-play-state: paused;
}

.testimonials-carousel .testimonial-card {
	min-width: 400px;
	max-width: 400px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20px;
	padding: 2rem;
	text-align: center;
	transition: all 0.3s ease;
	border: 1px solid rgba(59, 130, 246, 0.1);
	box-shadow: 0 10px 30px rgba(59, 130, 246, 0.1);
	position: relative;
	overflow: hidden;
}

.testimonials-carousel .testimonial-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gradient-blue);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.testimonials-carousel .testimonial-card:hover::before {
	transform: scaleX(1);
}

/* Effet d'agrandissement spectaculaire au hover */
.testimonials-carousel .testimonial-card {
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	z-index: 1;
	position: relative;
	/* Important pour le z-index */
}

.testimonials-carousel .testimonial-card:hover {
	transform: translateY(-25px) scale(1.12);
	/* Plus d'agrandissement */
	box-shadow: 0 12px 24px rgba(59, 130, 246, 0.09);
	background: rgba(255, 255, 255, 1);
	z-index: 100;
	/* Au-dessus de tout */
	margin-left: 1.5rem;
	margin-right: 1.5rem;
}

/* Décalage des cartes adjacentes */
.testimonials-track:hover .testimonial-card:not(:hover) {
	transform: scale(0.95) translateY(5px);
	opacity: 0.7;
	filter: blur(1px);
}

/* Animation de pause plus fluide */
.testimonials-track:hover {
	animation-play-state: paused;
}

.testimonials-carousel .testimonial-card .stars {
	font-size: 1.3rem;
	margin-bottom: 1rem;
	color: var(--warning);
}

.testimonials-carousel .testimonial-card p {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--gray-700);
	margin-bottom: 1.5rem;
	font-style: italic;
	min-height: 4rem;
	display: flex;
	align-items: center;
}

.testimonials-carousel .testimonial-card .author strong {
	display: block;
	font-size: 1rem;
	color: var(--primary);
	font-weight: 700;
	margin-bottom: 0.3rem;
}

.testimonials-carousel .testimonial-card .author span {
	color: var(--gray-600);
	font-size: 0.85rem;
}

/* Animation keyframes */
@keyframes scroll-testimonials {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

/* Liens cliquables pour les témoignages */
.testimonial-link {
	text-decoration: none;
	color: inherit;
	display: block;
	transition: all 0.3s ease;
}

.testimonial-link:hover {
	text-decoration: none;
	color: inherit;
}

.testimonial-link:visited {
	color: inherit;
}

.testimonial-link:active {
	color: inherit;
}

/* Responsive pour le carousel */
@media (max-width: 768px) {
	.testimonials-carousel .testimonial-card {
		min-width: 300px;
		max-width: 300px;
		padding: 1.5rem;
	}

	.testimonials-track {
		animation-duration: 35s;
	}
}

@media (max-width: 480px) {
	.testimonials-carousel .testimonial-card {
		min-width: 280px;
		max-width: 280px;
		padding: 1.2rem;
	}

	.testimonials-carousel .testimonial-card p {
		font-size: 0.95rem;
		min-height: 3.5rem;
	}
}

/* Beautiful Why Choose Us Section */
.why-choose-us {
	padding: 6rem 0;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(10px);
}

.why-choose-us h2 {
	text-align: center;
	font-size: 3rem;
	font-weight: 800;
	margin-bottom: 1rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2.5rem;
	margin-top: 3rem;
}

.advantages-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2.5rem;
	margin-top: 3rem;
}

.feature-card,
.advantage-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20px;
	padding: 2.5rem;
	text-align: center;
	transition: all 0.4s ease;
	border: 1px solid rgba(59, 130, 246, 0.1);
	box-shadow: var(--shadow);
	position: relative;
	overflow: hidden;
}

.feature-card::before,
.advantage-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gradient-blue);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.feature-card:hover::before,
.advantage-card:hover::before {
	transform: scaleX(1);
}

.feature-card:hover,
.advantage-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-xl);
	background: rgba(255, 255, 255, 1);
}

.feature-card .icon,
.advantage-icon {
	font-size: 3rem;
	margin-bottom: 1.5rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60px;
}

.advantage-icon svg {
	color: var(--accent-color);
	filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.3));
	transition: all 0.3s ease;
}

.advantage-card:hover .advantage-icon svg {
	transform: scale(1.1);
	filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.5));
}

.feature-card h3,
.advantage-card h3 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 1rem;
}

.feature-card p,
.advantage-card p {
	color: var(--gray-700);
	line-height: 1.6;
	font-size: 1rem;
}

/* Final CTA Section */
.final-cta {
	padding: 4rem 0;
	background: var(--gradient-blue);
	color: white;
	text-align: center;
}

.final-cta h2 {
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 1rem;
}

.final-cta p {
	font-size: 1.25rem;
	margin-bottom: 2rem;
	opacity: 0.9;
}

.cta-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.final-cta .cta-hero {
	background: white;
	color: var(--primary);
}

.final-cta .cta-secondary {
	border-color: white;
	color: white;
}

.final-cta .cta-secondary:hover {
	background: white;
	color: var(--primary);
}

/* Beautiful Contact Form */
.contact-content {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 4rem;
	margin-top: 3rem;
	margin-bottom: 6rem;
	position: relative;
	z-index: 90;
}

@media (max-width: 768px) {
	.contact-content {
		grid-template-columns: 1fr;
		gap: 3rem;
		margin-bottom: 4rem;
	}

	/* Réorganiser l'ordre sur mobile - coordonnées d'abord, puis formulaire */
	.contact-info {
		order: 1;
	}

	.contact-form {
		order: 2;
	}
}

@media (max-width: 480px) {
	.contact-content {
		gap: 2rem;
		margin-top: 2rem;
		margin-bottom: 3rem;
	}
}

.contact-form {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24px;
	padding: 3rem;
	box-shadow: var(--shadow-xl);
	border: 1px solid rgba(59, 130, 246, 0.1);
	transition: all 0.3s ease;
	position: relative;
	z-index: 95;
}

@media (max-width: 768px) {
	.contact-form {
		padding: 2rem;
		border-radius: 20px;
	}
}

@media (max-width: 480px) {
	.contact-form {
		padding: 1.5rem;
		border-radius: 16px;
	}
}

.contact-form:hover {
	box-shadow: var(--shadow-2xl);
}

.contact-form h2 {
	font-size: 2rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 1.5rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
	.contact-form h2 {
		font-size: 1.75rem;
		margin-bottom: 1.25rem;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.contact-form h2 {
		font-size: 1.5rem;
		margin-bottom: 1rem;
	}
}

.form-group {
	margin-bottom: 2rem;
}

.form-group label {
	display: block;
	font-weight: 600;
	color: var(--gray-800);
	margin-bottom: 0.75rem;
	font-size: 1rem;
}

.form-group input,
.form-group select,
.form-group textarea {
	width: 100%;
	padding: 1rem 1.25rem;
	border: 2px solid rgba(59, 130, 246, 0.1);
	border-radius: 12px;
	font-size: 1rem;
	font-family: inherit;
	background: rgba(255, 255, 255, 0.8);
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--primary);
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	transform: translateY(-2px);
}

.form-group textarea {
	resize: vertical;
	min-height: 120px;
}

/* Styles pour la validation du téléphone */
.phone-validation-message {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: #ef4444;
	display: none;
	padding: 0.25rem 0;
}

.phone-validation-message.show {
	display: block;
}

.phone-validation-message.success {
	color: #10b981;
}

.submit-btn {
	width: 100%;
	background: var(--gradient-blue);
	color: white;
	border: none;
	padding: 1.25rem 2rem;
	border-radius: 35px;
	font-weight: 600;
	font-size: 1.1rem;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: var(--shadow-lg);
	position: relative;
	overflow: hidden;
}

.submit-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.5s ease;
}

.submit-btn:hover::before {
	left: 100%;
}

.submit-btn:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-2xl);
}

/* Contact Info Card */
.contact-info {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20px;
	padding: 2.5rem;
	box-shadow: var(--shadow);
	border: 1px solid rgba(59, 130, 246, 0.1);
	height: fit-content;
	transition: all 0.3s ease;
	position: relative;
	z-index: 95;
}

@media (max-width: 768px) {
	.contact-info {
		padding: 2rem;
		border-radius: 16px;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.contact-info {
		padding: 1.5rem;
	}
}

.contact-info:hover {
	box-shadow: var(--shadow-xl);
	transform: translateY(-5px);
}

.contact-info h2 {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 2rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
	.contact-info h2 {
		font-size: 1.5rem;
		margin-bottom: 1.5rem;
	}
}

@media (max-width: 480px) {
	.contact-info h2 {
		font-size: 1.25rem;
		margin-bottom: 1rem;
	}
}

.info-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 2rem;
	padding: 1rem;
	border-radius: 12px;
	transition: all 0.3s ease;
}

@media (max-width: 768px) {
	.info-item {
		justify-content: center;
		text-align: center;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		margin-bottom: 1.5rem;
		padding: 1.5rem 1rem;
	}

	.info-item:hover {
		transform: translateY(-5px);
		background: rgba(59, 130, 246, 0.08);
	}
}

@media (max-width: 480px) {
	.info-item {
		padding: 1rem;
		margin-bottom: 1rem;
	}
}

.info-item:hover {
	background: rgba(59, 130, 246, 0.05);
	transform: translateX(5px);
}

.info-item .icon {
	font-size: 1.5rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	flex-shrink: 0;
}

.info-item strong {
	display: block;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 0.25rem;
}

.info-item p {
	color: var(--gray-700);
	margin: 0;
}

.info-item small {
	display: block;
	color: var(--gray-500);
	font-size: 0.85rem;
	margin-top: 0.25rem;
	font-style: italic;
}

/* Guarantees Section */
.guarantees {
	margin-top: 2rem;
	padding: 1.5rem;
	background: rgba(59, 130, 246, 0.05);
	border-radius: 12px;
}

.guarantees h3 {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 1rem;
	text-align: center;
}

.guarantee-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	font-size: 0.9rem;
	color: var(--gray-700);
}

.guarantee-item:last-child {
	margin-bottom: 0;
}

.guarantee-item .check {
	color: var(--primary);
	font-weight: bold;
	font-size: 1rem;
}

@media (max-width: 768px) {
	.guarantees {
		margin-top: 1.5rem;
		padding: 1rem;
	}

	.guarantee-item {
		font-size: 0.85rem;
	}
}

/* FAQ Section */
.faq-section {
	margin-top: 4rem;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 20px;
	padding: 3rem;
	backdrop-filter: blur(10px);
}

.faq-section h2 {
	text-align: center;
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 2rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.faq-item {
	background: rgba(255, 255, 255, 0.8);
	border-radius: 12px;
	margin-bottom: 1rem;
	border: 1px solid rgba(59, 130, 246, 0.1);
	overflow: hidden;
	transition: all 0.3s ease;
}

.faq-item:hover {
	box-shadow: var(--shadow);
}

.faq-question {
	padding: 1.5rem;
	background: rgba(59, 130, 246, 0.05);
	font-weight: 600;
	color: var(--primary);
	cursor: pointer;
	transition: all 0.3s ease;
}

.faq-question:hover {
	background: rgba(59, 130, 246, 0.1);
}

.faq-answer {
	padding: 1.5rem;
	color: var(--gray-700);
	line-height: 1.6;
}

/* About Page Styles */
.about-content {
	padding: 4rem 0;
}

.about-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 4rem;
	align-items: center;
}

@media (max-width: 768px) {
	.about-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align: center;
	}
}

.about-text h2 {
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 1rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
	.about-text h2 {
		font-size: 2rem;
	}
}

@media (max-width: 480px) {
	.about-text h2 {
		font-size: 1.75rem;
	}
}

.mission-text {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--primary);
	margin-bottom: 2rem;
	font-style: italic;
}

@media (max-width: 768px) {
	.mission-text {
		font-size: 1.25rem;
		margin-bottom: 1.5rem;
	}
}

@media (max-width: 480px) {
	.mission-text {
		font-size: 1.1rem;
		margin-bottom: 1rem;
	}
}

.about-text p {
	font-size: 1.1rem;
	line-height: 1.7;
	color: var(--gray-700);
	margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
	.about-text p {
		font-size: 1rem;
		line-height: 1.6;
		margin-bottom: 1rem;
	}
}

.about-image {
	display: flex;
	justify-content: center;
}

.mission-image {
	width: 300px;
	height: 300px;
	object-fit: cover;
	object-position: center;
	border-radius: 20px;
	border: none;
	box-shadow: var(--shadow-xl);
	transition: all 0.3s ease;
	display: block;
}

.mission-image:hover {
	transform: translateY(-10px);
	box-shadow: var(--shadow-2xl);
}

@media (max-width: 768px) {
	.mission-image {
		width: 250px;
		height: 250px;
		margin: 0 auto;
		border: none;
	}
}

@media (max-width: 480px) {
	.mission-image {
		width: 200px;
		height: 200px;
		border: none;
	}
}

/* Values Section */
.values-section {
	padding: 6rem 0;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(10px);
}

.values-section h2 {
	text-align: center;
	font-size: 3rem;
	font-weight: 800;
	margin-bottom: 1rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.values-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.value-card {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20px;
	padding: 2.5rem;
	text-align: center;
	transition: all 0.4s ease;
	border: 1px solid rgba(59, 130, 246, 0.1);
	box-shadow: var(--shadow);
	position: relative;
	overflow: hidden;
}

.value-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gradient-blue);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.value-card:hover::before {
	transform: scaleX(1);
}

.value-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-xl);
	background: rgba(255, 255, 255, 1);
}

.value-icon {
	font-size: 3rem;
	margin-bottom: 1.5rem;
}

.value-card h3 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 1rem;
}

.value-card p {
	color: var(--gray-700);
	line-height: 1.6;
}

/* Layout spécial pour desktop : centrer la 4ème carte (Innovation) */
@media (min-width: 769px) {
	.values-grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, auto);
		justify-items: center;
	}

	.value-card:nth-child(1) {
		grid-column: 1;
		grid-row: 1;
	}

	/* Passion */
	.value-card:nth-child(2) {
		grid-column: 2;
		grid-row: 1;
	}

	/* Accessibilité */
	.value-card:nth-child(3) {
		grid-column: 3;
		grid-row: 1;
	}

	/* Proximité */
	.value-card:nth-child(4) {
		grid-column: 2;
		grid-row: 2;
	}

	/* Innovation - centrée */
}

/* Achievements Section */
.achievements-section {
	padding: 4rem 0;
	background:
		radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, rgba(30, 64, 175, 0.08) 0%, transparent 50%);
}

.achievements-section h2 {
	text-align: center;
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 3rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.achievements-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2rem;
}

.achievement-item {
	text-align: center;
	padding: 2rem;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 20px;
	border: 1px solid rgba(59, 130, 246, 0.1);
	transition: all 0.3s ease;
	box-shadow: var(--shadow-sm);
}

.achievement-item:hover {
	transform: translateY(-10px);
	box-shadow: var(--shadow-xl);
	background: rgba(255, 255, 255, 0.95);
}

.achievement-number {
	font-size: 2.5rem;
	font-weight: 800;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 0.5rem;
}

.achievement-label {
	font-size: 1rem;
	color: var(--gray-600);
	font-weight: 500;
}

/* Team Section */
.team-section {
	padding: 6rem 0;
}

.team-section h2 {
	text-align: center;
	font-size: 3rem;
	font-weight: 800;
	margin-bottom: 1rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.team-content {
	margin-top: 3rem;
}

.team-text {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.team-text p {
	font-size: 1.1rem;
	line-height: 1.7;
	color: var(--gray-700);
	margin-bottom: 2rem;
}

.team-cta {
	margin-top: 3rem;
}

/* Services Page Styles */
.packages-section {
	padding: 6rem 0;
	background:
		radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, rgba(30, 64, 175, 0.08) 0%, transparent 50%);
}

.packages-section h2 {
	text-align: center;
	font-size: 3rem;
	font-weight: 800;
	margin-bottom: 1rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.packages-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.package-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24px;
	padding: 2.5rem;
	text-align: center;
	transition: all 0.4s ease;
	border: 1px solid rgba(59, 130, 246, 0.1);
	box-shadow: var(--shadow);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.package-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--gradient-blue);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.package-card:hover::before {
	transform: scaleX(1);
}

.package-card:hover {
	transform: translateY(-15px);
	box-shadow: var(--shadow-2xl);
	background: rgba(255, 255, 255, 1);
}

.package-header h3 {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 1rem;
}

.package-card .price {
	font-size: 2.5rem;
	font-weight: 800;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 2rem;
}

.package-features {
	text-align: left;
	margin: 2rem 0;
	flex-grow: 1;
}

.package-features .feature {
	padding: 0.75rem 0;
	color: var(--gray-700);
	font-weight: 500;
	border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.package-features .feature:last-child {
	border-bottom: none;
}

.package-btn {
	background: var(--gradient-blue);
	color: white;
	border: none;
	padding: 1rem 2rem;
	border-radius: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	width: 100%;
	margin-top: auto;
	font-size: 1rem;
}

.package-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

/* Options Section */
.options-section {
	padding: 6rem 0;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(10px);
}

.options-section h2 {
	text-align: center;
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 1rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.options-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.option-card {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20px;
	padding: 2rem;
	text-align: center;
	transition: all 0.3s ease;
	border: 1px solid rgba(59, 130, 246, 0.1);
	box-shadow: var(--shadow-sm);
}

.option-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-xl);
	background: rgba(255, 255, 255, 1);
}

.option-card h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 1rem;
}

.option-price {
	font-size: 1.75rem;
	font-weight: 800;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 0.5rem;
}

.option-note {
	color: var(--gray-600);
	font-size: 0.9rem;
	font-style: italic;
}

/* Support Section */
.support-section {
	padding: 6rem 0;
}

.support-section h2 {
	text-align: center;
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 1rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.support-card {
	max-width: 600px;
	margin: 3rem auto 0;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24px;
	padding: 3rem;
	text-align: center;
	transition: all 0.4s ease;
	border: 1px solid rgba(59, 130, 246, 0.1);
	box-shadow: var(--shadow-lg);
}

.support-card:hover {
	transform: translateY(-10px);
	box-shadow: var(--shadow-2xl);
}

.support-header h3 {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 1rem;
}

.support-price {
	font-size: 2.25rem;
	font-weight: 800;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 0.5rem;
}

.support-note {
	color: var(--gray-600);
	font-size: 0.9rem;
	margin-bottom: 2rem;
	font-style: italic;
}

.support-features {
	text-align: left;
	margin: 2rem 0;
}

.support-features .feature {
	padding: 0.75rem 0;
	color: var(--gray-700);
	font-weight: 500;
	border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.support-features .feature:last-child {
	border-bottom: none;
}

/* Commitments Section */
.commitments-section {
	padding: 6rem 0;
	background: transparent;
}

.commitments-section h2 {
	text-align: center;
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 1rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.commitments-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.commitment-card {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20px;
	padding: 2.5rem;
	text-align: center;
	transition: all 0.3s ease;
	border: 1px solid rgba(59, 130, 246, 0.1);
	box-shadow: var(--shadow-sm);
}

.commitment-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-xl);
	background: rgba(255, 255, 255, 1);
}

.commitment-icon {
	font-size: 3rem;
	margin-bottom: 1.5rem;
	color: var(--accent-color);
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60px;
}

.commitment-icon svg {
	color: var(--accent-color);
	filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.3));
	transition: all 0.3s ease;
}

.commitment-card:hover .commitment-icon svg {
	transform: scale(1.1);
	filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.5));
}

.commitment-card h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--primary);
	line-height: 1.4;
}

/* Responsive Design */
/* ==========================================
   RESPONSIVE NAVBAR - MENU BURGER MODERNE
   ========================================== */

/* Scroll offset pour les ancres avec navbar fixe */
#pricing {
	scroll-margin-top: 120px;
}

/* Menu Burger Button */
.burger-menu {
	display: none;
	flex-direction: column;
	justify-content: space-around;
	width: 40px;
	height: 40px;
	background: rgba(59, 130, 246, 0.3);
	border: 2px solid #3b82f6;
	border-radius: 8px;
	cursor: pointer;
	padding: 8px;
	z-index: 600;
	position: relative;
	transition: all 0.3s ease;
	pointer-events: auto;
}

.burger-line {
	width: 100%;
	height: 4px;
	background: #3b82f6;
	border-radius: 3px;
	transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	transform-origin: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Animation du burger quand actif */
.burger-menu.active .burger-line:nth-child(1) {
	transform: rotate(45deg) translate(8px, 8px);
}

.burger-menu.active .burger-line:nth-child(2) {
	opacity: 0;
	transform: translateX(-20px);
}

.burger-menu.active .burger-line:nth-child(3) {
	transform: rotate(-45deg) translate(8px, -8px);
}

/* Styles pour le menu burger actif - éléments en blanc */
.burger-menu.active {
	background: rgba(255, 255, 255, 0.2);
	border-color: white;
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	box-shadow: 0 8px 32px rgba(255, 255, 255, 0.3);
	transform: scale(1.1);
}

.burger-menu.active .burger-line {
	background: white;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* S'assurer que les nav-links sont visibles et bien positionnés en mode desktop */
@media (min-width: 769px) {

	/* Navbar desktop - layout optimisé */
	.navbar {
		justify-content: space-between;
		display: grid;
		grid-template-columns: 1fr 2fr 1fr;
		align-items: center;
		gap: 1rem;
	}

	/* Logo à gauche */
	.logo {
		order: 1;
		justify-self: start;
	}

	/* Navigation Desktop - centrée au milieu */
	.nav-links.desktop-nav {
		order: 2;
		justify-self: center;
		display: flex;
		position: static;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		background: transparent;
		transform: none;
		width: auto;
		height: auto;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0;
		gap: 2rem;
	}

	/* CTA à droite */
	.cta {
		order: 3;
		justify-self: end;
	}

	.nav-links.desktop-nav a {
		opacity: 1;
		transform: none;
		pointer-events: auto;
		position: static;
		animation: none !important;
		color: var(--gray-800);
		font-size: 0.9rem;
		font-weight: 500;
	}

	/* Navigation Mobile - complètement cachée en desktop */
	.nav-links.mobile-nav {
		display: none !important;
	}

	/* Burger menu caché en desktop */
	.burger-menu {
		display: none !important;
	}
}

@media (max-width: 768px) {
	.navbar {
		padding: 0.75rem;
		width: 90%;
		top: 15px;
		justify-content: space-between;
		background: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(20px);
		transform: translateX(-50%);
		z-index: 500;
	}

	/* Cacher la navigation desktop en mobile */
	.nav-links.desktop-nav {
		display: none !important;
	}

	/* Navigation mobile - affichage et animations */
	.nav-links.mobile-nav {
		position: fixed;
		top: 0;
		right: 0;
		width: 250px;
		height: 100vh;
		transform: translateX(100%);
		transition: transform 0.3s ease-in-out;
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 2rem;
		z-index: 100;
	}

	/* Afficher le burger menu */
	.burger-menu {
		display: flex !important;
		order: 3;
		background: rgba(59, 130, 246, 0.3);
		border-radius: 8px;
		padding: 8px;
		border: 2px solid #3b82f6;
		z-index: 600;
		position: relative;
		cursor: pointer;
		pointer-events: auto;
	}

	/* S'assurer que le burger menu reste cliquable même quand actif */
	.burger-menu.active {
		z-index: 600;
		pointer-events: auto;
		cursor: pointer;
	}

	/* Cacher le bouton contact en mobile */
	.cta {
		display: none;
	}

	/* Styles pour les liens de la navigation mobile */
	.nav-links.mobile-nav a {
		font-size: 1.2rem;
		font-weight: 600;
		color: white;
		text-decoration: none;
		padding: 0.8rem 1.5rem;
		border-radius: 35px;
		background: linear-gradient(135deg,
				rgba(15, 23, 42, 0.8) 0%,
				rgba(30, 64, 175, 0.7) 100%);
		backdrop-filter: blur(35px) saturate(1.8);
		-webkit-backdrop-filter: blur(35px) saturate(1.8);
		border: 1px solid rgba(255, 255, 255, 0.4);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		min-width: 150px;
		text-align: center;
		position: relative;
		overflow: hidden;
		box-shadow:
			0 8px 32px rgba(31, 81, 255, 0.08),
			0 1px 1px rgba(255, 255, 255, 0.4) inset,
			0 -1px 1px rgba(0, 0, 0, 0.05) inset;
		opacity: 0;
		transform: translateX(100px) scale(0.8);
		pointer-events: none;
	}

	.nav-links.mobile-nav.active {
		transform: translateX(0);
	}

	.nav-links.mobile-nav.active a {
		animation: slideInFromRight 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
		pointer-events: auto;
	}

	.nav-links.mobile-nav.closing a {
		animation: slideOutToRight 0.6s cubic-bezier(0.4, 0, 0.8, 0.2) forwards;
	}

	.nav-links.mobile-nav a:hover {
		border-color: rgba(255, 255, 255, 0.4);
		transform: translateY(-2px);
		background: var(--gradient-blue);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		border-color: #3b82f6;
	}

	/* La classe closing a la priorité sur active quand les deux sont présentes */
	.nav-links.mobile-nav.closing a {
		animation: slideOutToRight 0.6s cubic-bezier(0.4, 0, 0.6, 1) forwards !important;
	}

	/* Rendre les liens cliquables quand ils sont visibles */
	.nav-links.mobile-nav.active a,
	.nav-links.mobile-nav.closing a {
		pointer-events: auto;
	}

	.nav-links.mobile-nav a:nth-child(1) {
		animation-delay: 0.2s;
	}

	.nav-links.mobile-nav a:nth-child(2) {
		animation-delay: 0.4s;
	}

	.nav-links.mobile-nav a:nth-child(3) {
		animation-delay: 0.6s;
	}

	.nav-links.mobile-nav a:nth-child(4) {
		animation-delay: 0.8s;
	}

	.nav-links.mobile-nav a:nth-child(5) {
		animation-delay: 1.0s;
	}

	/* Délais pour l'animation de sortie (ordre inversé) */
	.nav-links.mobile-nav.closing a:nth-child(1) {
		animation-delay: 0.4s;
	}

	.nav-links.mobile-nav.closing a:nth-child(2) {
		animation-delay: 0.3s;
	}

	.nav-links.mobile-nav.closing a:nth-child(3) {
		animation-delay: 0.2s;
	}

	.nav-links.mobile-nav.closing a:nth-child(4) {
		animation-delay: 0.1s;
	}

	.nav-links.mobile-nav.closing a:nth-child(5) {
		animation-delay: 0s;
	}

	.nav-links.mobile-nav a::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
		transition: left 0.6s ease;
	}

	.nav-links.mobile-nav a:hover::before {
		left: 100%;
	}

	/* Navigation mobile - positionnement ajusté */
	.nav-links.mobile-nav {
		justify-content: flex-start;
		align-items: flex-end;
		gap: 1.5rem;
		padding-right: 2rem;
		padding-top: 8rem;
	}

	.nav-links a:hover {
		transform: scale(1.1) translateY(-5px);
		background: rgba(255, 255, 255, 0.18);
		backdrop-filter: blur(35px) saturate(2.2);
		-webkit-backdrop-filter: blur(35px) saturate(2.2);
		border-color: rgba(255, 255, 255, 0.6);
		color: #3b82f6;
		box-shadow:
			0 15px 40px rgba(31, 81, 255, 0.15),
			0 2px 2px rgba(255, 255, 255, 0.6) inset,
			0 -2px 2px rgba(0, 0, 0, 0.1) inset;
		color: #ffffff;
	}

	/* Logo en premier */
	.logo {
		order: 1;
		z-index: 150;
	}

	.logo-img,
	.logo-placeholder {
		border-radius: 50%;
	}

	/* Effet de remplissage de la navbar quand le menu est actif */
	.navbar.menu-active::after {
		width: 100%;
	}

	/* Styles pour le logo et brand-name quand le menu est actif */
	.navbar.menu-active .brand-name {
		background: white;
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: white;
		color: white;
	}

	.navbar.menu-active .logo-placeholder {
		background: rgba(255, 255, 255, 0.9);
		color: var(--primary);
		border: 2px solid white;
	}

	.navbar.menu-active .logo-img {
		filter: brightness(0) invert(1);
		box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
	}
}

/* Animation pour les éléments du menu mobile */
@keyframes slideInMenu {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInFromRight {
	0% {
		opacity: 0;
		transform: translateX(100px) scale(0.8);
		pointer-events: none;
	}

	60% {
		transform: translateX(-10px) scale(1.05);
	}

	100% {
		opacity: 1;
		transform: translateX(0) scale(1);
		pointer-events: auto;
	}
}

@keyframes slideOutToRight {
	0% {
		opacity: 1;
		transform: translateX(0) scale(1);
		pointer-events: auto;
	}

	40% {
		transform: translateX(-10px) scale(1.05);
	}

	100% {
		opacity: 0;
		transform: translateX(100px) scale(0.8);
		pointer-events: none;
	}
}

@keyframes fillBackground {
	0% {
		width: 0%;
	}

	100% {
		width: 100%;
	}
}

@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes gradientShift {

	0%,
	100% {
		transform: translateX(0) translateY(0);
	}

	25% {
		transform: translateX(20px) translateY(-20px);
	}

	50% {
		transform: translateX(-10px) translateY(15px);
	}

	75% {
		transform: translateX(15px) translateY(-10px);
	}
}

@keyframes twinkle {
	0% {
		opacity: 0.3;
		transform: scale(1);
	}

	100% {
		opacity: 1;
		transform: scale(1.2);
	}
}

@media (max-width: 480px) {
	.brand-name {
		font-size: 1.2rem;
	}

	.logo-placeholder,
	.logo-img {
		width: 44px;
		height: 44px;
		font-size: 1.2rem;
		border-radius: 50%;
	}

	.stat-item {
		padding: 1.5rem;
	}

	.stat-number {
		font-size: 2rem;
	}

	.service-card {
		padding: 2rem;
	}

	.stats-grid {
		grid-template-columns: 1fr;
	}

	.achievements-grid {
		grid-template-columns: 1fr;
	}

	.contact-form,
	.contact-info {
		padding: 1.5rem;
	}

	.navbar {
		width: 85%;
		padding: 0.5rem 1rem;
	}

	.package-card,
	.option-card,
	.commitment-card {
		padding: 1.5rem;
	}

	.support-card {
		padding: 1.5rem;
	}
}

/* ==========================================
   STATS TICKER STYLES - Garde le style bleu original
   ========================================== */

.stats-ticker-container {
	overflow: hidden;
	padding: 2rem 0;
	position: relative;
}

.stats-ticker-track {
	display: flex;
	gap: 2rem;
	animation: statsTickerScroll 40s linear infinite;
	will-change: transform;
}

.stats-ticker-track .stat-item {
	flex: none;
	min-width: 200px;
	text-align: center;
	padding: 2rem;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 20px;
	border: 1px solid rgba(59, 130, 246, 0.1);
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.stats-ticker-track .stat-number {
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--primary);
	margin-bottom: 0.5rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1.2;
}

.stats-ticker-track .stat-item:hover {
	transform: translateY(-10px);
	box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
	background: rgba(255, 255, 255, 0.95);
}

@keyframes statsTickerScroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

/* ==========================================
   SECTION PROMOTION TEMPORAIRE -20%
   ========================================== */

.limited-offer {
	padding: 4rem 0;
	background: linear-gradient(135deg,
			rgba(255, 59, 59, 0.1) 0%,
			rgba(255, 107, 107, 0.05) 50%,
			rgba(59, 130, 246, 0.1) 100%);
	border-top: 3px solid #ff3b3b;
	border-bottom: 3px solid #ff3b3b;
	position: relative;
	overflow: hidden;
	z-index: 90;
}

.limited-offer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		linear-gradient(45deg, transparent 48%, rgba(255, 59, 59, 0.03) 49%, rgba(255, 59, 59, 0.03) 51%, transparent 52%),
		linear-gradient(-45deg, transparent 48%, rgba(255, 107, 107, 0.03) 49%, rgba(255, 107, 107, 0.03) 51%, transparent 52%);
	background-size: 60px 60px;
	animation: patternMove 15s linear infinite;
}

.offer-content {
	text-align: center;
	position: relative;
	z-index: 2;
}

.offer-badge {
	display: inline-block;
	background: linear-gradient(135deg, #ff3b3b 0%, #ff6b6b 100%);
	color: white;
	padding: 0.75rem 2rem;
	border-radius: 50px;
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: 0.5px;
	margin-bottom: 1.5rem;
	box-shadow:
		0 8px 25px rgba(255, 59, 59, 0.3),
		0 0 0 3px rgba(255, 59, 59, 0.1);
	animation: pulse-glow 2s ease-in-out infinite;
	position: relative;
}

.offer-badge::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(135deg, #ff3b3b, #ff6b6b, #ff3b3b);
	border-radius: 50px;
	z-index: -1;
	animation: rainbow-border 3s linear infinite;
}

.limited-offer h2 {
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 900;
	margin-bottom: 1rem;
	background: linear-gradient(135deg, #ff3b3b 0%, #ff6b6b 50%, #3b82f6 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 0 30px rgba(255, 59, 59, 0.3);
}

.limited-offer p {
	font-size: 1.3rem;
	color: var(--gray-700);
	margin-bottom: 2.5rem;
	font-weight: 500;
}

/* Countdown Timer */
.countdown-container {
	margin: 2.5rem 0;
}

.countdown-label {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--gray-700);
	margin-bottom: 1rem;
}

.countdown {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.countdown-item {
	background: rgba(255, 255, 255, 0.95);
	border: 2px solid #ff3b3b;
	border-radius: 15px;
	padding: 1.5rem 1rem;
	min-width: 80px;
	text-align: center;
	box-shadow:
		0 8px 25px rgba(255, 59, 59, 0.15),
		0 0 0 1px rgba(255, 255, 255, 0.5) inset;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.countdown-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #ff3b3b, #ff6b6b);
	animation: progress-bar 1s ease-in-out infinite;
}

.countdown-item:hover {
	transform: translateY(-5px) scale(1.05);
	box-shadow: 0 15px 40px rgba(255, 59, 59, 0.25);
}

.countdown-number {
	display: block;
	font-size: 2rem;
	font-weight: 900;
	background: linear-gradient(135deg, #ff3b3b 0%, #ff6b6b 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1;
	margin-bottom: 0.5rem;
}

.countdown-text {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--gray-600);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Prix promotionnels */
.promo-prices {
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin: 2rem 0;
	flex-wrap: wrap;
}

.promo-price-item {
	background: rgba(255, 255, 255, 0.95);
	border: 2px solid rgba(59, 130, 246, 0.2);
	border-radius: 20px;
	padding: 2rem 1.5rem;
	text-align: center;
	min-width: 200px;
	transition: all 0.3s ease;
	box-shadow: 0 8px 25px rgba(59, 130, 246, 0.1);
	position: relative;
	overflow: hidden;
}

.promo-price-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--gradient-blue);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.promo-price-item:hover::before {
	transform: scaleX(1);
}

.promo-price-item:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
	border-color: var(--primary);
}

.service-name {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.price-comparison {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
}

.old-price {
	font-size: 1.2rem;
	color: var(--gray-500);
	text-decoration: line-through;
	font-weight: 500;
}

.new-price {
	font-size: 2rem;
	font-weight: 900;
	background: linear-gradient(135deg, #ff3b3b 0%, #ff6b6b 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Bouton CTA promotionnel */
.promo-cta {
	background: linear-gradient(135deg, #ff3b3b 0%, #ff6b6b 100%);
	color: white;
	border: none;
	padding: 1.5rem 3rem;
	border-radius: 50px;
	font-weight: 700;
	font-size: 1.2rem;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow:
		0 8px 25px rgba(255, 59, 59, 0.3),
		0 0 0 3px rgba(255, 59, 59, 0.1);
	position: relative;
	overflow: hidden;
	margin-top: 1rem;
	animation: glow-pulse 2s ease-in-out infinite;
}

.promo-cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.5s ease;
}

.promo-cta:hover::before {
	left: 100%;
}

.promo-cta:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow:
		0 15px 40px rgba(255, 59, 59, 0.4),
		0 0 0 5px rgba(255, 59, 59, 0.15);
}

/* Animations */
@keyframes pulse-glow {

	0%,
	100% {
		box-shadow:
			0 8px 25px rgba(255, 59, 59, 0.3),
			0 0 0 3px rgba(255, 59, 59, 0.1);
	}

	50% {
		box-shadow:
			0 12px 35px rgba(255, 59, 59, 0.4),
			0 0 0 5px rgba(255, 59, 59, 0.2);
	}
}

@keyframes glow-pulse {

	0%,
	100% {
		box-shadow:
			0 8px 25px rgba(255, 59, 59, 0.3),
			0 0 0 3px rgba(255, 59, 59, 0.1);
	}

	50% {
		box-shadow:
			0 15px 40px rgba(255, 59, 59, 0.5),
			0 0 0 6px rgba(255, 59, 59, 0.2);
	}
}

@keyframes rainbow-border {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@keyframes progress-bar {
	0% {
		transform: scaleX(0);
	}

	50% {
		transform: scaleX(1);
	}

	100% {
		transform: scaleX(0);
	}
}

/* Responsive pour la promotion */
@media (max-width: 768px) {
	.limited-offer {
		padding: 3rem 0;
	}

	.countdown {
		gap: 1rem;
	}

	.countdown-item {
		min-width: 70px;
		padding: 1rem 0.75rem;
	}

	.countdown-number {
		font-size: 1.5rem;
	}

	.promo-prices {
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
	}

	.promo-price-item {
		min-width: 280px;
	}

	.promo-cta {
		padding: 1.25rem 2.5rem;
		font-size: 1.1rem;
	}
}

@media (max-width: 480px) {
	.countdown {
		gap: 0.75rem;
	}

	.countdown-item {
		min-width: 60px;
		padding: 0.75rem 0.5rem;
	}

	.countdown-number {
		font-size: 1.25rem;
	}

	.countdown-text {
		font-size: 0.7rem;
	}

	.promo-price-item {
		min-width: 250px;
		padding: 1.5rem 1rem;
	}

	.promo-cta {
		padding: 1rem 2rem;
		font-size: 1rem;
	}
}

.stats-ticker-track .stat-item:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
	background: rgba(255, 255, 255, 0.95);
}

.stats-ticker-track .stat-number {
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--primary);
	margin-bottom: 0.5rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
}

.stats-ticker-track .stat-suffix {
	color: #3b82f6;
	font-weight: 800;
}

.stats-ticker-track .stat-label {
	font-size: 1rem;
	color: var(--gray-600);
	font-weight: 500;
}

@keyframes statsTickerScroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

/* ==========================================
   SERVICES TICKER STYLES
   ========================================== */

.services-ticker-section {
	padding: 4rem 0;
	background: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(15px);
}

.services-ticker-container {
	overflow: hidden;
	padding: 2rem 0;
	position: relative;
}

.services-ticker-track {
	display: flex;
	gap: 2rem;
	animation: servicesTickerScroll 35s linear infinite;
	will-change: transform;
}

.service-ticker-item {
	flex: none;
	min-width: 280px;
	padding: 2rem;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(20px);
	border-radius: 20px;
	border: 1px solid rgba(59, 130, 246, 0.2);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.service-ticker-item:hover {
	transform: translateY(-8px) scale(1.02);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
	background: rgba(255, 255, 255, 0.9);
	border-color: rgba(59, 130, 246, 0.4);
}

.service-icon {
	width: 60px;
	height: 60px;
	background: var(--gradient-blue);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
	flex-shrink: 0;
}

.service-content {
	flex: 1;
}

.service-title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--gray-800);
	margin-bottom: 0.5rem;
}

.service-subtitle {
	font-size: 0.9rem;
	color: var(--gray-600);
	font-weight: 500;
}

@keyframes servicesTickerScroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

/* Pause animations on hover */
.stats-ticker-container:hover .stats-ticker-track,
.services-ticker-container:hover .services-ticker-track {
	animation-play-state: paused;
}

/* Responsive pour les tickers */
@media (max-width: 768px) {
	.stats-ticker-track .stat-item {
		min-width: 180px;
		padding: 1.5rem;
	}

	.service-ticker-item {
		min-width: 250px;
		padding: 1.5rem;
		flex-direction: column;
		text-align: center;
		gap: 1rem;
	}

	.service-icon {
		width: 50px;
		height: 50px;
		font-size: 1.5rem;
	}
}

/* ==========================================
   SYSTÈME D'ÉTOILES AVANCÉ AVEC NOTES VARIÉES
   ========================================== */

.star-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}

.star-rating .star-item {
	position: relative;
	color: #e5e7eb;
	transition: all 0.2s ease;
}

/* Étoile complète */
.star-rating .star-item.filled {
	color: #fbbf24;
	text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

/* Étoile partiellement remplie */
.star-rating .star-item.partial {
	background: linear-gradient(90deg, #fbbf24 var(--fill-percentage), #e5e7eb var(--fill-percentage));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
}

/* Effet hover sur les étoiles */
/* Effet hover amélioré pour les étoiles dans le carousel */
.testimonials-carousel .testimonial-card:hover .star-rating .star-item {
	transform: scale(1.1);
}

.testimonials-carousel .testimonial-card:hover .star-rating .star-item.filled,
.testimonials-carousel .testimonial-card:hover .star-rating .star-item.partial {
	color: #f59e0b;
	text-shadow: 0 0 12px rgba(245, 158, 11, 0.7);
}

/* Animation du contenu au hover */
.testimonials-carousel .testimonial-card:hover p {
	color: var(--gray-800);
	transform: scale(1.02);
}

.testimonials-carousel .testimonial-card:hover .author strong {
	color: var(--primary);
	text-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

.testimonials-carousel .testimonial-card:hover .rating-score {
	color: var(--primary);
	font-weight: 700;
}

/* Note numérique à côté des étoiles */
.rating-score {
	margin-left: 0.5rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--gray-700);
	opacity: 0.8;
}

/* Animation pour les étoiles lors du hover */
@keyframes starGlow {

	0%,
	100% {
		text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
	}

	50% {
		text-shadow: 0 0 16px rgba(251, 191, 36, 0.8);
	}
}

.testimonial-card:hover .star-rating .star-item.filled {
	animation: starGlow 1.5s ease-in-out infinite;
}

/* Responsive pour les étoiles */
@media (max-width: 768px) {
	.star-rating {
		font-size: 1.3rem;
		justify-content: center;
	}

	.rating-score {
		font-size: 0.9rem;
	}
}

/* ==========================================
   FEATURED WORK SECTION - PORTFOLIO
   ========================================== */

.featured-work-section {
	padding: 2rem 0;
	margin: 0;
}

.featured-work-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3rem 2rem;
	margin: 0.5rem 0;
}

/* Wrapper pour chaque projet complet */
.featured-work-wrapper {
	display: flex;
	flex-direction: column;
	position: relative;
}

/* Alignement uniforme sans décalage */
.featured-work-wrapper:nth-child(even) {
	margin-top: 0;
}

.featured-work-wrapper:nth-child(odd) {
	margin-top: 0;
}

.featured-work-item {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	overflow: hidden;
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	position: relative;
	/* Pas de padding en bas car le texte sera en dehors */
}

.featured-work-item:hover {
	transform: translateY(-8px);
	box-shadow:
		0 25px 50px rgba(0, 0, 0, 0.15),
		0 0 0 1px rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.15);
}

.work-image-container {
	position: relative;
	height: 248px;
	/* Augmenté de 20% supplémentaires (207px -> 248px) */
	overflow: hidden;
	/* Assurer un remplissage complet sans barres noires */
	background: #000;
}

.work-image-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg,
			var(--primary) 0%,
			var(--secondary) 50%,
			var(--accent) 100%);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.work-image-placeholder::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"><rect width="100" height="60" fill="rgba(255,255,255,0.1)" rx="4"/><circle cx="20" cy="20" r="8" fill="rgba(255,255,255,0.2)"/><rect x="15" y="70" width="70" height="4" fill="rgba(255,255,255,0.2)" rx="2"/><rect x="15" y="80" width="50" height="4" fill="rgba(255,255,255,0.15)" rx="2"/></svg>') center/80px no-repeat;
	opacity: 0.3;
}

.image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
}

.featured-work-item:hover .image-overlay {
	opacity: 1;
}

.view-project {
	color: white;
	font-weight: 500;
	font-size: 0.9rem;
	padding: 8px 16px;
	border: 1.5px solid rgba(255, 255, 255, 0.8);
	border-radius: 25px;
	transition: all 0.3s ease;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(5px);
}

.view-project:hover {
	background: rgba(255, 255, 255, 0.9);
	color: var(--primary);
	border-color: rgba(255, 255, 255, 0.9);
}

/* Styles pour les images et vidéos */
.work-image {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 102%;
	height: 102%;
	object-fit: cover;
	object-position: center top;
	border-radius: 15px;
	transition: opacity 0.3s ease;
	transform: translate(-50%, -50%);
	/* Assurer que l'image remplit complètement le container */
	min-width: 100%;
	min-height: 100%;
}

.work-video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	border-radius: 15px;
	opacity: 0;
	transition: opacity 0.3s ease;
	transform: translate(-50%, -50%);
	/* Assurer que la vidéo remplit complètement le container */
	min-width: 100%;
	min-height: 100%;
	/* Élargir légèrement pour éliminer les barres noires potentielles */
	width: 102%;
	height: 102%;
}

.work-image-container:hover .work-image {
	opacity: 0;
}

.work-image-container:hover .work-video {
	opacity: 1;
}

/* Masquer l'overlay foncé quand il y a une vidéo */
.work-image-container:has(.work-video) .image-overlay {
	display: none;
}

/* Texte en dehors du cadre de l'image */
.work-info {
	padding: 1.5rem 0 0 0;
	/* Seulement padding top, pas dans le cadre */
	background: transparent;
}

.work-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--gray-900);
	margin-bottom: 0.5rem;
	line-height: 1.3;
}

.work-category {
	font-size: 0.95rem;
	color: var(--primary);
	font-weight: 600;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.work-description {
	font-size: 1rem;
	color: var(--gray-600);
	line-height: 1.5;
	margin: 0;
}

/* Animation d'apparition au scroll pour les wrappers */
.featured-work-wrapper {
	opacity: 0;
	transform: translateY(30px);
	animation: fadeInUp 0.6s ease forwards;
}

.featured-work-wrapper:nth-child(1) {
	animation-delay: 0.1s;
}

.featured-work-wrapper:nth-child(2) {
	animation-delay: 0.2s;
}

.featured-work-wrapper:nth-child(3) {
	animation-delay: 0.3s;
}

.featured-work-wrapper:nth-child(4) {
	animation-delay: 0.4s;
}

.featured-work-wrapper:nth-child(5) {
	animation-delay: 0.5s;
}

.featured-work-wrapper:nth-child(6) {
	animation-delay: 0.6s;
}

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================
   TEMPLATES SECTION - PORTFOLIO
   ========================================== */

.templates-section {
	padding: 4rem 0;
	margin: 4rem 0 2rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.templates-section h2 {
	text-align: center;
	font-size: 2.5rem;
	margin-bottom: 1rem;
	font-weight: 600;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1.2;
}

.templates-section .section-subtitle {
	text-align: center;
	color: var(--gray-600);
	font-size: 1.1rem;
	margin-bottom: 1rem;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* Styles spécifiques pour les templates */
.templates-section .work-title {
	color: var(--gray-900);
}

.templates-section .work-category {
	color: var(--primary);
}

.templates-section .work-description {
	color: var(--gray-600);
}

.cta-section {
	text-align: center;
	margin-top: 5rem;
	padding: 4rem 3rem;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 25px;
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-section h3 {
	color: var(--gray-900);
	font-size: 2.2rem;
	font-weight: 700;
	margin-bottom: 1rem;
	background: var(--gradient-blue);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.cta-section p {
	color: var(--gray-600);
	font-size: 1.1rem;
	margin-bottom: 2.5rem;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* Responsive Design */
@media (max-width: 1024px) {
	.featured-work-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2.5rem 1.5rem;
	}

	/* Alignement uniforme sur tablette */
	.featured-work-wrapper:nth-child(even) {
		margin-top: 0;
	}
}

@media (max-width: 768px) {
	.featured-work-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	/* Supprimer le décalage sur mobile */
	.featured-work-wrapper:nth-child(even) {
		margin-top: 0;
	}

	.featured-work-item {
		margin: 0 1rem;
	}

	.work-image-container {
		height: 208px;
		/* Augmenté de 20% supplémentaires pour tablette (173px -> 208px) */
	}

	.work-info {
		padding: 1.2rem 0 0 0;
	}

	.cta-section {
		padding: 3rem 2rem;
		margin-top: 3rem;
	}

	.cta-section h3 {
		font-size: 1.8rem;
	}
}

@media (max-width: 480px) {
	.featured-work-grid {
		margin: 2rem 0;
	}

	.featured-work-item {
		margin: 0 0.5rem;
	}

	.work-image-container {
		height: 186px;
		/* Augmenté de 20% supplémentaires pour mobile (155px -> 186px) */
	}

	.work-title {
		font-size: 1.3rem;
	}

	.work-category {
		font-size: 0.85rem;
	}

	.work-info {
		padding: 1rem 0 0 0;
	}

	.cta-section {
		padding: 2rem 1.5rem;
	}

	.cta-section h3 {
		font-size: 1.5rem;
	}

	.star-rating {
		font-size: 1.2rem;
	}

	.rating-score {
		font-size: 0.85rem;
	}
}

/* ==========================================
   FEATURED WORK PREVIEW - PAGE D'ACCUEIL
   ========================================== */

.featured-work-preview {
	padding: 5rem 0;
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(20px);
	margin: 3rem 0;
	border-radius: 25px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.featured-work-grid-preview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2.5rem;
	margin: 3rem 0;
}

.featured-work-preview-item {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 18px;
	overflow: hidden;
	backdrop-filter: blur(15px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	position: relative;
}

.featured-work-preview-item:hover {
	transform: translateY(-5px);
	box-shadow:
		0 20px 40px rgba(0, 0, 0, 0.12),
		0 0 0 1px rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.15);
}

.work-image-container-preview {
	position: relative;
	height: 180px;
	overflow: hidden;
}

.work-image-placeholder-preview {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg,
			var(--primary) 0%,
			var(--secondary) 50%,
			var(--accent) 100%);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.work-image-placeholder-preview::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"><rect width="100" height="60" fill="rgba(255,255,255,0.1)" rx="4"/><circle cx="20" cy="20" r="8" fill="rgba(255,255,255,0.2)"/><rect x="15" y="70" width="70" height="4" fill="rgba(255,255,255,0.2)" rx="2"/><rect x="15" y="80" width="50" height="4" fill="rgba(255,255,255,0.15)" rx="2"/></svg>') center/60px no-repeat;
	opacity: 0.4;
}

.image-overlay-preview {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all 0.3s ease;
	backdrop-filter: blur(8px);
}

.featured-work-preview-item:hover .image-overlay-preview {
	opacity: 1;
}

.view-more {
	color: white;
	font-weight: 600;
	font-size: 1rem;
	padding: 10px 20px;
	border: 2px solid white;
	border-radius: 25px;
	transition: all 0.3s ease;
	background: rgba(255, 255, 255, 0.1);
}

.view-more:hover {
	background: white;
	color: var(--primary);
}

.work-info-preview {
	padding: 1.5rem;
}

.work-title-preview {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--gray-900);
	margin-bottom: 0.5rem;
	line-height: 1.3;
}

.work-category-preview {
	font-size: 0.9rem;
	color: var(--primary);
	font-weight: 600;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.featured-work-cta {
	text-align: center;
	margin-top: 3rem;
}

/* Animation d'apparition progressive */
.featured-work-preview-item {
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUpPreview 0.5s ease forwards;
}

.featured-work-preview-item:nth-child(1) {
	animation-delay: 0.1s;
}

.featured-work-preview-item:nth-child(2) {
	animation-delay: 0.2s;
}

.featured-work-preview-item:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes fadeInUpPreview {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Responsive Design */
@media (max-width: 768px) {
	.featured-work-preview {
		padding: 3rem 0;
		margin: 2rem 0;
	}

	.featured-work-grid-preview {
		grid-template-columns: 1fr;
		gap: 2rem;
		margin: 2rem 0;
	}

	.featured-work-preview-item {
		margin: 0 1rem;
	}

	.work-image-container-preview {
		height: 160px;
	}

	.work-info-preview {
		padding: 1.2rem;
	}
}

@media (max-width: 480px) {
	.featured-work-grid-preview {
		margin: 1.5rem 0;
	}

	.featured-work-preview-item {
		margin: 0 0.5rem;
	}

	.work-image-container-preview {
		height: 140px;
	}

	.work-title-preview {
		font-size: 1.2rem;
	}

	.work-category-preview {
		font-size: 0.85rem;
	}

	.featured-work-cta {
		margin-top: 2rem;
	}
}