{% extends 'legal/_layout.html.twig' %}

{% block title %}Tarifs des services - SARL SITECONSEIL{% endblock %}
{% block description %}Consultez la grille tarifaire des services proposes par la SARL SITECONSEIL.{% endblock %}

{% block og_title %}Tarifs des services - CRM SITECONSEIL{% endblock %}
{% block og_description %}Grille tarifaire des services proposes par la SARL SITECONSEIL.{% endblock %}

{% block body %}
<div class="page-container">
    <h1 class="text-3xl font-bold uppercase tracking-tighter italic heading-page mb-8">Tarifs</h1>

    <div class="flex flex-col gap-8">
        <p class="text-sm">Tous les tarifs sont exprimes en <strong>euros hors taxes (€ HT)</strong>. Les tarifs ci-dessous sont indicatifs et susceptibles d'evolution. Conformement a nos <a href="{{ path('app_legal_cgv') }}" class="text-indigo-800 underline hover:text-indigo-950">Conditions Generales de Vente</a> (article 4), toute modification tarifaire sera communiquee aux clients concernes au minimum 1 mois avant son application.</p>

        {# ─── Tabs ─── #}
        <div>
            <div class="flex flex-wrap border-b border-gray-200" id="tarif-tabs">
                <button data-tab="site" class="px-6 py-3 font-bold uppercase text-sm tracking-widest glass-dark text-white border border-white/20 border-b-0 cursor-pointer">Site Internet</button>
                <button data-tab="ecommerce" class="px-6 py-3 font-bold uppercase text-sm tracking-widest glass text-gray-700 border border-gray-200 border-b-0 cursor-pointer hover:bg-white/80 transition-all">E-Commerce</button>
                <button data-tab="domaine" class="px-6 py-3 font-bold uppercase text-sm tracking-widest glass text-gray-700 border border-gray-200 border-b-0 cursor-pointer hover:bg-white/80 transition-all">Nom de domaine</button>
                <button data-tab="mail" class="px-6 py-3 font-bold uppercase text-sm tracking-widest glass text-gray-700 border border-gray-200 border-b-0 cursor-pointer hover:bg-white/80 transition-all">Esy-Mail</button>
                <button data-tab="mailer" class="px-6 py-3 font-bold uppercase text-sm tracking-widest glass text-gray-700 border border-gray-200 border-b-0 cursor-pointer hover:bg-white/80 transition-all">Esy-Mailer</button>
                <button data-tab="tchat" class="px-6 py-3 font-bold uppercase text-sm tracking-widest glass text-gray-700 border border-gray-200 border-b-0 cursor-pointer hover:bg-white/80 transition-all">Esy-Tchat</button>
                <button data-tab="meet" class="px-6 py-3 font-bold uppercase text-sm tracking-widest glass text-gray-700 border border-gray-200 border-b-0 cursor-pointer hover:bg-white/80 transition-all">Esy-Meet</button>
                <button data-tab="defender" class="px-6 py-3 font-bold uppercase text-sm tracking-widest glass text-gray-700 border border-gray-200 border-b-0 cursor-pointer hover:bg-white/80 transition-all">Esy-Defender</button>
            </div>

            {# ─── TAB : Site Internet ─── #}
            <div id="content-site" class="pt-8 flex flex-col gap-8">
                <section>
                    <h2 class="text-xl font-bold uppercase mb-2">Votre site Internet, tout simplement</h2>
                    <p class="text-sm">Profitez de la gamme tarifaire SITECONSEIL : une solution progressive, pensee pour le contexte economique actuel, avec une approche budgetaire adaptee.</p>
                    <p class="text-sm mt-2">L'investissement dans un site web est crucial pour toute entreprise. Conscients des incertitudes economiques actuelles, SITECONSEIL a structure ses offres pour faciliter votre transition numerique de maniere progressive et securisee.</p>
                    <p class="text-sm mt-2">Nous vous proposons deux grandes categories d'offres basees sur l'utilisation du CMS <strong>Esy-Web</strong>.</p>
                </section>

                <section>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="glass p-6">
                            <h3 class="font-bold uppercase text-lg">Offre Business</h3>
                            <p class="text-3xl font-bold mt-2">500 € <span class="text-sm font-bold">HT</span></p>
                            <p class="text-xs text-gray-500 mt-1">Paiement unique</p>
                            <p class="mt-4 text-sm font-bold">Vous achetez une licence Esy-Web. SITECONSEIL gere l'installation et toute la partie technique (hebergement, configuration, etc.).</p>
                            <p class="mt-2 text-sm">Vous remplissez ensuite le site de maniere autonome en vous appuyant sur les didacticiels integres au CMS.</p>
                            <div class="mt-4 pt-4 border-t-2 border-gray-200">
                                <p class="font-bold uppercase text-xs tracking-widest mb-2">Accompagnement optionnel</p>
                                <ul class="text-sm space-y-2">
                                    <li class="flex justify-between items-start">
                                        <span><strong>Pack 10 heures de formation</strong><br><span class="text-xs text-gray-500">Nous construisons votre site ensemble tout en vous formant</span></span>
                                        <span class="font-bold whitespace-nowrap ml-4">500 € HT</span>
                                    </li>
                                    <li class="flex justify-between items-start">
                                        <span><strong>Formation a la demande</strong></span>
                                        <span class="font-bold whitespace-nowrap ml-4">70 € HT / h</span>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="glass-gold p-6 relative">
                            <span class="absolute top-0 right-0 bg-gray-900/80 text-white text-[8px] font-bold uppercase tracking-wider px-2 py-1 rounded-bl-lg rounded-tr-[15px]">Premium</span>
                            <h3 class="font-bold uppercase text-lg">Offre Premium</h3>
                            <p class="text-3xl font-bold mt-2">3 200 € <span class="text-sm font-bold">HT</span></p>
                            <p class="text-xs mt-1">Paiement unique</p>
                            <p class="mt-4 text-sm font-bold">On s'occupe de tout pour vous.</p>
                            <p class="mt-2 text-sm">Cette offre s'adresse aux clients qui ne souhaitent pas ou qui n'ont pas le temps de s'occuper de la mise en place.</p>
                            <p class="mt-2 text-sm">SITECONSEIL installe le CMS Esy-Web, et apres une reunion technique pour mieux vous connaitre, nous creons votre site avec votre collaboration et vous accompagnons activement dans l'integration du contenu jusqu'a la mise en ligne finale.</p>
                        </div>
                    </div>
                </section>

                <section>
                    <h2 class="text-xl font-bold uppercase mb-4">Ces offres comprennent</h2>
                    <div class="glass p-6">
                        <ul class="text-sm space-y-2">
                            <li>&#10003; L'achat de la licence Esy-Web</li>
                            <li>&#10003; Un acces a 100 % des fonctionnalites, sans options payantes ni plugins supplementaires</li>
                            <li>&#10003; Les mises a jour techniques et graphiques incluses pendant toute la duree du partenariat</li>
                            <li>&#10003; 1 heure de formation incluse pour demarrer ensemble dans de bonnes conditions</li>
                            <li>&#10003; Un acces a l'ensemble des tutoriels pour vous accompagner pas a pas</li>
                            <li>&#10003; Une assistance disponible pour repondre a toutes vos questions</li>
                            <li>&#10003; 10 Go d'espace serveur</li>
                            <li>&#10003; Analyse technique et verification du bon fonctionnement des services a chaque connexion</li>
                        </ul>
                    </div>
                </section>

                <section>
                    <h2 class="text-xl font-bold uppercase mb-4">Puis 100 € HT / mois</h2>
                    <div class="glass p-6">
                        <ul class="text-sm space-y-2">
                            <li>&#10003; Hebergement securise</li>
                            <li>&#10003; Sauvegardes regulieres</li>
                            <li>&#10003; Esy-Analytics integre de base (analyses en temps reel)</li>
                            <li>&#10003; Certificat HTTPS classe A+ (valide par Qualys a chaque connexion)</li>
                            <li>&#10003; Securite classee A+ (valide par Qualys a chaque connexion)</li>
                            <li>&#10003; Maintenance permanente : vous beneficiez toujours de la toute derniere version</li>
                            <li>&#10003; Securisation et cryptage des donnees</li>
                            <li>&#10003; Surveillance 24h/24</li>
                            <li>&#10003; Acces direct a un technicien</li>
                            <li>&#10003; 1 nom de domaine compris</li>
                            <li>&#10003; 2 adresses e-mail</li>
                        </ul>
                    </div>
                </section>

                <section>
                    <h2 class="text-xl font-bold uppercase mb-4">Descriptif technique des deux formules</h2>
                    <div class="flex flex-col gap-6">
                        <div class="glass overflow-hidden">
                            <div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-bold uppercase text-xs tracking-widest">Caracteristiques</span></div>
                            <div class="p-4">
                                <ul class="text-sm space-y-1 columns-1 md:columns-2">
                                    <li>&#10003; Site Internet securise et crypte</li>
                                    <li>&#10003; Mises a jour automatiques</li>
                                    <li>&#10003; Sauvegardes automatisees</li>
                                    <li>&#10003; Esy-Defender Standard</li>
                                    <li>&#10003; Licence HTTPS</li>
                                    <li>&#10003; Respect du RGPD</li>
                                    <li>&#10003; Assistance technique incluse</li>
                                    <li>&#10003; Surveillance des erreurs en temps reel</li>
                                    <li>&#10003; Site Internet personnalisable</li>
                                    <li>&#10003; Gestion du nom de domaine (optionnel)</li>
                                    <li>&#10003; Sites Internet multilingues + 100 langues</li>
                                    <li>&#10003; Site Map automatise</li>
                                    <li>&#10003; Optimisation referencement naturel 100 %</li>
                                    <li>&#10003; Hebergement sur serveurs securises</li>
                                    <li>&#10003; Donnees cryptees</li>
                                    <li>&#10003; Sauvegardes cryptees</li>
                                </ul>
                            </div>
                        </div>
                        <div class="glass overflow-hidden">
                            <div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-bold uppercase text-xs tracking-widest">Editeur de texte</span></div>
                            <div class="p-4">
                                <ul class="text-sm space-y-1 columns-1 md:columns-2">
                                    <li>&#10003; Choix de la police</li>
                                    <li>&#10003; Choix du style de la police (ultra fin a black)</li>
                                    <li>&#10003; Gestion de la taille de police</li>
                                    <li>&#10003; Gestion de l'interlignage par paragraphe</li>
                                    <li>&#10003; Gestion de l'interlettrage</li>
                                    <li>&#10003; Gestion des balises</li>
                                    <li>&#10003; Gras, italique, souligne, barre</li>
                                    <li>&#10003; Choix couleur de police</li>
                                    <li>&#10003; Choix de la couleur d'arriere plan</li>
                                    <li>&#10003; Surlignage</li>
                                    <li>&#10003; Indice et exposant</li>
                                    <li>&#10003; Insertion ligne de separation</li>
                                    <li>&#10003; Alignement du texte</li>
                                    <li>&#10003; Gestion des retraits</li>
                                    <li>&#10003; Liste a puces et liste numerotee</li>
                                    <li>&#10003; Integration d'un lien</li>
                                    <li>&#10003; Bloc citation</li>
                                    <li>&#10003; Liste des caracteres speciaux de la police</li>
                                    <li>&#10003; Gestion des colonnes de texte</li>
                                    <li>&#10003; Integration image et fichier</li>
                                    <li>&#10003; Moteur de recherche et remplacement</li>
                                    <li>&#10003; Nettoyage des textes</li>
                                </ul>
                            </div>
                        </div>
                        <div class="glass overflow-hidden">
                            <div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-bold uppercase text-xs tracking-widest">Fonctionnalites et modules</span></div>
                            <div class="p-4">
                                <ul class="text-sm space-y-1 columns-1 md:columns-2">
                                    <li>&#10003; Gestion de contenu</li>
                                    <li>&#10003; Integration d'images et videos</li>
                                    <li>&#10003; Recadrage des images (CROP)</li>
                                    <li>&#10003; Conservation des images d'origine</li>
                                    <li>&#10003; Importation de videos</li>
                                    <li>&#10003; Banque d'icones</li>
                                    <li>&#10003; Favicon</li>
                                    <li>&#10003; Barre de navigation administrable</li>
                                    <li>&#10003; Pied de page administrable</li>
                                    <li>&#10003; Duplication de zones et modules</li>
                                    <li>&#10003; Fond d'ecran commun ou individualise</li>
                                    <li>&#10003; Sliders</li>
                                    <li>&#10003; Effets parallaxes</li>
                                    <li>&#10003; Actualites</li>
                                    <li>&#10003; Evenements / Agenda</li>
                                    <li>&#10003; Mises en avant</li>
                                    <li>&#10003; Phototheques</li>
                                    <li>&#10003; Videotheques</li>
                                    <li>&#10003; Lecteur de PDF</li>
                                    <li>&#10003; Page de couverture</li>
                                    <li>&#10003; Creation de formulaires personnalises</li>
                                    <li>&#10003; Formulaires de contact</li>
                                    <li>&#10003; Reseaux sociaux</li>
                                    <li>&#10003; Newsletters</li>
                                    <li>&#10003; Fil d'Ariane</li>
                                    <li>&#10003; Boutons (creation de boutons)</li>
                                    <li>&#10003; Notifications</li>
                                    <li>&#10003; Titres personnalises (H1)</li>
                                    <li>&#10003; Plan du site</li>
                                    <li>&#10003; Cartes interactives gratuites (OpenStreetMap)</li>
                                    <li>&#10003; Pages privees</li>
                                    <li>&#10003; Comptes utilisateurs</li>
                                    <li>&#10003; Stockage de donnees : cloud SITECONSEIL</li>
                                    <li>&#10003; Mentions legales</li>
                                    <li>&#10003; Cookies</li>
                                    <li>&#10003; Donnees personnelles</li>
                                    <li>&#10003; Conditions generales d'utilisation</li>
                                    <li>&#10003; Hebergement</li>
                                    <li>&#10003; Accessibilite</li>
                                </ul>
                            </div>
                        </div>
                        <div class="glass overflow-hidden">
                            <div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-bold uppercase text-xs tracking-widest">Outils et utilitaires</span></div>
                            <div class="p-4">
                                <ul class="text-sm space-y-1 columns-1 md:columns-2">
                                    <li>&#10003; Esy-Analytics</li>
                                    <li>&#10003; Traitement erreur 404</li>
                                    <li>&#10003; Search Console</li>
                                    <li>&#10003; Analyse de la rapidite du site Internet</li>
                                    <li>&#10003; Google PageSpeed Insights</li>
                                    <li>&#10003; Reconnaissance vocale</li>
                                    <li>&#10003; Lecture automatique du texte</li>
                                    <li>&#10003; Traduction automatisee par IA</li>
                                    <li>&#10003; Reconnaissance du langage</li>
                                    <li>&#10003; Integration des Google Fonts</li>
                                    <li>&#10003; Integration des Adobe Fonts</li>
                                </ul>
                            </div>
                        </div>
                        <div class="glass overflow-hidden">
                            <div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-bold uppercase text-xs tracking-widest">Hebergement et serveur</span></div>
                            <div class="p-4">
                                <ul class="text-sm space-y-1">
                                    <li>&#10003; Infrastructure serveurs dedies</li>
                                    <li>&#10003; Sauvegardes automatisees</li>
                                    <li>&#10003; Cryptage des espaces serveurs</li>
                                    <li>&#10003; Gestion de la securisation des serveurs</li>
                                    <li>&#10003; Mises a jour des serveurs</li>
                                </ul>
                            </div>
                        </div>
                        <div class="glass overflow-hidden">
                            <div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-bold uppercase text-xs tracking-widest">Options</span></div>
                            <div class="p-4">
                                <ul class="text-sm space-y-1">
                                    <li>&#10003; Graphisme prive</li>
                                    <li>&#10003; Fonctionnalite privee</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>

                <section>
                    <h2 class="text-xl font-bold uppercase mb-4">Avantages cles SITECONSEIL</h2>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="glass p-5">
                            <h3 class="font-bold uppercase text-sm mb-2">Maitrise budgetaire</h3>
                            <p class="text-sm">Vous choisissez l'offre la plus adaptee a votre tresorerie. L'approche progressive reduit la pression d'un cout initial important.</p>
                        </div>
                        <div class="glass p-5">
                            <h3 class="font-bold uppercase text-sm mb-2">Evolutivite et puissance</h3>
                            <p class="text-sm">Votre solution evolue en permanence et suit l'evolution de la technologie. Vous beneficiez de toutes les fonctionnalites offertes par la puissance du CMS Esy-Web.</p>
                        </div>
                        <div class="glass p-5">
                            <h3 class="font-bold uppercase text-sm mb-2">Accompagnement specifique</h3>
                            <p class="text-sm">Un support est garanti quelle que soit la formule choisie : Business ou Premium.</p>
                        </div>
                    </div>
                    <div class="mt-6 glass-gold p-6 text-center">
                        <p class="font-bold uppercase text-sm">Ne reportez plus votre projet web par prudence financiere.</p>
                        <p class="text-sm mt-2">Notre promesse est un site internet concu pour etre evolutif et perenne sur le long terme. Chaque offre est structuree comme une etape vers votre reussite numerique.</p>
                    </div>
                </section>
            </div>

            {# ─── TAB : E-Commerce ─── #}
            <div id="content-ecommerce" class="pt-8 flex flex-col gap-8 hidden">
                <section>
                    <h2 class="text-xl font-bold uppercase mb-2">Maitrisez vos depenses avec SITECONSEIL</h2>
                    <p class="text-sm font-bold">Lancez votre site E-Commerce facilement.</p>
                    <p class="text-sm mt-2">Profitez de la gamme tarifaire SITECONSEIL : une solution progressive, pensee pour le contexte economique actuel.</p>
                    <p class="text-sm mt-2">Investir dans un site web est essentiel, voire indispensable pour votre entreprise, mais face aux incertitudes actuelles, cela peut sembler risque. Chez SITECONSEIL, nous avons repense notre approche pour vous permettre de demarrer votre presence en ligne en toute serenite.</p>
                    <p class="text-sm mt-2">Decouvrez nos deux offres : <strong>E-Commerce Business</strong> et <strong>E-Commerce Premium</strong>. Vous demarrez avec l'offre la plus adaptee a votre tresorerie.</p>
                </section>

                <section>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="glass p-6">
                            <h3 class="font-bold uppercase text-lg">E-Commerce Business</h3>
                            <p class="text-3xl font-bold mt-2">999 € <span class="text-sm font-bold">HT</span></p>
                            <p class="text-xs text-gray-500 mt-1">Paiement unique</p>
                            <p class="mt-2 text-sm font-bold">Nombre de produits illimites</p>
                            <p class="mt-1 text-sm">Achat licence Esy-Web - Full options</p>
                            <div class="mt-4 pt-4 border-t-2 border-gray-200">
                                <p class="font-bold uppercase text-xs tracking-widest">Puis 150 € HT / mois</p>
                            </div>
                            <p class="mt-4 text-sm">Toutes les fonctionnalites de la formule <strong>Premium site internet</strong> + toutes les fonctionnalites de notre E-boutique E-Commerce.</p>
                        </div>

                        <div class="glass-gold p-6 relative">
                            <span class="absolute top-0 right-0 bg-gray-900/80 text-white text-[8px] font-bold uppercase tracking-wider px-2 py-1 rounded-bl-lg rounded-tr-[15px]">La formule royale</span>
                            <h3 class="font-bold uppercase text-lg">E-Commerce Premium</h3>
                            <p class="text-3xl font-bold mt-2">5 110 € <span class="text-sm font-bold">HT</span></p>
                            <p class="text-xs mt-1">soit 14 € HT / jour pendant 1 an</p>
                            <div class="mt-2 text-xs space-y-1">
                                <p>30 % a la signature</p>
                                <p>50 % a la mise en ligne .dev</p>
                                <p>20 % a l'ouverture</p>
                            </div>
                            <p class="mt-4 text-sm font-bold">On s'occupe de tout pour vous et avec vous.</p>
                            <p class="mt-1 text-sm">Nombre de produits illimites</p>
                            <div class="mt-4 pt-4 border-t-2 border-gray-800">
                                <p class="font-bold uppercase text-xs tracking-widest">Puis 150 € HT / mois</p>
                            </div>
                            <p class="mt-4 text-sm">Toutes les fonctionnalites de la formule <strong>Premium site internet</strong> + toutes les fonctionnalites de notre E-boutique E-Commerce.</p>
                        </div>
                    </div>
                </section>

                <section>
                    <h2 class="text-xl font-bold uppercase mb-4">Fonctionnalites E-Commerce</h2>
                    <div class="flex flex-col gap-6">
                        <div class="glass overflow-hidden">
                            <div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-bold uppercase text-xs tracking-widest">Affichage et gestion des produits</span></div>
                            <div class="p-4">
                                <ul class="text-sm space-y-1 columns-1 md:columns-2">
                                    <li>&#10003; Catalogue en ligne</li>
                                    <li>&#10003; Affichage du prix de vente en HT ou TTC</li>
                                    <li>&#10003; Gestion des taux de TVA</li>
                                    <li>&#10003; Mise a jour des produits en temps reel</li>
                                    <li>&#10003; Nombre d'articles illimites</li>
                                    <li>&#10003; Nombre de rubriques illimites</li>
                                    <li>&#10003; Module B to B : entreprise a entreprise</li>
                                    <li>&#10003; Module B to C : entreprise a particulier</li>
                                    <li>&#10003; Classement personnalise des familles et articles</li>
                                    <li>&#10003; Desactivation d'un produit sans supprimer sa fiche</li>
                                    <li>&#10003; Gestion des articles en rupture</li>
                                    <li>&#10003; Transfert et redimensionnement automatique des images</li>
                                    <li>&#10003; Systeme de zoom sur les photos</li>
                                    <li>&#10003; Options d'articles parametrables</li>
                                    <li>&#10003; Fonction "Envoyer a un ami"</li>
                                    <li>&#10003; Fonction "Donnez votre avis"</li>
                                    <li>&#10003; Editeur evolue pour la description des articles</li>
                                    <li>&#10003; Mise a jour des prix automatique</li>
                                    <li>&#10003; Selection des produits a mettre en avant</li>
                                    <li>&#10003; Liens vers d'autres sites</li>
                                    <li>&#10003; Promotions article par article</li>
                                    <li>&#10003; Promotions par gamme de produit</li>
                                    <li>&#10003; Reductions en fonction des quantites</li>
                                    <li>&#10003; Affichage des prix au kilo, gramme ou litre</li>
                                    <li>&#10003; Ventes croisees et suggestion d'articles</li>
                                    <li>&#10003; 100 langues disponibles (francais de base)</li>
                                </ul>
                            </div>
                        </div>

                        <div class="glass overflow-hidden">
                            <div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-bold uppercase text-xs tracking-widest">Modes de paiement</span></div>
                            <div class="p-4">
                                <p class="text-sm font-bold mb-2">Paiement securise bancaire integre compris dans l'offre :</p>
                                <ul class="text-sm space-y-1 columns-1 md:columns-3">
                                    <li>&#10003; Credit Agricole</li>
                                    <li>&#10003; Caisse d'Epargne</li>
                                    <li>&#10003; Credit Mutuel</li>
                                    <li>&#10003; CIC</li>
                                    <li>&#10003; Banque Postale</li>
                                    <li>&#10003; BNP</li>
                                    <li>&#10003; PayPal</li>
                                    <li>&#10003; Lydia Pro</li>
                                    <li>&#10003; BitPay</li>
                                    <li>&#10003; Paylib</li>
                                    <li>&#10003; Stancer</li>
                                    <li>&#10003; Stripe</li>
                                    <li>&#10003; etc.</li>
                                </ul>
                            </div>
                        </div>

                        <div class="glass overflow-hidden">
                            <div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-bold uppercase text-xs tracking-widest">Gestion des frais de port</span></div>
                            <div class="p-4">
                                <ul class="text-sm space-y-1">
                                    <li>&#10003; Possibilite d'offrir les frais de port aux clients</li>
                                    <li>&#10003; Calcul des frais de port en fonction du poids total, du montant total, de la zone de livraison, du type de livraison (illimites) et de la taille des cartons</li>
                                    <li>&#10003; Possibilite d'exonerer les frais de port</li>
                                    <li>&#10003; Nombre de transporteurs illimites</li>
                                    <li>&#10003; Integration des API des transporteurs a la demande</li>
                                </ul>
                            </div>
                        </div>

                        <div class="glass overflow-hidden">
                            <div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-bold uppercase text-xs tracking-widest">Gestion des commandes</span></div>
                            <div class="p-4">
                                <ul class="text-sm space-y-1 columns-1 md:columns-2">
                                    <li>&#10003; Notification des commandes par email</li>
                                    <li>&#10003; Confirmation automatique au client</li>
                                    <li>&#10003; Suivi de commande via Colissimo</li>
                                    <li>&#10003; Sauvegarde des comptes clients</li>
                                    <li>&#10003; Apercu detaille des commandes par client</li>
                                    <li>&#10003; Sauvegarde des commandes toutes les heures</li>
                                    <li>&#10003; Edition des factures et bons de livraison (PDF)</li>
                                    <li>&#10003; Historique des commandes pour le client</li>
                                    <li>&#10003; Recuperation en cas de non retour bancaire</li>
                                    <li>&#10003; Modification des CGV par le vendeur</li>
                                </ul>
                            </div>
                        </div>

                        <div class="glass overflow-hidden">
                            <div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-bold uppercase text-xs tracking-widest">Fonctionnalites avancees</span></div>
                            <div class="p-4">
                                <ul class="text-sm space-y-1 columns-1 md:columns-2">
                                    <li>&#10003; Module de gestion de contenu</li>
                                    <li>&#10003; Module FAQ</li>
                                    <li>&#10003; Analyse de la repartition et de l'evolution du CA</li>
                                    <li>&#10003; Outils avances pour le referencement (metas tags, sitemap XML)</li>
                                    <li>&#10003; URL rewriting</li>
                                    <li>&#10003; Module de gestion des affiliations</li>
                                    <li>&#10003; Module de parrainage <span class="text-xs text-gray-500">(Premium uniquement)</span></li>
                                    <li>&#10003; Codes promotionnels en % et en valeur</li>
                                    <li>&#10003; Remises par produit</li>
                                    <li>&#10003; Remises par groupe de produits</li>
                                    <li>&#10003; Remises par client</li>
                                    <li>&#10003; Remises par groupe de clients</li>
                                    <li>&#10003; Creation de pages de contenu illimitee</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>

                <section>
                    <h2 class="text-xl font-bold uppercase mb-4">Pourquoi choisir nos offres E-Commerce ?</h2>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="glass p-5">
                            <h3 class="font-bold uppercase text-sm mb-2">Maitrise budgetaire</h3>
                            <p class="text-sm">Vous investissez selon vos moyens, sans la pression d'un cout initial trop important pour vos finances.</p>
                        </div>
                        <div class="glass p-5">
                            <h3 class="font-bold uppercase text-sm mb-2">Croissance securisee</h3>
                            <p class="text-sm">Votre site evolue en meme temps que votre activite et vos revenus. Vous disposez d'une solution toutes options et de toute la puissance de notre CMS.</p>
                        </div>
                        <div class="glass p-5">
                            <h3 class="font-bold uppercase text-sm mb-2">Accompagnement garanti</h3>
                            <p class="text-sm">Nous vous accompagnons dans la mise en place de l'offre que vous choisissez : E-Commerce Business ou E-Commerce Premium.</p>
                        </div>
                    </div>
                    <div class="mt-6 glass-gold p-6 text-center">
                        <p class="font-bold uppercase text-sm">Ne reportez plus votre projet web par crainte pour votre tresorerie.</p>
                        <p class="text-sm mt-2">Notre promesse : un site professionnel, evolutif sur le long terme. Chaque offre est pensee comme une etape vers votre succes numerique.</p>
                    </div>
                </section>
            </div>

            {# ─── TAB : Nom de domaine ─── #}
            <div id="content-domaine" class="pt-8 flex flex-col gap-8 hidden">
                <section>
                    <h2 class="text-xl font-bold uppercase mb-4">Service de Nom de Domaine</h2>
                    <p class="text-sm">SITECONSEIL prend en charge le depot, l'enregistrement, le renouvellement et la gestion de vos noms de domaine. Le nom de domaine sera depose chez <strong>OVHcloud</strong>, et la zone DNS (le fichier de configuration de votre domaine) sera configuree chez <strong>Cloudflare</strong>.</p>
                </section>

                <section>
                    <div class="glass overflow-hidden">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="bg-gray-900 text-white">
                                    <th class="px-4 py-2 text-left font-bold uppercase text-xs tracking-widest">Prestation</th>
                                    <th class="px-4 py-2 text-right font-bold uppercase text-xs tracking-widest">Tarif</th>
                                    <th class="px-4 py-2 text-right font-bold uppercase text-xs tracking-widest">Periodicite</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-b border-gray-200">
                                    <td class="px-4 py-3">
                                        <span class="font-bold">Depot de nom de domaine</span>
                                        <span class="block text-xs text-gray-500 mt-1">Enregistrement initial du nom de domaine avec configuration complete incluse</span>
                                    </td>
                                    <td class="px-4 py-3 text-right font-bold">20,00 €</td>
                                    <td class="px-4 py-3 text-right text-gray-500">Unique</td>
                                </tr>
                                <tr class="border-b border-gray-200">
                                    <td class="px-4 py-3">
                                        <span class="font-bold">Renouvellement</span>
                                        <span class="block text-xs text-gray-500 mt-1">Renouvellement annuel du nom de domaine</span>
                                    </td>
                                    <td class="px-4 py-3 text-right font-bold">20,00 €</td>
                                    <td class="px-4 py-3 text-right text-gray-500">/ an</td>
                                </tr>
                                <tr class="border-b border-gray-200">
                                    <td class="px-4 py-3">
                                        <span class="font-bold">Gestion</span>
                                        <span class="block text-xs text-gray-500 mt-1">Gestion technique du nom de domaine (DNS, redirections, configuration)</span>
                                    </td>
                                    <td class="px-4 py-3 text-right font-bold">30,00 €</td>
                                    <td class="px-4 py-3 text-right text-gray-500">/ an</td>
                                </tr>
                                <tr class="border-b border-gray-200 bg-gray-50">
                                    <td class="px-4 py-3" colspan="3">
                                        <p class="font-bold text-xs uppercase tracking-widest mb-2">La gestion inclut :</p>
                                        <ul class="text-xs text-gray-600 space-y-2">
                                            <li><strong>SPF (Sender Policy Framework)</strong> : enregistrement DNS qui indique quels serveurs sont autorises a envoyer des emails avec votre nom de domaine. Cela empeche les spammeurs d'envoyer des emails en se faisant passer pour vous.</li>
                                            <li><strong>DMARC (Domain-based Message Authentication)</strong> : politique de securite qui indique aux serveurs de messagerie comment traiter les emails non authentifies provenant de votre domaine. Cela protege votre reputation et celle de vos clients.</li>
                                            <li><strong>DNSSEC (Domain Name System Security Extensions)</strong> : signature cryptographique de votre zone DNS qui garantit que les visiteurs arrivent bien sur votre site et non sur une copie frauduleuse. Cela protege contre le detournement de votre nom de domaine.</li>
                                            <li><strong>Protection Whois</strong> : masquage de vos donnees personnelles (nom, adresse, telephone, email) dans l'annuaire public des noms de domaine. Sans cette protection, n'importe qui peut consulter vos informations personnelles.</li>
                                            <li><strong>Protection contre le transfert</strong> : verrouillage du nom de domaine qui empeche tout transfert non autorise vers un autre registrar. Cela garantit que personne ne peut voler ou deplacer votre domaine sans votre accord explicite.</li>
                                            <li><strong>Certificat HTTPS (SSL/TLS)</strong> : creation et configuration du certificat HTTPS chez Cloudflare, garantissant une connexion securisee et chiffree entre vos visiteurs et votre site internet.</li>
                                            <li>&#10003; Maintenance et mise a jour des enregistrements DNS</li>
                                            <li>&#10003; Renouvellement automatique du certificat HTTPS via Cloudflare</li>
                                            <li>&#10003; Surveillance de l'expiration du nom de domaine</li>
                                            <li>&#10003; Gestion des redirections et sous-domaines</li>
                                            <li>&#10003; Support technique en cas de probleme lie au domaine</li>
                                        </ul>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-3">
                                        <span class="font-bold">Reactivation</span>
                                        <span class="block text-xs text-gray-500 mt-1">Reactivation d'un nom de domaine expire</span>
                                    </td>
                                    <td class="px-4 py-3 text-right font-bold">50,00 €</td>
                                    <td class="px-4 py-3 text-right text-gray-500">Unique</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </section>
            </div>

            {# ─── TAB : Esy-Mail ─── #}
            <div id="content-mail" class="pt-8 flex flex-col gap-8 hidden">
                <section>
                    <h2 class="text-xl font-bold uppercase mb-2">Esy-Mail</h2>
                    <p class="text-sm font-bold">SITECONSEIL vous propose sa propre messagerie professionnelle !</p>
                    <p class="text-sm mt-2">Une plateforme <strong>100 % francaise</strong>, certifiee, securisee et independante.</p>
                    <div class="mt-4 glass p-6">
                        <ul class="text-sm space-y-2">
                            <li>&#10003; Creation et gestion completes de vos boites mail</li>
                            <li>&#10003; Cryptage de bout en bout pour une securite maximale</li>
                            <li>&#10003; Anti-spam et antivirus puissants, connectes aux bases de donnees gouvernementales</li>
                            <li>&#10003; Analyse en temps reel des emails entrants et sortants</li>
                            <li>&#10003; Continuite assuree : utilisez votre outil habituel (Outlook, Apple Mail, mobile...)</li>
                            <li>&#10003; Migration possible de vos anciens mails lors de la mise en service</li>
                            <li>&#10003; Infrastructure 100 % francaise, conforme RGPD</li>
                            <li>&#10003; Collaboration unique : chaque client contribue a renforcer la securite globale grace a notre base de bannissement d'IP partagee</li>
                        </ul>
                    </div>
                </section>

                <section>
                    <h2 class="text-xl font-bold uppercase mb-2">Votre messagerie professionnelle, simple et securisee</h2>
                    <p class="text-sm"><strong>Sans engagement</strong> - Ouvert a tous - Aucun site web requis</p>
                    <p class="text-sm mt-2">Vous cherchez une messagerie pro, fiable et 100 % conforme sans vous compliquer la vie ? SITECONSEIL lance sa messagerie certifiee, aussi performante que les plus grands (OVH, Gandi, Orange...), mais plus simple et plus accessible.</p>
                </section>

                <section>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="glass p-6">
                            <h3 class="font-bold uppercase text-lg">Mise en service</h3>
                            <p class="text-3xl font-bold mt-2">50 € <span class="text-sm font-bold">HT</span></p>
                            <p class="text-xs text-gray-500 mt-1">Paiement unique</p>
                        </div>

                        <div class="glass-gold p-6 relative">
                            <span class="absolute top-0 right-0 bg-gray-900/80 text-white text-[8px] font-bold uppercase tracking-wider px-2 py-1 rounded-bl-lg rounded-tr-[15px]">Pack de base</span>
                            <h3 class="font-bold uppercase text-lg">Abonnement mensuel</h3>
                            <p class="text-3xl font-bold mt-2">30 € <span class="text-sm font-bold">HT / mois</span></p>
                            <p class="text-xs mt-1">Tout compris</p>
                        </div>
                    </div>
                </section>

                <section>
                    <h2 class="text-xl font-bold uppercase mb-4">Le pack de base comprend</h2>
                    <div class="glass p-6">
                        <ul class="text-sm space-y-2 columns-1 md:columns-2">
                            <li>&#10003; 2 boites mail professionnelles</li>
                            <li>&#10003; 5 Go de stockage (extensible a la demande)</li>
                            <li>&#10003; Antispam et antivirus inclus</li>
                            <li>&#10003; Configuration assistee (sur demande)</li>
                            <li>&#10003; Sauvegarde et restauration des emails</li>
                            <li>&#10003; Mise en service rapide</li>
                            <li>&#10003; Chiffrement des mails sur serveur</li>
                            <li>&#10003; RGPD 100 % conforme</li>
                            <li>&#10003; Compatible Google, Microsoft, Apple</li>
                            <li>&#10003; Serveurs heberges en France</li>
                            <li>&#10003; Suivi des erreurs d'envoi</li>
                            <li>&#10003; Acces IMAP / POP / SMTP</li>
                            <li>&#10003; Utilisable sur mobile, PC, tablette</li>
                            <li>&#10003; 5 000 mails par mois inclus</li>
                        </ul>
                    </div>
                </section>

                <section>
                    <div class="flex flex-col gap-6">
                        <div class="glass overflow-hidden">
                            <div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-bold uppercase text-xs tracking-widest">Webmail moderne et intuitif</span></div>
                            <div class="p-4">
                                <p class="text-xs text-gray-500 mb-2">Developpe sur-mesure pour une gestion facile</p>
                                <ul class="text-sm space-y-1">
                                    <li>&#10003; Gestion des contacts</li>
                                    <li>&#10003; Signatures personnalisees</li>
                                    <li>&#10003; Envoi de fichiers</li>
                                    <li>&#10003; Envoi et reception simplifies</li>
                                </ul>
                            </div>
                        </div>

                        <div class="glass overflow-hidden">
                            <div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-bold uppercase text-xs tracking-widest">Fiabilite et securite</span></div>
                            <div class="p-4">
                                <ul class="text-sm space-y-1">
                                    <li>&#10003; Certificats VMIC compatibles (protection de marque - en option via Certigo)</li>
                                    <li>&#10003; Disponibilite garantie : 99,99 % (hors maintenance)</li>
                                    <li>&#10003; Conformite totale avec les normes francaises et europeennes</li>
                                </ul>
                            </div>
                        </div>

                        <div class="glass overflow-hidden">
                            <div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-bold uppercase text-xs tracking-widest">Options</span></div>
                            <div class="p-4">
                                <table class="w-full text-sm">
                                    <thead class="sr-only">
                                        <tr><th>Option</th><th>Tarif</th></tr>
                                    </thead>
                                    <tbody>
                                        <tr class="border-b border-gray-200">
                                            <td class="py-2 font-bold">Boite mail supplementaire</td>
                                            <td class="py-2 text-right font-bold">8 € / an</td>
                                        </tr>
                                        <tr class="border-b border-gray-200">
                                            <td class="py-2 font-bold">Redirection interne</td>
                                            <td class="py-2 text-right font-bold text-green-700">Gratuite</td>
                                        </tr>
                                        <tr class="border-b border-gray-200">
                                            <td class="py-2 font-bold">Redirection externe</td>
                                            <td class="py-2 text-right font-bold text-green-700">Gratuite</td>
                                        </tr>
                                        <tr>
                                            <td class="py-2 font-bold">Espace supplementaire</td>
                                            <td class="py-2 text-right font-bold">1 € / Go / an</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </section>

                <section>
                    <div class="glass-gold p-6 text-center">
                        <p class="font-bold uppercase text-sm">Pret a simplifier votre messagerie pro ?</p>
                        <p class="text-sm mt-2">Passez a Esy-Mail : la solution certifiee, claire et sans surprise. Contactez-nous, nous activerons votre messagerie en quelques clics.</p>
                        <p class="text-xs mt-4 opacity-80">Cette application respecte a la lettre la reglementation en vigueur en France et en Europe. Elle a ete approuvee et certifiee.</p>
                    </div>
                </section>
            </div>

            {# ─── TAB : Esy-Mailer ─── #}
            <div id="content-mailer" class="pt-8 flex flex-col gap-8 hidden">
                <section>
                    <h2 class="text-xl font-bold uppercase mb-2">Esy-Mailer</h2>
                    <p class="text-sm font-bold">Votre service d'envoi de mail en masse professionnel, simple et securise.</p>
                    <p class="text-sm mt-2">SITECONSEIL revolutionne la gestion des emails avec sa propre solution d'envoi de mail en masse.</p>
                    <p class="text-sm mt-2"><strong>Touchez vos clients ideaux, ou qu'ils soient.</strong> Avec Esy-Mailer, creez et envoyez des campagnes email qui arrivent vraiment en boite de reception. Profitez d'une plateforme complete, simple et puissante pour vos newsletters, emails automatises et campagnes marketing.</p>
                </section>

                <section>
                    <h2 class="text-xl font-bold uppercase mb-2">Descriptif de notre offre</h2>
                    <p class="text-sm"><strong>Sans engagement</strong> - Ouvert a tous</p>
                    <p class="text-sm mt-2">Vous cherchez une solution d'envoi de mail en masse, professionnelle, fiable et 100 % conforme sans vous compliquer la vie ? SITECONSEIL lance son application de mailer, simple et accessible.</p>
                    <p class="text-sm mt-2">Vos listes et campagnes sont securisees et a aucun moment nous n'avons acces a ces dernieres.</p>
                </section>

                <section>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="glass p-6">
                            <h3 class="font-bold uppercase text-lg">Mise en service</h3>
                            <p class="text-3xl font-bold mt-2">50 € <span class="text-sm font-bold">HT</span></p>
                            <p class="text-xs text-gray-500 mt-1">Paiement unique</p>
                        </div>

                        <div class="glass-gold p-6">
                            <h3 class="font-bold uppercase text-lg">Abonnement mensuel</h3>
                            <p class="text-3xl font-bold mt-2">30 € <span class="text-sm font-bold">HT / mois</span></p>
                            <p class="text-xs mt-1">Tout compris</p>
                        </div>
                    </div>
                </section>

                <section>
                    <h2 class="text-xl font-bold uppercase mb-4">L'abonnement comprend</h2>
                    <div class="glass p-6">
                        <ul class="text-sm space-y-2 columns-1 md:columns-2">
                            <li>&#10003; Installation et parametrage du service</li>
                            <li>&#10003; Mise en service rapide</li>
                            <li>&#10003; RGPD + conformite aux bonnes regles des campagnes de mailing</li>
                            <li>&#10003; Gestion des consentements</li>
                            <li>&#10003; Compatible Google, Microsoft, Apple</li>
                            <li>&#10003; Serveurs heberges en France</li>
                            <li>&#10003; Gestion des listes de contacts</li>
                            <li>&#10003; Integration automatisee des inscriptions newsletter pour les sites Esy-Web</li>
                            <li>&#10003; Exportation et importation des listes de contacts</li>
                            <li>&#10003; Jusqu'a 15 000 mails par mois</li>
                        </ul>
                    </div>
                </section>

                <section>
                    <div class="flex flex-col gap-6">
                        <div class="glass overflow-hidden">
                            <div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-bold uppercase text-xs tracking-widest">Mailer moderne et intuitif</span></div>
                            <div class="p-4">
                                <p class="text-xs text-gray-500 mb-2">Developpe sur-mesure pour une gestion facile</p>
                                <ul class="text-sm space-y-1">
                                    <li>&#10003; Gestion des contacts : enregistrement et suppression</li>
                                    <li>&#10003; Conception personnalisee de vos campagnes de mail</li>
                                    <li>&#10003; Programmation des envois possible</li>
                                </ul>
                            </div>
                        </div>

                        <div class="glass overflow-hidden">
                            <div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-bold uppercase text-xs tracking-widest">Fiabilite et securite</span></div>
                            <div class="p-4">
                                <ul class="text-sm space-y-1">
                                    <li>&#10003; Disponibilite garantie : 99,99 % (hors maintenance)</li>
                                    <li>&#10003; Conformite totale avec les normes francaises et europeennes</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>

                <section>
                    <div class="glass-gold p-6 text-center">
                        <p class="font-bold uppercase text-sm">Pret a simplifier vos campagnes email ?</p>
                        <p class="text-sm mt-2">Passez a Esy-Mailer : la solution certifiee, claire et sans surprise. Contactez-nous, nous activerons votre mailer en quelques clics.</p>
                        <p class="text-xs mt-4 opacity-80">Cette application respecte a la lettre la reglementation en vigueur en France et en Europe.</p>
                    </div>
                </section>
            </div>
            {# ─── TAB : Esy-Defender ─── #}
            <div id="content-defender" class="pt-8 flex flex-col gap-8 hidden">
                <section>
                    <h2 class="text-xl font-bold uppercase mb-2">Esy-Defender</h2>
                    <p class="text-sm font-bold">Petite entreprise, grande cible : protegez-vous des maintenant.</p>
                    <p class="text-sm mt-2">On croit souvent que les cyberattaques ne concernent que les grandes entreprises... jusqu'au jour ou son propre site est pirate. Vols de donnees, perte de clients, interruption d'activite... Les consequences peuvent etre graves, meme pour une petite structure.</p>
                    <p class="text-sm mt-2">Les hackers ne font pas de distinction. Un simple site non protege peut leur servir a lancer des attaques de grande ampleur ou a pieger vos clients avec des e-mails frauduleux.</p>
                    <p class="text-sm mt-2">Developpe entierement en interne, Esy-Defender s'integre directement a votre site pour le proteger des dangers d'aujourd'hui et de demain. Notre secret ? Un code source totalement confidentiel, impossible a analyser ou a contourner, et des technologies recentes d'intelligence artificielle qui suivent en temps reel l'evolution des cyberattaques.</p>
                </section>

                <section>
                    <h2 class="text-xl font-bold uppercase mb-4">Esy-Defender, c'est</h2>
                    <div class="glass p-6">
                        <ul class="text-sm space-y-3">
                            <li>&#10003; Une barriere invisible mais bien reelle contre les attaques (DDoS, pirates, bots, IA, scripts de copie d'images ou de contenu)</li>
                            <li>&#10003; Un systeme intelligent qui distingue automatiquement les menaces sans gener vos vrais visiteurs</li>
                            <li>&#10003; Une securite fiable : la version Standard a recemment bloque une attaque geante de plus de 150 Go/s sans aucune interruption de service</li>
                            <li>&#10003; Confidentialite RGPD : seules les IP dangereuses sont conservees, les IP "propres" sont supprimees apres analyse</li>
                            <li>&#10003; Certificats HTTPS de haute confiance (Google Trust Services)</li>
                            <li>&#10003; Verification anti-usurpation a chaque visite : Esy-Defender verifie que vos visiteurs arrivent bien sur VOTRE site, et non une copie</li>
                        </ul>
                    </div>
                </section>

                <section>
                    <h2 class="text-xl font-bold uppercase mb-4">Deux formules</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="glass p-6">
                            <h3 class="font-bold uppercase text-lg">Standard</h3>
                            <p class="text-3xl font-bold mt-2 text-green-700">Inclus</p>
                            <p class="text-xs text-gray-500 mt-1">Integre nativement a Esy-Web</p>
                            <div class="mt-4 pt-4 border-t-2 border-gray-200">
                                <ul class="text-sm space-y-2">
                                    <li>&#10003; Protection contre les risques majeurs</li>
                                    <li>&#10003; Filtrage de base des bots</li>
                                    <li>&#10003; Optimisation de la rapidite de votre site</li>
                                    <li>&#10003; Surveillance en temps reel de base du trafic</li>
                                    <li>&#10003; Detection des attaques courantes : bots, scans, injections simples</li>
                                </ul>
                            </div>
                        </div>

                        <div class="glass-gold p-6 relative">
                            <span class="absolute top-0 right-0 bg-gray-900/80 text-white text-[8px] font-bold uppercase tracking-wider px-2 py-1 rounded-bl-lg rounded-tr-[15px]">Recommande</span>
                            <h3 class="font-bold uppercase text-lg">Pro</h3>
                            <p class="text-3xl font-bold mt-2">60 € <span class="text-sm font-bold">HT / mois</span></p>
                            <p class="text-xs mt-1">Mise en service : 50 € HT</p>
                            <p class="text-xs mt-1">Engagement trimestriel - Arret sur simple demande par mail</p>
                            <div class="mt-4 pt-4 border-t-2 border-gray-800">
                                <p class="text-xs font-bold mb-2">Tout le Standard +</p>
                                <ul class="text-sm space-y-2">
                                    <li>&#10003; Protection anti-DDoS professionnelle</li>
                                    <li>&#10003; Blocage automatique des IP malveillantes a partir de bases de donnees gouvernementales</li>
                                    <li>&#10003; Filtrage geographique</li>
                                    <li>&#10003; Pare-feu avance</li>
                                    <li>&#10003; Detection avancee des bots (JavaScript, captchas, analyse comportementale)</li>
                                    <li>&#10003; Blocage renforce du spam de formulaires</li>
                                    <li>&#10003; Defense contre le vol d'images et de contenus (meme par des IA)</li>
                                    <li>&#10003; Page de verification anti-bot avant acces au site (100 % transparente cote referencement)</li>
                                    <li>&#10003; Surveillance comportementale instantanee</li>
                                    <li>&#10003; Amelioration des performances : routage optimise, reponse serveur acceleree</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <p class="mt-3 text-xs text-gray-500 font-bold">Offre reservee aux detenteurs d'un site Esy-Web. Facturation par periode de trois mois.</p>
                </section>

                <section>
                    <h2 class="text-xl font-bold uppercase mb-4">Pourquoi choisir Esy-Defender Pro ?</h2>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="glass p-5">
                            <h3 class="font-bold uppercase text-sm mb-2">Votre site le merite</h3>
                            <p class="text-sm">Votre site merite d'etre protege, meme (surtout) s'il est petit.</p>
                        </div>
                        <div class="glass p-5">
                            <h3 class="font-bold uppercase text-sm mb-2">Votre image</h3>
                            <p class="text-sm">Un piratage peut ruiner votre image et votre activite.</p>
                        </div>
                        <div class="glass p-5">
                            <h3 class="font-bold uppercase text-sm mb-2">Tranquillite d'esprit</h3>
                            <p class="text-sm">La tranquillite d'esprit n'a pas de prix. Restez concentre sur l'essentiel : on s'occupe du reste.</p>
                        </div>
                    </div>
                </section>

                <section>
                    <div class="glass-gold p-6 text-center">
                        <p class="font-bold uppercase text-sm">Faites le choix de la serenite et demarquez-vous.</p>
                        <p class="text-sm mt-2">Esy-Defender protege votre site, vos contenus, vos idees et la confiance de vos visiteurs. Zero configuration, zero plugin : vous n'avez rien a faire.</p>
                    </div>
                </section>
            </div>

            {# ─── TAB : Esy-Meet ─── #}
            <div id="content-meet" class="pt-8 flex flex-col gap-8 hidden">
                <section>
                    <h2 class="text-xl font-bold uppercase mb-2">Esy-Meet</h2>
                    <p class="text-sm font-bold">La solution simple et efficace pour prendre rendez-vous avec vos formateurs !</p>
                    <p class="text-sm mt-2">Vos clients ont des questions ? Vos formateurs, vos techniciens ou vous-meme avez les reponses ! Mais comment mettre en relation ces deux parties de maniere fluide et professionnelle ? <strong>Esy-Meet</strong> est la solution qu'il vous faut !</p>
                    <p class="text-sm mt-2">Esy-Meet est une application web intuitive et puissante concue pour simplifier la prise de rendez-vous en ligne entre vos clients, vous-meme, vos formateurs et vos techniciens. Fini les allers-retours interminables par e-mail ou les appels telephoniques manques. Grace a Esy-Meet, vos clients peuvent prendre rendez-vous pour une session de visio-conference en quelques clics, et vos formateurs peuvent gerer leur emploi du temps en toute simplicite.</p>
                </section>

                <section>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="glass p-6">
                            <h3 class="font-bold uppercase text-lg">Mise en service</h3>
                            <p class="text-3xl font-bold mt-2">50 € <span class="text-sm font-bold">HT</span></p>
                            <p class="text-xs text-gray-500 mt-1">Paiement unique</p>
                        </div>

                        <div class="glass-gold p-6">
                            <h3 class="font-bold uppercase text-lg">Abonnement mensuel</h3>
                            <p class="text-3xl font-bold mt-2">30 € <span class="text-sm font-bold">HT / mois</span></p>
                        </div>
                    </div>
                </section>

                <section>
                    <h2 class="text-xl font-bold uppercase mb-4">Fonctionnalites cles</h2>
                    <div class="flex flex-col gap-6">
                        <div class="glass overflow-hidden">
                            <div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-bold uppercase text-xs tracking-widest">Prise de rendez-vous</span></div>
                            <div class="p-4">
                                <ul class="text-sm space-y-3">
                                    <li><strong>Calendrier de disponibilites</strong> : vos clients accedent a un calendrier unique et mis a jour en temps reel. Ils visualisent instantanement les creneaux disponibles de chaque personne, ce qui leur permet de choisir le moment qui leur convient le mieux.</li>
                                    <li><strong>Prise de rendez-vous simplifiee</strong> : en quelques clics, le client selectionne son intervenant, le creneau horaire, et le rendez-vous est confirme.</li>
                                    <li><strong>Visio-conference possible</strong> : les rendez-vous peuvent etre lies a une solution de visio-conference (Esy-Visio). Le lien est envoye directement au client, ce qui facilite la connexion le jour J.</li>
                                    <li><strong>Notifications et rappels automatiques</strong> : Esy-Meet envoie des rappels par e-mail aux deux parties, evitant ainsi les oublis et les retards.</li>
                                </ul>
                            </div>
                        </div>

                        <div class="glass overflow-hidden">
                            <div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-bold uppercase text-xs tracking-widest">Gestion et personnalisation</span></div>
                            <div class="p-4">
                                <ul class="text-sm space-y-3">
                                    <li><strong>Tableau de bord pour les formateurs</strong> : chaque formateur dispose d'un tableau de bord personnel pour visualiser et gerer ses rendez-vous, ajouter ses indisponibilites et suivre son activite.</li>
                                    <li><strong>Personnalisation a votre image</strong> : l'interface peut etre personnalisee aux couleurs de votre entreprise pour une experience client coherente.</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>

                <section>
                    <h2 class="text-xl font-bold uppercase mb-4">Pourquoi choisir Esy-Meet ?</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="glass p-5">
                            <h3 class="font-bold uppercase text-sm mb-2">Experience client</h3>
                            <p class="text-sm">Offrez a vos clients un service accessible et reactif. Une prise de rendez-vous facile est un gage de professionnalisme.</p>
                        </div>
                        <div class="glass p-5">
                            <h3 class="font-bold uppercase text-sm mb-2">Gain de temps</h3>
                            <p class="text-sm">Liberez vos formateurs des taches administratives liees a la gestion des rendez-vous. Ils peuvent se concentrer sur l'essentiel : repondre aux questions de vos clients.</p>
                        </div>
                        <div class="glass p-5">
                            <h3 class="font-bold uppercase text-sm mb-2">Productivite</h3>
                            <p class="text-sm">Un agenda bien organise et des rappels automatiques reduisent les rendez-vous manques et augmentent l'efficacite de vos sessions.</p>
                        </div>
                        <div class="glass p-5">
                            <h3 class="font-bold uppercase text-sm mb-2">Accessibilite 24/7</h3>
                            <p class="text-sm">Vos clients peuvent prendre rendez-vous a tout moment, meme en dehors des heures de bureau, ce qui vous permet de ne rater aucune opportunite.</p>
                        </div>
                    </div>
                </section>

                <section>
                    <div class="glass-gold p-6 text-center">
                        <p class="font-bold uppercase text-sm">Esy-Meet : la rencontre facilitee, le succes assure !</p>
                        <p class="text-sm mt-2">Demandez des aujourd'hui une demonstration personnalisee d'Esy-Meet et decouvrez comment notre solution peut simplifier votre quotidien et ameliorer la satisfaction de vos clients.</p>
                    </div>
                </section>
            </div>

            {# ─── TAB : Esy-Tchat ─── #}
            <div id="content-tchat" class="pt-8 flex flex-col gap-8 hidden">
                <section>
                    <h2 class="text-xl font-bold uppercase mb-2">Esy-Tchat</h2>
                    <p class="text-sm font-bold">Interagissez directement avec vos visiteurs depuis votre site web.</p>
                    <p class="text-sm mt-2">Integree en toute simplicite a votre plateforme Esy-Web, cette solution vous permet d'offrir un support client instantane, de repondre aux questions en temps reel et d'ameliorer l'experience utilisateur, le tout sans que vos visiteurs aient besoin de quitter votre site.</p>
                </section>

                <section>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="glass p-6">
                            <h3 class="font-bold uppercase text-lg">Mise en service</h3>
                            <p class="text-3xl font-bold mt-2">50 € <span class="text-sm font-bold">HT</span></p>
                            <p class="text-xs text-gray-500 mt-1">Paiement unique</p>
                        </div>

                        <div class="glass-gold p-6">
                            <h3 class="font-bold uppercase text-lg">Abonnement mensuel</h3>
                            <p class="text-3xl font-bold mt-2">15 € <span class="text-sm font-bold">HT / mois</span></p>
                        </div>
                    </div>
                </section>

                <section>
                    <h2 class="text-xl font-bold uppercase mb-4">Qu'est-ce qu'un chat ?</h2>
                    <p class="text-sm">Un chat, ou messagerie instantanee, est un systeme de communication en ligne qui permet a deux personnes ou plus de converser en temps reel en echangeant des messages ecrits. C'est un outil tres repandu, utilise a la fois pour la communication personnelle et professionnelle.</p>
                </section>

                <section>
                    <h2 class="text-xl font-bold uppercase mb-4">Comment fonctionne un chat ?</h2>
                    <div class="glass p-6">
                        <ul class="text-sm space-y-3">
                            <li><strong>Interface utilisateur</strong> : les participants utilisent une interface (une fenetre de discussion sur un site web, une application mobile ou un logiciel) pour taper leurs messages.</li>
                            <li><strong>Envoi instantane</strong> : des qu'un message est envoye, il apparait presque immediatement sur l'ecran du ou des destinataires, ce qui donne l'impression d'une conversation face a face.</li>
                        </ul>
                    </div>
                </section>

                <section>
                    <h2 class="text-xl font-bold uppercase mb-4">Pourquoi utiliser un chat ?</h2>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="glass p-5">
                            <h3 class="font-bold uppercase text-sm mb-2">Rapidite</h3>
                            <p class="text-sm">Il permet une communication rapide et directe, ideale pour les questions urgentes ou les conversations courtes.</p>
                        </div>
                        <div class="glass p-5">
                            <h3 class="font-bold uppercase text-sm mb-2">Praticite</h3>
                            <p class="text-sm">Il est accessible depuis divers appareils (ordinateurs, smartphones, tablettes), ce qui permet de rester en contact ou que l'on soit.</p>
                        </div>
                        <div class="glass p-5">
                            <h3 class="font-bold uppercase text-sm mb-2">Simplicite</h3>
                            <p class="text-sm">L'interface est generalement intuitive et facile a prendre en main, meme pour les personnes moins a l'aise avec la technologie.</p>
                        </div>
                    </div>
                </section>

                <section>
                    <div class="glass-gold p-6 text-center">
                        <p class="font-bold uppercase text-sm">Un chat est un moyen simple, rapide et efficace de communiquer par ecrit en temps reel.</p>
                        <p class="text-sm mt-2">Contactez-nous pour integrer Esy-Tchat a votre site.</p>
                    </div>
                </section>
            </div>
        </div>

        <p class="text-sm opacity-70 italic">Derniere mise a jour : 02/04/2026</p>
    </div>
</div>

{% endblock %}