Refactor home component styles and HTML structure for improved readability and responsiveness

- Updated CSS styles for match cards, backgrounds, and weapon cards to enhance visual appeal.
- Refactored HTML structure for match display, including match header, versus section, and combat arena.
- Improved responsiveness for combat grid and weapon sections.
- Added hover effects for weapon cards to enhance user interaction.

FencerJudgeFront/src/app/components/home/home.component.css

@@ -7,8 +7,11 @@
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease;
-  height: 80vh;
+    height: 90vh;
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 }
 
 .match-card::before {
@@ -70,12 +73,10 @@
     left: 0;
     width: 100%;
     height: 100%;
-  background: linear-gradient(
+    background: linear-gradient(135deg,
-    135deg,
             rgba(26, 26, 46, 0.85) 0%,
             rgba(0, 0, 0, 0.7) 50%,
-    rgba(22, 33, 62, 0.85) 100%
+            rgba(22, 33, 62, 0.85) 100%);
-  );
 }
 
 /* Header */
@@ -140,10 +141,12 @@
 }
 
 @keyframes pulse {
+
     0%,
     100% {
         opacity: 1;
     }
+
     50% {
         opacity: 0.5;
     }
@@ -261,12 +264,10 @@
 
 .combat-arena {
     margin-top: 24px;
-  background: linear-gradient(
+    background: linear-gradient(135deg,
-    135deg,
             rgba(220, 38, 38, 0.1) 0%,
             rgba(0, 0, 0, 0.8) 50%,
-    rgba(255, 215, 0, 0.1) 100%
+            rgba(255, 215, 0, 0.1) 100%);
-  );
     border: 2px solid;
     border-image: linear-gradient(45deg, #dc2626, #ffd700, #dc2626) 1;
     border-radius: 12px;
@@ -282,11 +283,9 @@
     left: -50%;
     width: 200%;
     height: 200%;
-  background: repeating-conic-gradient(
+    background: repeating-conic-gradient(from 0deg at 50% 50%,
-    from 0deg at 50% 50%,
             transparent 0deg 2deg,
-    rgba(220, 38, 38, 0.05) 2deg 4deg
+            rgba(220, 38, 38, 0.05) 2deg 4deg);
-  );
     animation: rotate 20s linear infinite;
     pointer-events: none;
 }
@@ -295,6 +294,7 @@
     0% {
         transform: rotate(0deg);
     }
+
     100% {
         transform: rotate(360deg);
     }
@@ -324,6 +324,7 @@
     from {
         text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700;
     }
+
     to {
         text-shadow: 0 0 20px #ffd700, 0 0 30px #ffd700, 0 0 40px #ffd700;
     }
@@ -352,10 +353,12 @@
 }
 
 @keyframes pulse-danger {
+
     0%,
     100% {
         transform: scale(1);
     }
+
     50% {
         transform: scale(1.2);
     }
@@ -366,6 +369,7 @@
         transform: scale(0.8);
         opacity: 0.8;
     }
+
     100% {
         transform: scale(2);
         opacity: 0;
@@ -384,12 +388,10 @@
     align-items: center;
     gap: 16px;
     padding: 16px;
-  background: linear-gradient(
+    background: linear-gradient(90deg,
-    90deg,
             rgba(0, 0, 0, 0.8) 0%,
             rgba(26, 26, 46, 0.9) 50%,
-    rgba(0, 0, 0, 0.8) 100%
+            rgba(0, 0, 0, 0.8) 100%);
-  );
     border: 1px solid rgba(255, 215, 0, 0.3);
     border-radius: 8px;
     position: relative;
@@ -430,8 +432,7 @@
     width: 35px;
     height: 35px;
     background: linear-gradient(45deg, #ffd700, #ffed4a);
-  clip-path: polygon(
+    clip-path: polygon(50% 0%,
-    50% 0%,
             61% 35%,
             98% 35%,
             68% 57%,
@@ -440,8 +441,7 @@
             21% 91%,
             32% 57%,
             2% 35%,
-    39% 35%
+            39% 35%);
-  );
     animation: badge-pulse 3s ease-in-out infinite;
 }
 
@@ -459,16 +459,19 @@
     0% {
         transform: rotate(0deg);
     }
+
     100% {
         transform: rotate(360deg);
     }
 }
 
 @keyframes badge-pulse {
+
     0%,
     100% {
         transform: scale(1) rotate(0deg);
     }
+
     50% {
         transform: scale(1.1) rotate(5deg);
     }
@@ -478,6 +481,7 @@
     0% {
         transform: rotate(0deg);
     }
+
     100% {
         transform: rotate(360deg);
     }
@@ -517,9 +521,11 @@
 .venue .stat-value {
     color: #10b981;
 }
+
 .referee .stat-value {
     color: #ffd700;
 }
+
 .timing .stat-value {
     color: #dc2626;
 }
@@ -543,9 +549,11 @@
 .venue-glow {
     box-shadow: inset 0 0 20px rgba(16, 185, 129, 0.2);
 }
+
 .referee-glow {
     box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.2);
 }
+
 .timing-glow {
     box-shadow: inset 0 0 20px rgba(220, 38, 38, 0.2);
 }
@@ -567,6 +575,34 @@
     }
 }
 
+/* Section Weapons */
+.section-header {
+    text-align: center;
+    margin-bottom: 3rem;
+    position: relative;
+}
+
+.section-title {
+    font-size: 2.5rem;
+    font-weight: 300;
+    letter-spacing: 2px;
+    color: #333;
+    margin: 0;
+    position: relative;
+    display: inline-block;
+}
+
+.section-title::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 2px;
+    background: linear-gradient(90deg, #d4af37, #ffd700);
+}
+
 .weapons-container {
     display: flex;
     flex-wrap: wrap;
@@ -575,6 +611,7 @@
     padding: 20px;
 }
 
+/* Card Weapon */
 .weapon-card {
     position: relative;
     background-size: cover;
@@ -592,6 +629,7 @@
     padding: 20px;
     background-color: #000;
 }
+
 .weapon-card::before {
     content: '';
     position: absolute;
@@ -599,10 +637,18 @@
     background-image: inherit;
     background-size: cover;
     background-position: center;
-  filter: blur(10px) brightness(1.1); 
+    filter: blur(10px) brightness(1.1) contrast(1.1);
-  opacity: 0.7;
+    opacity: .6;
     z-index: 1;
+    transition: all .6s cubic-bezier(0.4, 0, 0.2, 1); /* Courbe plus fluide */
 }
+
+.weapon-card:hover::before {
+    transform: scale(1.2); /* Zoom uniquement sur l'image */
+    filter: blur(8px) brightness(1.3); /* Moins de blur + plus lumineux au hover */
+    opacity: .8; /* Plus visible au hover */
+}
+
 .weapon-card * {
     position: relative;
     z-index: 2;

FencerJudgeFront/src/app/components/home/home.component.html

@@ -9,10 +9,7 @@
             <i class="sword-icon">⚔️</i>
             <span class="weapon-type">{{ latestMatch.weapon }}</span>
         </div>
-    <div
+        <div class="match-status" [ngClass]="'status-' + getMatchStateColor(latestMatch.state)">
-      class="match-status"
-      [ngClass]="'status-' + getMatchStateColor(latestMatch.state)"
-    >
             <span class="status-dot"></span>
             {{ getMatchStateLabel(latestMatch.state) }}
         </div>
@@ -68,18 +65,13 @@
                 </div>
                 <div class="stat-content">
                     <span class="stat-label">COMBAT JUDGE</span>
-          <span class="stat-value"
+                    <span class="stat-value">{{ referee?.name }} {{ referee?.firstName }}</span>
-            >{{ referee?.name }} {{ referee?.firstName }}</span
-          >
                     <span class="stat-sub">OFFICIAL REFEREE</span>
                 </div>
                 <div class="stat-glow referee-glow"></div>
             </div>
 
-      <div
+            <div class="combat-stat timing" *ngIf="latestMatch?.state === MatchState.NOT_STARTED">
-        class="combat-stat timing"
-        *ngIf="latestMatch?.state === MatchState.NOT_STARTED"
-      >
                 <div class="stat-icon">
                     <div class="time-ring"></div>
                     <span>⚡</span>
@@ -91,10 +83,7 @@
                 </div>
                 <div class="stat-glow timing-glow"></div>
             </div>
-      <div
+            <div class="combat-stat funfact" *ngIf="latestMatch?.state !== MatchState.NOT_STARTED">
-        class="combat-stat funfact"
-        *ngIf="latestMatch?.state !== MatchState.NOT_STARTED"
-      >
                 <div class="stat-icon">
                     <span>🎯</span>
                 </div>
@@ -110,6 +99,12 @@
         </div>
     </div>
 </div>
+
+<section class="weapons-section">
+    <div class="section-header">
+        <h2 class="section-title">Les Armes</h2>
+    </div>
+
     <div class="weapons-container">
         <div class="weapon-card" style="background-image: url('./assets/epee_escrime.jpg');">
             <h2>Épée</h2>
@@ -128,10 +123,11 @@
 
         <div class="weapon-card" style="background-image: url('./assets/sabre_laser_escrime.jpg');">
             <h2>Sabre Laser</h2>
-  <p>Arme moderne d’escrime sportive, inspirée de la science-fiction. Lame lumineuse, règles proches du sabre classique. Discipline visuelle et dynamique.</p>
+            <p>Arme moderne d’escrime sportive, inspirée de la science-fiction. Lame lumineuse, règles proches du sabre
+                classique. Discipline visuelle et dynamique.</p>
         </div>
 
     </div>
-
+</section>
 
 <app-sponsort></app-sponsort>