Add diplômes section with detailed descriptions and styles for cards

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

@@ -1,6 +1,6 @@
 .match-card {
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-    border: 2px solid #daa520;
+    border: 2px solid var(--primary-color);
     padding: 24px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
         inset 0 1px 0 rgba(255, 255, 255, 0.1);
@@ -21,7 +21,7 @@
     left: 0;
     right: 0;
     height: 2px;
-    background: linear-gradient(90deg, #daa520, #ffd700, #daa520);
+    background: linear-gradient(90deg, #daa520, var(--primary-color), #daa520);
     background-size: 200% 100%;
     animation: gradientShift 15s ease infinite;
 }
@@ -269,7 +269,7 @@
             rgba(0, 0, 0, 0.8) 50%,
             rgba(255, 215, 0, 0.1) 100%);
     border: 2px solid;
-    border-image: linear-gradient(45deg, #dc2626, #ffd700, #dc2626) 1;
+    border-image: linear-gradient(45deg, #dc2626, var(--primary-color), #dc2626) 1;
     border-radius: 12px;
     padding: 20px;
     position: relative;
@@ -314,19 +314,19 @@
     font-family: "Orbitron", monospace;
     font-size: 16px;
     font-weight: 900;
-    color: #ffd700;
+    color: var(--primary-color);
     letter-spacing: 3px;
-    text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700;
+    text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 30px var(--primary-color);
     animation: titleGlow 2s ease-in-out infinite alternate;
 }
 
 @keyframes titleGlow {
     from {
-        text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700;
+        text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 30px var(--primary-color);
     }
 
     to {
-        text-shadow: 0 0 20px #ffd700, 0 0 30px #ffd700, 0 0 40px #ffd700;
+        text-shadow: 0 0 20px var(--primary-color), 0 0 30px var(--primary-color), 0 0 40px var(--primary-color);
     }
 }
 
@@ -392,7 +392,7 @@
             rgba(0, 0, 0, 0.8) 0%,
             rgba(26, 26, 46, 0.9) 50%,
             rgba(0, 0, 0, 0.8) 100%);
-    border: 1px solid rgba(255, 215, 0, 0.3);
+    border: 1px solid var(--primary-color);
     border-radius: 8px;
     position: relative;
     transition: all 0.3s ease;
@@ -401,8 +401,8 @@
 
 .combat-stat:hover {
     transform: translateX(8px);
-    border-color: #ffd700;
+    border-color: var(--primary-color);
-    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3),
+    box-shadow: 0 4px 20px var(--primary-color),
         inset 0 1px 0 rgba(255, 215, 0, 0.1);
 }
 
@@ -431,7 +431,7 @@
     position: absolute;
     width: 35px;
     height: 35px;
-    background: linear-gradient(45deg, #ffd700, #ffed4a);
+    background: linear-gradient(45deg, var(--primary-color), #ffed4a);
     clip-path: polygon(50% 0%,
             61% 35%,
             98% 35%,
@@ -523,7 +523,7 @@
 }
 
 .referee .stat-value {
-    color: #ffd700;
+    color: var(--primary-color);
 }
 
 .timing .stat-value {
@@ -600,10 +600,11 @@
     transform: translateX(-50%);
     width: 60px;
     height: 2px;
-    background: linear-gradient(90deg, #d4af37, #ffd700);
+    background: var(--gradient-color);
 }
 
-.weapons-container {
+.weapons-container,
+.diplomes-container {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
@@ -612,25 +613,40 @@
 }
 
 /* Card Weapon */
-.weapon-card {
+.weapon-card,
+.diplomes-card {
     position: relative;
     background-size: cover;
     background-position: center;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    max-width: 300px;
+    width: 400px;
-    height: 400px;
+    height: 500px;
     color: white;
     text-align: center;
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    justify-content: flex-end;
     padding: 20px;
-    background-color: #000;
+    aspect-ratio: 16/9;
+    transition: box-shadow 0.3s ease;
+    /* Transition douce pour l'effet de lift */
 }
 
-.weapon-card::before {
+.weapon-card:hover,
+.diplomes-card:hover {
+    background-image: none !important;
+    box-shadow:
+        0 8px 25px rgba(0, 0, 0, 0.3),
+        0 0 20px rgba(212, 175, 55, 0.3),
+        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);
+}
+
+.weapon-card:before,
+.diplomes-card:before {
     content: '';
     position: absolute;
     inset: 0;
@@ -640,34 +656,83 @@
     filter: blur(10px) brightness(1.1) contrast(1.1);
     opacity: .6;
     z-index: 1;
-    transition: all .6s cubic-bezier(0.4, 0, 0.2, 1); /* Courbe plus fluide */
+    transition: all .6s cubic-bezier(0.4, 0, 0.2, 1);
+    /* Courbe plus fluide */
 }
 
-.weapon-card:hover::before {
+.weapon-card:hover:before,
-    transform: scale(1.2); /* Zoom uniquement sur l'image */
+.diplomes-card:hover:before {
-    filter: blur(8px) brightness(1.3); /* Moins de blur + plus lumineux au hover */
+    transform: scale(1.2);
-    opacity: .8; /* Plus visible au hover */
+    /* Zoom uniquement sur l'image */
+    filter: blur(8px) brightness(1.3);
+    /* Moins de blur + plus lumineux au hover */
+    opacity: .8;
+    /* Plus visible au hover */
+    background-image: none;
 }
 
-.weapon-card * {
+.weapon-card:hover:before,
+.diplomes-card:hover:before {
+    background:
+        var(--card-gradient);
+    animation: metalShine 2s ease-in-out infinite alternate;
+}
+
+@keyframes metalShine {
+    0% {
+        filter: brightness(1.1) contrast(1.2);
+    }
+
+    100% {
+        filter: brightness(1.3) contrast(1.4) saturate(1.1);
+    }
+}
+
+.weapon-card *,
+.diplomes-card * {
     position: relative;
     z-index: 2;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
 }
 
-.weapon-card img {
-    width: 100%;
-    height: auto;
-    border-radius: 10px;
-    margin-bottom: 15px;
-}
-
-.weapon-card h2 {
-    margin-bottom: 10px;
-    font-size: 1.4em;
-}
-
 .weapon-card p {
     color: #ffffff;
     font-size: 0.95em;
 }
+
+.diplomes-card h2,
+.weapon-card h2 {
+    position: absolute;
+    opacity: 1;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    bottom: 50%;
+    left: 50%;
+    transform: translate(-50%, 50%);
+    /* Centrage parfait */
+    margin: auto 0;
+    text-transform: uppercase;
+    font-size: 1.4em;
+}
+
+.diplomes-card:hover h2,
+.weapon-card:hover h2 {
+    opacity: 0;
+    transform: translate(-50%, 30%);
+    /* Glisse vers le haut en disparaissant */
+}
+
+.diplomes-card p,
+.weapon-card p,
+.diplomes-card ul li {
+    text-align: start;
+    opacity: 0;
+    transform: translateY(-100%);
+    transition: opacity transform .6s ease-in-out;
+}
+
+.diplomes-card:hover p,
+.weapon-card:hover p,
+.diplomes-card:hover ul li {
+    opacity: 1;
+    transform: translateY(0);
+}

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

@@ -130,4 +130,92 @@
     </div>
 </section>
 
+<section class="diplomes-section">
+    <div class="section-header">
+        <h2 class="section-title">Les diplômes d'arbitrage</h2>
+    </div>
+
+    <div class="diplomes-container">
+        <div class="diplomes-card" style="background-image: url('./assets/epee_escrime.jpg');">
+            <h2>départemental</h2>
+            <p>Ce diplôme est décemé par la CAI ou la CRA dont
+                dépend l'arbitre :</p>
+            <ul>
+                <li>
+                    Âge minimum : 14 ans.
+                </li>
+                <li>
+                    Ouvre droit à arbitrer toutes les compétitions
+                    organisées dans le cadre du comité interdépartemental
+                    et/ou du comité régional dont dépend l'arbitre (sous
+                    réserve de l'avis de la CRA dont dépend l'arbitre).
+                </li>
+                <li>
+                    Titulaire d'un carton BLANC qui permet d'arrêter un
+                    match à n'importe quel moment pour demander une
+                    assistance du DT et/ou de l'organisateur de la
+                    compétition. Le rôle pédagogique du DT et/ou de
+                    l'organisateur est primordial dans l'accompagnement
+                    des jeunes arbitres.
+                </li>
+            </ul>
+        </div>
+
+        <div class="diplomes-card" style="background-image: url('./assets/fleuret_escrime.jpg');">
+            <h2>régional</h2>
+            <p>Ce diplôme est décerné par la CRA dont dépend
+                l'arbitre :</p>
+            <ul>
+                <li>
+                    Âge minimum : 16 ans
+                </li>
+                <li>
+                    Il ouvre droit à arbitrer toutes les compétitions
+                    organisées dans le cadre du Comité régional,
+                </li>
+                <li>
+                    Les circuits nationaux,
+                </li>
+                <li>
+                    La Fête des Jeunes,
+                </li>
+                <li>
+                    Des dérogations ponctuelles peuvent faire l'objet d'une
+                    circulaire.
+                </li>
+            </ul>
+        </div>
+
+        <div class="diplomes-card" style="background-image: url('./assets/sabre_escrime.jpg');">
+            <h2>national</h2>
+            <p>Ce diplôme est décerné par la CNA (Commission
+                Nationale Arbitrage) :</p>
+            <ul>
+                <li>• Âge minimum : 18 ans</li>
+                <li>Il ouvre droit à arbitrer toutes les compétitions
+                    organisées dans le cadre du Comité régional,</li>
+                <li>Les circuits nationaux,</li>
+                <li>La Fête des Jeunes, les championnats de France M17,
+                    M20, Séniors et Vétérans sur convocation de la CNN</li>
+                <li>Les circuits européens M17 et U23 organisés sur le
+                    territoire français et à l'étranger.</li>
+            </ul>
+        </div>
+
+        <div class="diplomes-card" style="background-image: url('./assets/sabre_laser_escrime.jpg');">
+            <h2>international</h2>
+            <p>Ce diplôme est décerné par la Fédération
+                Internationale d'Escrime (FIE).</p>
+            <ul>
+                <li>Âge minimum : 20 ans</li>
+                <li>Il ouvre droit à arbitrer toutes les compétitions. Les
+                    arbitres qui figurent sur la liste restreinte de la FIE
+                    doivent arbitrer des compétitions nationales séniors et
+                    être la référence de notre corps arbitral.</li>
+            </ul>
+        </div>
+
+    </div>
+</section>
+
 <app-sponsort></app-sponsort>

FencerJudgeFront/src/styles.css

@@ -2,3 +2,14 @@
 .bg-primary-custom {
   background-color: #414141;
 }
+
+/* Colors */
+:root {
+  --primary-color: rgba(212, 175, 55, 0.6);
+  --gradient-color: linear-gradient(90deg, #d4af37, var(--primary-color));
+  --card-gradient: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%),
+    linear-gradient(135deg,
+      rgba(64, 64, 64, 0.95) 0%,
+      rgba(32, 32, 32, 0.98) 50%,
+      rgba(16, 16, 16, 0.95) 100%);
+}