From b1d43fba9e400791bc33af00c9f187f54d9a2ca7 Mon Sep 17 00:00:00 2001
From: kelen-dev <contact@kelens.fr>
Date: Tue, 3 Jun 2025 15:52:06 +0200
Subject: [PATCH] refactor styles for consistency and maintainability; replace
 hardcoded values with CSS variables

---
 .../app/components/home/home.component.css    | 18 +++++++++---------
 FencerJudgeFront/src/styles.css               | 19 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/FencerJudgeFront/src/app/components/home/home.component.css b/FencerJudgeFront/src/app/components/home/home.component.css
index 0d2b5a9..a09e6de 100644
--- a/FencerJudgeFront/src/app/components/home/home.component.css
+++ b/FencerJudgeFront/src/app/components/home/home.component.css
@@ -270,7 +270,7 @@
             rgba(255, 215, 0, 0.1) 100%);
     border: 2px solid;
     border-image: linear-gradient(45deg, #dc2626, var(--primary-color), #dc2626) 1;
-    border-radius: 12px;
+    border-radius: var(--border-radius);
     padding: 20px;
     position: relative;
     overflow: hidden;
@@ -393,7 +393,7 @@
             rgba(26, 26, 46, 0.9) 50%,
             rgba(0, 0, 0, 0.8) 100%);
     border: 1px solid var(--primary-color);
-    border-radius: 8px;
+    border-radius: var(--border-radius);
     position: relative;
     transition: all 0.3s ease;
     cursor: pointer;
@@ -507,7 +507,7 @@
 .stat-value {
     font-size: 16px;
     font-weight: 700;
-    color: #ffffff;
+    color: white;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 }
 
@@ -618,7 +618,7 @@
     position: relative;
     background-size: cover;
     background-position: center;
-    border-radius: 12px;
+    border-radius: var(--border-radius);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     width: 400px;
     height: 500px;
@@ -643,7 +643,7 @@
         inset 0 1px 0 rgba(255, 255, 255, 0.1);
     transform: translateY(-2px);
     /* Léger lift au hover */
-    border: 2px solid rgba(212, 175, 55, 0.6);
+    border: 2px solid var(--primary-color);
     background: var(--card-gradient) !important;
 }
 
@@ -655,10 +655,10 @@
     background-image: inherit;
     background-size: cover;
     background-position: center;
-    filter: blur(10px) brightness(1.1) contrast(1.1);
+    filter: var(--blur-effect);
     opacity: .6;
     z-index: 1;
-    transition: all .6s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: var(--transition-smooth);
     /* Courbe plus fluide */
 }
 
@@ -666,7 +666,7 @@
 .diplomes-card:hover:before {
     transform: scale(1.2);
     /* Zoom uniquement sur l'image */
-    filter: blur(8px) brightness(1.3);
+    filter: var(--blur-hover);
     /* Moins de blur + plus lumineux au hover */
     opacity: .8;
     /* Plus visible au hover */
@@ -696,7 +696,7 @@
 }
 
 .weapon-card p {
-    color: #ffffff;
+    color: white;
     font-size: 0.95em;
 }
 
diff --git a/FencerJudgeFront/src/styles.css b/FencerJudgeFront/src/styles.css
index a599d8b..5374057 100644
--- a/FencerJudgeFront/src/styles.css
+++ b/FencerJudgeFront/src/styles.css
@@ -12,5 +12,22 @@
       rgba(64, 64, 64, 0.95) 0%,
       rgba(32, 32, 32, 0.98) 50%,
       rgba(16, 16, 16, 0.95) 100%);
-      --h-f-bg: #2c2c2c;
+  --h-f-bg: #2c2c2c;
+}
+
+/* Filters */
+:root {
+  --blur-effect: blur(10px) brightness(1.1) contrast(1.1);
+  --blur-hover: blur(8px) brightness(1.3);
+}
+
+/* Transitions */
+:root {
+  --transition-smooth: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-quick: all 0.3s ease;
+}
+
+/* Borders */
+:root {
+  --border-radius: 12px;
 }
\ No newline at end of file