style(profile/page.tsx): add margin-top to WorkoutSessionHeatmap for better spacing

style(Header.tsx): refactor Link and tooltip structure for improved accessibility
style(release-notes-dialog.tsx): adjust tooltip structure for better layout
style(ThemeToggle.tsx): refactor tooltip structure for consistent styling
style(workout-stepper.tsx): add full height to congrats message container for better alignment
style(workout-session-sets.tsx): update loading indicator and background styles for

app/[locale]/profile/page.tsx

@@ -27,7 +27,9 @@ export default function ProfilePage() {
   return (
     <div className="px-2 sm:px-6">
       {!sessions.length && <LocalAlert className="my-4" />}
-      <WorkoutSessionHeatmap until={until} values={values} />
+      <div className="mt-4">
+        <WorkoutSessionHeatmap until={until} values={values} />
+      </div>
       <WorkoutSessionList />
       <div className="mt-8 flex justify-center">
         <Button onClick={() => router.push("/")} size="large">

src/features/layout/Header.tsx

@@ -50,15 +50,15 @@ export const Header = () => {
 
       {/* User Menu */}
       <div className="navbar-end">
-        <Link
-          aria-label={t("commons.home")}
-          className="hover:bg-slate-200 dark:hover:bg-gray-800 rounded-full p-2 transition flex"
-          href="/"
-        >
-          <div className="tooltip tooltip-bottom" data-tip={t("commons.home")}>
+        <div className="tooltip tooltip-bottom" data-tip={t("commons.home")}>
+          <Link
+            aria-label={t("commons.home")}
+            className="hover:bg-slate-200 dark:hover:bg-gray-800 rounded-full p-2 transition flex"
+            href="/"
+          >
             <Home className="w-6 h-6 text-blue-500 dark:text-blue-400" />
-          </div>
-        </Link>
+          </Link>
+        </div>
 
         <ReleaseNotesDialog />
 

src/features/release-notes/ui/release-notes-dialog.tsx

@@ -17,11 +17,11 @@ export function ReleaseNotesDialog() {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button aria-label={t("release_notes.release_notes")} className="rounded-full hover:bg-slate-200" size="small" variant="ghost">
-          <div className="tooltip tooltip-bottom" data-tip={t("commons.changelog")}>
+        <div className="tooltip tooltip-bottom z-10" data-tip={t("commons.changelog")}>
+          <Button aria-label={t("release_notes.release_notes")} className="rounded-full hover:bg-slate-200" size="small" variant="ghost">
             <Bell className="text-blue-500 dark:text-blue-400 h-6 w-6" />
-          </div>
-        </Button>
+          </Button>
+        </div>
       </DialogTrigger>
       <DialogContent className="max-w-md">
         <DialogHeader>

src/features/theme/ThemeToggle.tsx

@@ -14,18 +14,18 @@ export function ThemeToggle() {
   }, [resolvedTheme]);
 
   return (
-    <Button
-      className="hover:bg-slate-200 rounded-full p-2 pr-2"
-      onClick={() => setTheme(resolvedTheme === "light" ? "dark" : "light")}
-      variant="ghost"
-    >
-      <div className="tooltip tooltip-bottom" data-tip={resolvedTheme === "light" ? "Dark mode" : "Light mode"}>
+    <div className="tooltip tooltip-bottom" data-tip={resolvedTheme === "light" ? "Dark mode" : "Light mode"}>
+      <Button
+        className="hover:bg-slate-200 rounded-full p-2 pr-2"
+        onClick={() => setTheme(resolvedTheme === "light" ? "dark" : "light")}
+        variant="ghost"
+      >
         {resolvedTheme === "light" ? (
           <MoonIcon className="text-blue-500 dark:text-blue-400" />
         ) : (
           <SunIcon className="text-blue-500 dark:text-blue-400" />
         )}
-      </div>
-    </Button>
+      </Button>
+    </div>
   );
 }

src/features/workout-builder/ui/workout-stepper.tsx

@@ -125,7 +125,7 @@ export function WorkoutStepper() {
 
   if (showCongrats && !isWorkoutActive) {
     return (
-      <div className="flex flex-col items-center justify-center py-16">
+      <div className="flex flex-col items-center justify-center py-16 h-full">
         <Image alt="Trophée" className="w-56 h-56" src={Trophy} />
         <h2 className="text-2xl font-bold mb-2">{t("workout_builder.session.congrats")}</h2>
         <p className="text-lg text-slate-600 mb-6">{t("workout_builder.session.congrats_subtitle")}</p>

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

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
-import { Check, Hourglass, Play, ArrowRight, Trophy as TrophyIcon, Plus } from "lucide-react";
+import { Check, Play, ArrowRight, Trophy as TrophyIcon, Plus, Hourglass } from "lucide-react";
 import confetti from "canvas-confetti";
 
 import { useCurrentLocale, useI18n } from "locales/client";
@@ -60,10 +60,14 @@ export function WorkoutSessionSets({
       return <Check aria-label="Exercice terminé" className="w-4 h-4 text-white" />;
     }
     if (idx === currentExerciseIndex) {
-      return <Hourglass aria-label="Exercice en cours" className="w-4 h-4 text-white" />;
+      return (
+        <svg aria-label="Exercice en cours" className="w-8 h-8 animate-ping text-emerald-500" fill="currentColor" viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="12" />
+        </svg>
+      );
     }
 
-    return null;
+    return <Hourglass aria-label="Exercice en cours" className="w-4 h-4 text-gray-600 dark:text-slate-900" />;
   };
 
   const renderStepBackground = (idx: number, allSetsCompleted: boolean) => {
@@ -71,7 +75,7 @@ export function WorkoutSessionSets({
       return "bg-green-500 border-green-500";
     }
     if (idx === currentExerciseIndex) {
-      return "bg-blue-500 border-blue-500";
+      return "bg-gray-300 border-gray-400 dark:bg-slate-500 dark:border-slate-500";
     }
     return "bg-slate-200 border-slate-200";
   };