@extends('layouts.app')

@section('title', 'Nos Services - KONTIXX Agency')
@section('footer-tagline', 'Des solutions digitales pensées pour la performance. Chaque service est conçu pour répondre à vos besoins réels et générer des résultats concrets.')

{{--
    ============================================================
    STRUCTURE DE LA PAGE SERVICES
    ============================================================
    1. HERO SERVICES
    2. LISTE DES SERVICES (6 services détaillés)
       - Service 1: Création de site Web
       - Service 2: Branding & Identité Visuelle
       - Service 3: Marketing Digital
       - Service 4: Community Management
       - Service 5: Accompagnement Digital
       - Service 6: Maintenance & Support
    3. FORFAITS / TARIFS
       - Forfaits principaux (Essentiel, Professionnel, Business, Premium)
       - Options supplémentaires
       - Offres récurrentes
    4. CTA FINAL
    ============================================================
--}}

@section('content')
    {{-- ============================================================ --}}
    {{-- HERO SERVICES --}}
    {{-- ============================================================ --}}
    <section class="section-premium bg-gradient-premium py-24 lg:py-32 relative overflow-hidden">
        {{-- DECORATIVE ELEMENTS --}}
        <div class="absolute top-0 left-0 w-96 h-96 bg-gradient-to-br from-blue-400/20 to-transparent rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 right-0 w-96 h-96 bg-gradient-to-tl from-orange-400/20 to-transparent rounded-full blur-3xl"></div>
        
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
            <div class="animate-fade-in-up-premium">
                <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold text-gray-900 mb-6 leading-tight">
                    <span class="text-premium-gradient">Nos Services Digitaux</span>
                </h1>
                <p class="text-xl md:text-2xl text-gray-700 max-w-3xl mx-auto mb-10 leading-relaxed">
                    Bien plus que des services, nous créons des leviers de croissance digitale durables.
                </p>
                <a href="{{ route('contact') }}" class="btn-premium inline-flex items-center gap-3">
                    <span class="relative z-10">Demander un devis</span>
                    <svg class="w-5 h-5 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                    </svg>
                </a>
            </div>
        </div>
    </section>

    {{-- ============================================================ --}}
    {{-- LISTE DES SERVICES --}}
    {{-- ============================================================ --}}
    <section class="py-24 bg-white relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            {{-- -------------------------------------------------------- --}}
            {{-- SERVICE 1: CRÉATION DE SITE WEB --}}
            {{-- -------------------------------------------------------- --}}
            <div id="creation-site" class="mb-24 animate-fade-in-up-premium">
                <div class="card-premium glass-premium p-10 md:p-14 rounded-2xl shadow-premium">
                    {{-- EN-TÊTE DU SERVICE --}}
                    <div class="flex items-center mb-8 pb-8 border-b border-gray-200">
                        <div class="w-20 h-20 bg-gradient-kontixx rounded-2xl flex items-center justify-center mr-6 shadow-premium group-hover:scale-110 transition-transform duration-300">
                            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                        <div class="flex-1">
                            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">Création de site Web</h2>
                            <p class="text-gray-600 text-lg font-medium">Votre site, votre meilleur commercial 24/7</p>
                        </div>
                        <div class="text-right">
                            <div class="text-3xl font-bold text-kontixx-blue">150 €</div>
                            <div class="text-sm text-gray-500">à 1 000 €</div>
                        </div>
                    </div>

                    {{-- DESCRIPTION --}}
                    <p class="text-lg md:text-xl text-gray-700 mb-8 leading-relaxed">
                        Nous concevons des sites vitrines, e-commerce et plateformes web professionnelles, rapides, sécurisées et adaptées à tous les écrans. Chaque site est développé sur mesure pour répondre à vos objectifs business.
                    </p>

                    {{-- CE QUI EST INCLUS --}}
                    <div class="mb-10">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Ce qui est inclus</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Design moderne, professionnel et 100% responsive</h4>
                                    <p class="text-gray-600 text-sm">Interface adaptée à tous les appareils (mobile, tablette, desktop)</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Développement sur mesure ou via CMS</h4>
                                    <p class="text-gray-600 text-sm">WordPress, Laravel ou solution custom selon vos besoins</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Optimisation SEO dès la conception</h4>
                                    <p class="text-gray-600 text-sm">Structure, balises, sitemap XML pour une visibilité maximale</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Vitesse de chargement optimisée</h4>
                                    <p class="text-gray-600 text-sm">Performance web exceptionnelle (Core Web Vitals optimisés)</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Sécurité renforcée</h4>
                                    <p class="text-gray-600 text-sm">HTTPS, protection anti-attaque, sauvegardes régulières</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Formulaires et outils de conversion</h4>
                                    <p class="text-gray-600 text-sm">Contact, devis, newsletter, analytics intégrés</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- PROCESSUS DE TRAVAIL --}}
                    <div class="mb-10 bg-gray-50 p-6 rounded-xl">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Notre processus</h3>
                        <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">1</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Analyse</p>
                                <p class="text-xs text-gray-600 mt-1">Besoins & objectifs</p>
                            </div>
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">2</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Conception</p>
                                <p class="text-xs text-gray-600 mt-1">Maquettes & UX</p>
                            </div>
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">3</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Développement</p>
                                <p class="text-xs text-gray-600 mt-1">Code & intégration</p>
                            </div>
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">4</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Tests</p>
                                <p class="text-xs text-gray-600 mt-1">Validation qualité</p>
                            </div>
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">5</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Livraison</p>
                                <p class="text-xs text-gray-600 mt-1">Mise en ligne</p>
                            </div>
                        </div>
                    </div>

                    {{-- DÉLAIS ET GARANTIES --}}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
                        <div class="bg-blue-50 p-6 rounded-xl">
                            <h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
                                <svg class="w-6 h-6 text-kontixx-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Délais
                            </h3>
                            <ul class="space-y-2 text-gray-700">
                                <li class="flex items-start">
                                    <span class="text-kontixx-blue mr-2">•</span>
                                    <span><strong>Site vitrine :</strong> 2-4 semaines</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-kontixx-blue mr-2">•</span>
                                    <span><strong>E-commerce :</strong> 4-8 semaines</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-kontixx-blue mr-2">•</span>
                                    <span><strong>Sur mesure :</strong> Selon complexité</span>
                                </li>
                            </ul>
                        </div>
                        <div class="bg-green-50 p-6 rounded-xl">
                            <h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
                                <svg class="w-6 h-6 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Garanties
                            </h3>
                            <ul class="space-y-2 text-gray-700">
                                <li class="flex items-start">
                                    <span class="text-green-600 mr-2">✓</span>
                                    <span><strong>30 jours</strong> de support inclus</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-green-600 mr-2">✓</span>
                                    <span><strong>Corrections</strong> gratuites pendant 1 mois</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-green-600 mr-2">✓</span>
                                    <span><strong>Formation</strong> à la gestion incluse</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    {{-- JUSTIFICATION DU PRIX --}}
                    <div class="mb-10 bg-gradient-to-r from-kontixx-blue/10 to-kontixx-orange/10 p-6 rounded-xl">
                        <h3 class="text-xl font-bold text-gray-900 mb-4">Pourquoi ce prix ?</h3>
                        <p class="text-gray-700 leading-relaxed">
                            Nos tarifs reflètent l'expertise technique, le temps de développement, l'optimisation SEO, la sécurité et l'accompagnement personnalisé. Chaque site est unique et développé selon vos besoins spécifiques. Le prix varie selon la complexité, le nombre de pages, les fonctionnalités (e-commerce, multilingue, etc.) et le niveau de personnalisation souhaité.
                        </p>
                    </div>

                    {{-- FAQ SERVICE --}}
                    <div class="mb-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Questions fréquentes</h3>
                        <div class="space-y-4">
                            <div class="border border-gray-200 rounded-lg p-4">
                                <h4 class="font-bold text-gray-900 mb-2">Quel est le délai pour créer un site web ?</h4>
                                <p class="text-gray-600 text-sm">Le délai varie selon la complexité : 2-4 semaines pour un site vitrine, 4-8 semaines pour un e-commerce. Nous respectons des délais clairs tout en garantissant qualité et performance.</p>
                            </div>
                            <div class="border border-gray-200 rounded-lg p-4">
                                <h4 class="font-bold text-gray-900 mb-2">Puis-je modifier mon site après la livraison ?</h4>
                                <p class="text-gray-600 text-sm">Oui, nous proposons des formules de maintenance mensuelle (à partir de 40 €/mois) pour les modifications et mises à jour. Des corrections sont incluses pendant 30 jours après la livraison.</p>
                            </div>
                            <div class="border border-gray-200 rounded-lg p-4">
                                <h4 class="font-bold text-gray-900 mb-2">Mon site sera-t-il optimisé pour Google ?</h4>
                                <p class="text-gray-600 text-sm">Absolument. Tous nos sites sont conçus avec une optimisation SEO intégrée dès la conception : structure, balises, sitemap, vitesse optimisée pour améliorer votre visibilité.</p>
                            </div>
                        </div>
                    </div>

                    {{-- CTA --}}
                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
                        <a href="{{ route('contact') }}" class="btn-cta-blue-gradient inline-flex items-center justify-center gap-2">
                            <span>Demander un devis</span>
                        </a>
                        <a href="{{ route('appointment') }}" class="btn-premium inline-flex items-center justify-center gap-2">
                            <span>Prendre rendez-vous</span>
                        </a>
                    </div>
                </div>
            </div>

            {{-- -------------------------------------------------------- --}}
            {{-- SERVICE 2: BRANDING & IDENTITÉ VISUELLE --}}
            {{-- -------------------------------------------------------- --}}
            <div id="branding" class="mb-24 animate-fade-in-up-premium" style="animation-delay: 0.1s;">
                <div class="card-premium glass-premium p-10 md:p-14 rounded-2xl shadow-premium">
                    {{-- EN-TÊTE DU SERVICE --}}
                    <div class="flex items-center mb-8 pb-8 border-b border-gray-200">
                        <div class="w-20 h-20 bg-gradient-warm rounded-2xl flex items-center justify-center mr-6 shadow-premium group-hover:scale-110 transition-transform duration-300">
                            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
                            </svg>
                        </div>
                        <div class="flex-1">
                            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">Branding & Identité Visuelle</h2>
                            <p class="text-gray-600 text-lg font-medium">Une marque forte, cohérente et mémorable</p>
                        </div>
                        <div class="text-right">
                            <div class="text-3xl font-bold text-kontixx-brown">250 €</div>
                            <div class="text-sm text-gray-500">à 800 €</div>
                        </div>
                    </div>

                    {{-- DESCRIPTION --}}
                    <p class="text-lg md:text-xl text-gray-700 mb-8 leading-relaxed">
                        Création d'une identité visuelle unique qui reflète vos valeurs et renforce votre positionnement sur le marché. Une identité forte augmente la reconnaissance de votre marque et fidélise vos clients.
                    </p>

                    {{-- CE QUI EST INCLUS --}}
                    <div class="mb-10">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Ce qui est inclus</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-warm rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Logo & identité visuelle complète</h4>
                                    <p class="text-gray-600 text-sm">Création de logo, déclinaisons, charte graphique complète</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-warm rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Cohérence sur tous supports</h4>
                                    <p class="text-gray-600 text-sm">Application sur site web, réseaux sociaux, cartes de visite, etc.</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-warm rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Positionnement stratégique</h4>
                                    <p class="text-gray-600 text-sm">Analyse concurrentielle et positionnement de marque</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-warm rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Fichiers sources & guide d'utilisation</h4>
                                    <p class="text-gray-600 text-sm">Livraison de tous les fichiers (AI, PSD, PNG, SVG) et guide</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- PROCESSUS --}}
                    <div class="mb-10 bg-gray-50 p-6 rounded-xl">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Notre processus</h3>
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-warm rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">1</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Brief créatif</p>
                                <p class="text-xs text-gray-600 mt-1">Analyse besoins</p>
                            </div>
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-warm rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">2</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Conception</p>
                                <p class="text-xs text-gray-600 mt-1">3 propositions</p>
                            </div>
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-warm rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">3</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Affinage</p>
                                <p class="text-xs text-gray-600 mt-1">Révisions incluses</p>
                            </div>
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-warm rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">4</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Livraison</p>
                                <p class="text-xs text-gray-600 mt-1">Fichiers finaux</p>
                            </div>
                        </div>
                    </div>

                    {{-- DÉLAIS ET GARANTIES --}}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
                        <div class="bg-blue-50 p-6 rounded-xl">
                            <h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
                                <svg class="w-6 h-6 text-kontixx-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Délais
                            </h3>
                            <ul class="space-y-2 text-gray-700">
                                <li class="flex items-start">
                                    <span class="text-kontixx-blue mr-2">•</span>
                                    <span><strong>Logo simple :</strong> 1-2 semaines</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-kontixx-blue mr-2">•</span>
                                    <span><strong>Identité complète :</strong> 3-4 semaines</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-kontixx-blue mr-2">•</span>
                                    <span><strong>Pack premium :</strong> 4-6 semaines</span>
                                </li>
                            </ul>
                        </div>
                        <div class="bg-green-50 p-6 rounded-xl">
                            <h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
                                <svg class="w-6 h-6 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Garanties
                            </h3>
                            <ul class="space-y-2 text-gray-700">
                                <li class="flex items-start">
                                    <span class="text-green-600 mr-2">✓</span>
                                    <span><strong>3 révisions</strong> incluses</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-green-600 mr-2">✓</span>
                                    <span><strong>Fichiers sources</strong> livrés</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-green-600 mr-2">✓</span>
                                    <span><strong>Guide d'utilisation</strong> fourni</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    {{-- JUSTIFICATION DU PRIX --}}
                    <div class="mb-10 bg-gradient-to-r from-kontixx-blue/10 to-kontixx-orange/10 p-6 rounded-xl">
                        <h3 class="text-xl font-bold text-gray-900 mb-4">Pourquoi ce prix ?</h3>
                        <p class="text-gray-700 leading-relaxed">
                            Le prix dépend de la complexité de votre identité : logo simple, identité complète avec charte graphique, ou pack premium incluant supports print et digitaux. Chaque projet inclut recherche créative, plusieurs propositions, révisions et livraison des fichiers sources. Un investissement dans votre image de marque qui génère de la valeur à long terme.
                        </p>
                    </div>

                    {{-- FAQ SERVICE --}}
                    <div class="mb-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Questions fréquentes</h3>
                        <div class="space-y-4">
                            <div class="border border-gray-200 rounded-lg p-4">
                                <h4 class="font-bold text-gray-900 mb-2">Combien de propositions de logo recevrai-je ?</h4>
                                <p class="text-gray-600 text-sm">Nous vous proposons 3 concepts différents de logo. Vous pouvez ensuite demander jusqu'à 3 révisions pour affiner votre choix.</p>
                            </div>
                            <div class="border border-gray-200 rounded-lg p-4">
                                <h4 class="font-bold text-gray-900 mb-2">Recevrai-je les fichiers sources ?</h4>
                                <p class="text-gray-600 text-sm">Oui, tous les fichiers sources (AI, PSD, PNG, SVG) vous sont livrés avec un guide d'utilisation pour garantir la cohérence de votre identité.</p>
                            </div>
                            <div class="border border-gray-200 rounded-lg p-4">
                                <h4 class="font-bold text-gray-900 mb-2">Puis-je utiliser mon logo partout ?</h4>
                                <p class="text-gray-600 text-sm">Absolument. Une fois livré, vous êtes propriétaire de votre identité visuelle et pouvez l'utiliser sur tous vos supports (site web, réseaux sociaux, print, etc.).</p>
                            </div>
                        </div>
                    </div>

                    {{-- CTA --}}
                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
                        <a href="{{ route('contact') }}" class="btn-cta-blue-gradient inline-flex items-center justify-center gap-2">
                            <span>Demander un devis</span>
                        </a>
                        <a href="{{ route('appointment') }}" class="btn-premium inline-flex items-center justify-center gap-2">
                            <span>Prendre rendez-vous</span>
                        </a>
                    </div>
                </div>
            </div>

            {{-- -------------------------------------------------------- --}}
            {{-- SERVICE 3: MARKETING DIGITAL --}}
            {{-- -------------------------------------------------------- --}}
            <div id="marketing" class="mb-24 animate-fade-in-up-premium" style="animation-delay: 0.2s;">
                <div class="card-premium glass-premium p-10 md:p-14 rounded-2xl shadow-premium">
                    {{-- EN-TÊTE DU SERVICE --}}
                    <div class="flex items-center mb-8 pb-8 border-b border-gray-200">
                        <div class="w-20 h-20 bg-gradient-kontixx rounded-2xl flex items-center justify-center mr-6 shadow-premium group-hover:scale-110 transition-transform duration-300">
                            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                        </div>
                        <div class="flex-1">
                            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">Marketing Digital</h2>
                            <p class="text-gray-600 text-lg font-medium">Attirez plus de clients et augmentez vos résultats</p>
                        </div>
                        <div class="text-right">
                            <div class="text-3xl font-bold text-kontixx-blue">100 €</div>
                            <div class="text-sm text-gray-500">/ mois</div>
                        </div>
                    </div>

                    {{-- DESCRIPTION --}}
                    <p class="text-lg md:text-xl text-gray-700 mb-8 leading-relaxed">
                        Stratégies digitales sur mesure pour développer votre présence en ligne et générer des résultats mesurables. Nous optimisons votre visibilité, votre acquisition et vos conversions.
                    </p>

                    {{-- CE QUI EST INCLUS --}}
                    <div class="mb-10">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Ce qui est inclus</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Stratégie digitale & croissance</h4>
                                    <p class="text-gray-600 text-sm">Plan d'action personnalisé selon vos objectifs business</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">SEO & référencement</h4>
                                    <p class="text-gray-600 text-sm">Optimisation technique et contenu pour améliorer votre positionnement</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Conversion & performance</h4>
                                    <p class="text-gray-600 text-sm">Optimisation des taux de conversion et A/B testing</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Analyse & reporting</h4>
                                    <p class="text-gray-600 text-sm">Suivi mensuel avec rapports détaillés et recommandations</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- PROCESSUS --}}
                    <div class="mb-10 bg-gray-50 p-6 rounded-xl">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Notre processus</h3>
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">1</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Audit</p>
                                <p class="text-xs text-gray-600 mt-1">Analyse situation</p>
                            </div>
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">2</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Stratégie</p>
                                <p class="text-xs text-gray-600 mt-1">Plan d'action</p>
                            </div>
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">3</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Mise en œuvre</p>
                                <p class="text-xs text-gray-600 mt-1">Actions concrètes</p>
                            </div>
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">4</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Suivi</p>
                                <p class="text-xs text-gray-600 mt-1">Reporting mensuel</p>
                            </div>
                        </div>
                    </div>

                    {{-- DÉLAIS ET GARANTIES --}}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
                        <div class="bg-blue-50 p-6 rounded-xl">
                            <h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
                                <svg class="w-6 h-6 text-kontixx-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Délais
                            </h3>
                            <ul class="space-y-2 text-gray-700">
                                <li class="flex items-start">
                                    <span class="text-kontixx-blue mr-2">•</span>
                                    <span><strong>Audit initial :</strong> 1 semaine</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-kontixx-blue mr-2">•</span>
                                    <span><strong>Premiers résultats :</strong> 2-3 mois</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-kontixx-blue mr-2">•</span>
                                    <span><strong>Engagement :</strong> 3 mois minimum</span>
                                </li>
                            </ul>
                        </div>
                        <div class="bg-green-50 p-6 rounded-xl">
                            <h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
                                <svg class="w-6 h-6 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Garanties
                            </h3>
                            <ul class="space-y-2 text-gray-700">
                                <li class="flex items-start">
                                    <span class="text-green-600 mr-2">✓</span>
                                    <span><strong>Reporting mensuel</strong> détaillé</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-green-600 mr-2">✓</span>
                                    <span><strong>Réactivité</strong> sous 48h</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-green-600 mr-2">✓</span>
                                    <span><strong>Résultats mesurables</strong> et transparents</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    {{-- JUSTIFICATION DU PRIX --}}
                    <div class="mb-10 bg-gradient-to-r from-kontixx-blue/10 to-kontixx-orange/10 p-6 rounded-xl">
                        <h3 class="text-xl font-bold text-gray-900 mb-4">Pourquoi ce prix ?</h3>
                        <p class="text-gray-700 leading-relaxed">
                            Le marketing digital est un investissement mensuel qui génère des résultats sur le long terme. Nos tarifs incluent l'audit initial, la stratégie personnalisée, la mise en œuvre des actions, le suivi continu et les rapports mensuels. Le prix varie selon le niveau (SEO Local 100€/mois, SEO Avancé 180€/mois, SEO + Contenu 250€/mois). Un investissement qui se rentabilise par l'augmentation de votre trafic et de vos conversions.
                        </p>
                    </div>

                    {{-- FAQ SERVICE --}}
                    <div class="mb-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Questions fréquentes</h3>
                        <div class="space-y-4">
                            <div class="border border-gray-200 rounded-lg p-4">
                                <h4 class="font-bold text-gray-900 mb-2">Quand verrai-je les premiers résultats ?</h4>
                                <p class="text-gray-600 text-sm">Les premiers résultats SEO apparaissent généralement après 2-3 mois. Pour le marketing payant (publicités), les résultats sont visibles dès la première semaine. Nous fournissons un reporting mensuel pour suivre l'évolution.</p>
                            </div>
                            <div class="border border-gray-200 rounded-lg p-4">
                                <h4 class="font-bold text-gray-900 mb-2">Puis-je arrêter à tout moment ?</h4>
                                <p class="text-gray-600 text-sm">Nous demandons un engagement minimum de 3 mois pour garantir des résultats. Après cette période, vous pouvez résilier avec un préavis d'un mois.</p>
                            </div>
                            <div class="border border-gray-200 rounded-lg p-4">
                                <h4 class="font-bold text-gray-900 mb-2">Quels résultats puis-je espérer ?</h4>
                                <p class="text-gray-600 text-sm">Les résultats varient selon votre secteur et votre situation initiale. En moyenne, nos clients constatent une augmentation de 30-50% de leur trafic après 6 mois, et une amélioration significative de leurs conversions.</p>
                            </div>
                        </div>
                    </div>

                    {{-- CTA --}}
                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
                        <a href="{{ route('contact') }}" class="btn-cta-blue-gradient inline-flex items-center justify-center gap-2">
                            <span>Demander un devis</span>
                        </a>
                        <a href="{{ route('appointment') }}" class="btn-premium inline-flex items-center justify-center gap-2">
                            <span>Prendre rendez-vous</span>
                        </a>
                    </div>
                </div>
            </div>

            {{-- -------------------------------------------------------- --}}
            {{-- SERVICE 4: COMMUNITY MANAGEMENT --}}
            {{-- -------------------------------------------------------- --}}
            <div id="community" class="mb-24 animate-fade-in-up-premium" style="animation-delay: 0.3s;">
                <div class="card-premium glass-premium p-10 md:p-14 rounded-2xl shadow-premium">
                    {{-- EN-TÊTE DU SERVICE --}}
                    <div class="flex items-center mb-8 pb-8 border-b border-gray-200">
                        <div class="w-20 h-20 bg-gradient-kontixx rounded-2xl flex items-center justify-center mr-6 shadow-premium group-hover:scale-110 transition-transform duration-300">
                            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                            </svg>
                        </div>
                        <div class="flex-1">
                            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">Community Management</h2>
                            <p class="text-gray-600 text-lg font-medium">Construisez une communauté engagée autour de votre marque</p>
                        </div>
                        <div class="text-right">
                            <div class="text-3xl font-bold text-kontixx-blue">120 €</div>
                            <div class="text-sm text-gray-500">/ mois</div>
                        </div>
                    </div>

                    {{-- DESCRIPTION --}}
                    <p class="text-lg md:text-xl text-gray-700 mb-8 leading-relaxed">
                        Animation de vos réseaux sociaux pour créer une communauté active et fidèle à votre marque. Nous gérons votre présence sociale au quotidien pour renforcer votre notoriété et fidéliser votre audience.
                    </p>

                    {{-- CE QUI EST INCLUS --}}
                    <div class="mb-10">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Ce qui est inclus</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Présence sociale & engagement</h4>
                                    <p class="text-gray-600 text-sm">Animation quotidienne sur vos réseaux (Facebook, Instagram, LinkedIn, etc.)</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Contenus créatifs & cohérents</h4>
                                    <p class="text-gray-600 text-sm">Création de posts, visuels, stories adaptés à votre identité</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Animation & interaction</h4>
                                    <p class="text-gray-600 text-sm">Réponses aux commentaires, messages, modération de la communauté</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Reporting mensuel</h4>
                                    <p class="text-gray-600 text-sm">Analyse de performance, statistiques et recommandations</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- PROCESSUS --}}
                    <div class="mb-10 bg-gray-50 p-6 rounded-xl">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Notre processus</h3>
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">1</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Brief</p>
                                <p class="text-xs text-gray-600 mt-1">Objectifs & ton</p>
                            </div>
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">2</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Calendrier</p>
                                <p class="text-xs text-gray-600 mt-1">Planning éditorial</p>
                            </div>
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">3</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Publication</p>
                                <p class="text-xs text-gray-600 mt-1">Animation quotidienne</p>
                            </div>
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">4</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Suivi</p>
                                <p class="text-xs text-gray-600 mt-1">Reporting mensuel</p>
                            </div>
                        </div>
                    </div>

                    {{-- DÉLAIS ET GARANTIES --}}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
                        <div class="bg-blue-50 p-6 rounded-xl">
                            <h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
                                <svg class="w-6 h-6 text-kontixx-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Délais
                            </h3>
                            <ul class="space-y-2 text-gray-700">
                                <li class="flex items-start">
                                    <span class="text-kontixx-blue mr-2">•</span>
                                    <span><strong>Mise en place :</strong> 1 semaine</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-kontixx-blue mr-2">•</span>
                                    <span><strong>Publication :</strong> Quotidienne</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-kontixx-blue mr-2">•</span>
                                    <span><strong>Engagement :</strong> 3 mois minimum</span>
                                </li>
                            </ul>
                        </div>
                        <div class="bg-green-50 p-6 rounded-xl">
                            <h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
                                <svg class="w-6 h-6 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Garanties
                            </h3>
                            <ul class="space-y-2 text-gray-700">
                                <li class="flex items-start">
                                    <span class="text-green-600 mr-2">✓</span>
                                    <span><strong>Réactivité</strong> sous 24h</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-green-600 mr-2">✓</span>
                                    <span><strong>Reporting mensuel</strong> détaillé</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-green-600 mr-2">✓</span>
                                    <span><strong>Cohérence</strong> avec votre identité</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    {{-- JUSTIFICATION DU PRIX --}}
                    <div class="mb-10 bg-gradient-to-r from-kontixx-blue/10 to-kontixx-orange/10 p-6 rounded-xl">
                        <h3 class="text-xl font-bold text-gray-900 mb-4">Pourquoi ce prix ?</h3>
                        <p class="text-gray-700 leading-relaxed">
                            Le community management nécessite une présence quotidienne et une créativité constante. Nos tarifs (Starter 120€/mois, Business 200€/mois, Premium 300€/mois) incluent la création de contenus, la publication quotidienne, l'animation de la communauté, la modération et le reporting mensuel. Un investissement qui renforce votre image de marque et fidélise votre audience.
                        </p>
                    </div>

                    {{-- FAQ SERVICE --}}
                    <div class="mb-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Questions fréquentes</h3>
                        <div class="space-y-4">
                            <div class="border border-gray-200 rounded-lg p-4">
                                <h4 class="font-bold text-gray-900 mb-2">Combien de posts seront publiés par semaine ?</h4>
                                <p class="text-gray-600 text-sm">Cela dépend de votre forfait : Starter (3-5 posts/semaine), Business (5-7 posts/semaine), Premium (7-10 posts/semaine). Le calendrier éditorial est adapté à votre secteur et vos objectifs.</p>
                            </div>
                            <div class="border border-gray-200 rounded-lg p-4">
                                <h4 class="font-bold text-gray-900 mb-2">Gérez-vous les commentaires et messages ?</h4>
                                <p class="text-gray-600 text-sm">Oui, nous répondons aux commentaires et messages dans les 24h (48h pour Starter). Nous modérons également votre communauté pour maintenir un environnement positif.</p>
                            </div>
                            <div class="border border-gray-200 rounded-lg p-4">
                                <h4 class="font-bold text-gray-900 mb-2">Sur quels réseaux sociaux intervenez-vous ?</h4>
                                <p class="text-gray-600 text-sm">Nous gérons principalement Facebook, Instagram, LinkedIn et Twitter. D'autres réseaux peuvent être ajoutés selon vos besoins et votre secteur d'activité.</p>
                            </div>
                        </div>
                    </div>

                    {{-- CTA --}}
                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
                        <a href="{{ route('contact') }}" class="btn-cta-blue-gradient inline-flex items-center justify-center gap-2">
                            <span>Demander un devis</span>
                        </a>
                        <a href="{{ route('appointment') }}" class="btn-premium inline-flex items-center justify-center gap-2">
                            <span>Prendre rendez-vous</span>
                        </a>
                    </div>
                </div>
            </div>

            {{-- -------------------------------------------------------- --}}
            {{-- SERVICE 5: ACCOMPAGNEMENT DIGITAL --}}
            {{-- -------------------------------------------------------- --}}
            <div id="accompagnement" class="mb-24 animate-fade-in-up-premium" style="animation-delay: 0.4s;">
                <div class="card-premium glass-premium p-10 md:p-14 rounded-2xl shadow-premium">
                    {{-- EN-TÊTE DU SERVICE --}}
                    <div class="flex items-center mb-8 pb-8 border-b border-gray-200">
                        <div class="w-20 h-20 bg-gradient-kontixx rounded-2xl flex items-center justify-center mr-6 shadow-premium group-hover:scale-110 transition-transform duration-300">
                            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                            </svg>
                        </div>
                        <div class="flex-1">
                            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">Accompagnement Digital</h2>
                            <p class="text-gray-600 text-lg font-medium">Un partenaire stratégique pour votre croissance digitale</p>
                        </div>
                        <div class="text-right">
                            <div class="text-3xl font-bold text-kontixx-blue">Sur devis</div>
                            <div class="text-sm text-gray-500">Personnalisé</div>
                        </div>
                    </div>

                    {{-- DESCRIPTION --}}
                    <p class="text-lg md:text-xl text-gray-700 mb-8 leading-relaxed">
                        Conseil et accompagnement personnalisé pour optimiser votre stratégie digitale et atteindre vos objectifs. Nous vous accompagnons dans toutes vos décisions digitales importantes.
                    </p>

                    {{-- CE QUI EST INCLUS --}}
                    <div class="mb-10">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Ce qui est inclus</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Vision stratégique & conseil</h4>
                                    <p class="text-gray-600 text-sm">Orientation et recommandations expertes pour votre transformation digitale</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Audit digital complet</h4>
                                    <p class="text-gray-600 text-sm">Analyse de votre présence digitale et recommandations d'amélioration</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Pilotage de projets</h4>
                                    <p class="text-gray-600 text-sm">Gestion et suivi de vos projets digitaux de A à Z</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Formation & montée en compétences</h4>
                                    <p class="text-gray-600 text-sm">Formation de vos équipes aux outils et bonnes pratiques digitales</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- PROCESSUS --}}
                    <div class="mb-10 bg-gray-50 p-6 rounded-xl">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Notre processus</h3>
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">1</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Diagnostic</p>
                                <p class="text-xs text-gray-600 mt-1">Audit complet</p>
                            </div>
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">2</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Stratégie</p>
                                <p class="text-xs text-gray-600 mt-1">Plan d'action</p>
                            </div>
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">3</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Accompagnement</p>
                                <p class="text-xs text-gray-600 mt-1">Mise en œuvre</p>
                            </div>
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">4</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Suivi</p>
                                <p class="text-xs text-gray-600 mt-1">Optimisation continue</p>
                            </div>
                        </div>
                    </div>

                    {{-- DÉLAIS ET GARANTIES --}}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
                        <div class="bg-blue-50 p-6 rounded-xl">
                            <h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
                                <svg class="w-6 h-6 text-kontixx-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Délais
                            </h3>
                            <ul class="space-y-2 text-gray-700">
                                <li class="flex items-start">
                                    <span class="text-kontixx-blue mr-2">•</span>
                                    <span><strong>Audit :</strong> 1-2 semaines</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-kontixx-blue mr-2">•</span>
                                    <span><strong>Accompagnement :</strong> Sur mesure</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-kontixx-blue mr-2">•</span>
                                    <span><strong>Formation :</strong> À la demande</span>
                                </li>
                            </ul>
                        </div>
                        <div class="bg-green-50 p-6 rounded-xl">
                            <h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
                                <svg class="w-6 h-6 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Garanties
                            </h3>
                            <ul class="space-y-2 text-gray-700">
                                <li class="flex items-start">
                                    <span class="text-green-600 mr-2">✓</span>
                                    <span><strong>Expertise</strong> reconnue</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-green-600 mr-2">✓</span>
                                    <span><strong>Approche personnalisée</strong> à 100%</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-green-600 mr-2">✓</span>
                                    <span><strong>Disponibilité</strong> et réactivité</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    {{-- JUSTIFICATION DU PRIX --}}
                    <div class="mb-10 bg-gradient-to-r from-kontixx-blue/10 to-kontixx-orange/10 p-6 rounded-xl">
                        <h3 class="text-xl font-bold text-gray-900 mb-4">Pourquoi ce prix ?</h3>
                        <p class="text-gray-700 leading-relaxed">
                            L'accompagnement digital est un service sur mesure qui s'adapte à vos besoins spécifiques. Le prix dépend de la complexité de votre projet, de la durée d'accompagnement et des prestations incluses (audit, conseil, pilotage, formation). Chaque mission est évaluée individuellement pour vous proposer la solution la plus adaptée à votre budget et vos objectifs.
                        </p>
                    </div>

                    {{-- FAQ SERVICE --}}
                    <div class="mb-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Questions fréquentes</h3>
                        <div class="space-y-4">
                            <div class="border border-gray-200 rounded-lg p-4">
                                <h4 class="font-bold text-gray-900 mb-2">Qu'est-ce qu'un audit digital ?</h4>
                                <p class="text-gray-600 text-sm">Un audit digital est une analyse complète de votre présence en ligne : site web, SEO, réseaux sociaux, e-réputation. Il identifie les points forts, les faiblesses et propose un plan d'action pour améliorer votre performance digitale.</p>
                            </div>
                            <div class="border border-gray-200 rounded-lg p-4">
                                <h4 class="font-bold text-gray-900 mb-2">Combien de temps dure un accompagnement ?</h4>
                                <p class="text-gray-600 text-sm">Cela dépend de vos besoins. Un audit peut prendre 1-2 semaines, un accompagnement stratégique peut durer plusieurs mois, et une formation peut se faire en quelques heures ou jours selon le sujet.</p>
                            </div>
                            <div class="border border-gray-200 rounded-lg p-4">
                                <h4 class="font-bold text-gray-900 mb-2">Proposez-vous des formations en ligne ou en présentiel ?</h4>
                                <p class="text-gray-600 text-sm">Les deux ! Nous proposons des formations en présentiel (sur site) ou en ligne (visioconférence) selon vos préférences et votre localisation.</p>
                            </div>
                        </div>
                    </div>

                    {{-- CTA --}}
                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
                        <a href="{{ route('contact') }}" class="btn-cta-blue-gradient inline-flex items-center justify-center gap-2">
                            <span>Demander un devis</span>
                        </a>
                        <a href="{{ route('appointment') }}" class="btn-premium inline-flex items-center justify-center gap-2">
                            <span>Prendre rendez-vous</span>
                        </a>
                    </div>
                </div>
            </div>

            {{-- -------------------------------------------------------- --}}
            {{-- SERVICE 6: MAINTENANCE & SUPPORT --}}
            {{-- -------------------------------------------------------- --}}
            <div id="maintenance" class="mb-12 animate-fade-in-up-premium" style="animation-delay: 0.5s;">
                <div class="card-premium glass-premium p-10 md:p-14 rounded-2xl shadow-premium">
                    {{-- EN-TÊTE DU SERVICE --}}
                    <div class="flex items-center mb-8 pb-8 border-b border-gray-200">
                        <div class="w-20 h-20 bg-gradient-kontixx rounded-2xl flex items-center justify-center mr-6 shadow-premium group-hover:scale-110 transition-transform duration-300">
                            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                            </svg>
                        </div>
                        <div class="flex-1">
                            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">Maintenance & Support</h2>
                            <p class="text-gray-600 text-lg font-medium">Sécurité, stabilité et sérénité digitale</p>
                        </div>
                        <div class="text-right">
                            <div class="text-3xl font-bold text-kontixx-blue">35 €</div>
                            <div class="text-sm text-gray-500">/ mois</div>
                        </div>
                    </div>

                    {{-- DESCRIPTION --}}
                    <p class="text-lg md:text-xl text-gray-700 mb-8 leading-relaxed">
                        Maintenance continue et support technique pour garantir la performance et la sécurité de vos solutions digitales. Protégez votre investissement et assurez la pérennité de votre site web.
                    </p>

                    {{-- CE QUI EST INCLUS --}}
                    <div class="mb-10">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Ce qui est inclus</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Stabilité & sécurité digitale</h4>
                                    <p class="text-gray-600 text-sm">Monitoring 24/7, protection anti-attaque, sauvegardes automatiques</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Mises à jour régulières</h4>
                                    <p class="text-gray-600 text-sm">Mises à jour CMS, plugins, sécurité et évolutions techniques</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Support technique</h4>
                                    <p class="text-gray-600 text-sm">Assistance par email, réactivité sous 48h (24h pour Premium)</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4 group/item">
                                <div class="w-10 h-10 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 group-hover/item:scale-110 transition-transform duration-300 shadow-premium">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 mb-1 text-lg">Optimisation continue</h4>
                                    <p class="text-gray-600 text-sm">Amélioration des performances, vitesse, SEO et expérience utilisateur</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- PROCESSUS --}}
                    <div class="mb-10 bg-gray-50 p-6 rounded-xl">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Notre processus</h3>
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">1</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Monitoring</p>
                                <p class="text-xs text-gray-600 mt-1">Surveillance 24/7</p>
                            </div>
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">2</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Mises à jour</p>
                                <p class="text-xs text-gray-600 mt-1">Régulières</p>
                            </div>
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">3</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Support</p>
                                <p class="text-xs text-gray-600 mt-1">Assistance rapide</p>
                            </div>
                            <div class="text-center">
                                <div class="w-12 h-12 bg-gradient-kontixx rounded-full flex items-center justify-center mx-auto mb-3">
                                    <span class="text-white font-bold">4</span>
                                </div>
                                <p class="text-sm font-semibold text-gray-900">Optimisation</p>
                                <p class="text-xs text-gray-600 mt-1">Amélioration continue</p>
                            </div>
                        </div>
                    </div>

                    {{-- DÉLAIS ET GARANTIES --}}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
                        <div class="bg-blue-50 p-6 rounded-xl">
                            <h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
                                <svg class="w-6 h-6 text-kontixx-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Délais
                            </h3>
                            <ul class="space-y-2 text-gray-700">
                                <li class="flex items-start">
                                    <span class="text-kontixx-blue mr-2">•</span>
                                    <span><strong>Réactivité Basique :</strong> 48h</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-kontixx-blue mr-2">•</span>
                                    <span><strong>Réactivité Avancée :</strong> 24h</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-kontixx-blue mr-2">•</span>
                                    <span><strong>Réactivité Premium :</strong> 12h</span>
                                </li>
                            </ul>
                        </div>
                        <div class="bg-green-50 p-6 rounded-xl">
                            <h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center">
                                <svg class="w-6 h-6 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Garanties
                            </h3>
                            <ul class="space-y-2 text-gray-700">
                                <li class="flex items-start">
                                    <span class="text-green-600 mr-2">✓</span>
                                    <span><strong>Sauvegardes</strong> quotidiennes</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-green-600 mr-2">✓</span>
                                    <span><strong>Monitoring</strong> 24/7</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="text-green-600 mr-2">✓</span>
                                    <span><strong>Disponibilité</strong> garantie 99.9%</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    {{-- JUSTIFICATION DU PRIX --}}
                    <div class="mb-10 bg-gradient-to-r from-kontixx-blue/10 to-kontixx-orange/10 p-6 rounded-xl">
                        <h3 class="text-xl font-bold text-gray-900 mb-4">Pourquoi ce prix ?</h3>
                        <p class="text-gray-700 leading-relaxed">
                            La maintenance est essentielle pour protéger votre investissement. Nos forfaits (Basique 35€/mois, Avancée 60€/mois, Premium 100€/mois) incluent la surveillance continue, les mises à jour de sécurité, les sauvegardes, le support technique et l'optimisation. Un coût mensuel qui évite des pannes coûteuses et garantit la pérennité de votre site.
                        </p>
                    </div>

                    {{-- FAQ SERVICE --}}
                    <div class="mb-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Questions fréquentes</h3>
                        <div class="space-y-4">
                            <div class="border border-gray-200 rounded-lg p-4">
                                <h4 class="font-bold text-gray-900 mb-2">Que se passe-t-il si mon site tombe en panne ?</h4>
                                <p class="text-gray-600 text-sm">Avec notre maintenance, nous surveillons votre site 24/7. En cas de problème, nous intervenons rapidement selon votre forfait (12h à 48h). Les sauvegardes quotidiennes permettent une restauration rapide si nécessaire.</p>
                            </div>
                            <div class="border border-gray-200 rounded-lg p-4">
                                <h4 class="font-bold text-gray-900 mb-2">Les mises à jour sont-elles incluses ?</h4>
                                <p class="text-gray-600 text-sm">Oui, toutes les mises à jour de sécurité et de compatibilité sont incluses dans nos forfaits. Nous effectuons les mises à jour de manière sécurisée pour éviter toute interruption de service.</p>
                            </div>
                            <div class="border border-gray-200 rounded-lg p-4">
                                <h4 class="font-bold text-gray-900 mb-2">Puis-je modifier mon site avec la maintenance ?</h4>
                                <p class="text-gray-600 text-sm">La maintenance inclut les corrections de bugs et les mises à jour de sécurité. Pour les modifications de contenu ou nouvelles fonctionnalités, nous proposons des prestations supplémentaires facturées à l'heure ou au forfait.</p>
                            </div>
                        </div>
                    </div>

                    {{-- CTA --}}
                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
                        <a href="{{ route('contact') }}" class="btn-cta-blue-gradient inline-flex items-center justify-center gap-2">
                            <span>Demander un devis</span>
                        </a>
                        <a href="{{ route('appointment') }}" class="btn-premium inline-flex items-center justify-center gap-2">
                            <span>Prendre rendez-vous</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================ --}}
    {{-- FORFAITS / TARIFS SECTION --}}
    {{-- ============================================================ --}}
    <section id="tarifs" class="py-24 bg-gray-50 relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 reveal active">
                <h2 class="heading-2 text-gray-900 mb-6">Forfaits / Tarifs</h2>
                <div class="decorative-line"></div>
                <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto mt-6">
                    Nos Forfaits – Création de Site Internet
                </p>
            </div>

            {{-- FORFAITS PRINCIPAUX --}}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
                {{-- FORFAIT ESSENTIEL --}}
                <div class="card-hover bg-white p-8 rounded-2xl reveal animate-delay-100 border-2 border-gray-200 hover:border-kontixx-blue transition-all">
                    <div class="text-center mb-6">
                        <h3 class="text-2xl font-bold text-gray-900 mb-2">ESSENTIEL</h3>
                        <p class="text-sm text-gray-600 mb-4">Site Vitrine</p>
                        <p class="text-xs text-gray-500 italic">Idéal pour démarrer votre présence en ligne</p>
                    </div>
                    <div class="mb-6">
                        <div class="text-4xl font-bold text-kontixx-blue mb-2">150 €</div>
                        <p class="text-sm text-gray-500">À partir de</p>
                    </div>
                    <ul class="space-y-3 text-sm text-gray-600 mb-6">
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Site vitrine jusqu'à 5 pages</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Design moderne et 100% responsive</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Contenu de base optimisé SEO</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Formulaire de contact</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Intégration des réseaux sociaux</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Sécurité de base (HTTPS)</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Mise en ligne du site</span>
                        </li>
                    </ul>
                </div>

                {{-- FORFAIT PROFESSIONNEL --}}
                <div class="card-hover bg-white p-8 rounded-2xl reveal animate-delay-200 border-2 border-kontixx-blue hover:border-kontixx-orange transition-all relative">
                    <div class="absolute top-4 right-4 bg-gradient-kontixx text-white text-xs font-bold px-3 py-1 rounded-full">Populaire</div>
                    <div class="text-center mb-6">
                        <h3 class="text-2xl font-bold text-gray-900 mb-2">PROFESSIONNEL</h3>
                        <p class="text-sm text-gray-600 mb-4">Site Internet Avancé</p>
                        <p class="text-xs text-gray-500 italic">Pour développer votre visibilité et générer des contacts</p>
                    </div>
                    <div class="mb-6">
                        <div class="text-4xl font-bold text-kontixx-blue mb-2">320 €</div>
                        <p class="text-sm text-gray-500">À partir de</p>
                    </div>
                    <ul class="space-y-3 text-sm text-gray-600 mb-6">
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Site internet jusqu'à 10 pages</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Design 100% personnalisé</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Optimisation SEO avancée</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Structure optimisée pour Google</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Formulaire de contact + demande de devis</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Galerie / Portfolio</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Site rapide, sécurisé et performant</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Formation à la gestion du site</span>
                        </li>
                    </ul>
                </div>

                {{-- FORFAIT BUSINESS --}}
                <div class="card-hover bg-white p-8 rounded-2xl reveal animate-delay-300 border-2 border-gray-200 hover:border-kontixx-blue transition-all">
                    <div class="text-center mb-6">
                        <h3 class="text-2xl font-bold text-gray-900 mb-2">BUSINESS</h3>
                        <p class="text-sm text-gray-600 mb-4">Site E-commerce</p>
                        <p class="text-xs text-gray-500 italic">Pour vendre vos produits en ligne 24h/24</p>
                    </div>
                    <div class="mb-6">
                        <div class="text-4xl font-bold text-kontixx-blue mb-2">600 €</div>
                        <p class="text-sm text-gray-500">À partir de</p>
                    </div>
                    <ul class="space-y-3 text-sm text-gray-600 mb-6">
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Boutique en ligne complète</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Jusqu'à 50 produits</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Design professionnel sur mesure</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Pages produits optimisées SEO</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Panier & paiement sécurisé</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Gestion des commandes & stocks</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Emails automatiques (commande, confirmation)</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Formation à l'utilisation e-commerce</span>
                        </li>
                    </ul>
                </div>

                {{-- FORFAIT PREMIUM --}}
                <div class="card-hover bg-white p-8 rounded-2xl reveal animate-delay-400 border-2 border-kontixx-orange hover:border-kontixx-blue transition-all relative">
                    <div class="absolute top-4 right-4 bg-gradient-to-r from-kontixx-orange to-kontixx-blue text-white text-xs font-bold px-3 py-1 rounded-full">Premium</div>
                    <div class="text-center mb-6">
                        <h3 class="text-2xl font-bold text-gray-900 mb-2">PREMIUM</h3>
                        <p class="text-sm text-gray-600 mb-4">Solution Digitale Complète</p>
                        <p class="text-xs text-gray-500 italic">Pour les entreprises ambitieuses</p>
                    </div>
                    <div class="mb-6">
                        <div class="text-4xl font-bold text-kontixx-blue mb-2">1 000 €</div>
                        <p class="text-sm text-gray-500">À partir de</p>
                    </div>
                    <ul class="space-y-3 text-sm text-gray-600 mb-6">
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Site sur mesure (vitrine ou e-commerce)</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Pages illimitées</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>SEO avancé + stratégie de contenu</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Optimisation vitesse & sécurité (Core Web Vitals)</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Intégration d'outils marketing & tracking</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Support & maintenance 3 mois inclus</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-kontixx-blue mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            <span>Accompagnement personnalisé & conseils stratégiques</span>
                        </li>
                    </ul>
                </div>
            </div>

            {{-- OPTIONS SUPPLÉMENTAIRES --}}
            <div class="bg-white p-8 rounded-2xl reveal animate-delay-500 mb-8">
                <h3 class="text-2xl font-bold text-gray-900 mb-6 text-center">Options supplémentaires</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <span class="text-gray-700">Nom de domaine & hébergement</span>
                        <span class="font-bold text-kontixx-blue">à partir de 60 € / an</span>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <span class="text-gray-700">Maintenance mensuelle</span>
                        <span class="font-bold text-kontixx-blue">à partir de 40 € / mois</span>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <span class="text-gray-700">Référencement SEO mensuel</span>
                        <span class="font-bold text-kontixx-blue">à partir de 120 € / mois</span>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <span class="text-gray-700">Rédaction de contenu SEO</span>
                        <span class="font-bold text-kontixx-blue">à partir de 30 € / page</span>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <span class="text-gray-700">Refonte de site existant</span>
                        <span class="font-bold text-kontixx-blue">à partir de 250 €</span>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <span class="text-gray-700">Site multilingue</span>
                        <span class="font-bold text-kontixx-blue">à partir de 150 €</span>
                    </div>
                </div>
            </div>

            {{-- OFFRES RÉCURRENTES --}}
            <div class="mb-12 reveal animate-delay-500">
                <h3 class="text-2xl font-bold text-gray-900 mb-8 text-center">Offres récurrentes</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                    {{-- MAINTENANCE & SUPPORT --}}
                    <div class="bg-white p-6 rounded-2xl border-2 border-gray-200 hover:border-kontixx-blue transition-all">
                        <div class="flex items-center mb-4">
                            <span class="text-3xl mr-3">🛠</span>
                            <h4 class="text-xl font-bold text-gray-900">Maintenance & Support</h4>
                        </div>
                        <ul class="space-y-3">
                            <li class="flex items-center justify-between">
                                <span class="text-gray-700">Basique</span>
                                <span class="font-bold text-kontixx-blue">35 € / mois</span>
                            </li>
                            <li class="flex items-center justify-between">
                                <span class="text-gray-700">Avancée</span>
                                <span class="font-bold text-kontixx-blue">60 € / mois</span>
                            </li>
                            <li class="flex items-center justify-between">
                                <span class="text-gray-700">Premium</span>
                                <span class="font-bold text-kontixx-blue">100 € / mois</span>
                            </li>
                        </ul>
                    </div>

                    {{-- SEO & VISIBILITÉ MENSUELLE --}}
                    <div class="bg-white p-6 rounded-2xl border-2 border-gray-200 hover:border-kontixx-blue transition-all">
                        <div class="flex items-center mb-4">
                            <span class="text-3xl mr-3">📈</span>
                            <h4 class="text-xl font-bold text-gray-900">SEO & Visibilité Mensuelle</h4>
                        </div>
                        <ul class="space-y-3">
                            <li class="flex items-center justify-between">
                                <span class="text-gray-700">SEO Local</span>
                                <span class="font-bold text-kontixx-blue">100 € / mois</span>
                            </li>
                            <li class="flex items-center justify-between">
                                <span class="text-gray-700">SEO Avancé</span>
                                <span class="font-bold text-kontixx-blue">180 € / mois</span>
                            </li>
                            <li class="flex items-center justify-between">
                                <span class="text-gray-700">SEO + Contenu</span>
                                <span class="font-bold text-kontixx-blue">250 € / mois</span>
                            </li>
                        </ul>
                    </div>

                    {{-- COMMUNITY MANAGEMENT --}}
                    <div class="bg-white p-6 rounded-2xl border-2 border-gray-200 hover:border-kontixx-blue transition-all">
                        <div class="flex items-center mb-4">
                            <span class="text-3xl mr-3">💬</span>
                            <h4 class="text-xl font-bold text-gray-900">Community Management</h4>
                        </div>
                        <ul class="space-y-3">
                            <li class="flex items-center justify-between">
                                <span class="text-gray-700">Starter</span>
                                <span class="font-bold text-kontixx-blue">120 € / mois</span>
                            </li>
                            <li class="flex items-center justify-between">
                                <span class="text-gray-700">Business</span>
                                <span class="font-bold text-kontixx-blue">200 € / mois</span>
                            </li>
                            <li class="flex items-center justify-between">
                                <span class="text-gray-700">Premium</span>
                                <span class="font-bold text-kontixx-blue">300 € / mois</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            {{-- MESSAGE FINAL --}}
            <div class="text-center reveal animate-delay-600">
                <p class="text-gray-600 mb-6 max-w-3xl mx-auto">
                    Chez KONTIXX, chaque forfait est pensé pour évoluer avec votre activité et générer des résultats concrets sur le long terme.
                </p>
                <div class="bg-gradient-to-r from-kontixx-blue/10 to-kontixx-orange/10 p-6 rounded-2xl mb-6">
                    <p class="text-lg font-semibold text-gray-900 mb-4">📞 Besoin d'un forfait sur mesure ?</p>
                    <p class="text-gray-700 mb-4">Contactez-nous pour un devis gratuit et une solution adaptée à votre budget et à vos objectifs.</p>
                    <a href="{{ route('contact') }}" class="btn-cta-blue-gradient inline-flex items-center gap-2">
                        <span>👉 Demander un devis</span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================ --}}
    {{-- CTA FINAL --}}
    {{-- ============================================================ --}}
    <section class="py-12 bg-white relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="card-premium glass-premium text-center p-8 md:p-10 rounded-2xl shadow-premium animate-fade-in-up-premium bg-white">
                <p class="text-xl md:text-2xl text-blue-500 mb-6 font-medium">Contactez-nous pour discuter de vos besoins</p>
                <a href="{{ route('contact') }}" class="btn-premium inline-flex items-center gap-3 group">
                    <span class="relative z-10">Contactez-nous</span>
                    <svg class="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                    </svg>
                </a>
            </div>
        </div>
    </section>

    <script>
        // SCROLL REVEAL ANIMATION
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('active');
                }
            });
        }, observerOptions);

        document.querySelectorAll('.reveal').forEach(el => {
            observer.observe(el);
        });
    </script>
@endsection