Migrate all remaining inline styles to CSS classes for CSP compliance

- Remove ALL inline style= attributes from 22 templates (except email/pdf)
- Add admin CSS classes in admin.scss (admin-card, admin-table, admin-btn, admin-badge, admin-tab, admin-form, admin-nav, admin-pagination)
- Add .bg-instagram, .detail-table, .section-header to app.scss
- Templates migrated: base, account/index, account/edit_subaccount, security/register, security/change_password, home/tarifs, home/index, all 7 legal pages, all 8 admin pages
- Total: ~1000 inline style= replaced with CSS classes and Tailwind utilities
- Fixes Content Security Policy violations blocking inline styles in production

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
2026-03-20 15:38:02 +01:00
parent bd51f42da7
commit 0959edb024
22 changed files with 965 additions and 864 deletions

View File

@@ -142,19 +142,19 @@
</main>
<footer class="bg-yellow-400 border-t-8 border-gray-900 text-gray-900 mt-auto">
<div style="max-width:80rem;margin:0 auto;padding:3rem 1rem;">
<div style="display:flex;flex-wrap:wrap;gap:3rem;padding-bottom:3rem;margin-bottom:3rem;border-bottom:4px solid #111827;">
<div style="flex:1;min-width:280px;">
<h3 class="text-3xl font-black uppercase tracking-tighter italic" style="border-bottom:4px solid #111827;display:inline-block;margin-bottom:1rem;">Nous Contacter</h3>
<p class="font-bold text-lg" style="line-height:1.4;">42 RUE DE SAINT-QUENTIN<br>02800 BEAUTOR, FRANCE</p>
<a href="mailto:contact@e-cosplay.fr" style="display:inline-block;margin-top:1rem;padding:0.5rem 1rem;" class="bg-gray-900 text-white font-black uppercase text-sm hover:bg-indigo-600 transition-colors">
<div class="max-w-7xl mx-auto py-12 px-4">
<div class="flex flex-wrap gap-12 pb-12 mb-12 border-b-4 border-gray-900">
<div class="flex-1 min-w-[280px]">
<h3 class="text-3xl font-black uppercase tracking-tighter italic border-b-4 border-gray-900 inline-block mb-4">Nous Contacter</h3>
<p class="font-bold text-lg leading-snug">42 RUE DE SAINT-QUENTIN<br>02800 BEAUTOR, FRANCE</p>
<a href="mailto:contact@e-cosplay.fr" class="inline-block mt-4 px-4 py-2 bg-gray-900 text-white font-black uppercase text-sm hover:bg-indigo-600 transition-colors">
contact@e-cosplay.fr
</a>
</div>
<div style="flex:1;min-width:280px;">
<h3 class="text-3xl font-black uppercase tracking-tighter italic" style="border-bottom:4px solid #111827;display:inline-block;margin-bottom:1rem;">E-Ticket</h3>
<p class="font-bold text-gray-800 italic" style="line-height:1.5;">
<div class="flex-1 min-w-[280px]">
<h3 class="text-3xl font-black uppercase tracking-tighter italic border-b-4 border-gray-900 inline-block mb-4">E-Ticket</h3>
<p class="font-bold text-gray-800 italic leading-normal">
E-Ticket est une plateforme de billetterie destinee aux associations
pour la vente de tickets evenementiels, la reservation de tables,
l'organisation de brocantes et le vote en ligne.
@@ -162,21 +162,21 @@
</div>
</div>
<div style="display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;">
<div class="flex flex-wrap justify-between items-center gap-6">
<div>
<p class="font-black uppercase text-sm">&copy; {{ "now"|date("Y") }} E-TICKET.</p>
<p style="font-size:11px;" class="font-bold opacity-80">Solution proposee par l'association <a href="https://www.e-cosplay.fr" class="underline hover:no-underline">e-cosplay.fr</a></p>
<p style="font-size:10px;" class="font-bold opacity-70">RNA N&deg;W022006988</p>
<p class="text-[11px] font-bold opacity-80">Solution proposee par l'association <a href="https://www.e-cosplay.fr" class="underline hover:no-underline">e-cosplay.fr</a></p>
<p class="text-[10px] font-bold opacity-70">RNA N&deg;W022006988</p>
</div>
<div style="display:flex;flex-wrap:wrap;gap:0.5rem;">
<a href="{{ path('app_mentions_legales') }}" style="font-size:10px;padding:0.25rem 0.5rem;" class="font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">Mentions Legales</a>
<a href="{{ path('app_cookies') }}" style="font-size:10px;padding:0.25rem 0.5rem;" class="font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">Politique de Cookies</a>
<a href="{{ path('app_cgu') }}" style="font-size:10px;padding:0.25rem 0.5rem;" class="font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">CGU</a>
<a href="{{ path('app_cgv') }}" style="font-size:10px;padding:0.25rem 0.5rem;" class="font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">CGV</a>
<a href="{{ path('app_rgpd') }}" style="font-size:10px;padding:0.25rem 0.5rem;" class="font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">Politique RGPD</a>
<a href="{{ path('app_hosting') }}" style="font-size:10px;padding:0.25rem 0.5rem;" class="font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">Hebergement</a>
<a href="{{ path('app_tarifs') }}" style="font-size:10px;padding:0.25rem 0.5rem;" class="font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">Tarifs</a>
<a href="{{ path('app_conformite') }}" style="font-size:10px;padding:0.25rem 0.5rem;" class="font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">Conformite</a>
<div class="flex flex-wrap gap-2">
<a href="{{ path('app_mentions_legales') }}" class="text-[10px] px-2 py-1 font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">Mentions Legales</a>
<a href="{{ path('app_cookies') }}" class="text-[10px] px-2 py-1 font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">Politique de Cookies</a>
<a href="{{ path('app_cgu') }}" class="text-[10px] px-2 py-1 font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">CGU</a>
<a href="{{ path('app_cgv') }}" class="text-[10px] px-2 py-1 font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">CGV</a>
<a href="{{ path('app_rgpd') }}" class="text-[10px] px-2 py-1 font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">Politique RGPD</a>
<a href="{{ path('app_hosting') }}" class="text-[10px] px-2 py-1 font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">Hebergement</a>
<a href="{{ path('app_tarifs') }}" class="text-[10px] px-2 py-1 font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">Tarifs</a>
<a href="{{ path('app_conformite') }}" class="text-[10px] px-2 py-1 font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">Conformite</a>
</div>
</div>
</div>