feat(workout-session-header): add animated colons to time display for better visual appeal

style(globals.css): add colon-blink animation and corresponding CSS class for time formatting animation

src/features/workout-session/ui/workout-session-header.tsx

@@ -25,6 +25,23 @@ export function WorkoutSessionHeader({ onQuitWorkout }: WorkoutSessionHeaderProp
   const totalExercises = getTotalExercises();
   const totalVolume = getTotalVolumeInUnit(volumeUnit);
 
+  // Format time with animated colons
+  const formatTimeWithAnimatedColons = (date: Date) => {
+    const timeString = date.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" });
+    const parts = timeString.split(":");
+
+    if (parts.length === 2) {
+      return (
+        <>
+          {parts[0]}
+          <span className="animate-colon-blink">:</span>
+          {parts[1]}
+        </>
+      );
+    }
+    return timeString;
+  };
+
   // Load volume unit preference from localStorage
   useEffect(() => {
     const savedUnit = localStorage.getItem("volumeUnit") as WeightUnit;
@@ -54,8 +71,7 @@ export function WorkoutSessionHeader({ onQuitWorkout }: WorkoutSessionHeaderProp
         <div className="rounded-lg p-2 sm:p-3 bg-slate-50 dark:bg-slate-900/80 border border-slate-200 dark:border-slate-700">
           <div className="flex items-center justify-between mb-2 sm:mb-3">
             <span className="text-emerald-400 font-medium text-xs tracking-wide">
-              {t("workout_builder.session.started_at")}{" "}
-              {new Date(session?.startedAt || "").toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" })}
+              {t("workout_builder.session.started_at")} {formatTimeWithAnimatedColons(new Date(session?.startedAt || ""))}
             </span>
 
             <Button

src/shared/styles/globals.css

@@ -296,7 +296,6 @@
     linear-gradient(90deg, rgb(22, 22, 26), rgb(18, 24, 38));
 }
 
-
 @keyframes fade-in-up {
   from {
     opacity: 0;
@@ -319,6 +318,17 @@
   }
 }
 
+@keyframes colon-blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0.3;
+  }
+}
+
 .animate-fade-in-up {
   animation: fade-in-up 0.6s ease-out;
 }
@@ -327,6 +337,10 @@
   animation: slide-up 0.4s ease-out;
 }
 
+.animate-colon-blink {
+  animation: colon-blink 1s infinite ease-in-out;
+}
+
 /* Smooth focus styles pour l'accessibilité */
 .equipment-card:focus-visible {
   outline: 2px solid #10b981;