{% 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>

        {# 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">200 &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>2 400 &euro; HT / an</strong></p>
                    <div class="glass p-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) avec une gestion specifique.</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 un email avec le contrat</p>
                        <p class="text-xs text-gray-500">Le contrat de migration vous est envoye par email 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">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;">4</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>
        </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>
        </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>

        {# 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 %}