diff --git a/assets/app.scss b/assets/app.scss
index aeb4148..31af5f2 100644
--- a/assets/app.scss
+++ b/assets/app.scss
@@ -61,6 +61,63 @@ e-ticket-editor {
 }
 .ete-content ul { list-style: disc; padding-left: 1.5rem; margin: 0.5rem 0; }
 
+/* ===== Layout ===== */
+.page-container { max-width: 50rem; margin: 0 auto; padding: 3rem 1rem; }
+.page-container-lg { max-width: 60rem; margin: 0 auto; padding: 3rem 1rem; }
+.page-container-sm { max-width: 36rem; margin: 0 auto; padding: 3rem 1rem; }
+.page-container-xs { max-width: 28rem; margin: 0 auto; padding: 3rem 1rem; }
+.page-container-md { max-width: 40rem; margin: 0 auto; padding: 3rem 1rem; }
+
+/* ===== Headings ===== */
+.heading-page { border-bottom: 4px solid #111827; display: inline-block; margin-bottom: 0.5rem; }
+
+/* ===== Cards ===== */
+.card-brutal { border: 4px solid #111827; box-shadow: 6px 6px 0 rgba(0,0,0,1); background: white; padding: 1.5rem; }
+.card-brutal-lg { border: 4px solid #111827; box-shadow: 6px 6px 0 rgba(0,0,0,1); background: white; padding: 2.5rem; }
+.card-brutal-green { border: 4px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #d1fae5; padding: 1rem 1.5rem; }
+.card-brutal-red { border: 4px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #fee2e2; padding: 1rem 1.5rem; }
+.card-brutal-yellow { border: 4px solid #111827; background: #fabf04; padding: 1rem 1.5rem; }
+.card-brutal-warn { border: 4px solid #111827; box-shadow: 6px 6px 0 rgba(0,0,0,1); background: #fef3c7; padding: 1.5rem; }
+.card-brutal-info { border: 4px solid #111827; background: #f9fafb; padding: 1.5rem; box-shadow: 6px 6px 0 rgba(0,0,0,1); }
+.card-brutal-error { border: 4px solid #991b1b; box-shadow: 6px 6px 0 rgba(0,0,0,1); background: #fee2e2; padding: 1.5rem; }
+
+/* ===== Flash messages ===== */
+.flash-success { border: 4px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #d1fae5; padding: 1rem 1.5rem; margin-bottom: 1.5rem; }
+.flash-error { border: 4px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #fee2e2; padding: 1rem 1.5rem; margin-bottom: 1.5rem; }
+
+/* ===== Forms ===== */
+.form-label { display: block; margin-bottom: 0.5rem; }
+.form-input { width: 100%; padding: 0.75rem 1rem; border: 3px solid #111827; font-weight: 700; outline: none; }
+.form-textarea { width: 100%; padding: 0.75rem 1rem; border: 3px solid #111827; font-weight: 700; outline: none; resize: vertical; }
+.form-file { width: 100%; padding: 0.75rem 1rem; border: 3px solid #111827; font-weight: 700; outline: none; background: white; }
+.form-col { display: flex; flex-direction: column; gap: 1.5rem; }
+.form-row { display: flex; flex-wrap: wrap; gap: 1.5rem; }
+.form-group { flex: 1; min-width: 200px; }
+
+/* ===== Buttons ===== */
+.btn-brutal { padding: 0.75rem 2rem; border: 3px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #fabf04; display: inline-block; cursor: pointer; }
+.btn-brutal:hover { background: #4f46e5; color: white; }
+.btn-brutal-full { width: 100%; padding: 0.75rem 2rem; border: 3px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); cursor: pointer; }
+.btn-brutal-dark { display: block; width: 100%; padding: 0.75rem 2rem; border: 3px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); text-align: center; text-decoration: none; }
+
+/* ===== Tables ===== */
+.table-brutal { width: 100%; border-collapse: collapse; }
+.table-brutal th { padding: 0.5rem 0; text-align: left; }
+.table-brutal td { padding: 0.5rem 0; }
+.table-brutal tr { border-bottom: 1px solid #e5e7eb; }
+.table-brutal tr:last-child { border-bottom: none; }
+
+/* ===== Badges ===== */
+.badge-green { background: #d1fae5; border: 2px solid #111827; padding: 0.15rem 0.5rem; }
+.badge-red { background: #fee2e2; border: 2px solid #111827; padding: 0.15rem 0.5rem; }
+.badge-yellow { background: #fef3c7; border: 2px solid #111827; padding: 0.15rem 0.5rem; }
+
+/* ===== Section headers ===== */
+.section-header { padding: 0.75rem 1.5rem; background: #111827; }
+
+/* ===== Dividers ===== */
+.divider { flex: 1; height: 3px; background: #111827; }
+
 /* ===== Marquee ===== */
 @keyframes marquee {
     0% { transform: translateX(0); }
diff --git a/templates/attestation/not_found.html.twig b/templates/attestation/not_found.html.twig
index 2e26534..264e466 100644
--- a/templates/attestation/not_found.html.twig
+++ b/templates/attestation/not_found.html.twig
@@ -3,11 +3,11 @@
 {% block title %}Attestation introuvable - E-Ticket{% endblock %}
 
 {% block body %}
-<div style="max-width:40rem;margin:0 auto;padding:3rem 1rem;">
-    <h1 class="text-3xl font-black uppercase tracking-tighter italic" style="border-bottom:4px solid #111827;display:inline-block;margin-bottom:0.5rem;">Verification attestation</h1>
+<div class="page-container-md">
+    <h1 class="text-3xl font-black uppercase tracking-tighter italic heading-page">Verification attestation</h1>
 
-    <div style="border:4px solid #991b1b;box-shadow:6px 6px 0 rgba(0,0,0,1);background:#fee2e2;padding:1.5rem;margin-top:2rem;">
-        <p class="font-black text-sm" style="margin-bottom:0.5rem;color:#991b1b;">Attestation introuvable</p>
+    <div class="card-brutal-error mt-8">
+        <p class="font-black text-sm mb-2 text-red-800">Attestation introuvable</p>
         <p class="text-sm text-gray-700">Ce document ne correspond a aucun virement enregistre dans notre systeme. Il est possible que l'attestation ait ete alteree ou falsifiee.</p>
     </div>
 </div>
diff --git a/templates/error/404.html.twig b/templates/error/404.html.twig
index 31dad5a..28a9fe8 100644
--- a/templates/error/404.html.twig
+++ b/templates/error/404.html.twig
@@ -14,7 +14,7 @@
                 <div class="text-8xl font-black uppercase tracking-tighter mb-4">404</div>
                 <h1 class="text-3xl font-black uppercase tracking-tighter italic mb-4">Page introuvable</h1>
                 <p class="font-bold text-gray-500 italic mb-8">La page que vous cherchez n'existe pas ou a ete deplacee.</p>
-                <a href="/" style="padding:0.75rem 2rem;border:3px solid #111827;box-shadow:4px 4px 0 rgba(0,0,0,1);background:#fabf04;display:inline-block;" class="font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
+                <a href="/" class="btn-brutal font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
                     Retour a l'accueil
                 </a>
             </div>
diff --git a/templates/error/500.html.twig b/templates/error/500.html.twig
index dc37fac..fe51320 100644
--- a/templates/error/500.html.twig
+++ b/templates/error/500.html.twig
@@ -14,7 +14,7 @@
                 <div class="text-8xl font-black uppercase tracking-tighter mb-4">{{ status_code }}</div>
                 <h1 class="text-3xl font-black uppercase tracking-tighter italic mb-4">Erreur serveur</h1>
                 <p class="font-bold text-gray-500 italic mb-8">Une erreur inattendue s'est produite. Nos equipes ont ete notifiees.</p>
-                <a href="/" style="padding:0.75rem 2rem;border:3px solid #111827;box-shadow:4px 4px 0 rgba(0,0,0,1);background:#fabf04;display:inline-block;" class="font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
+                <a href="/" class="btn-brutal font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
                     Retour a l'accueil
                 </a>
             </div>
diff --git a/templates/security/email_verified.html.twig b/templates/security/email_verified.html.twig
index f05964a..d1287df 100644
--- a/templates/security/email_verified.html.twig
+++ b/templates/security/email_verified.html.twig
@@ -3,24 +3,24 @@
 {% block title %}Email verifie - E-Ticket{% endblock %}
 
 {% block body %}
-<div style="max-width:36rem;margin:0 auto;padding:3rem 1rem;text-align:center;">
-    <div style="border:4px solid #111827;box-shadow:6px 6px 0 rgba(0,0,0,1);background:white;padding:2.5rem;">
-        <div style="font-size:3rem;margin-bottom:1rem;">&#10003;</div>
-        <h1 class="text-2xl font-black uppercase tracking-tighter italic" style="margin-bottom:1rem;">Email verifie !</h1>
+<div class="page-container-sm text-center">
+    <div class="card-brutal-lg">
+        <div class="text-5xl mb-4">&#10003;</div>
+        <h1 class="text-2xl font-black uppercase tracking-tighter italic mb-4">Email verifie !</h1>
 
-        <div style="border:4px solid #111827;background:#d1fae5;padding:1rem 1.5rem;margin-bottom:1.5rem;">
+        <div class="card-brutal-green mb-6">
             <p class="font-bold text-sm">Votre adresse email a ete verifiee avec succes.</p>
         </div>
 
         {% if isOrganizer %}
-        <div style="border:4px solid #111827;background:#fabf04;padding:1rem 1.5rem;margin-bottom:1.5rem;">
+        <div class="card-brutal-yellow mb-6">
             <p class="font-bold text-sm">L'equipe E-Ticket va maintenant examiner votre demande de compte organisateur. Vous recevrez une reponse sous 48h.</p>
         </div>
         {% else %}
-        <p class="font-bold text-gray-500 text-sm" style="margin-bottom:1.5rem;">Votre compte est actif. Vous pouvez maintenant vous connecter.</p>
+        <p class="font-bold text-gray-500 text-sm mb-6">Votre compte est actif. Vous pouvez maintenant vous connecter.</p>
         {% endif %}
 
-        <a href="{{ path('app_login') }}" style="display:inline-block;padding:0.75rem 2rem;border:3px solid #111827;box-shadow:4px 4px 0 rgba(0,0,0,1);background:#fabf04;" class="font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-black transition-all">Se connecter</a>
+        <a href="{{ path('app_login') }}" class="btn-brutal font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-black transition-all">Se connecter</a>
     </div>
 </div>
 {% endblock %}
diff --git a/templates/security/register_success.html.twig b/templates/security/register_success.html.twig
index 34b8ab8..51e33a9 100644
--- a/templates/security/register_success.html.twig
+++ b/templates/security/register_success.html.twig
@@ -3,22 +3,22 @@
 {% block title %}Compte cree - E-Ticket{% endblock %}
 
 {% block body %}
-<div style="max-width:36rem;margin:0 auto;padding:3rem 1rem;text-align:center;">
-    <div style="border:4px solid #111827;box-shadow:6px 6px 0 rgba(0,0,0,1);background:white;padding:2.5rem;">
-        <div style="font-size:3rem;margin-bottom:1rem;">&#10003;</div>
-        <h1 class="text-2xl font-black uppercase tracking-tighter italic" style="margin-bottom:1rem;">Compte cree avec succes !</h1>
+<div class="page-container-sm text-center">
+    <div class="card-brutal-lg">
+        <div class="text-5xl mb-4">&#10003;</div>
+        <h1 class="text-2xl font-black uppercase tracking-tighter italic mb-4">Compte cree avec succes !</h1>
 
-        <div style="border:4px solid #111827;background:#d1fae5;padding:1rem 1.5rem;margin-bottom:1.5rem;">
+        <div class="card-brutal-green mb-6">
             <p class="font-bold text-sm">Un email de verification vous a ete envoye. Veuillez cliquer sur le lien dans l'email pour activer votre compte.</p>
         </div>
 
         {% if isOrganizer %}
-        <div style="border:4px solid #111827;background:#fabf04;padding:1rem 1.5rem;margin-bottom:1.5rem;">
+        <div class="card-brutal-yellow mb-6">
             <p class="font-bold text-sm">Une fois votre email verifie, l'equipe E-Ticket examinera votre demande de compte organisateur et vous donnera une reponse sous 48h.</p>
         </div>
         {% endif %}
 
-        <a href="{{ path('app_login') }}" style="display:inline-block;padding:0.75rem 2rem;border:3px solid #111827;box-shadow:4px 4px 0 rgba(0,0,0,1);background:#fabf04;" class="font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-black transition-all">Aller a la connexion</a>
+        <a href="{{ path('app_login') }}" class="btn-brutal font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-black transition-all">Aller a la connexion</a>
     </div>
 </div>
 {% endblock %}