{% extends 'base.html.twig' %}

{% block title %}Migration SARL SITECONSEIL - Association E-Cosplay{% endblock %}

{% block body %}
<div class="min-h-screen" style="background: linear-gradient(135deg, #f5f5f0 0%, #e8e8e0 100%);">

    {# Header #}
    <div class="glass-dark text-white py-8">
        <div class="max-w-4xl mx-auto px-6">
            <div class="flex items-center gap-4 mb-4">
                <img src="/logo.jpg" alt="E-Cosplay" class="h-14 w-auto">
                <div>
                    <h1 class="text-2xl font-bold uppercase tracking-widest">Migration de vos services</h1>
                    <p class="text-sm text-white/60">Transfert depuis SARL SITECONSEIL vers Association E-Cosplay</p>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-4xl mx-auto px-6 py-10">

        {# Introduction #}
        <div class="glass-heavy p-8 mb-8">
            <h2 class="text-xl font-bold uppercase tracking-wider mb-4">Pourquoi cette migration ?</h2>
            <p class="text-sm text-gray-600 leading-relaxed mb-4">
                Dans le cadre de la <strong>cessation d'activite de la SARL SITECONSEIL</strong>, l'Association E-Cosplay a pris en charge la gestion de l'infrastructure technique et des services qui vous etaient fournis par la SARL SITECONSEIL.
            </p>
            <p class="text-sm text-gray-600 leading-relaxed mb-4">
                Depuis plusieurs mois, notre equipe assure la <strong>continuite de vos services</strong> (sites internet, emails, noms de domaine, hebergement) afin de vous garantir une transition sans interruption.
            </p>
            <p class="text-sm text-gray-600 leading-relaxed">
                La SARL SITECONSEIL a decide de nous <strong>transmettre definitivement la gestion de vos services</strong>. Pour officialiser cette transition, un nouveau contrat doit etre signe entre vous et l'Association E-Cosplay.
            </p>
        </div>

        {# Ce qui change #}
        <div class="glass-heavy p-8 mb-8">
            <h2 class="text-xl font-bold uppercase tracking-wider mb-4">Ce qui change</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="glass p-5">
                    <h3 class="text-sm font-bold uppercase tracking-wider mb-3" style="color: #fabf04;">Votre nouveau prestataire</h3>
                    <ul class="text-sm text-gray-600 space-y-2">
                        <li class="flex items-start gap-2">
                            <svg class="w-4 h-4 text-green-500 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"/></svg>
                            <span>L'Association E-Cosplay devient votre interlocuteur unique</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <svg class="w-4 h-4 text-green-500 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"/></svg>
                            <span>Nouveau contrat avec nos conditions generales</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <svg class="w-4 h-4 text-orange-500 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                            <span><strong>Modification des tarifs</strong> : les tarifs sont differents de ceux de la SARL SITECONSEIL. La grille tarifaire de l'Association E-Cosplay s'applique.</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <svg class="w-4 h-4 text-green-500 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"/></svg>
                            <span>Nouvelle facturation selon notre grille tarifaire</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <svg class="w-4 h-4 text-green-500 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"/></svg>
                            <span>Espace client dedie avec suivi en temps reel</span>
                        </li>
                    </ul>
                </div>
                <div class="glass p-5">
                    <h3 class="text-sm font-bold uppercase tracking-wider mb-3 text-green-600">Ce qui ne change pas</h3>
                    <ul class="text-sm text-gray-600 space-y-2">
                        <li class="flex items-start gap-2">
                            <svg class="w-4 h-4 text-green-500 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"/></svg>
                            <span>Vos sites internet restent en ligne et accessibles</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <svg class="w-4 h-4 text-green-500 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"/></svg>
                            <span>Vos emails continuent de fonctionner</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <svg class="w-4 h-4 text-green-500 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"/></svg>
                            <span>Vos noms de domaine sont preserves</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <svg class="w-4 h-4 text-green-500 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"/></svg>
                            <span>Vos donnees sont conservees et securisees</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        {# Association a but non lucratif #}
        <div class="glass-heavy p-8 mb-8" style="border-left: 4px solid #fabf04;">
            <h2 class="text-xl font-bold uppercase tracking-wider mb-4" style="color: #fabf04;">Association a but non lucratif</h2>
            <p class="text-sm text-gray-600 leading-relaxed mb-3">
                L'Association E-Cosplay est une <strong>association loi 1901 a but non lucratif</strong>. Contrairement a la SARL SITECONSEIL qui etait une societe commerciale, notre structure fonctionne differemment :
            </p>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                <div class="glass p-4 text-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-2" style="color: #fabf04;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" 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 0z" />
                    </svg>
                    <p class="text-sm font-bold uppercase tracking-wider mb-1">Adherents</p>
                    <p class="text-xs text-gray-500">Tous nos membres sont des adherents de l'association.</p>
                </div>
                <div class="glass p-4 text-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-2" style="color: #fabf04;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                    </svg>
                    <p class="text-sm font-bold uppercase tracking-wider mb-1">Benevoles</p>
                    <p class="text-xs text-gray-500">Nos membres participent de maniere benevole, selon leur disponibilite et leur desir.</p>
                </div>
                <div class="glass p-4 text-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-2" style="color: #fabf04;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <p class="text-sm font-bold uppercase tracking-wider mb-1">But non lucratif</p>
                    <p class="text-xs text-gray-500">Les revenus couvrent uniquement les couts d'infrastructure et de fonctionnement.</p>
                </div>
            </div>
            <p class="text-xs text-gray-500">
                En tant que client, vous beneficiez des services de l'association tout en contribuant a son fonctionnement. Les tarifs pratiques sont destines a couvrir les couts d'infrastructure, d'hebergement et de maintenance.
            </p>
        </div>

        {# Horaires service client #}
        <div class="glass-heavy p-8 mb-8">
            <h2 class="text-xl font-bold uppercase tracking-wider mb-4">Horaires du service client</h2>
            <p class="text-sm text-gray-600 leading-relaxed mb-4">
                Dans le cadre du fonctionnement de l'association, il vous sera demande de respecter les horaires indiques pour contacter le service client par telephone.
            </p>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div class="glass p-5 text-center" style="border: 2px solid #16a34a;">
                    <p class="text-sm font-bold uppercase tracking-wider text-green-700 mb-3">Horaires d'ouverture</p>
                    <div class="flex justify-center gap-6">
                        <div>
                            <p class="text-2xl font-bold" style="color: #fabf04;">10h - 12h</p>
                            <p class="text-xs text-gray-500">Matin</p>
                        </div>
                        <div>
                            <p class="text-2xl font-bold" style="color: #fabf04;">14h - 17h</p>
                            <p class="text-xs text-gray-500">Apres-midi</p>
                        </div>
                    </div>
                    <p class="text-xs text-gray-500 mt-3">Du lundi au vendredi</p>
                </div>

                <div class="glass p-5" style="border: 2px solid #dc2626;">
                    <p class="text-sm font-bold uppercase tracking-wider text-red-700 mb-3">Hors horaires</p>
                    <p class="text-xs text-gray-600 mb-2">En dehors de ces horaires, le service client ne repondra pas aux appels.</p>
                    <p class="text-xs text-gray-600 mb-3">Si vous contactez le service en dehors des horaires pour une question non technique, il vous sera facture :</p>
                    <div class="flex items-end justify-center gap-2 mb-2">
                        <span class="text-3xl font-bold text-red-600">35 &euro;</span>
                        <span class="text-sm text-gray-500 mb-1">HT / heure</span>
                    </div>
                    <p class="text-xs text-gray-500">(toute heure commencee est due des le debut de l'appel)</p>
                </div>
            </div>

            <div class="glass p-4 mb-4" style="border-left: 3px solid #16a34a;">
                <p class="text-xs text-green-700 font-bold">Exception : probleme technique verifie et verifiable</p>
                <p class="text-xs text-gray-500 mt-1">Si votre appel hors horaires est lie a un probleme technique reel, verifie et verifiable par nos equipes (panne serveur, site inaccessible, etc.), l'appel ne sera pas facture.</p>
            </div>

            <div class="glass p-4" style="border-left: 3px solid #dc2626;">
                <p class="text-xs text-red-700 font-bold">Attention : tout abus sera sanctionne</p>
                <p class="text-xs text-gray-500 mt-1">Tout abus des appels hors horaires (appels repetes, questions non urgentes, harcelement telephonique) sera sanctionne sans limite, pouvant aller jusqu'a un avertissement ou la resiliation de vos services.</p>
            </div>
        </div>

        {# Nouveaux tarifs #}
        <div class="glass-heavy p-8 mb-8">
            <h2 class="text-xl font-bold uppercase tracking-wider mb-4">Nouveaux tarifs</h2>
            <p class="text-sm text-gray-600 leading-relaxed mb-6">
                Les tarifs de l'Association E-Cosplay sont differents de ceux pratiques par la SARL SITECONSEIL. Voici les nouvelles grilles tarifaires :
            </p>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {# Site vitrine #}
                <div class="glass p-5">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="text-sm font-bold uppercase tracking-wider">Site vitrine</h3>
                        <span class="px-2 py-0.5 bg-red-500/20 text-red-700 font-bold uppercase text-[9px]">Nouveau tarif</span>
                    </div>
                    <div class="flex items-end gap-2 mb-3">
                        <span class="text-3xl font-bold" style="color: #fabf04;">100 &euro;</span>
                        <span class="text-sm text-gray-500 mb-1">/ mois HT</span>
                    </div>
                    <p class="text-xs text-gray-500 mb-3">Soit <strong>1 200 &euro; HT / an</strong></p>
                    <div class="glass p-3">
                        <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Ancien tarif SITECONSEIL</p>
                        <p class="text-sm text-gray-400 line-through">365 &euro; HT / an</p>
                    </div>
                </div>

                {# Site e-commerce #}
                <div class="glass p-5">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="text-sm font-bold uppercase tracking-wider">Site e-commerce</h3>
                        <span class="px-2 py-0.5 bg-red-500/20 text-red-700 font-bold uppercase text-[9px]">Nouveau tarif</span>
                    </div>
                    <div class="flex items-end gap-2 mb-3">
                        <span class="text-3xl font-bold" style="color: #fabf04;">150 &euro;</span>
                        <span class="text-sm text-gray-500 mb-1">/ mois HT</span>
                    </div>
                    <p class="text-xs text-gray-500 mb-3">Soit <strong>1 800 &euro; HT / an</strong></p>
                    <div class="glass p-3">
                        <p class="text-[9px] font-bold uppercase tracking-wider text-gray-400 mb-1">Ancien tarif SITECONSEIL</p>
                        <p class="text-sm text-gray-400 line-through">730 &euro; HT / an</p>
                    </div>
                </div>
                {# Site hors CMS Esy-Web #}
                <div class="glass p-5 md:col-span-2" style="border: 2px solid #dc2626;">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="text-sm font-bold uppercase tracking-wider">Site hors CMS Esy-Web</h3>
                        <span class="px-2 py-0.5 bg-red-500/20 text-red-700 font-bold uppercase text-[9px]">Tarif specifique</span>
                    </div>
                    <p class="text-xs text-gray-500 mb-3">Site realise avec un CMS externe (WordPress, Prestashop, Joomla, etc.) ou developpement personnalise. Votre site necessite une machine dediee.</p>
                    <div class="flex items-end gap-2 mb-2">
                        <span class="text-3xl font-bold text-red-600">100 &euro;</span>
                        <span class="text-sm text-gray-500 mb-1">/ mois HT</span>
                    </div>
                    <p class="text-xs text-gray-500 mb-3">Soit <strong>1 200 &euro; HT / an</strong> - Hebergement uniquement</p>
                    <div class="glass p-3 mb-3" style="border-left: 3px solid #dc2626;">
                        <p class="text-xs text-red-700 font-bold">Ce tarif est non negociable.</p>
                        <p class="text-xs text-gray-500 mt-1">Votre site etant hors de notre CMS Esy-Web, il necessite une infrastructure dediee (machine a part).</p>
                    </div>
                    <div class="glass p-3" style="border-left: 3px solid #ea580c;">
                        <p class="text-xs text-orange-700 font-bold">Aucune maintenance incluse</p>
                        <p class="text-xs text-gray-500 mt-1">Ce tarif couvre uniquement l'hebergement. Aucune maintenance, aucune mise a jour, aucun support technique sur votre site n'est inclus. La maintenance reste a votre charge ou a celle d'un prestataire de votre choix.</p>
                    </div>
                </div>
            </div>

            {# Emails #}
            <h3 class="text-lg font-bold uppercase tracking-wider mt-8 mb-4">Messagerie professionnelle</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="glass p-5 text-center" style="border: 2px solid #16a34a;">
                    <span class="px-2 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase text-[9px] mb-2 inline-block">Offert</span>
                    <div class="flex items-end justify-center gap-1 mb-2">
                        <span class="text-3xl font-bold text-green-600">0 &euro;</span>
                        <span class="text-sm text-gray-500 mb-1">/ mois</span>
                    </div>
                    <p class="text-sm font-bold mb-1">1ere boite mail</p>
                    <p class="text-xs text-gray-500">3 Go de stockage</p>
                    <p class="text-xs text-gray-400 mt-2">Si vous disposez deja d'une boite chez SITECONSEIL</p>
                </div>
                <div class="glass p-5 text-center">
                    <div class="flex items-end justify-center gap-1 mb-2">
                        <span class="text-3xl font-bold" style="color: #fabf04;">1 &euro;</span>
                        <span class="text-sm text-gray-500 mb-1">/ mois HT</span>
                    </div>
                    <p class="text-sm font-bold mb-1">Boite mail 3 Go</p>
                    <p class="text-xs text-gray-500">Par boite supplementaire</p>
                    <p class="text-xs text-gray-400 mt-2">Soit 12 &euro; HT / an</p>
                </div>
                <div class="glass p-5 text-center">
                    <div class="flex items-end justify-center gap-1 mb-2">
                        <span class="text-3xl font-bold" style="color: #fabf04;">5 &euro;</span>
                        <span class="text-sm text-gray-500 mb-1">/ mois HT</span>
                    </div>
                    <p class="text-sm font-bold mb-1">Boite mail 50 Go</p>
                    <p class="text-xs text-gray-500">Par boite supplementaire</p>
                    <p class="text-xs text-gray-400 mt-2">Soit 60 &euro; HT / an</p>
                </div>
            </div>

            {# E-Flex SITECONSEIL #}
            <div class="glass p-5 mt-6" style="border-left: 4px solid #fabf04;">
                <p class="text-sm font-bold mb-2" style="color: #fabf04;">Financement E-Flex existant chez SITECONSEIL</p>
                <p class="text-xs text-gray-600 leading-relaxed">
                    Si vous disposez d'un financement <strong>EsyFlex en cours chez SARL SITECONSEIL</strong>, celui-ci pourra etre poursuivi chez l'Association E-Cosplay sous validation de notre part. Un contrat <strong>E-Flex</strong> vous sera envoye avec le montant restant a payer.
                </p>
            </div>

            <p class="text-xs text-gray-500 mt-4">
                Les tarifs incluent l'hebergement, la maintenance, les mises a jour de securite et le support technique. Un devis detaille vous sera transmis.
                <a href="{{ path('app_legal_tarif') }}" class="font-bold" style="color: #fabf04;">Consulter la grille tarifaire complete</a>
            </p>
        </div>

        {# Developpement sur-mesure #}
        <div class="glass-heavy p-8 mb-8" style="border-left: 4px solid #7c3aed;">
            <h2 class="text-lg font-bold uppercase tracking-wider mb-3 text-purple-700">Developpement sur-mesure</h2>
            <p class="text-sm text-gray-600 leading-relaxed mb-3">
                Si vous disposez d'un <strong>developpement sur-mesure lie a SARL SITECONSEIL</strong> (CRM, application metier, outil interne, etc.), l'Association E-Cosplay sera <strong>dans l'obligation de refuser de vous prendre en charge</strong>, sauf si le developpement est entierement termine et livre.
            </p>
            <p class="text-sm text-gray-600 leading-relaxed">
                <strong>Raison :</strong> l'association n'aura pas la capacite de gerer ou poursuivre des developpements sur-mesure inities par la SARL SITECONSEIL. Seuls les services standards (sites vitrine, e-commerce, emails, domaines) sont concernes par la migration.
            </p>
        </div>

        {# Avertissement important #}
        <div class="glass-heavy p-8 mb-8" style="border-left: 4px solid #ea580c;">
            <h2 class="text-lg font-bold uppercase tracking-wider mb-3 text-orange-700">Information importante</h2>
            <p class="text-sm text-gray-600 leading-relaxed mb-3">
                <strong>L'Association E-Cosplay ne prendra pas en compte votre anciennete avec la SARL SITECONSEIL</strong>, ni les accords, conditions particulieres, tarifs preferentiels ou engagements que vous auriez pu conclure avec cette derniere.
            </p>
            <p class="text-sm text-gray-600 leading-relaxed">
                Le nouveau contrat constitue un engagement <strong>nouveau et independant</strong>. Les tarifs applicables seront ceux en vigueur au sein de l'Association E-Cosplay.
            </p>
        </div>

        {# Etapes #}
        <div class="glass-heavy p-8 mb-8">
            <h2 class="text-xl font-bold uppercase tracking-wider mb-6">Comment ca se passe ?</h2>
            <div class="space-y-4">
                <div class="flex items-start gap-4">
                    <div class="w-8 h-8 flex items-center justify-center text-white font-bold text-sm shrink-0" style="background: #fabf04; color: #111;">1</div>
                    <div>
                        <p class="text-sm font-bold">Vous recevez le contrat par email</p>
                        <p class="text-xs text-gray-500">Le contrat de migration vous est envoye depuis l'adresse <strong>contrat@e-cosplay.fr</strong> avec un lien de signature electronique.</p>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <div class="w-8 h-8 flex items-center justify-center text-white font-bold text-sm shrink-0" style="background: #fabf04; color: #111;">2</div>
                    <div>
                        <p class="text-sm font-bold">Vous signez le contrat electroniquement</p>
                        <p class="text-xs text-gray-500">La signature est securisee via DocuSeal (valeur juridique, reglement eIDAS).</p>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <div class="w-8 h-8 flex items-center justify-center text-white font-bold text-sm shrink-0" style="background: #fabf04; color: #111;">3</div>
                    <div>
                        <p class="text-sm font-bold">Vous configurez votre mode de paiement</p>
                        <p class="text-xs text-gray-500">Vous choisissez votre methode de paiement : prelevement automatique SEPA (recommande), carte bancaire ou virement bancaire.</p>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <div class="w-8 h-8 flex items-center justify-center text-white font-bold text-sm shrink-0" style="background: #fabf04; color: #111;">4</div>
                    <div>
                        <p class="text-sm font-bold">Votre espace client est cree</p>
                        <p class="text-xs text-gray-500">Un espace client vous est attribue avec acces a vos services, factures et support.</p>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <div class="w-8 h-8 flex items-center justify-center text-white font-bold text-sm shrink-0" style="background: #fabf04; color: #111;">5</div>
                    <div>
                        <p class="text-sm font-bold">Vos services continuent normalement</p>
                        <p class="text-xs text-gray-500">Aucune interruption. Vos sites, emails et domaines restent actifs.</p>
                    </div>
                </div>
            </div>

            {# Verification premier paiement #}
            <div class="glass p-5 mt-6" style="border: 2px solid #dc2626;">
                <p class="text-sm font-bold text-red-700 uppercase tracking-wider mb-2">Verification obligatoire - Premier paiement</p>
                <p class="text-xs text-gray-600 leading-relaxed mb-2">
                    Pour confirmer votre inscription et activer vos services, le <strong>premier paiement devra obligatoirement etre effectue par carte bancaire ou prelevement automatique SEPA</strong>.
                </p>
                <p class="text-xs text-gray-600 leading-relaxed mb-2">
                    <strong>Les virements bancaires ne seront pas acceptes pour le premier paiement.</strong> Cette verification est requise pour valider votre moyen de paiement et garantir la continuite de vos services.
                </p>
                <p class="text-xs text-gray-600 leading-relaxed">
                    Pour les paiements suivants, vous aurez le choix entre le prelevement automatique SEPA, la carte bancaire ou le virement bancaire.
                </p>
            </div>

            {# Informations bancaires et paiement #}
            <div class="glass p-5 mt-6">
                <p class="text-sm font-bold uppercase tracking-wider mb-3">Informations sur les paiements</p>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="glass p-4 text-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-2 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                        </svg>
                        <p class="text-sm font-bold mb-1">Stripe</p>
                        <p class="text-xs text-gray-500">Les paiements par carte bancaire et prelevement SEPA sont operes par <strong>Stripe</strong>, plateforme de paiement securisee et certifiee PCI DSS.</p>
                    </div>
                    <div class="glass p-4 text-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-2 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                        </svg>
                        <p class="text-sm font-bold mb-1">SumUp Bank</p>
                        <p class="text-xs text-gray-500">Notre compte bancaire est domicilie chez <strong>SumUp</strong> en Irlande. Les virements bancaires sont a effectuer sur ce compte.</p>
                    </div>
                    <div class="glass p-4 text-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-2 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" 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" />
                        </svg>
                        <p class="text-sm font-bold mb-1">Declaree aux Etats</p>
                        <p class="text-xs text-gray-500">L'Association E-Cosplay est declaree aupres des autorites competentes (Prefecture, INSEE, RNA). SIRET 943 121 517 00011.</p>
                    </div>
                </div>
            </div>
        </div>

        {# FAQ #}
        <div class="glass-heavy p-8 mb-8">
            <h2 class="text-xl font-bold uppercase tracking-wider mb-6">Questions frequentes</h2>
            <div class="space-y-4">
                <div class="glass p-4">
                    <p class="text-sm font-bold mb-1">Que se passe-t-il si je ne signe pas le contrat ?</p>
                    <p class="text-xs text-gray-500">Sans signature, nous ne pourrons pas maintenir vos services au-dela de la periode de transition. Vos services seront desactives.</p>
                </div>
                <div class="glass p-4">
                    <p class="text-sm font-bold mb-1">Mes tarifs vont-ils changer ?</p>
                    <p class="text-xs text-gray-500">Les tarifs de l'Association E-Cosplay s'appliqueront. Ils peuvent differer de ceux de la SARL SITECONSEIL. Un devis vous sera transmis.</p>
                </div>
                <div class="glass p-4">
                    <p class="text-sm font-bold mb-1">Mes donnees sont-elles en securite ?</p>
                    <p class="text-xs text-gray-500">Oui. Toutes vos donnees sont hebergees sur notre infrastructure securisee et traitees conformement au RGPD.</p>
                </div>
                <div class="glass p-4">
                    <p class="text-sm font-bold mb-1">Puis-je recuperer mes donnees si je ne souhaite pas continuer ?</p>
                    <p class="text-xs text-gray-500">Oui. Vous pouvez demander l'export de vos donnees a tout moment en contactant notre support.</p>
                </div>
                <div class="glass p-4">
                    <p class="text-sm font-bold mb-1">A qui m'adresser pour un litige avec SARL SITECONSEIL ?</p>
                    <p class="text-xs text-gray-500">Tout litige relatif aux prestations anterieures doit etre dirige vers la SARL SITECONSEIL. L'Association E-Cosplay n'est pas responsable des engagements passes.</p>
                </div>
                <div class="glass p-4" style="border-left: 3px solid #dc2626;">
                    <p class="text-sm font-bold mb-1">Puis-je devenir adherent de votre association ?</p>
                    <p class="text-xs text-gray-500 mb-2"><strong>Non.</strong> Par principe de protection des clients et pour eviter tout conflit d'interet, les clients disposant de services chez l'Association E-Cosplay ne peuvent pas adherer a l'association.</p>
                    <p class="text-xs text-gray-500">De meme, nos membres ne sont pas des societes de developpement ou des prestataires externes, afin d'eviter tout probleme de concurrence ou d'influence sur les decisions de l'association.</p>
                </div>
            </div>
        </div>

        {# Systeme automatique #}
        <div class="glass-heavy p-8 mb-8" style="border-left: 4px solid #dc2626;">
            <h2 class="text-xl font-bold uppercase tracking-wider mb-4 text-red-700">Systeme automatique de gestion des impayes</h2>
            <p class="text-sm text-gray-600 leading-relaxed mb-4">
                L'Association E-Cosplay dispose d'un <strong>systeme automatique de gestion des impayes</strong>. En cas de non-paiement, les mesures suivantes sont appliquees <strong>automatiquement, sans intervention humaine</strong> :
            </p>
            <div class="space-y-3 mb-6">
                <div class="flex items-start gap-3 glass p-4" style="border-left: 3px solid #dc2626;">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                    </svg>
                    <div>
                        <p class="text-sm font-bold text-red-700">Suspension automatique des services</p>
                        <p class="text-xs text-gray-500">En cas d'impaye, vos services (sites internet, emails, noms de domaine) sont automatiquement suspendus sans intervention humaine.</p>
                    </div>
                </div>
                <div class="flex items-start gap-3 glass p-4" style="border-left: 3px solid #dc2626;">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                    </svg>
                    <div>
                        <p class="text-sm font-bold text-red-700">Aucun renouvellement sans paiement prealable</p>
                        <p class="text-xs text-gray-500">Aucun service ne sera renouvele tant que le paiement n'a pas ete effectue au prealable. Pas de paiement, pas de service.</p>
                    </div>
                </div>
                <div class="flex items-start gap-3 glass p-4" style="border-left: 3px solid #dc2626;">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <div>
                        <p class="text-sm font-bold text-red-700">Aucun arrangement ne sera possible</p>
                        <p class="text-xs text-gray-500">S'enerver, insulter ou appeler l'association ne changera en aucun cas la situation. Sans paiement, les services restent suspendus.</p>
                    </div>
                </div>
            </div>

            <div class="glass p-5 mb-4">
                <p class="text-sm font-bold uppercase tracking-wider mb-3" style="color: #fabf04;">Rappel</p>
                <ul class="text-sm text-gray-600 space-y-2">
                    <li class="flex items-start gap-2">
                        <span class="text-red-500 font-bold">1.</span>
                        <span>Contactez l'association <strong>avant</strong> l'echeance si vous avez des difficultes de paiement.</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <span class="text-red-500 font-bold">2.</span>
                        <span>S'enerver ou adopter un comportement agressif n'aboutira a aucun arrangement.</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <span class="text-red-500 font-bold">3.</span>
                        <span>La situation est simple : <strong>sans paiement, pas de service</strong>.</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <span class="text-red-500 font-bold">4.</span>
                        <span>Aucun renouvellement (domaine, hebergement, email) ne sera effectue sans paiement au prealable.</span>
                    </li>
                </ul>
            </div>

            <div class="glass p-5" style="border-left: 3px solid #374151;">
                <p class="text-sm font-bold uppercase tracking-wider mb-3 text-gray-700">Base legale</p>
                <p class="text-xs text-gray-600 leading-relaxed mb-2">
                    Conformement aux dispositions du <strong>Code du commerce</strong> et du <strong>Code civil</strong>, l'Association E-Cosplay n'a aucune obligation de fournir un service en l'absence de paiement. L'exception d'inexecution (article 1219 du Code civil) permet a tout prestataire de suspendre l'execution de ses obligations lorsque le cocontractant ne remplit pas les siennes.
                </p>
                <p class="text-xs text-gray-600 leading-relaxed mb-2">
                    L'association est <strong>libre de suspendre ou de cesser la fourniture de ses services</strong> en cas de non-paiement, quelle que soit la situation de votre entreprise (y compris en cas de difficultes financieres, de redressement ou de liquidation judiciaire, sous reserve des dispositions specifiques applicables aux procedures collectives).
                </p>
                <p class="text-xs text-gray-600 leading-relaxed">
                    Le non-paiement d'une facture a son echeance entraine de plein droit, et sans qu'aucune mise en demeure ne soit necessaire, la suspension immediate des services concernes (article L.441-10 du Code de commerce).
                </p>
            </div>
        </div>

        {# Systeme d'avertissement #}
        <div class="glass-heavy p-8 mb-8" style="border-left: 4px solid #7f1d1d;">
            <h2 class="text-xl font-bold uppercase tracking-wider mb-4 text-red-900">Systeme d'avertissement</h2>
            <p class="text-sm text-gray-600 leading-relaxed mb-4">
                L'Association E-Cosplay dispose d'un <strong>systeme d'avertissement</strong>. En cas de non-respect des CGV, CGU, de comportement inapproprie (insultes, menaces, harcelement) ou de tout autre manquement, un avertissement sera emis a votre encontre.
            </p>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                <div class="glass p-4 text-center" style="border-top: 4px solid #f59e0b;">
                    <p class="text-2xl font-bold text-yellow-600 mb-1">1er</p>
                    <p class="text-sm font-bold uppercase tracking-wider">Avertissement</p>
                    <p class="text-xs text-gray-500 mt-2">Notification officielle. Invitation a regulariser la situation.</p>
                </div>
                <div class="glass p-4 text-center" style="border-top: 4px solid #ea580c;">
                    <p class="text-2xl font-bold text-orange-600 mb-1">2eme</p>
                    <p class="text-sm font-bold uppercase tracking-wider">Avertissement</p>
                    <p class="text-xs text-gray-500 mt-2">Procedure de suspension preparee. Resiliation des services programmee.</p>
                </div>
                <div class="glass p-4 text-center" style="border-top: 4px solid #dc2626;">
                    <p class="text-2xl font-bold text-red-600 mb-1">3eme</p>
                    <p class="text-sm font-bold uppercase tracking-wider">Resiliation</p>
                    <p class="text-xs text-gray-500 mt-2">Le bureau se reunit sous 24h pour decider de la resiliation definitive de vos services.</p>
                </div>
            </div>

            <div class="glass p-5" style="border-left: 3px solid #7f1d1d;">
                <p class="text-sm text-gray-600 leading-relaxed mb-2">
                    <strong>Au 3eme avertissement, le bureau de l'association se reunira sous 24 heures pour decider d'effectuer la resiliation definitive de vos services.</strong> Cette decision est non negociable. Aucune discussion, aucun recours, aucun delai supplementaire ne sera accorde.
                </p>
                <p class="text-sm text-gray-600 leading-relaxed mb-2">
                    <strong>Delai de recours :</strong> entre le 3eme avertissement et la reunion du bureau (24h), vous avez la possibilite d'envoyer un email a <a href="mailto:direction@e-cosplay.fr" class="font-bold" style="color: #fabf04;">direction@e-cosplay.fr</a> pour contester. Cela repoussera l'echeance a <strong>72 heures</strong>.
                </p>
                <p class="text-sm text-gray-600 leading-relaxed mb-2">
                    Toutefois, il vous sera demande de <strong>fournir des preuves et documents justificatifs</strong> (attestations, justificatifs de paiement, etc.) a l'appui de votre contestation.
                </p>
                <p class="text-sm text-gray-600 leading-relaxed">
                    De plus, des <strong>frais de remise en service pourront etre demandes</strong>, plafonnes a <strong>300 &euro; HT</strong>.
                </p>
                <p class="text-sm text-gray-600 leading-relaxed mb-2">
                    Toutes les decisions relatives aux avertissements sont prises par le <strong>bureau de l'association et les membres fondateurs, a huis clos</strong>.
                </p>
                <p class="text-sm text-gray-600 leading-relaxed">
                    Toute contestation devra etre adressee exclusivement a <a href="mailto:direction@e-cosplay.fr" class="font-bold" style="color: #fabf04;">direction@e-cosplay.fr</a>
                </p>
            </div>

            <div class="glass p-5 mt-4" style="border-left: 3px solid #16a34a;">
                <p class="text-sm font-bold text-green-700 mb-2">Transparence et protection de votre reputation</p>
                <p class="text-xs text-gray-600 leading-relaxed mb-2">
                    L'Association E-Cosplay s'engage a etre transparente sur ses decisions. Toutefois, les decisions relatives aux <strong>avertissements, sanctions et resiliations restent strictement privees</strong> afin de proteger votre reputation.
                </p>
                <p class="text-xs text-gray-600 leading-relaxed">
                    Seule une <strong>Assemblee Generale Exceptionnelle</strong> pourra etre convoquee le cas echeant, avec pour unique mention a l'ordre du jour : <em>"Discussion resiliation service client"</em>. Aucune information nominative ou detail de la situation ne sera communique aux membres.
                </p>
            </div>
        </div>

        {# Contact #}
        <div class="glass-heavy p-8 text-center">
            <h2 class="text-lg font-bold uppercase tracking-wider mb-3">Une question ?</h2>
            <p class="text-sm text-gray-600 mb-4">Notre equipe est a votre disposition pour repondre a toutes vos questions.</p>
            <p class="text-sm">
                <a href="mailto:contact@e-cosplay.fr" class="font-bold text-lg" style="color: #fabf04;">contact@e-cosplay.fr</a>
            </p>
            <p class="text-xs text-gray-400 mt-2">Tel : 06 79 34 88 02</p>
        </div>
    </div>
</div>
{% endblock %}