/* ============================================
HELLOLEADS - VERSION OPTIMISÉE COMPACT
Layout horizontal, tout tient sur l'écran
============================================ */
:root {
/* Couleurs */
--primary: #00D9A3;
--primary-dark: #00B88A;
--secondary: #1E3A5F;
--secondary-dark: #152A45;
--accent: #FF6B6B;
--white: #FFFFFF;
--gray-50: #F9FAFB;
--gray-100: #F3F4F6;
--gray-200: #E5E7EB;
--gray-600: #4B5563;
--gray-800: #1F2937;
--gray-900: #111827;
/* Gradients */
--gradient-primary: linear-gradient(135deg, #00D9A3 0%, #00B88A 100%);
--gradient-hero: linear-gradient(135deg, #0A1628 0%, #1E3A5F 50%, #2A5A8F 100%);
--gradient-text: linear-gradient(135deg, #00D9A3 0%, #00B88A 50%, #1E3A5F 100%);
/* Gradients Premium Animés */
--gradient-text-animated: linear-gradient(
90deg,
#00D9A3 0%,
#00F5C4 20%,
#00D9A3 40%,
#1E3A5F 60%,
#00B88A 80%,
#00D9A3 100%
);
--gradient-text-holographic: linear-gradient(
135deg,
#00FFD1 0%,
#00D9A3 20%,
#7B68EE 40%,
#1E3A5F 60%,
#00B88A 80%,
#00FFD1 100%
);
/* Gradients Clairs (vers le blanc) - VERSION LUMINEUSE */
--gradient-text-light: linear-gradient(
90deg,
#00D9A3 0%,
#00F5C4 25%,
#FFFFFF 50%,
#00F5C4 75%,
#00D9A3 100%
);
--gradient-text-light-warm: linear-gradient(
90deg,
#00D9A3 0%,
#5FFFDA 30%,
#FFFFFF 50%,
#5FFFDA 70%,
#00D9A3 100%
);
/* Spacing compact */
--nav-height: 0px; /* Menu flottant, pas de padding-top nécessaire */
--spacing-xs: 0.5rem;
--spacing-sm: 0.75rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-glow: 0 0 30px rgba(0, 217, 163, 0.3);
/* Border radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px;
/* Transitions */
--transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Reset & Base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
/* Masquer scrollbar uniquement */
-ms-overflow-style: none;
scrollbar-width: none;
}
html::-webkit-scrollbar {
display: none;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 15px;
line-height: 1.5;
color: var(--gray-800);
overflow: hidden;
width: 100vw;
max-width: 100vw;
/* Masquer scrollbar uniquement */
-ms-overflow-style: none;
scrollbar-width: none;
}
body::-webkit-scrollbar {
display: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
color: var(--gray-900);
}
a {
color: inherit;
text-decoration: none;
transition: all var(--transition);
}
/* ============================================
Navigation Moderne Glassmorphism Flottante
============================================ */
.modern-nav {
position: fixed;
top: 1rem;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
height: auto;
padding: 0.625rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
/* Glassmorphism effect */
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
/* Bordure et ombres */
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 100px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
0 2px 8px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
/* Animation d'entrée */
animation: slideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1);
/* Largeur responsive */
max-width: 95%;
width: auto;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateX(-50%) translateY(-20px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
/* Brand avec logo image */
.nav-brand {
display: flex;
align-items: center;
padding: 0.5rem 1.25rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.15);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-brand:hover {
transform: scale(1.05);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 12px rgba(0, 217, 163, 0.2);
}
.brand-logo {
height: auto;
width: 160px;
max-height: 36px;
display: block;
object-fit: contain;
transition: all 0.3s ease;
}
.nav-brand:hover .brand-logo {
filter: drop-shadow(0 2px 8px rgba(0, 217, 163, 0.3));
}
/* Anciens styles (non utilisés mais gardés pour compatibilité) */
.brand-icon {
font-size: 1.25rem;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Menu links avec effet moderne */
.nav-menu {
display: flex;
gap: 0.625rem;
align-items: center;
}
.nav-link {
position: relative;
font-weight: 600;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.8);
padding: 0.5rem 0.875rem;
border-radius: 50px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.nav-link::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50px;
background: rgba(255, 255, 255, 0.1);
opacity: 0;
transition: opacity 0.3s ease;
}
.nav-link:hover::before {
opacity: 1;
}
.nav-link:hover {
color: var(--white);
transform: translateY(-1px);
}
.nav-link.active {
color: var(--white);
background: rgba(0, 217, 163, 0.2);
box-shadow:
0 0 20px rgba(0, 217, 163, 0.3),
inset 0 0 20px rgba(0, 217, 163, 0.1);
}
.nav-link.active::after {
display: none;
}
/* CTA Button moderne */
.nav-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.5rem;
background: var(--gradient-primary);
color: var(--white);
font-weight: 600;
font-size: 0.875rem;
border-radius: 50px;
box-shadow:
0 4px 12px rgba(0, 217, 163, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.nav-cta::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.nav-cta:hover::before {
opacity: 1;
}
.nav-cta:hover {
transform: translateY(-2px) scale(1.05);
box-shadow:
0 8px 20px rgba(0, 217, 163, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.nav-cta svg {
transition: transform 0.3s ease;
}
.nav-cta:hover svg {
transform: translateX(3px);
}
/* ============================================
WhatsApp Button
============================================ */
.whatsapp-float {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 998;
width: 56px;
height: 56px;
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: var(--white);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-lg), 0 0 25px rgba(37, 211, 102, 0.4);
animation: pulse-float 2s infinite;
}
@keyframes pulse-float {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.whatsapp-float:hover {
transform: scale(1.1);
}
/* ============================================
Sections - Optimisées hauteur
============================================ */
.section {
position: relative;
width: 100vw;
max-width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding-top: var(--nav-height);
}
/* fullPage.js scrollOverflow - styles pour le conteneur de scroll */
.fp-overflow {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Centrage vertical quand le contenu est court */
.fp-overflow {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
/* Masquer les éléments par défaut dans toutes les sections sauf la première */
.section .section-badge,
.section .section-title,
.section .service-card,
.section .portfolio-card,
.section .process-step,
.section .process-cta,
.section .testimonial-card,
.section .contact-method,
.section .contact-form {
opacity: 0;
}
/* Afficher les éléments de la première section immédiatement */
.section[data-anchor="accueil"] .hero-badge,
.section[data-anchor="accueil"] .hero-title,
.section[data-anchor="accueil"] .hero-subtitle,
.section[data-anchor="accueil"] .hero-cta,
.section[data-anchor="accueil"] .hero-stats {
opacity: 1 !important;
}
/* Une fois qu'une section a été animée, garder les éléments visibles */
.section.animated .section-badge,
.section.animated .section-title,
.section.animated .service-card,
.section.animated .portfolio-card,
.section.animated .process-step,
.section.animated .process-cta,
.section.animated .testimonial-card,
.section.animated .contact-method,
.section.animated .contact-form {
opacity: 1 !important;
}
/* Désactiver toutes les transitions CSS sur les éléments animables */
.section-badge,
.section-title,
.service-card,
.portfolio-card,
.process-step,
.process-cta,
.testimonial-card,
.contact-method,
.contact-form {
transition: none !important;
}
.section-content {
max-width: 1400px;
width: 100%;
height: calc(100vh - var(--nav-height) - 40px);
padding: 80px 2rem 0 2rem; /* Ajout de 80px de padding-top pour descendre le contenu */
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: auto;
overflow-x: hidden;
/* Masquer scrollbar uniquement */
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Masquer scrollbar sur section-content */
.section-content::-webkit-scrollbar {
display: none;
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-lg);
}
.section-badge {
display: inline-block;
padding: 0.375rem 1rem;
background: linear-gradient(135deg, rgba(0, 217, 163, 0.1) 0%, rgba(30, 58, 95, 0.1) 100%);
border: 1px solid rgba(0, 217, 163, 0.2);
border-radius: var(--radius-full);
color: var(--primary);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--spacing-sm);
}
.section-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 900;
line-height: 1.1;
margin-bottom: var(--spacing-sm);
position: relative;
}
/* Titre clair avec effet de profondeur subtil */
.light-title {
color: var(--white);
text-shadow:
0 2px 10px rgba(0, 0, 0, 0.3),
0 0 15px rgba(0, 217, 163, 0.08);
}
/* ============================================
EFFETS DE GRADIENT PREMIUM - GUIDE D'UTILISATION
============================================
Utilise ces classes sur tes textes importants pour créer
des effets visuels de niveau professionnel :
1. .gradient-text (PAR DÉFAUT)
→ Gradient animé avec glow vert lumineux
→ Effet de lumière qui pulse subtilement
→ Parfait pour les mots-clés importants
Exemple: succès digital
2. .gradient-text-holographic
→ Effet holographique/iridescent moderne
→ Style Stripe/Linear avec glow cyan/violet
→ Couleurs qui changent subtilement
Exemple: innovation
3. .gradient-text-pulse
→ Pulsation douce de luminosité
→ Glow vert intense qui respire
→ Idéal pour les CTA textuels
Exemple: contactez-nous
Tous ces effets sont :
- Sans rectangle blanc qui traverse (effet propre)
- Glow coloré vert/cyan pour contraste optimal
- Optimisés pour les performances
- Accessibles (texte reste lisible)
- Responsive et GPU-accelerated
============================================ */
.gradient-text {
background: var(--gradient-text-animated);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientFlow 8s ease infinite;
position: relative;
display: inline-block;
font-weight: 900;
/* Effet de glow subtil et élégant */
filter: drop-shadow(0 0 15px rgba(0, 255, 209, 0.25))
drop-shadow(0 0 25px rgba(0, 217, 163, 0.15))
drop-shadow(0 1px 4px rgba(0, 217, 163, 0.3));
}
/* Animation de mouvement du gradient - EFFET PREMIUM */
@keyframes gradientFlow {
0%, 100% {
background-position: 0% 50%;
filter: drop-shadow(0 0 15px rgba(0, 255, 209, 0.25))
drop-shadow(0 0 25px rgba(0, 217, 163, 0.15))
drop-shadow(0 1px 4px rgba(0, 217, 163, 0.3));
}
50% {
background-position: 100% 50%;
filter: drop-shadow(0 0 18px rgba(0, 255, 209, 0.35))
drop-shadow(0 0 30px rgba(0, 217, 163, 0.2))
drop-shadow(0 1px 6px rgba(0, 217, 163, 0.4));
}
}
/* Variante Holographique pour effet premium */
.gradient-text-holographic {
background: var(--gradient-text-holographic);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: holographicShift 6s ease-in-out infinite;
position: relative;
display: inline-block;
font-weight: 900;
}
@keyframes holographicShift {
0%, 100% {
background-position: 0% 50%;
filter: drop-shadow(0 0 15px rgba(0, 255, 209, 0.2))
drop-shadow(0 0 25px rgba(123, 104, 238, 0.15))
drop-shadow(0 1px 4px rgba(0, 217, 163, 0.3));
}
50% {
background-position: 100% 50%;
filter: drop-shadow(0 0 18px rgba(123, 104, 238, 0.25))
drop-shadow(0 0 28px rgba(0, 255, 209, 0.2))
drop-shadow(0 1px 5px rgba(123, 104, 238, 0.35));
}
}
/* Effet de pulsation douce pour attirer l'attention */
.gradient-text-pulse {
background: var(--gradient-text-animated);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientPulse 4s ease-in-out infinite;
position: relative;
display: inline-block;
font-weight: 900;
}
@keyframes gradientPulse {
0%, 100% {
filter: drop-shadow(0 0 12px rgba(0, 255, 209, 0.2))
drop-shadow(0 0 20px rgba(0, 217, 163, 0.15))
drop-shadow(0 1px 4px rgba(0, 217, 163, 0.25));
}
50% {
filter: drop-shadow(0 0 20px rgba(0, 255, 209, 0.35))
drop-shadow(0 0 35px rgba(0, 217, 163, 0.25))
drop-shadow(0 1px 8px rgba(0, 217, 163, 0.4));
}
}
/* ============================================
GRADIENTS CLAIRS - VERSION LUMINEUSE
============================================ */
/* Gradient vers blanc - Effet lumineux qui traverse (gauche → droite) */
.gradient-text-light {
background: linear-gradient(
90deg,
#00D9A3 0%,
#00D9A3 20%,
#5FFFDA 35%,
#FFFFFF 50%,
#5FFFDA 65%,
#00D9A3 80%,
#00D9A3 100%
);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: lightSweep 4s ease-in-out infinite;
position: relative;
display: inline-block;
font-weight: 900;
/* Glow blanc/cyan subtil qui suit la lumière */
filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.3))
drop-shadow(0 0 30px rgba(0, 255, 209, 0.2))
drop-shadow(0 1px 5px rgba(255, 255, 255, 0.4));
}
/* Animation aller-retour de la lumière */
@keyframes lightSweep {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Gradient vers blanc chaud - Effet lumière intense qui traverse */
.gradient-text-light-warm {
background: linear-gradient(
90deg,
#00D9A3 0%,
#00D9A3 15%,
#5FFFDA 30%,
#AFFFEF 40%,
#FFFFFF 50%,
#AFFFEF 60%,
#5FFFDA 70%,
#00D9A3 85%,
#00D9A3 100%
);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: lightSweepWarm 3.5s ease-in-out infinite;
position: relative;
display: inline-block;
font-weight: 900;
/* Glow blanc/cyan vivant qui suit */
filter: drop-shadow(0 0 20px rgba(95, 255, 218, 0.35))
drop-shadow(0 0 35px rgba(255, 255, 255, 0.25))
drop-shadow(0 1px 6px rgba(0, 217, 163, 0.3));
}
/* Animation aller-retour plus rapide et vive */
@keyframes lightSweepWarm {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* ============================================
HERO - Version compacte
============================================ */
.hero-section {
background: var(--gradient-hero);
color: var(--white);
padding-top: var(--nav-height);
}
.particles {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 50%, rgba(0, 217, 163, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(30, 58, 95, 0.2) 0%, transparent 50%);
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 1;
text-align: center;
max-width: 1000px;
margin: 0 auto;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 1rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
margin-bottom: var(--spacing-sm);
}
.pulse-dot {
width: 6px;
height: 6px;
background: var(--primary);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
.hero-title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 900;
color: var(--white);
margin-bottom: var(--spacing-sm);
line-height: 1.1;
/* Effet de glow subtil et élégant */
text-shadow:
0 0 20px rgba(0, 217, 163, 0.15),
0 0 40px rgba(0, 217, 163, 0.08);
animation: titleGlow 4s ease-in-out infinite;
}
@keyframes titleGlow {
0%, 100% {
text-shadow:
0 0 20px rgba(0, 217, 163, 0.15),
0 0 40px rgba(0, 217, 163, 0.08);
}
50% {
text-shadow:
0 0 25px rgba(0, 217, 163, 0.22),
0 0 50px rgba(0, 217, 163, 0.12);
}
}
.hero-subtitle {
font-size: clamp(0.875rem, 1.5vw, 1rem);
color: rgba(255, 255, 255, 0.8);
margin-bottom: var(--spacing-md);
line-height: 1.5;
}
.hero-cta {
display: flex;
gap: var(--spacing-md);
justify-content: center;
flex-wrap: wrap;
margin-bottom: var(--spacing-md);
}
.hero-stats {
display: flex;
gap: var(--spacing-xl);
justify-content: center;
padding-top: var(--spacing-md);
border-top: 1px solid rgba(255, 255, 255, 0.1);
flex-wrap: wrap;
}
.stat {
text-align: center;
min-width: 100px;
}
.stat-number {
font-size: 1.75rem;
font-weight: 900;
color: var(--primary);
line-height: 1;
margin-bottom: 0.25rem;
}
.stat-label {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Scroll Indicator */
.scroll-indicator {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
color: rgba(255, 255, 255, 0.6);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.1em;
z-index: 10;
}
.mouse {
width: 20px;
height: 30px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: var(--radius-full);
position: relative;
}
.wheel {
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 6px;
background: rgba(255, 255, 255, 0.6);
border-radius: var(--radius-full);
animation: scroll-down 2s infinite;
}
@keyframes scroll-down {
0% { opacity: 1; transform: translateX(-50%) translateY(0); }
100% { opacity: 0; transform: translateX(-50%) translateY(10px); }
}
/* ============================================
SERVICES - Layout horizontal 3 colonnes
============================================ */
.services-section {
background: var(--gray-50);
}
/* Section services compacte */
.services-section .section-content {
padding-top: 60px;
}
.services-section .section-header {
margin-bottom: var(--spacing-sm);
}
.services-section .section-title {
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: 0.25rem;
}
.services-section .section-badge {
margin-bottom: var(--spacing-xs);
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-sm);
max-width: 100%;
}
.service-card {
position: relative;
padding: var(--spacing-md);
background: var(--white);
border-radius: var(--radius-lg);
border: 2px solid var(--gray-200);
transition: all var(--transition);
overflow: visible;
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--primary);
}
.service-card.featured {
background: var(--gradient-hero);
color: var(--white);
border: none;
box-shadow: var(--shadow-lg), var(--shadow-glow);
}
.service-card.featured h3,
.service-card.featured p {
color: var(--white);
}
.featured-tag {
position: absolute;
top: -10px;
right: 12px;
z-index: 10;
padding: 0.35rem 0.75rem;
background: var(--gradient-primary);
color: var(--white);
font-size: 0.75rem;
font-weight: 700;
border-radius: var(--radius-full);
box-shadow: var(--shadow-md);
}
.service-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(0, 217, 163, 0.1) 0%, rgba(30, 58, 95, 0.1) 100%);
border-radius: var(--radius-md);
color: var(--primary);
margin-bottom: var(--spacing-xs);
transition: all var(--transition);
}
.service-icon svg {
width: 24px;
height: 24px;
}
.service-card:hover .service-icon {
transform: scale(1.1);
}
.service-card.featured .service-icon {
color: var(--white);
}
.service-card h3 {
font-size: 0.9375rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.service-card p {
color: var(--gray-600);
font-size: 0.8125rem;
line-height: 1.4;
}
/* ============================================
PROCESSUS - Layout horizontal 4 colonnes
============================================ */
.process-section {
background: var(--white);
}
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-md);
max-width: 100%;
margin-bottom: var(--spacing-lg);
}
.process-step {
text-align: center;
padding: var(--spacing-lg);
background: var(--gray-50);
border-radius: var(--radius-lg);
border: 2px solid var(--gray-200);
transition: all var(--transition);
}
.process-step:hover {
transform: translateY(-3px);
border-color: var(--primary);
box-shadow: var(--shadow-md);
}
.step-number {
width: 48px;
height: 48px;
margin: 0 auto var(--spacing-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 900;
color: var(--white);
background: var(--gradient-primary);
border-radius: var(--radius-full);
box-shadow: var(--shadow-md), var(--shadow-glow);
}
.process-step h3 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.375rem;
}
.process-step p {
color: var(--gray-600);
font-size: 0.875rem;
}
.process-cta {
text-align: center;
padding: var(--spacing-lg);
background: var(--gradient-hero);
border-radius: var(--radius-xl);
color: var(--white);
}
.process-cta h3 {
color: var(--white);
font-size: 1.25rem;
margin-bottom: var(--spacing-sm);
}
/* ============================================
CONTACT - Layout horizontal 2 colonnes
============================================ */
.contact-section {
background: var(--gray-50);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: var(--spacing-xl);
align-items: start;
}
.contact-info .section-title {
text-align: left;
margin-bottom: var(--spacing-md);
}
.contact-info .section-badge {
margin-bottom: var(--spacing-sm);
}
.contact-methods {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.contact-method {
display: flex;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: var(--white);
border-radius: var(--radius-md);
border: 2px solid var(--gray-200);
transition: all var(--transition);
}
.contact-method:hover {
border-color: var(--primary);
box-shadow: var(--shadow-sm);
}
.method-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--gray-100);
border-radius: var(--radius-md);
color: var(--primary);
}
.method-icon.whatsapp {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: var(--white);
}
.method-label {
font-size: 0.75rem;
color: var(--gray-600);
margin-bottom: 0.125rem;
}
.method-value {
font-weight: 700;
color: var(--gray-900);
font-size: 0.875rem;
}
/* Contact Form */
.contact-form {
padding: var(--spacing-lg);
background: var(--white);
border-radius: var(--radius-xl);
border: 2px solid var(--gray-200);
box-shadow: var(--shadow-md);
}
.form-group {
position: relative;
margin-bottom: var(--spacing-md);
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.875rem;
font-family: inherit;
border: 2px solid var(--gray-200);
border-radius: var(--radius-md);
background: var(--white);
transition: all var(--transition);
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(0, 217, 163, 0.1);
}
.form-group label {
position: absolute;
left: 1rem;
top: 0.75rem;
font-size: 0.875rem;
color: var(--gray-600);
pointer-events: none;
transition: all var(--transition);
}
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:not(:placeholder-shown) + label,
.form-group input:focus + label,
.form-group textarea:focus + label {
top: -0.5rem;
left: 0.75rem;
font-size: 0.625rem;
background: var(--white);
padding: 0 0.375rem;
color: var(--primary);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-sm);
}
.form-group textarea {
resize: vertical;
min-height: 80px;
}
.form-message {
margin-top: var(--spacing-sm);
padding: 0.75rem;
border-radius: var(--radius-md);
text-align: center;
font-weight: 600;
font-size: 0.875rem;
display: none;
}
.form-message.success {
display: block;
background: rgba(0, 217, 163, 0.1);
color: var(--primary-dark);
border: 2px solid var(--primary);
}
.form-message.error {
display: block;
background: rgba(255, 107, 107, 0.1);
color: #D84343;
border: 2px solid var(--accent);
}
/* ============================================
Buttons
============================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 2rem;
font-size: 1rem;
font-weight: 500;
font-family: inherit;
border-radius: 12px;
border: none;
cursor: pointer;
transition: all var(--transition);
}
/* Icônes SVG dans les boutons CTA - couleur héritée du texte */
.btn svg,
.nav-cta svg,
.modal-cta svg,
.card-cta svg {
fill: none;
stroke: currentColor;
color: inherit;
}
.btn-primary {
background: #00D9A3;
color: var(--white);
box-shadow: none;
border: none;
}
.btn-primary:hover {
background: #00F5B8;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 217, 163, 0.3);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: var(--white);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.4);
color: var(--white);
}
.btn-lg {
padding: 1rem 2rem;
font-size: 1rem;
}
.btn-full {
width: 100%;
}
/* ============================================
Footer
============================================ */
.modern-footer {
padding: 1rem 0;
text-align: center;
color: var(--gray-600);
font-size: 0.75rem;
}
/* ============================================
Navigation fullPage
============================================ */
#fp-nav {
z-index: 100 !important;
}
#fp-nav ul li a span {
background: var(--primary) !important;
}
/* Masquer scrollbars sur fullPage.js sans changer le comportement */
#fullpage::-webkit-scrollbar,
.fp-section::-webkit-scrollbar,
.fp-tableCell::-webkit-scrollbar,
.fp-scrollable::-webkit-scrollbar {
display: none;
}
#fullpage,
.fp-section,
.fp-tableCell,
.fp-scrollable {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* ============================================
RESPONSIVE - REFONTE COMPLÈTE MOBILE/TABLETTE
Scroll interne activé avec fullPage.js scrollOverflow
============================================ */
/* ============================================
TABLETTE (max-width: 1200px)
============================================ */
@media (max-width: 1200px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
}
.process-grid {
grid-template-columns: repeat(2, 1fr);
}
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================
TABLETTE PORTRAIT (max-width: 1024px)
============================================ */
@media (max-width: 1024px) {
/* Navigation */
.modern-nav {
padding: 0.5rem 1rem;
gap: 1.25rem;
}
.nav-brand {
padding: 0.3rem 0.75rem;
}
.brand-logo {
width: 110px;
max-height: 24px;
}
.nav-menu {
gap: 0.25rem;
}
.nav-link {
padding: 0.3rem 0.625rem;
font-size: 0.75rem;
}
.nav-cta {
padding: 0.4rem 0.875rem;
font-size: 0.75rem;
}
/* Sections - permettre le scroll interne */
.section {
height: auto !important;
min-height: 100vh;
}
.section-content {
padding: 80px 1.5rem 40px 1.5rem;
height: auto !important;
min-height: calc(100vh - 120px);
}
/* Hero */
.hero-content {
padding: 0 1rem;
}
.hero-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
}
.hero-subtitle {
font-size: 0.9375rem;
}
/* Services */
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
}
.service-card {
padding: var(--spacing-md);
}
/* Process */
.process-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
}
/* Contact */
.contact-grid {
gap: var(--spacing-lg);
}
}
/* ============================================
MOBILE LARGE / PHABLET (max-width: 768px)
REFONTE COMPLÈTE - HERO SECTION OPTIMISÉE
============================================ */
@media (max-width: 768px) {
/* ========== RESET POUR SCROLL OVERFLOW ========== */
html, body {
overflow: visible !important;
}
/* Permettre le scroll vertical dans chaque section */
.section {
height: auto !important;
min-height: 100vh;
overflow: visible !important;
}
.fp-overflow {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
.section-content {
height: auto !important;
min-height: auto;
padding: 80px 20px 40px 20px; /* Padding général mobile: 20px côtés */
overflow: visible !important;
}
/* GLOBAL : Forcer alignement en haut pour TOUTES les sections (sauf Hero) sur mobile */
.section:not(.hero-section) .fp-tableCell {
vertical-align: top !important;
}
.section:not(.hero-section) {
justify-content: flex-start !important;
}
.section:not(.hero-section) .fp-overflow {
display: block !important;
justify-content: flex-start !important;
}
/* ========== NAVIGATION MOBILE ========== */
.modern-nav {
padding: 0.4rem 0.75rem;
gap: 0.75rem;
top: 0.5rem;
max-width: calc(100% - 1rem);
}
.nav-brand {
padding: 0.25rem 0.5rem;
}
.brand-logo {
width: 90px;
max-height: 20px;
}
.nav-menu {
display: none;
}
.nav-cta {
padding: 0.4rem 0.75rem;
font-size: 0.75rem;
gap: 0.25rem;
min-height: 36px;
}
/* Navigation fullPage - repositionner à droite en bas */
#fp-nav {
right: 0.5rem !important;
top: auto !important;
bottom: 80px !important;
transform: none !important;
}
#fp-nav ul li {
margin: 5px 0;
}
#fp-nav ul li a span {
width: 8px !important;
height: 8px !important;
}
/* ========== HERO SECTION MOBILE - REFONTE COMPLÈTE ========== */
.hero-section .section-content {
padding: 70px 20px 30px 20px;
justify-content: center;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.hero-content {
padding: 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 100%;
}
/* Badge "Disponible" - Espacement: 20px vers titre */
.hero-badge {
font-size: 0.75rem; /* 12px */
padding: 0.375rem 0.875rem;
margin-bottom: 20px; /* Espacement badge → titre */
gap: 0.375rem;
}
.hero-badge .pulse-dot {
width: 5px;
height: 5px;
}
/* Titre principal mobile */
.hero-title {
font-size: 1.75rem; /* 28px */
line-height: 1.2;
margin-bottom: 15px; /* Espacement titre → sous-titre */
padding: 0 5px;
}
.hero-title br {
display: none; /* Laisser le texte s'adapter naturellement */
}
/* Sous-titre mobile */
.hero-subtitle {
font-size: 0.875rem; /* 14px */
line-height: 1.5;
margin-bottom: 30px; /* Espacement sous-titre → boutons */
padding: 0 10px;
color: rgba(255, 255, 255, 0.85);
max-width: 100%;
}
.hero-subtitle br {
display: none; /* Retirer les retours à la ligne forcés sur mobile */
}
/* Boutons CTA mobile - Zone touch confortable */
.hero-cta {
flex-direction: column;
width: 100%;
gap: 15px; /* Espacement entre les 2 boutons */
margin-bottom: 40px; /* Espacement boutons → stats */
align-items: center;
}
.hero-cta .btn {
width: 100%;
max-width: 350px;
min-height: 50px; /* Zone de touch confortable */
padding: 15px 25px;
font-size: 1rem; /* 16px */
border-radius: var(--radius-lg);
justify-content: center;
}
.hero-cta .btn-primary {
order: 1;
}
.hero-cta .btn-secondary {
order: 2;
}
/* Stats en bas - Layout flex en ligne */
.hero-stats {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 20px 30px;
padding-top: 20px;
width: 100%;
}
.stat {
min-width: 80px;
text-align: center;
flex: 0 0 auto;
}
.stat-number {
font-size: 1.5rem; /* 24px */
font-weight: 900;
line-height: 1;
margin-bottom: 4px;
}
.stat-label {
font-size: 0.75rem; /* 12px */
line-height: 1.3;
color: rgba(255, 255, 255, 0.7);
}
/* Masquer l'indicateur de scroll sur mobile */
.scroll-indicator {
display: none;
}
/* ========== PARTICULES - Réduire pour performance ========== */
.hero-section .particles {
opacity: 0.5; /* Réduire l'opacité pour alléger */
}
/* ========== BOUTON WHATSAPP MOBILE ========== */
.whatsapp-float {
width: 50px;
height: 50px;
bottom: 20px;
right: 20px;
}
.whatsapp-float svg {
width: 24px;
height: 24px;
}
/* ========== SERVICES SECTION MOBILE - CORRECTION ALIGNEMENT FULLPAGE.JS ========== */
/* FORCER L'ALIGNEMENT EN HAUT - Cibler la structure fullPage.js */
.services-section .fp-tableCell {
vertical-align: top !important; /* Forcer alignement en haut */
padding-top: 0 !important;
}
.services-section .fp-overflow {
display: block !important;
justify-content: flex-start !important;
}
/* ========== GRAND ESPACE BAS SLIDE SERVICES - FULLPAGE.JS SCROLLABLE ========== */
/* Cibler les vrais conteneurs scrollables de fullPage.js */
.services-section .fp-overflow,
.services-section .fp-overflow > .fp-scrollable {
padding-bottom: 400px !important;
box-sizing: border-box !important;
}
/* Fallback : Spacer via pseudo-élément si fullPage écrase le padding */
.services-section .fp-overflow::after,
.services-section .fp-scrollable::after {
content: "";
display: block;
height: 400px;
width: 100%;
flex-shrink: 0;
}
/* Forcer la section elle-même */
.services-section {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
}
.services-section .section-content {
padding-top: 100px !important; /* Espace pour menu + marge confortable */
padding-bottom: 80px !important; /* Marge basse généreuse */
padding-left: 20px;
padding-right: 20px;
justify-content: flex-start !important;
align-items: stretch;
margin-top: 0 !important;
transform: none !important;
position: relative !important;
top: 0 !important;
}
.services-section .section-header {
margin-bottom: 30px; /* Espace entre titre et grille */
}
.services-section .section-title {
font-size: 1.375rem;
}
.services-grid {
grid-template-columns: 1fr;
gap: 20px; /* Espacement entre les cards */
}
.service-card {
padding: var(--spacing-md);
}
.service-card h3 {
font-size: 1rem;
}
.service-card p {
font-size: 0.8125rem;
}
/* ========== MARGE BASSE DERNIER SERVICE-CARD - MOBILE ========== */
/* Cibler le dernier service-card pour créer un grand espace en bas */
.services-section .services-grid .service-card:last-child,
.services-section .services-grid .service-card:nth-child(6),
.services-section .service-card[data-service="support-maintenance"] {
margin-bottom: 80px !important;
}
.service-icon {
width: 36px;
height: 36px;
}
.service-icon svg {
width: 20px;
height: 20px;
}
.featured-tag {
font-size: 0.625rem;
padding: 0.25rem 0.5rem;
top: -8px;
right: 8px;
}
.card-cta {
font-size: 0.75rem;
white-space: nowrap; /* Toujours sur une ligne */
justify-content: flex-start;
padding-top: 0.625rem;
margin-top: 0.625rem;
opacity: 1; /* Toujours visible sur mobile */
}
.card-cta span {
flex-shrink: 0;
}
.card-cta svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* ========== PORTFOLIO SECTION MOBILE ========== */
.portfolio-carousel {
flex-direction: column;
gap: var(--spacing-sm);
}
.portfolio-track-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.portfolio-track {
gap: var(--spacing-md);
}
.portfolio-card {
flex: 0 0 85%;
min-width: 85%;
}
.portfolio-image {
height: 140px;
}
.portfolio-info {
padding: var(--spacing-md);
}
.portfolio-info h3 {
font-size: 1rem;
}
.portfolio-info p {
font-size: 0.8125rem;
}
.portfolio-tags span {
font-size: 0.625rem;
padding: 0.2rem 0.5rem;
}
/* Boutons carrousel */
.carousel-btn {
width: 36px;
height: 36px;
}
.carousel-btn svg {
width: 16px;
height: 16px;
}
/* Cacher les boutons prev/next sur mobile, garder les dots */
.carousel-prev,
.carousel-next {
display: none;
}
/* ========== MASQUER BOUTONS CAROUSEL PORTFOLIO - MOBILE ========== */
/* Masquer les boutons de navigation du carousel portfolio sur mobile uniquement */
.portfolio-section .carousel-btn.portfolio-prev,
.portfolio-section .carousel-btn.portfolio-next,
.swiper-slide[data-anchor="portfolio"] .carousel-btn.portfolio-prev,
.swiper-slide[data-anchor="portfolio"] .carousel-btn.portfolio-next {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
opacity: 0 !important;
}
.carousel-dots {
margin-top: var(--spacing-md);
}
.carousel-dot {
width: 8px;
height: 8px;
}
/* ========== PROCESSUS SECTION MOBILE ========== */
.process-grid {
grid-template-columns: 1fr;
gap: var(--spacing-sm);
}
.process-step {
padding: var(--spacing-md);
text-align: left;
display: flex;
gap: var(--spacing-md);
align-items: flex-start;
}
.step-number {
width: 40px;
height: 40px;
min-width: 40px;
font-size: 1rem;
margin: 0;
}
.process-step h3 {
font-size: 0.9375rem;
margin-bottom: 0.25rem;
}
.process-step p {
font-size: 0.8125rem;
}
.process-cta {
padding: var(--spacing-md);
margin-top: var(--spacing-sm);
}
.process-cta h3 {
font-size: 1rem;
margin-bottom: var(--spacing-sm);
}
/* ========== TÉMOIGNAGES SECTION MOBILE ========== */
.testimonials-grid {
grid-template-columns: 1fr;
gap: var(--spacing-sm);
}
.testimonial-card {
padding: var(--spacing-md);
}
.testimonial-text {
font-size: 0.875rem;
}
.stars {
font-size: 1rem;
}
.author-avatar {
width: 40px;
height: 40px;
font-size: 0.875rem;
}
/* Google Reviews Mobile - Cards avec aperçu du suivant */
.google-reviews-carousel {
flex-direction: column;
}
.reviews-track-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 0 0.5rem;
}
.google-review-card {
flex: 0 0 82%; /* Réduit pour montrer un aperçu de la card suivante */
min-width: 82%;
padding: var(--spacing-md);
scroll-snap-align: center;
}
.reviewer-avatar {
width: 40px;
height: 40px;
font-size: 1rem;
}
.reviewer-name {
font-size: 0.9375rem;
}
.review-text {
font-size: 0.875rem;
}
.google-rating-badge {
padding: var(--spacing-xs) var(--spacing-md);
}
.rating-number {
font-size: 1.25rem;
}
.reviews-prev,
.reviews-next {
display: none;
}
/* ========== CONTACT SECTION MOBILE - CORRECTION DÉBORDEMENT ========== */
/* Forcer alignement en haut comme les autres sections */
.contact-section .fp-tableCell {
vertical-align: top !important;
}
/* Empêcher tout débordement horizontal */
.contact-section {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100vw !important;
}
.contact-section .section-content {
width: 100% !important;
max-width: 100% !important;
padding: 100px 20px 80px 20px !important;
margin: 0 auto !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
/* Grille contact en colonne */
.contact-grid {
grid-template-columns: 1fr !important;
gap: 25px !important;
width: 100% !important;
max-width: 100% !important;
}
/* Info contact */
.contact-info {
width: 100% !important;
max-width: 100% !important;
text-align: center;
}
.contact-info .section-title {
font-size: 1.375rem;
text-align: center;
}
.contact-info .section-badge {
display: block;
text-align: center;
}
.contact-methods {
gap: var(--spacing-sm);
width: 100% !important;
}
.contact-method {
padding: var(--spacing-sm) var(--spacing-md);
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.method-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
}
.method-label {
font-size: 0.6875rem;
}
.method-value {
font-size: 0.8125rem;
word-break: break-word;
}
/* Formulaire - Centré et 100% largeur */
.contact-form {
width: 100% !important;
max-width: 100% !important;
padding: var(--spacing-md) !important;
box-sizing: border-box !important;
margin: 0 auto !important;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.contact-form button,
.contact-form .btn {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.form-row {
grid-template-columns: 1fr !important;
gap: var(--spacing-sm) !important;
}
/* Footer */
.modern-footer {
width: 100% !important;
padding: 15px 20px !important;
text-align: center !important;
font-size: 0.75rem !important;
box-sizing: border-box !important;
}
.form-group {
margin-bottom: var(--spacing-sm);
}
.form-group input,
.form-group textarea {
padding: 0.625rem 0.875rem;
font-size: 0.875rem;
}
.form-group label {
font-size: 0.8125rem;
}
.form-row {
grid-template-columns: 1fr;
gap: var(--spacing-sm);
}
.form-group textarea {
min-height: 100px;
}
/* ========== FOOTER MOBILE ========== */
.modern-footer {
padding: var(--spacing-md) var(--spacing-sm);
font-size: 0.6875rem;
}
/* ========== BOUTON WHATSAPP MOBILE ========== */
.whatsapp-float {
bottom: 1rem;
right: 1rem;
width: 48px;
height: 48px;
}
.whatsapp-float svg {
width: 24px;
height: 24px;
}
/* ========== TITRES GÉNÉRAUX MOBILE ========== */
.section-badge {
font-size: 0.625rem;
padding: 0.3rem 0.75rem;
}
.section-title {
font-size: 1.375rem;
}
.light-title {
font-size: 1.375rem;
}
}
/* ============================================
MOBILE STANDARD (max-width: 480px)
HERO SECTION - AJUSTEMENTS SUPPLÉMENTAIRES
============================================ */
@media (max-width: 480px) {
:root {
--spacing-xs: 0.375rem;
--spacing-sm: 0.5rem;
--spacing-md: 0.75rem;
--spacing-lg: 1rem;
--spacing-xl: 1.5rem;
}
/* Navigation encore plus compacte */
.modern-nav {
padding: 0.3rem 0.5rem;
gap: 0.375rem;
top: 0.375rem;
}
.nav-brand {
padding: 0.2rem 0.375rem;
}
.brand-logo {
width: 80px;
max-height: 18px;
}
.nav-cta {
padding: 0.35rem 0.625rem;
font-size: 0.6875rem;
min-height: 32px;
}
.nav-cta span {
display: none; /* Masquer le texte, garder juste l'icône */
}
.nav-cta svg {
width: 16px;
height: 16px;
}
/* Section content - Padding ajusté */
.section-content {
padding: 65px 16px 35px 16px;
}
/* ========== HERO SECTION 480px ========== */
.hero-section .section-content {
padding: 60px 16px 25px 16px;
}
.hero-content {
padding: 0;
}
/* Badge */
.hero-badge {
font-size: 0.6875rem; /* 11px */
padding: 0.3rem 0.75rem;
margin-bottom: 16px;
}
/* Titre */
.hero-title {
font-size: 1.5rem; /* 24px */
line-height: 1.25;
margin-bottom: 12px;
padding: 0;
}
/* Sous-titre */
.hero-subtitle {
font-size: 0.8125rem; /* 13px */
line-height: 1.5;
margin-bottom: 25px;
padding: 0 5px;
}
/* Boutons CTA */
.hero-cta {
gap: 12px;
margin-bottom: 35px;
}
.hero-cta .btn {
max-width: 300px;
min-height: 48px;
padding: 12px 20px;
font-size: 0.9375rem; /* 15px */
}
/* Stats */
.hero-stats {
gap: 15px 25px;
padding-top: 18px;
}
.stat {
min-width: 75px;
}
.stat-number {
font-size: 1.375rem; /* 22px */
}
.stat-label {
font-size: 0.6875rem; /* 11px */
}
/* Services - Alignement haut 480px - Structure fullPage.js */
.services-section .fp-tableCell {
vertical-align: top !important;
}
.services-section .section-content {
padding-top: 90px !important;
padding-bottom: 100px !important; /* Marge basse très généreuse */
padding-left: 16px;
padding-right: 16px;
justify-content: flex-start !important;
margin-top: 0 !important;
transform: none !important;
}
.services-section .section-header {
margin-bottom: 25px;
}
.services-grid {
gap: 16px;
}
.service-card {
padding: var(--spacing-sm);
}
.service-card h3 {
font-size: 0.9375rem;
}
.service-card p {
font-size: 0.75rem;
}
/* Portfolio */
.portfolio-card {
flex: 0 0 90%;
min-width: 90%;
}
.portfolio-image {
height: 120px;
}
/* Process */
.step-number {
width: 36px;
height: 36px;
min-width: 36px;
font-size: 0.875rem;
}
/* Titres généraux */
.section-title,
.light-title {
font-size: 1.25rem;
}
.section-badge {
font-size: 0.5625rem;
}
/* Contact - Ajustements 480px */
.contact-section .section-content {
padding: 90px 16px 70px 16px !important;
}
.contact-form {
padding: var(--spacing-sm) !important;
}
.contact-method {
padding: 10px 12px !important;
}
.method-value {
font-size: 0.75rem !important;
}
/* fullPage nav dots */
#fp-nav {
right: 0.375rem !important;
bottom: 70px !important;
}
#fp-nav ul li a span {
width: 6px !important;
height: 6px !important;
}
/* WhatsApp button */
.whatsapp-float {
width: 48px;
height: 48px;
bottom: 16px;
right: 16px;
}
.whatsapp-float svg {
width: 22px;
height: 22px;
}
/* Particules désactivées pour performance */
.hero-section .particles {
opacity: 0.3;
}
}
/* ============================================
PETIT MOBILE (max-width: 375px)
HERO SECTION - OPTIMISATION MAXIMALE
============================================ */
@media (max-width: 375px) {
/* Navigation ultra-compacte */
.modern-nav {
padding: 0.25rem 0.4rem;
gap: 0.25rem;
top: 0.25rem;
}
.nav-brand {
padding: 0.15rem 0.3rem;
}
.brand-logo {
width: 70px;
max-height: 16px;
}
.nav-cta {
padding: 0.3rem 0.5rem;
min-height: 30px;
}
/* Section content */
.section-content {
padding: 55px 12px 30px 12px;
}
/* ========== HERO SECTION 375px ========== */
.hero-section .section-content {
padding: 55px 12px 20px 12px;
}
/* Badge */
.hero-badge {
font-size: 0.625rem; /* 10px */
padding: 0.25rem 0.625rem;
margin-bottom: 14px;
gap: 0.25rem;
}
.hero-badge .pulse-dot {
width: 4px;
height: 4px;
}
/* Titre - Très compact */
.hero-title {
font-size: 1.375rem; /* 22px */
line-height: 1.2;
margin-bottom: 10px;
}
/* Sous-titre */
.hero-subtitle {
font-size: 0.75rem; /* 12px */
line-height: 1.5;
margin-bottom: 22px;
padding: 0;
}
/* Boutons CTA */
.hero-cta {
gap: 10px;
margin-bottom: 30px;
}
.hero-cta .btn {
max-width: 280px;
min-height: 46px;
padding: 10px 18px;
font-size: 0.875rem; /* 14px */
}
/* Stats - En colonne sur très petit écran */
.hero-stats {
flex-direction: column;
gap: 12px;
padding-top: 15px;
align-items: center;
}
.stat {
min-width: auto;
width: 100%;
max-width: 200px;
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.stat:last-child {
border-bottom: none;
}
.stat-number {
font-size: 1.25rem; /* 20px */
}
.stat-label {
font-size: 0.625rem; /* 10px */
}
/* Services - Alignement haut 375px - Structure fullPage.js */
.services-section .fp-tableCell {
vertical-align: top !important;
}
.services-section .section-content {
padding-top: 85px !important;
padding-bottom: 100px !important; /* Marge basse très généreuse */
padding-left: 12px;
padding-right: 12px;
justify-content: flex-start !important;
margin-top: 0 !important;
transform: none !important;
}
.services-section .section-header {
margin-bottom: 20px;
}
.services-grid {
gap: 14px;
}
/* Contact - Ajustements 375px */
.contact-section .section-content {
padding: 85px 12px 60px 12px !important;
}
.contact-grid {
gap: 20px !important;
}
.contact-form {
padding: 12px !important;
}
.contact-method {
padding: 8px 10px !important;
}
.method-icon {
width: 32px !important;
height: 32px !important;
}
.method-value {
font-size: 0.6875rem !important;
}
.contact-info .section-title {
font-size: 1.125rem !important;
}
/* Titres généraux */
.section-title,
.light-title {
font-size: 1.125rem;
}
.section-badge {
font-size: 0.5rem;
}
/* WhatsApp */
.whatsapp-float {
width: 44px;
height: 44px;
bottom: 12px;
right: 12px;
}
.whatsapp-float svg {
width: 20px;
height: 20px;
}
/* Particules désactivées sur très petit écran */
.hero-section .particles {
display: none;
}
/* fullPage nav dots - Plus petits */
#fp-nav {
right: 0.25rem !important;
bottom: 60px !important;
}
#fp-nav ul li a span {
width: 5px !important;
height: 5px !important;
}
}
/* ============================================
ORIENTATION PAYSAGE MOBILE - HERO OPTIMISÉ
============================================ */
@media (max-width: 768px) and (orientation: landscape) {
.section-content {
padding-top: 50px;
padding-bottom: 20px;
}
/* Hero en paysage - Layout horizontal optimisé */
.hero-section .section-content {
padding: 45px 20px 15px 20px;
min-height: 100vh;
}
.hero-content {
padding: 0 10px;
}
.hero-badge {
margin-bottom: 10px;
font-size: 0.625rem;
}
.hero-title {
font-size: 1.25rem;
margin-bottom: 8px;
}
.hero-subtitle {
font-size: 0.75rem;
margin-bottom: 15px;
}
/* Boutons en ligne en paysage */
.hero-cta {
flex-direction: row;
gap: 12px;
margin-bottom: 15px;
}
.hero-cta .btn {
width: auto;
flex: 1;
max-width: 200px;
min-height: 40px;
padding: 8px 16px;
font-size: 0.8125rem;
}
/* Stats en ligne compacte */
.hero-stats {
flex-direction: row;
flex-wrap: nowrap;
gap: 30px;
padding-top: 12px;
}
.stat {
min-width: auto;
border-bottom: none !important;
padding: 0;
}
.stat-number {
font-size: 1.125rem;
}
.stat-label {
font-size: 0.5625rem;
}
/* Masquer scroll indicator en paysage */
.scroll-indicator {
display: none;
}
/* Particules réduites */
.hero-section .particles {
opacity: 0.3;
}
/* WhatsApp plus petit en paysage */
.whatsapp-float {
width: 40px;
height: 40px;
bottom: 10px;
right: 10px;
}
.whatsapp-float svg {
width: 18px;
height: 18px;
}
/* 2 colonnes en paysage */
.services-grid,
.process-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================
MODAL SERVICE - STYLES & ANIMATIONS PREMIUM
============================================ */
/* Ajouter le curseur pointer et effet hover sur les cards cliquables */
.service-card.clickable {
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: visible;
}
.service-card.clickable::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0, 217, 163, 0.05) 0%, rgba(30, 58, 95, 0.05) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.service-card.clickable:hover::before {
opacity: 1;
}
.service-card.clickable:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.15),
0 0 40px rgba(0, 217, 163, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
/* CTA "En savoir plus" dans les cards */
.card-cta {
display: flex;
align-items: center;
gap: 0.375rem;
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: var(--primary);
font-weight: 600;
font-size: 0.75rem;
opacity: 0.8;
transition: all 0.3s ease;
}
.service-card.clickable:hover .card-cta {
opacity: 1;
gap: 0.75rem;
}
.card-cta svg {
transition: transform 0.3s ease;
}
.service-card.clickable:hover .card-cta svg {
transform: translateX(3px);
}
/* ============================================
MODAL STRUCTURE
============================================ */
.service-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: 2rem;
}
.service-modal.active {
display: flex;
}
.modal-overlay {
position: absolute;
inset: 0;
background: rgba(10, 22, 40, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
opacity: 0;
transition: opacity 0.4s ease;
}
.service-modal.active .modal-overlay {
opacity: 1;
}
.modal-container {
position: relative;
width: 100%;
max-width: 900px;
max-height: 90vh;
background: linear-gradient(135deg, rgba(20, 35, 60, 0.95) 0%, rgba(15, 25, 45, 0.95) 100%);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.3),
0 0 80px rgba(0, 217, 163, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
overflow: hidden;
opacity: 0;
transform: scale(0.9) translateY(20px);
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-modal.active .modal-container {
opacity: 1;
transform: scale(1) translateY(0);
}
.modal-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
z-index: 10;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50%;
color: var(--white);
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.modal-close:hover {
background: rgba(255, 255, 255, 0.2);
transform: rotate(90deg) scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.modal-content {
max-height: 90vh;
overflow-y: auto;
padding: 3rem;
scrollbar-width: thin;
scrollbar-color: rgba(0, 217, 163, 0.5) transparent;
}
.modal-content::-webkit-scrollbar {
width: 8px;
}
.modal-content::-webkit-scrollbar-track {
background: transparent;
}
.modal-content::-webkit-scrollbar-thumb {
background: rgba(0, 217, 163, 0.5);
border-radius: 10px;
}
.modal-content::-webkit-scrollbar-thumb:hover {
background: rgba(0, 217, 163, 0.7);
}
/* ============================================
MODAL HEADER
============================================ */
.modal-header {
display: flex;
gap: 1.5rem;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-icon {
width: 80px;
height: 80px;
min-width: 80px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(0, 217, 163, 0.2) 0%, rgba(30, 58, 95, 0.2) 100%);
border: 2px solid rgba(0, 217, 163, 0.3);
border-radius: 20px;
color: var(--primary);
position: relative;
}
.modal-icon.featured-modal {
background: linear-gradient(135deg, rgba(0, 217, 163, 0.3) 0%, rgba(0, 185, 138, 0.3) 100%);
border-color: var(--primary);
box-shadow: 0 0 30px rgba(0, 217, 163, 0.3);
}
.modal-popular-badge {
position: absolute;
top: -8px;
right: -8px;
background: var(--gradient-primary);
color: white;
font-size: 0.625rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.modal-badge {
display: inline-block;
padding: 0.375rem 0.875rem;
background: rgba(0, 217, 163, 0.1);
border: 1px solid rgba(0, 217, 163, 0.3);
border-radius: 20px;
color: var(--primary);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.75rem;
}
.modal-title {
font-size: 2rem;
font-weight: 900;
color: var(--white);
margin-bottom: 0.5rem;
line-height: 1.2;
}
.modal-subtitle {
font-size: 1.125rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
}
/* ============================================
MODAL BODY
============================================ */
.modal-body {
display: flex;
flex-direction: column;
gap: 2rem;
}
.modal-section h3 {
font-size: 1.25rem;
font-weight: 700;
color: var(--white);
margin-bottom: 1rem;
}
.modal-section p {
color: rgba(255, 255, 255, 0.8);
line-height: 1.7;
font-size: 1rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
.feature-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: rgba(255, 255, 255, 0.9);
font-size: 0.9375rem;
transition: all 0.3s ease;
}
.feature-item:hover {
background: rgba(0, 217, 163, 0.1);
border-color: rgba(0, 217, 163, 0.3);
transform: translateX(5px);
}
.feature-item svg {
min-width: 20px;
color: var(--primary);
}
.tech-tags {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.tech-tags span {
padding: 0.5rem 1rem;
background: rgba(0, 217, 163, 0.1);
border: 1px solid rgba(0, 217, 163, 0.2);
border-radius: 20px;
color: var(--primary);
font-size: 0.875rem;
font-weight: 600;
transition: all 0.3s ease;
}
.tech-tags span:hover {
background: rgba(0, 217, 163, 0.2);
transform: translateY(-2px);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
}
.stat-card {
text-align: center;
padding: 1.5rem;
background: rgba(0, 217, 163, 0.1);
border: 2px solid rgba(0, 217, 163, 0.2);
border-radius: 16px;
transition: all 0.3s ease;
}
.stat-card:hover {
background: rgba(0, 217, 163, 0.15);
border-color: rgba(0, 217, 163, 0.4);
transform: translateY(-5px);
}
.stat-number {
font-size: 2rem;
font-weight: 900;
color: var(--primary);
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.7);
}
.projects-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.project-mini {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
transition: all 0.3s ease;
}
.project-mini:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateX(10px);
}
.project-mini-icon {
width: 50px;
height: 50px;
min-width: 50px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 217, 163, 0.2);
border-radius: 12px;
font-size: 1.5rem;
}
.project-mini strong {
display: block;
color: var(--white);
margin-bottom: 0.25rem;
}
.project-mini p {
color: rgba(255, 255, 255, 0.6);
font-size: 0.875rem;
margin: 0;
}
/* ============================================
MODAL FOOTER
============================================ */
.modal-footer {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-cta {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
background: var(--gradient-primary);
color: var(--white);
font-weight: 700;
font-size: 1rem;
border-radius: 50px;
box-shadow:
0 8px 20px rgba(0, 217, 163, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
}
.modal-cta:hover {
transform: translateY(-3px) scale(1.05);
box-shadow:
0 12px 30px rgba(0, 217, 163, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.modal-cta svg {
transition: transform 0.3s ease;
}
.modal-cta:hover svg {
transform: translateX(5px);
}
/* ============================================
RESPONSIVE MODAL - REFONTE COMPLÈTE
============================================ */
@media (max-width: 1024px) {
.service-modal {
padding: 1.5rem;
}
.modal-container {
max-width: 95%;
}
.modal-content {
padding: 2.5rem 2rem;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.service-modal {
padding: 0.75rem;
align-items: flex-start;
}
.modal-container {
max-height: 95vh;
border-radius: 16px;
margin-top: 2rem;
}
.modal-content {
padding: 1.5rem 1rem;
max-height: calc(95vh - 2rem);
}
.modal-header {
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
}
.modal-icon {
width: 56px;
height: 56px;
min-width: 56px;
}
.modal-icon svg {
width: 28px;
height: 28px;
}
.modal-badge {
font-size: 0.625rem;
padding: 0.25rem 0.625rem;
}
.modal-title {
font-size: 1.375rem;
}
.modal-subtitle {
font-size: 0.9375rem;
line-height: 1.5;
}
.modal-body {
gap: 1.25rem;
}
.modal-section h3 {
font-size: 1.0625rem;
margin-bottom: 0.75rem;
}
.modal-section p {
font-size: 0.9375rem;
line-height: 1.6;
}
.features-grid {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.feature-item {
padding: 0.75rem;
font-size: 0.875rem;
gap: 0.625rem;
}
.feature-item svg {
width: 18px;
height: 18px;
min-width: 18px;
}
.tech-tags {
gap: 0.5rem;
}
.tech-tags span {
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.stat-card {
padding: 1rem;
}
.stat-card .stat-number {
font-size: 1.5rem;
}
.stat-card .stat-label {
font-size: 0.75rem;
}
.projects-list {
gap: 0.75rem;
}
.project-mini {
padding: 1rem;
gap: 0.75rem;
}
.project-mini-icon {
width: 44px;
height: 44px;
min-width: 44px;
font-size: 1.25rem;
}
.project-mini strong {
font-size: 0.9375rem;
}
.project-mini p {
font-size: 0.8125rem;
}
.modal-footer {
margin-top: 1.5rem;
padding-top: 1.5rem;
}
.modal-cta {
width: 100%;
justify-content: center;
padding: 0.875rem 1.5rem;
font-size: 0.9375rem;
}
.modal-close {
width: 36px;
height: 36px;
top: 0.75rem;
right: 0.75rem;
}
.modal-close svg {
width: 18px;
height: 18px;
}
}
@media (max-width: 480px) {
.service-modal {
padding: 0.5rem;
}
.modal-container {
border-radius: 12px;
margin-top: 1rem;
}
.modal-content {
padding: 1.25rem 0.875rem;
}
.modal-icon {
width: 48px;
height: 48px;
min-width: 48px;
}
.modal-icon svg {
width: 24px;
height: 24px;
}
.modal-title {
font-size: 1.25rem;
}
.modal-subtitle {
font-size: 0.875rem;
}
.modal-section h3 {
font-size: 1rem;
}
.modal-section p {
font-size: 0.875rem;
}
.feature-item {
padding: 0.625rem;
font-size: 0.8125rem;
}
.stats-grid {
grid-template-columns: 1fr;
}
.stat-card .stat-number {
font-size: 1.375rem;
}
.project-mini-icon {
width: 40px;
height: 40px;
min-width: 40px;
font-size: 1.125rem;
}
.modal-cta {
padding: 0.75rem 1.25rem;
font-size: 0.875rem;
}
.modal-close {
width: 32px;
height: 32px;
top: 0.625rem;
right: 0.625rem;
}
.modal-close svg {
width: 16px;
height: 16px;
}
}
/* Review Modal Responsive */
@media (max-width: 768px) {
.review-modal-container {
width: 95%;
max-height: 90vh;
padding: var(--spacing-md);
}
.review-modal-avatar {
width: 48px;
height: 48px;
font-size: 1rem;
}
.review-modal-name {
font-size: 1rem;
}
.review-modal-text {
font-size: 0.9375rem;
}
}
.modal-animate {
opacity: 0;
transform: translateY(20px);
}
.modal-animate.show {
animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-animate:nth-child(1) { animation-delay: 0.1s; }
.modal-animate:nth-child(2) { animation-delay: 0.2s; }
.modal-animate:nth-child(3) { animation-delay: 0.3s; }
.modal-animate:nth-child(4) { animation-delay: 0.4s; }
.modal-animate:nth-child(5) { animation-delay: 0.5s; }
/* ============================================
CORRECTIF ESPACE HAUT CONTACT (MOBILE)
============================================ */
@media (max-width: 768px) {
/* Ciblage précis de la section content dans la slide contact */
.swiper-slide.contact-section .section-content,
.contact-section .section-content {
/* Augmentation du padding-top (valeur actuelle: 100px -> nouvelle: 160px) */
padding-top: 100px !important;
/* On s'assure que le scroll reste fluide */
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
}
/* ============================================================
CORRECTIF FINAL : ALIGNEMENT EMAIL & TÉLÉPHONE
Objectif : Alignement Gauche + Centrage Vertical Strict
============================================================ */
/* 1. INPUTS : On remet le texte à GAUCHE */
.contact-form input[type="email"],
.contact-form input[type="tel"] {
text-align: left !important;
}
/* 2. LABELS AU REPOS : Gauche + Centré verticalement */
.form-group label[for="email"],
.form-group label[for="phone"] {
/* Alignement horizontal GAUCHE standard */
left: 1rem !important;
right: auto !important;
text-align: left !important;
width: auto !important; /* Annule l'étirement précédent */
/* Centrage VERTICAL mathématique (top 50% - 50% hauteur) */
top: 50% !important;
transform: translateY(-50%) !important;
}
/* 3. LABELS FLOTTANTS (Focus ou Rempli) : On restaure l'animation */
/* Important : On doit annuler le centrage vertical pour que le label monte */
.form-group input[type="email"]:focus + label,
.form-group input[type="email"]:not(:placeholder-shown) + label,
.form-group input[type="tel"]:focus + label,
.form-group input[type="tel"]:not(:placeholder-shown) + label {
/* Position haute (floating) */
top: -0.5rem !important;
left: 0.75rem !important;
/* ANNULATION du centrage vertical pour l'état flottant */
transform: none !important;
}
/* 2) CARTES WHATSAPP / EMAIL (MOBILE UNIQUEMENT)
Aligner le contenu à gauche sur mobile */
@media (max-width: 768px) {
.contact-method {
/* Force l'alignement des éléments flex (icône + texte) au début (gauche) */
justify-content: flex-start !important;
/* Force le texte à l'intérieur à s'aligner à gauche */
text-align: left !important;
}
/* Sécurité supplémentaire pour les textes internes */
.contact-method .method-label,
.contact-method .method-value {
text-align: left !important;
}
}
/* ============================================================
OPTIMISATION ULTRA-COMPACTE TÉMOIGNAGES (DESKTOP > 1024px)
Version densifiée pour gagner un maximum de place
============================================================ */
@media (min-width: 1025px) {
/* 1. Zone de contenu globale */
.testimonials-section .section-content {
padding-top: 80px !important; /* Réduit de 100px à 40px pour remonter le tout */
justify-content: center !important;
gap: 0.5rem !important; /* Espace minimal entre les éléments */
}
/* 2. En-tête de section (Titre, badge...) */
.testimonials-section .section-header {
margin-bottom: 1rem !important;
}
.testimonials-section .section-badge { margin-bottom: 0.25rem !important; }
.testimonials-section .section-title { margin-bottom: 0.25rem !important; line-height: 1 !important; }
.testimonials-section .google-rating-header { margin-top: 0.25rem !important; }
.testimonials-section .google-rating-badge { padding: 0.25rem 1rem !important; }
/* 3. CARTES D'AVIS : RÉDUCTION MAXIMALE */
.google-review-card,
.testimonial-card {
/* Padding interne très fin (16px env.) */
padding: 1rem 1.25rem !important;
min-height: 0 !important; /* Supprime toute hauteur minimale imposée */
}
/* Avatar plus petit */
.reviewer-avatar, .author-avatar {
width: 32px !important;
height: 32px !important;
font-size: 0.8rem !important;
}
/* Nom et date plus petits */
.reviewer-name, .author-name { font-size: 0.9rem !important; margin-bottom: 0 !important; }
.review-date, .author-role { font-size: 0.75rem !important; }
/* Étoiles plus compactes */
.stars, .review-stars {
font-size: 0.8rem !important;
margin-bottom: 0.25rem !important;
}
/* TEXTE : Le point clé pour la hauteur */
.review-text,
.testimonial-text {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
font-size: 0.85rem !important;
line-height: 1.3 !important; /* Interligne serré */
/* FORCE UNE HAUTEUR MAXIMALE EN COUPANT LE TEXTE TROP LONG */
display: -webkit-box;
-webkit-line-clamp: 4; /* Affiche maximum 4 lignes de texte */
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* ============================================================
CORRECTIF HERO / ACCUEIL (MOBILE UNIQUEMENT)
Mise en page : Marges latérales + KPIs sur 2 lignes
============================================================ */
@media (max-width: 768px) {
/* 1. Marges latérales pour décoller le contenu des bords */
/* On cible spécifiquement le conteneur de la slide Accueil */
.hero-section .hero-content {
padding-left: 24px !important;
padding-right: 24px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* 2. Réorganisation des KPIs (Chiffres clés) */
.hero-section .hero-stats {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 15px !important; /* Espacement propre entre les éléments */
width: 100% !important;
}
/* Les éléments : Configuration pour tenir à 2 par ligne */
.hero-section .hero-stats .stat {
/* 50% de largeur moins la moitié du gap pour tenir sur une ligne */
flex: 0 0 calc(50% - 10px) !important;
max-width: calc(50% - 10px) !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* LE 3ÈME KPI : Force le passage à la ligne suivante */
.hero-section .hero-stats .stat:nth-child(3) {
flex: 0 0 100% !important; /* Prend toute la largeur disponible */
max-width: 100% !important;
margin-top: 5px !important; /* Petit espace visuel au-dessus */
display: flex;
flex-direction: column;
align-items: center;
}
}
/* ============================================================
CORRECTIF NAVIGATION SWIPER MOBILE (POINTS EN BAS)
Force l'affichage horizontal en bas de l'écran
============================================================ */
@media (max-width: 768px) {
/* Ciblage précis incluant la classe verticale ajoutée par JS */
.swiper-pagination,
.swiper-pagination.swiper-pagination-bullets,
.swiper-pagination.swiper-pagination-vertical {
/* 1. Reset total de la position desktop (droite/verticale) */
position: fixed !important;
top: auto !important;
right: auto !important;
left: 50% !important;
bottom: 24px !important; /* Marge du bas */
/* 2. Centrage horizontal et layout */
transform: translateX(-50%) !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
/* 3. Force l'alignement horizontal des points */
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important; /* Espace entre les bullets */
}
/* 4. Nettoyage des bullets individuels */
.swiper-pagination .swiper-pagination-bullet {
margin: 0 !important; /* On utilise gap sur le parent à la place */
display: block !important;
/* (Optionnel) Taille légèrement augmentée pour le tactile */
/* width: 10px !important; height: 10px !important; */
}
}
/* ============================================
ANIMATION PULSE - BADGE HÉRO
Effet : Respiration + Halo lumineux
============================================ */
/* 1. Définition de l'animation */
@keyframes hlPulseGlow {
0% {
/* État initial : Taille normale, ombre concentrée */
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 208, 132, 0.7); /* Vert avec opacité */
}
70% {
/* Pic de l'animation : Légèrement plus gros + Halo étendu et transparent */
transform: scale(1.15);
box-shadow: 0 0 0 6px rgba(0, 208, 132, 0); /* L'ombre s'écarte et disparaît */
}
100% {
/* Retour au calme */
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 208, 132, 0);
}
}
/* 2. Application sur le point vert */
.hero-badge .pulse-dot {
/* On s'assure que c'est bien un cercle */
border-radius: 50%;
/* Lancement de l'animation (2s = rythme calme) */
animation: hlPulseGlow 2s infinite ease-in-out;
/* Optimisation pour fluidité mobile */
will-change: transform, box-shadow;
}
/* 3. Accessibilité (Respect des préférences utilisateur) */
@media (prefers-reduced-motion: reduce) {
.hero-badge .pulse-dot {
animation: none !important;
}
}
/* ============================================
MESSAGES DE RETOUR DU FORMULAIRE
Styles pour succès et erreurs
============================================ */
/* Container du message */
.form-message {
margin-top: 1.5rem;
padding: 1rem 1.25rem;
border-radius: 8px;
font-size: 0.95rem;
line-height: 1.5;
display: none;
animation: slideInMessage 0.3s ease;
}
/* Animation d'apparition */
@keyframes slideInMessage {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Message de succès */
.form-message.success {
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
color: #059669;
}
.form-message.success::before {
content: "✓ ";
font-weight: bold;
margin-right: 0.5rem;
}
/* Message d'erreur */
.form-message.error {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #dc2626;
}
.form-message.error::before {
content: "✗ ";
font-weight: bold;
margin-right: 0.5rem;
}
/* État du bouton pendant l'envoi */
.contact-form button[type="submit"]:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.contact-form button[type="submit"]:disabled svg {
animation: rotate 1s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Animation de succès du bouton */
.contact-form button[type="submit"].success-animation {
background: #10b981 !important;
transform: scale(1.05);
transition: all 0.3s ease;
}
/* Validation en temps réel */
.contact-form input.invalid,
.contact-form textarea.invalid {
border-color: #ef4444 !important;
}
.contact-form input.invalid:focus,
.contact-form textarea.invalid:focus {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}
/* Responsive */
@media (max-width: 768px) {
.form-message {
font-size: 0.9rem;
padding: 0.875rem 1rem;
}
}