Romain Fillatre — Développeur WordPress · Automatisations · Conversion
rf
Romain Fillatre
06 50 74 28 50
Des sites qui convertissent,des workflows qui travaillent pour vous.
Développeur WordPress freelance, je conçois des sites rapides, des automatisations sur-mesure et des tunnels de conversion qui transforment vos visiteurs en clients. Du temps de dev disponible en packs d'heures — payable en avance, utilisable à votre rythme.
✓ RGPD by design
🇫🇷 100% hébergé France
⚡ Réponse sous 24h
🔒 Sans engagement
13 ans
d'expérience WordPress
RGPD
by design, systématiquement
Ce que je fais
Trois expertises, un seul interlocuteur
Dev, automatisations et conversion — des compétences complémentaires qui travaillent ensemble pour vous faire gagner du temps et des clients.
🎯
Conversion & Acquisition
Transformer vos visiteurs en clients
Landing pages optimisées, tunnels de vente, tracking RGPD propriétaire, A/B testing. Je travaille sur le résultat business — pas sur des clics.
Campagnes Google Ads & Meta orientées ROI
Tracking first-party, sans cookies tiers
Pages d'atterrissage à fort taux de conversion
Reporting clair, chiffres compréhensibles
🔄
Automatisations
Votre équipe silencieuse qui ne dort jamais
Make, n8n, Gravity Forms + webhooks. Je connecte vos outils et automatise les tâches répétitives pour que vous vous concentriez sur ce qui compte.
Onboarding client automatique
Sync CRM / formulaires / email
Notifications et alertes sur-mesure
Agents IA intégrés à vos process
⚡
Dev WordPress
Des sites solides, rapides, maintenables
Bricks Builder, Gravity Forms, intégrations API sur-mesure. Code propre, performances Core Web Vitals, sites faciles à maintenir dans la durée.
Bricks Builder — HTML propre, sans bloat
Gravity Forms — formulaires complexes
Intégrations API tierces
Optimisation performance & sécurité
Packs d'heures
Du temps de dev disponible, payable en avance
Achetez un bloc d'heures, utilisez-les à votre rythme sur les prochains mois. Pas d'abonnement, pas de surprise — vous savez exactement ce que vous payez.
🌱
Starter
Pour tester et avancer
450 €
5 heures · utilisables sur 3 mois
Idéal pour une tâche précise
Modifications, corrections, évolutions
Priorité planning standard
🚀
Pro
Pour avancer vite et bien
850 €
10 heures · utilisables sur 6 mois
Accès prioritaire au planning
Projets multi-étapes
Dev + automatisations + conversion
Rapport d'avancement inclus
🗓️
Journée dédiée
Focus total sur un objectif
600 €
7 heures · date fixée ensemble
Une journée entière dédiée
Idéal pour un lancement ou refonte
Livraison en fin de journée
⚡
Sprint
Pour les projets urgents
1 600 €
3 jours consécutifs · livraison rapide
3 jours bloqués pour vous seul
Support 30 jours post-sprint inclus
Idéal pour un projet complet
Résultats visibles en une semaine
Pourquoi des packs ?
Un modèle pensé pour votre liberté
Transparence des coûts
Prix fixé à l'avance
Flexibilité d'utilisation
À votre rythme
Relation de confiance
Long terme
* Heures utilisables sur vos projets WordPress, automatisations et conversion.
Pourquoi travailler avec moi
Un seul interlocuteur,
🇫🇷
100% France, RGPD natif
Serveurs hébergés en France, données jamais transmises à des tiers hors UE. Conformité RGPD intégrée dès la conception, pas ajoutée en fin de projet.
🔗
Dev + Automation + Conversion
Pas besoin de coordonner trois prestataires différents. Je conçois le site, j'automatise les process et j'optimise la conversion — en cohérence totale.
📊
Orienté résultats, pas livrables
Je travaille sur ce qui génère de la valeur pour votre business. Chaque heure est justifiée par un impact mesurable, pas par une liste de tâches.
Comment ça marche
De l'achat à la livraison en 4 étapes
Vous choisissez votre pack
Starter, Pro, Journée ou Sprint — selon votre besoin et votre budget. Paiement en avance, pas de mauvaise surprise.
On cale les priorités
Un échange de 20 minutes pour aligner les objectifs, définir les tâches et planifier les premières interventions.
Je travaille, vous avancez
Chaque heure consommée est tracée et documentée. Vous voyez exactement où en est votre projet, à tout moment.
Livraison et suivi
Chaque livraison est testée et documentée. Les heures restantes restent disponibles pour vos prochains besoins.
Ils me font confiance
Ce que mes clients disent
★★★★★
"Romain a complètement refait notre site et mis en place des automatisations Make qu'on n'osait même pas imaginer. Notre onboarding client est maintenant 100% automatique. Un gain de temps énorme."
AH
Arnaud H.
Directeur, Artemys Habitat
★★★★★
"On cherchait quelqu'un qui comprenne à la fois le dev et le SEO technique. Romain a restructuré notre site et nos campagnes Ads en parallèle — le trafic qualifié a vraiment augmenté."
★★★★★
"Le pack Pro est parfait pour nous. On utilise les heures au fur et à mesure de nos besoins, sans devoir relancer un devis à chaque fois. Simple, efficace, réactif."
Stack technique
✓ WordPress
✓ Bricks Builder
✓ Gravity Forms
✓ n8n
✓ Make
✓ Agents IA
✓ Google Ads
✓ RGPD by design
✓ Hébergement France
Un projet en tête ?
Parlons-en — si je ne réponds pas, je vous rappelle sous 2h.
/*
* ╔══════════════════════════════════════════════════════════════════════╗
* ║ ARTISAN CORE CSS · v1.0 ║
* ║ Fichier CSS unique pour tous les templates service pro ║
* ╠══════════════════════════════════════════════════════════════════════╣
* ║ ║
* ║ PRINCIPE DE THÉMISATION ║
* ║ ───────────────────────────────────────────────────────────────── ║
* ║ Ce fichier ne se modifie jamais. ║
* ║ Le thème est configuré par un bloc :root dans le HTML : ║
* ║ ║
* ║ ║
* ║ ║
* ║ OU via l'attribut data-theme sur : ║
* ║ → accent teal ║
* ║ → accent or ║
* ║ → accent rouge/urgence ║
* ║ → les variables :root surchargeront ║
* ║ ║
* ║ SECTIONS PRÉSENTES/ABSENTES ║
* ║ ───────────────────────────────────────────────────────────────── ║
* ║ Supprimer simplement le bloc HTML de la section non souhaitée. ║
* ║ Le CSS de la section devient inactif sans erreur. ║
* ║ ║
* ║ CLASSES DE LAYOUT VARIANTS (optionnelles) ║
* ║ ───────────────────────────────────────────────────────────────── ║
* ║ .sp-hero--stacked Hero en 1 colonne (sans formulaire latéral) ║
* ║ .sp-variants--2col Grille variantes en 2 colonnes ║
* ║ .sp-variants--1col Grille variantes en 1 colonne ║
* ║ .sp-steps--3 Process en 3 étapes max ║
* ║ .sp-steps--4 Process en 4 étapes max ║
* ║ .sp-reviews--2col Témoignages en 2 colonnes ║
* ║ .sp-aides--2col Aides en 2 colonnes ║
* ║ ║
* ║ NOTE BRICKS BUILDER ║
* ║ ───────────────────────────────────────────────────────────────── ║
* ║ html { font-size: 62.5% } est commenté en bas de ce fichier. ║
* ║ Il est automatiquement géré par Bricks Builder. ║
* ║ Pour une page HTML standalone (hors Bricks), décommenter. ║
* ║ ║
* ╚══════════════════════════════════════════════════════════════════════╝
*/
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. VARIABLES & THÈME
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
/* ── Accent — LA variable à changer pour personnaliser ── */
--sp-accent: #ffc72c; /* Couleur principale : gold par défaut */
--sp-accent-dark: #e6b020; /* Hover accent */
--sp-accent-dim: rgba(255,199,44,.12); /* Fond badges, icônes */
--sp-accent-glow: rgba(255,199,44,.08); /* Lueurs subtiles */
--sp-accent-border: rgba(255,199,44,.25); /* Bordures accent */
/* ── Fond & Structure ── */
--sp-bg-deep: #0f1520; /* Fond général page */
--sp-bg-nav: #1b2236; /* Barre de navigation */
--sp-bg-section: #1b2236; /* Sections alternées (dark) */
--sp-bg-card: #1e2a40; /* Cards contenu */
--sp-bg-form: #242e47; /* Form card */
--sp-bg-mid: #242e47; /* Intermédiaire */
/* ── Texte ── */
--sp-white: #ffffff;
--sp-text: #e8eaf0; /* Texte secondaire */
--sp-muted: #8b93a8; /* Texte discret */
/* ── Polices — surcharger dans le bloc thème ── */
--sp-font-title: 'Barlow', sans-serif;
--sp-font-body: 'DM Sans', sans-serif;
/* ── Typographie scale (base : 1rem = 10px) ── */
--sp-fs-2xs: 1.05rem; /* 10.5px */
--sp-fs-xs: 1.15rem; /* 11.5px */
--sp-fs-sm: 1.2rem; /* 12px */
--sp-fs-sm2: 1.25rem; /* 12.5px */
--sp-fs-sm3: 1.3rem; /* 13px */
--sp-fs-sm4: 1.35rem; /* 13.5px */
--sp-fs-md: 1.4rem; /* 14px */
--sp-fs-md2: 1.45rem; /* 14.5px */
--sp-fs-base: 1.6rem; /* 16px */
--sp-fs-md3: 1.7rem; /* 17px */
--sp-fs-lg: 1.85rem; /* 18.5px */
--sp-fs-xl: 2.4rem; /* 24px */
--sp-fs-2xl: 2.7rem; /* 27px */
--sp-fs-3xl: 3.05rem; /* 30.5px */
--sp-fs-4xl: 3.2rem; /* 32px */
--sp-fs-5xl: 4.15rem; /* 41.5px */
--sp-fs-hero: 6.1rem; /* 61px */
/* ── Radius ── */
--sp-radius: 12px;
--sp-radius-lg: 20px;
--sp-radius-xl: 24px;
/* ── Dégradés calculés depuis --sp-accent ── */
/* Ces variables sont redéfinies par les presets data-theme ci-dessous */
--sp-form-gradient: linear-gradient(90deg, var(--sp-accent), #ffdd80);
--sp-bar-gradient: linear-gradient(90deg, var(--sp-accent), #ffdd80);
--sp-avatar-gradient: linear-gradient(135deg, var(--sp-accent), var(--sp-bg-mid));
--sp-cta-gradient: linear-gradient(180deg, transparent 0%, rgba(255,199,44,.04) 100%);
/* ── Lueurs fond parallax ── */
--sp-glow-1: rgba(255,199,44,.09);
--sp-glow-2: rgba(0,196,180,.07);
/* ── Sections ── */
--sp-section-py: 80px;
--sp-container: 1100px;
}
/* ── PRESETS data-theme ── */
[data-theme="gold"],
[data-theme="gold"] :root {
--sp-accent: #ffc72c;
--sp-accent-dark: #e6b020;
--sp-accent-dim: rgba(255,199,44,.12);
--sp-accent-glow: rgba(255,199,44,.08);
--sp-accent-border: rgba(255,199,44,.25);
--sp-form-gradient: linear-gradient(90deg, #ffc72c, #ffdd80);
--sp-bar-gradient: linear-gradient(90deg, #ffc72c, #ffdd80);
--sp-avatar-gradient:linear-gradient(135deg, #ffc72c, var(--sp-bg-mid));
--sp-cta-gradient: linear-gradient(180deg, transparent 0%, rgba(255,199,44,.04) 100%);
--sp-glow-1: rgba(255,199,44,.09);
--sp-glow-2: rgba(0,196,180,.07);
}
[data-theme="teal"],
[data-theme="teal"] :root {
--sp-accent: #00c4b4;
--sp-accent-dark: #00a89a;
--sp-accent-dim: rgba(0,196,180,.12);
--sp-accent-glow: rgba(0,196,180,.08);
--sp-accent-border: rgba(0,196,180,.25);
--sp-form-gradient: linear-gradient(90deg, #00c4b4, #ffc72c);
--sp-bar-gradient: linear-gradient(90deg, #00c4b4, #80ffe8);
--sp-avatar-gradient:linear-gradient(135deg, #00c4b4, var(--sp-bg-mid));
--sp-cta-gradient: linear-gradient(180deg, transparent 0%, rgba(0,196,180,.04) 100%);
--sp-glow-1: rgba(0,196,180,.09);
--sp-glow-2: rgba(255,199,44,.07);
}
[data-theme="red"],
[data-theme="red"] :root {
--sp-accent: #ff4d4d;
--sp-accent-dark: #e63c3c;
--sp-accent-dim: rgba(255,77,77,.12);
--sp-accent-glow: rgba(255,77,77,.08);
--sp-accent-border: rgba(255,77,77,.25);
--sp-form-gradient: linear-gradient(90deg, #ff4d4d, #ffc72c);
--sp-bar-gradient: linear-gradient(90deg, #ff4d4d, #ff9966);
--sp-avatar-gradient:linear-gradient(135deg, #ff4d4d, var(--sp-bg-mid));
--sp-cta-gradient: linear-gradient(180deg, transparent 0%, rgba(255,77,77,.04) 100%);
--sp-glow-1: rgba(255,77,77,.08);
--sp-glow-2: rgba(0,196,180,.07);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
2. RESET & BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* html { font-size: 62.5%; } */
/* ↑ Commenté pour Bricks Builder. Décommenter pour standalone. */
body {
font-family: var(--sp-font-body);
font-size: var(--sp-fs-base);
background: var(--sp-bg-deep);
color: var(--sp-white);
overflow-x: hidden;
padding-top: 56px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
3. FOND PARALLAX
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-bg {
position: fixed;
inset: 0;
z-index: -1;
background: linear-gradient(145deg, #0d1420 0%, #111827 50%, #0a1628 100%);
overflow: hidden;
}
/* Lueur haut-droite */
.sp-bg::before {
content: '';
position: absolute;
top: -10%; right: -5%;
width: 650px; height: 650px;
border-radius: 50%;
background: radial-gradient(circle, var(--sp-glow-1) 0%, transparent 65%);
transition: background .4s;
}
/* Lueur bas-gauche */
.sp-bg::after {
content: '';
position: absolute;
bottom: 10%; left: -10%;
width: 500px; height: 500px;
border-radius: 50%;
background: radial-gradient(circle, var(--sp-glow-2) 0%, transparent 65%);
transition: background .4s;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
4. NAVIGATION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
height: 56px;
background: var(--sp-bg-nav);
border-bottom: 2px solid var(--sp-accent);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
box-shadow: 0 4px 24px rgba(0,0,0,.4);
transition: border-color .3s;
}
.sp-nav-logo {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--sp-font-title);
font-weight: 800;
font-size: var(--sp-fs-lg);
color: var(--sp-white);
letter-spacing: -.02em;
}
.sp-nav-logo-icon {
width: 30px; height: 30px;
background: var(--sp-accent);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: var(--sp-fs-sm2);
color: var(--sp-bg-deep);
font-style: normal;
transition: background .3s;
}
.sp-nav-logo span { color: var(--sp-accent); transition: color .3s; }
.sp-nav-links {
display: flex;
align-items: center;
gap: 32px;
}
.sp-nav-links a {
font-size: var(--sp-fs-md2);
color: rgba(255,255,255,.65);
font-weight: 500;
transition: color .2s;
}
.sp-nav-links a:hover { color: var(--sp-white); }
.sp-nav-links a.sp-active { color: var(--sp-accent); }
.sp-nav-cta {
display: flex;
align-items: center;
gap: 8px;
background: var(--sp-accent);
color: var(--sp-bg-deep);
font-family: var(--sp-font-title);
font-weight: 700;
font-size: var(--sp-fs-md2);
padding: 8px 16px;
border-radius: 8px;
white-space: nowrap;
transition: background .2s, transform .15s;
}
.sp-nav-cta:hover {
background: var(--sp-accent-dark);
transform: scale(1.03);
}
/* Nav minimale (landing sans liens) */
.sp-nav--minimal .sp-nav-links { display: none; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
5. LAYOUT UTILITAIRES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-container {
max-width: var(--sp-container);
margin: 0 auto;
padding: 0 24px;
}
.sp-section-py {
padding-top: var(--sp-section-py);
padding-bottom: var(--sp-section-py);
}
.sp-section-dark { background: var(--sp-bg-section); }
.sp-section-band {
background: var(--sp-bg-section);
border-top: 1px solid rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,255,255,.06);
}
.sp-text-center { text-align: center; }
/* Utilitaires couleur */
.sp-color-accent { color: var(--sp-accent) !important; }
.sp-color-gold { color: #ffc72c !important; }
.sp-color-teal { color: #00c4b4 !important; }
.sp-color-muted { color: var(--sp-muted) !important; }
.sp-color-white { color: var(--sp-white) !important; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
6. TYPOGRAPHIE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-h1 {
font-family: var(--sp-font-title);
font-weight: 800;
font-size: clamp(var(--sp-fs-4xl), 4.5vw, var(--sp-fs-hero));
line-height: 1.06;
letter-spacing: -.04em;
color: var(--sp-white);
}
.sp-h2 {
font-family: var(--sp-font-title);
font-weight: 800;
font-size: clamp(var(--sp-fs-2xl), 3vw, var(--sp-fs-5xl));
line-height: 1.15;
letter-spacing: -.03em;
color: var(--sp-white);
}
.sp-section-label {
font-family: var(--sp-font-title);
font-size: var(--sp-fs-sm);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--sp-accent);
display: block;
margin-bottom: 12px;
transition: color .3s;
}
.sp-section-label--gold { color: #ffc72c !important; }
.sp-section-label--muted { color: var(--sp-muted) !important; }
.sp-section-sub {
font-size: var(--sp-fs-base);
color: var(--sp-muted);
line-height: 1.65;
max-width: 540px;
margin-bottom: 48px;
}
/* Texte dégradé accent */
.sp-gradient-text {
background: linear-gradient(90deg, var(--sp-accent), #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Texte gold constant (indépendant du thème) */
.sp-gold-text {
background: linear-gradient(90deg, #ffc72c, #ffdd80);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Couleur accent dans le texte */
.sp-accent-text { color: var(--sp-accent); transition: color .3s; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
7. BADGES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--sp-font-title);
font-weight: 600;
font-size: var(--sp-fs-sm);
letter-spacing: .08em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 100px;
border: 1px solid var(--sp-accent-border);
background: var(--sp-accent-dim);
color: var(--sp-accent);
margin-bottom: 28px;
transition: background .3s, border-color .3s, color .3s;
}
/* Badge gold fixe (indépendant du thème) */
.sp-badge--gold {
background: rgba(255,199,44,.12);
border-color: rgba(255,199,44,.25);
color: #ffc72c;
}
/* Badge teal fixe */
.sp-badge--teal {
background: rgba(0,196,180,.10);
border-color: rgba(0,196,180,.25);
color: #00c4b4;
}
/* Badge urgence fixe */
.sp-badge--urgent {
background: rgba(255,77,77,.10);
border-color: rgba(255,77,77,.25);
color: #ff4d4d;
}
/* Point clignotant dans le badge */
.sp-badge-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
animation: sp-pulse 2s infinite;
flex-shrink: 0;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
8. BOUTONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Bouton principal — TOUJOURS gold (jamais teal seul en CTA principal) */
.sp-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: #ffc72c;
color: #1b2236;
font-family: var(--sp-font-title);
font-weight: 700;
font-size: var(--sp-fs-base);
padding: 16px 32px;
border-radius: var(--sp-radius);
border: none;
cursor: pointer;
transition: background .2s, transform .15s, box-shadow .2s;
width: fit-content;
white-space: nowrap;
}
.sp-btn-primary:hover {
background: #e6b020;
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(255,199,44,.3);
}
.sp-btn-primary:active { transform: translateY(0); }
/* Bouton secondaire (téléphone, liens) */
.sp-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: transparent;
color: var(--sp-white);
font-family: var(--sp-font-title);
font-weight: 600;
font-size: var(--sp-fs-base);
padding: 14px 28px;
border-radius: var(--sp-radius);
border: 1.5px solid rgba(255,255,255,.2);
transition: border-color .2s, color .2s;
width: fit-content;
white-space: nowrap;
}
.sp-btn-secondary:hover {
border-color: #ffc72c;
color: #ffc72c;
}
/* Bouton accent (couleur thème) */
.sp-btn-accent {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--sp-accent);
color: var(--sp-bg-deep);
font-family: var(--sp-font-title);
font-weight: 700;
font-size: var(--sp-fs-base);
padding: 16px 32px;
border-radius: var(--sp-radius);
border: none;
cursor: pointer;
transition: background .2s, transform .15s;
width: fit-content;
}
.sp-btn-accent:hover {
background: var(--sp-accent-dark);
transform: translateY(-2px);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
9. FORMULAIRE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-form-card {
background: var(--sp-bg-form);
border-radius: var(--sp-radius-xl);
padding: 32px 28px;
border: 1px solid rgba(255,255,255,.06);
box-shadow: 0 24px 60px rgba(0,0,0,.4);
position: relative;
overflow: hidden;
}
/* Bande colorée en haut de la card — couleur thème */
.sp-form-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--sp-form-gradient);
}
.sp-form-title {
font-family: var(--sp-font-title);
font-size: var(--sp-fs-xl);
font-weight: 700;
color: var(--sp-white);
margin-bottom: 4px;
}
.sp-form-sub {
font-size: var(--sp-fs-sm4);
color: var(--sp-muted);
margin-bottom: 24px;
}
.sp-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.sp-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
.sp-field label {
font-size: var(--sp-fs-md);
font-weight: 600;
color: var(--sp-text);
}
.sp-field input,
.sp-field select,
.sp-field textarea {
background: rgba(255,255,255,.05);
border: 1.5px solid rgba(255,255,255,.1);
border-radius: var(--sp-radius);
color: var(--sp-white);
font-family: var(--sp-font-body);
font-size: var(--sp-fs-md2);
padding: 12px 14px;
transition: border-color .2s;
outline: none;
width: 100%;
}
.sp-field input::placeholder,
.sp-field textarea::placeholder { color: rgba(255,255,255,.2); }
.sp-field input:focus,
.sp-field select:focus,
.sp-field textarea:focus { border-color: var(--sp-accent); }
.sp-field select option { background: var(--sp-bg-mid); }
.sp-form-submit {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 24px;
background: #ffc72c;
color: #1b2236;
font-family: var(--sp-font-title);
font-size: var(--sp-fs-base);
font-weight: 700;
border: none;
border-radius: var(--sp-radius);
cursor: pointer;
transition: background .2s, transform .15s;
margin-top: 8px;
}
.sp-form-submit:hover {
background: #e6b020;
transform: translateY(-1px);
}
.sp-form-legal {
font-size: var(--sp-fs-2xs);
color: rgba(255,255,255,.25);
text-align: center;
margin-top: 12px;
line-height: 1.5;
}
/* État succès */
.sp-form-success {
display: none;
text-align: center;
padding: 24px 0;
}
.sp-form-success-icon { font-size: 3.6rem; margin-bottom: 12px; }
.sp-form-success h3 {
font-family: var(--sp-font-title);
font-size: var(--sp-fs-xl);
font-weight: 700;
margin-bottom: 8px;
}
.sp-form-success p {
font-size: var(--sp-fs-sm4);
color: var(--sp-text);
margin-bottom: 8px;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
10. HERO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-hero {
padding: 60px 0 80px;
}
/* Layout 2 colonnes (défaut) : texte + formulaire */
.sp-hero-inner {
display: grid;
grid-template-columns: 1fr 420px;
gap: 60px;
align-items: start;
max-width: var(--sp-container);
margin: 0 auto;
padding: 0 24px;
}
/* Variant stacked : 1 colonne centrée (sans formulaire côté) */
.sp-hero--stacked .sp-hero-inner {
grid-template-columns: 1fr;
max-width: 760px;
text-align: center;
}
.sp-hero--stacked .sp-hero-sub { max-width: 100%; margin-left: auto; margin-right: auto; }
.sp-hero--stacked .sp-hero-ctas { align-items: center; }
.sp-hero--stacked .sp-hero-trust { justify-content: center; }
.sp-hero-content {}
.sp-hero-sub {
font-size: var(--sp-fs-base);
color: var(--sp-muted);
line-height: 1.7;
max-width: 520px;
margin: 24px 0 36px;
}
.sp-hero-sub strong { color: var(--sp-white); }
.sp-hero-ctas {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 40px;
}
.sp-hero-trust {
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
}
.sp-trust-item {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--sp-fs-sm4);
color: var(--sp-muted);
}
.sp-trust-icon { font-size: var(--sp-fs-base); }
/* Formulaire hero collant */
.sp-hero-form {
position: sticky;
top: 72px;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
11. BANDE URGENCE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-urgence {
background: linear-gradient(90deg, rgba(255,77,77,.12), rgba(255,77,77,.06));
border-top: 1px solid rgba(255,77,77,.2);
border-bottom: 1px solid rgba(255,77,77,.2);
padding: 14px 24px;
text-align: center;
font-family: var(--sp-font-title);
font-weight: 600;
font-size: var(--sp-fs-sm4);
color: var(--sp-text);
}
.sp-urgence span { color: #ff4d4d; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
12. BANDE STATISTIQUES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-stats {
background: var(--sp-bg-section);
border-top: 1px solid rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,255,255,.06);
padding: 0;
}
.sp-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
max-width: var(--sp-container);
margin: 0 auto;
}
.sp-stat-item {
padding: 36px 24px;
text-align: center;
border-right: 1px solid rgba(255,255,255,.06);
}
.sp-stat-item:last-child { border-right: none; }
.sp-stat-num {
font-family: var(--sp-font-title);
font-weight: 800;
font-size: var(--sp-fs-3xl);
color: #ffc72c; /* Stat toujours en gold */
letter-spacing: -.02em;
line-height: 1;
margin-bottom: 8px;
}
.sp-stat-label {
font-size: var(--sp-fs-sm2);
color: var(--sp-muted);
line-height: 1.4;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
13. SECTION VARIANTES (cartes déclinaisons du service)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-variants {
padding: var(--sp-section-py) 0;
}
/* Grille : 3 colonnes par défaut */
.sp-variants-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 48px;
}
.sp-variants--2col .sp-variants-grid { grid-template-columns: repeat(2, 1fr); }
.sp-variants--1col .sp-variants-grid { grid-template-columns: 1fr; }
.sp-variant-card {
background: var(--sp-bg-card);
border: 1px solid rgba(255,255,255,.07);
border-radius: var(--sp-radius-lg);
padding: 28px 24px;
position: relative;
transition: border-color .25s, transform .25s, box-shadow .25s;
overflow: hidden;
}
.sp-variant-card:hover {
border-color: var(--sp-accent-border);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
/* Carte mise en avant */
.sp-variant-card--featured {
border-color: var(--sp-accent-border);
box-shadow: 0 0 30px var(--sp-accent-glow);
}
/* Badge "Le plus demandé" / "Recommandé" */
.sp-variant-card--featured::before {
content: attr(data-badge); /* data-badge="Recommandé" */
position: absolute;
top: -1px; right: 20px;
background: var(--sp-accent);
color: var(--sp-bg-deep);
font-family: var(--sp-font-title);
font-weight: 700;
font-size: var(--sp-fs-xs);
letter-spacing: .05em;
padding: 4px 12px;
border-radius: 0 0 10px 10px;
transition: background .3s;
}
.sp-variant-icon {
font-size: 2.8rem;
display: block;
margin-bottom: 14px;
}
.sp-variant-name {
font-family: var(--sp-font-title);
font-weight: 800;
font-size: var(--sp-fs-lg);
color: var(--sp-white);
margin-bottom: 4px;
}
.sp-variant-tagline {
font-size: var(--sp-fs-sm4);
color: var(--sp-accent);
font-weight: 600;
margin-bottom: 12px;
transition: color .3s;
}
.sp-variant-desc {
font-size: var(--sp-fs-sm4);
color: var(--sp-text);
line-height: 1.6;
margin-bottom: 18px;
}
.sp-variant-pros {
display: flex;
flex-direction: column;
gap: 7px;
}
.sp-variant-pros li {
font-size: var(--sp-fs-sm3);
color: var(--sp-muted);
padding-left: 18px;
position: relative;
line-height: 1.4;
}
.sp-variant-pros li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--sp-accent);
font-weight: 700;
transition: color .3s;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
14. SECTION ÉCONOMIES + POURQUOI NOUS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-eco {
padding: var(--sp-section-py) 0;
}
.sp-eco-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: start;
}
/* Barres comparaison */
.sp-eco-bars {
display: flex;
flex-direction: column;
gap: 22px;
margin-top: 32px;
}
.sp-eco-bar-label {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--sp-font-title);
font-weight: 600;
font-size: var(--sp-fs-sm4);
margin-bottom: 8px;
color: var(--sp-text);
}
.sp-eco-saving {
color: var(--sp-accent);
font-size: var(--sp-fs-base);
transition: color .3s;
}
.sp-eco-track {
height: 10px;
background: rgba(255,255,255,.07);
border-radius: 100px;
overflow: hidden;
}
.sp-bar-fill {
height: 100%;
background: var(--sp-bar-gradient);
border-radius: 100px;
width: 0; /* Initialisé JS → IntersectionObserver */
transition: width 1.2s cubic-bezier(.4, 0, .2, 1);
}
.sp-bar-fill--gold {
background: linear-gradient(90deg, #ffc72c, #ffdd80) !important;
}
.sp-eco-note {
margin-top: 16px;
font-size: var(--sp-fs-xs);
color: rgba(255,255,255,.2);
font-style: italic;
}
/* Points "Pourquoi nous" */
.sp-why-points {
display: flex;
flex-direction: column;
gap: 22px;
margin-top: 28px;
}
.sp-why-point {
display: flex;
gap: 16px;
align-items: flex-start;
}
.sp-why-icon {
width: 44px; height: 44px;
flex-shrink: 0;
background: var(--sp-accent-dim);
border: 1px solid var(--sp-accent-border);
border-radius: var(--sp-radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
transition: background .3s, border-color .3s;
}
.sp-why-title {
font-family: var(--sp-font-title);
font-weight: 700;
font-size: var(--sp-fs-base);
color: var(--sp-white);
margin-bottom: 4px;
}
.sp-why-desc {
font-size: var(--sp-fs-sm4);
color: var(--sp-muted);
line-height: 1.65;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
15. SECTION PROCESSUS (étapes)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-process {
padding: var(--sp-section-py) 0;
}
/* Ligne de connexion */
.sp-steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
position: relative;
margin-top: 48px;
counter-reset: sp-step;
}
.sp-steps::before {
content: '';
position: absolute;
top: 24px;
left: calc(100% / 10);
right: calc(100% / 10);
height: 2px;
background: linear-gradient(
90deg,
transparent,
var(--sp-accent-border),
var(--sp-accent-border),
transparent
);
z-index: 0;
transition: background .3s;
}
/* Variants nombre d'étapes */
.sp-steps--3 { grid-template-columns: repeat(3, 1fr); }
.sp-steps--4 { grid-template-columns: repeat(4, 1fr); }
.sp-step {
text-align: center;
padding: 0 12px;
position: relative;
z-index: 1;
counter-increment: sp-step;
}
.sp-step-num {
width: 48px; height: 48px;
border-radius: 50%;
background: var(--sp-bg-deep);
border: 2px solid var(--sp-accent-border);
font-family: var(--sp-font-title);
font-weight: 800;
font-size: var(--sp-fs-lg);
color: var(--sp-accent);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 18px;
transition: background .2s, color .2s, border-color .2s;
}
/* Numéro via CSS counter (pas de champ ACF nécessaire) */
.sp-step-num::after { content: counter(sp-step); }
.sp-step:hover .sp-step-num {
background: var(--sp-accent);
color: var(--sp-bg-deep);
border-color: var(--sp-accent);
}
.sp-step-title {
font-family: var(--sp-font-title);
font-weight: 700;
font-size: var(--sp-fs-md2);
color: var(--sp-white);
margin-bottom: 8px;
}
.sp-step-desc {
font-size: var(--sp-fs-sm3);
color: var(--sp-muted);
line-height: 1.55;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
16. SECTION AIDES FINANCIÈRES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-aides {
padding: var(--sp-section-py) 0;
}
.sp-aides-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 48px;
}
.sp-aides--2col .sp-aides-grid { grid-template-columns: repeat(2, 1fr); }
.sp-aide-card {
background: var(--sp-bg-card);
border: 1px solid rgba(255,255,255,.07);
border-radius: var(--sp-radius-lg);
padding: 28px 24px;
text-align: center;
transition: border-color .2s, transform .2s;
}
.sp-aide-card:hover {
border-color: rgba(255,199,44,.3);
transform: translateY(-3px);
}
.sp-aide-amount {
font-family: var(--sp-font-title);
font-weight: 800;
font-size: var(--sp-fs-3xl);
color: #ffc72c; /* Toujours gold */
line-height: 1;
margin-bottom: 8px;
letter-spacing: -.02em;
}
.sp-aide-name {
font-family: var(--sp-font-title);
font-weight: 700;
font-size: var(--sp-fs-base);
color: var(--sp-white);
margin-bottom: 10px;
}
.sp-aide-desc {
font-size: var(--sp-fs-sm4);
color: var(--sp-muted);
line-height: 1.65;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
17. SECTION TÉMOIGNAGES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-reviews {
padding: var(--sp-section-py) 0;
}
.sp-reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 48px;
}
.sp-reviews--2col .sp-reviews-grid { grid-template-columns: repeat(2, 1fr); }
.sp-review-card {
background: var(--sp-bg-card);
border: 1px solid rgba(255,255,255,.07);
border-radius: var(--sp-radius-lg);
padding: 24px;
display: flex;
flex-direction: column;
}
.sp-stars {
color: #ffc72c;
font-size: var(--sp-fs-base);
letter-spacing: 2px;
margin-bottom: 12px;
}
.sp-review-text {
font-size: var(--sp-fs-md2);
color: var(--sp-text);
line-height: 1.7;
font-style: italic;
flex: 1;
margin-bottom: 20px;
}
.sp-reviewer {
display: flex;
align-items: center;
gap: 12px;
margin-top: auto;
}
.sp-avatar {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--sp-avatar-gradient);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--sp-font-title);
font-weight: 700;
font-size: var(--sp-fs-sm4);
color: var(--sp-white);
flex-shrink: 0;
transition: background .3s;
}
.sp-reviewer-name {
font-family: var(--sp-font-title);
font-weight: 700;
font-size: var(--sp-fs-sm4);
color: var(--sp-white);
}
.sp-reviewer-loc {
font-size: var(--sp-fs-xs);
color: var(--sp-muted);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
18. BANDE CERTIFICATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-certifs {
background: var(--sp-bg-section);
border-top: 1px solid rgba(255,255,255,.06);
padding: 36px 24px;
text-align: center;
}
.sp-certifs-label {
font-size: var(--sp-fs-xs);
color: var(--sp-muted);
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 20px;
display: block;
}
.sp-certifs-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
max-width: 800px;
margin: 0 auto;
}
.sp-certif-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,.04);
border: 1.5px solid var(--sp-accent-border);
border-radius: var(--sp-radius);
padding: 10px 18px;
font-family: var(--sp-font-title);
font-weight: 700;
font-size: var(--sp-fs-sm4);
color: var(--sp-accent);
transition: background .2s, color .3s, border-color .3s;
}
.sp-certif-badge:hover {
background: var(--sp-accent-dim);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
19. CTA FINAL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-cta-final {
padding: 80px 24px;
text-align: center;
background: var(--sp-cta-gradient);
transition: background .3s;
}
.sp-cta-final p {
font-size: var(--sp-fs-base);
color: var(--sp-muted);
max-width: 500px;
margin: 12px auto 36px;
line-height: 1.65;
}
.sp-cta-actions {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
20. FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-footer {
border-top: 1px solid rgba(255,255,255,.06);
padding: 24px;
text-align: center;
font-size: var(--sp-fs-sm);
color: rgba(255,255,255,.2);
}
.sp-footer a {
color: rgba(255,255,255,.3);
text-decoration: none;
transition: color .2s;
}
.sp-footer a:hover { color: var(--sp-accent); }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
21. FAB TÉLÉPHONE MOBILE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp-fab {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 99;
display: none;
}
.sp-fab a {
width: 56px; height: 56px;
border-radius: 50%;
background: #ffc72c;
color: #1b2236;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(255,199,44,.4);
transition: transform .2s;
}
.sp-fab a:hover { transform: scale(1.1); }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
22. ANIMATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes sp-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .4; transform: scale(1.5); }
}
@keyframes sp-fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes sp-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.sp-fade-up {
opacity: 0;
transform: translateY(28px);
animation: sp-fadeUp .7s ease forwards;
animation-play-state: paused;
}
/* Décalages pour les enfants (jusqu'à 6) */
.sp-fade-up:nth-child(1) { animation-delay: .1s; }
.sp-fade-up:nth-child(2) { animation-delay: .2s; }
.sp-fade-up:nth-child(3) { animation-delay: .3s; }
.sp-fade-up:nth-child(4) { animation-delay: .4s; }
.sp-fade-up:nth-child(5) { animation-delay: .5s; }
.sp-fade-up:nth-child(6) { animation-delay: .6s; }
/* Décalages manuels */
.sp-delay-1 { animation-delay: .1s !important; }
.sp-delay-2 { animation-delay: .2s !important; }
.sp-delay-3 { animation-delay: .3s !important; }
.sp-delay-4 { animation-delay: .4s !important; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
23. RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1100px) {
.sp-variants-grid { grid-template-columns: repeat(2, 1fr); }
.sp-steps { grid-template-columns: repeat(3, 1fr); }
.sp-steps::before { display: none; }
.sp-steps--3 { grid-template-columns: repeat(3, 1fr); }
.sp-steps--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
:root { --sp-section-py: 60px; }
.sp-nav { padding: 0 20px; }
.sp-nav-links { display: none; }
.sp-nav-cta span { display: none; }
.sp-hero-inner { grid-template-columns: 1fr; gap: 40px; }
.sp-hero-form { position: static; }
.sp-stats-grid { grid-template-columns: repeat(2, 1fr); }
.sp-stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); }
.sp-stat-item:last-child { border-bottom: none; }
.sp-eco-inner { grid-template-columns: 1fr; gap: 48px; }
.sp-variants-grid { grid-template-columns: 1fr; }
.sp-aides-grid { grid-template-columns: 1fr; }
.sp-reviews-grid { grid-template-columns: 1fr; }
.sp-form-row { grid-template-columns: 1fr; }
.sp-fab { display: block; }
}
@media (max-width: 600px) {
:root { --sp-section-py: 48px; }
.sp-steps { grid-template-columns: 1fr; }
.sp-stats-grid { grid-template-columns: repeat(2, 1fr); }
.sp-cta-actions { flex-direction: column; align-items: center; }
.sp-hero-ctas { gap: 10px; }
}
