feat(design): add logo and favicon

src/app/(auth)/login/page.tsx

@@ -9,6 +9,7 @@ import { MIN_PASSWORD_LENGTH } from "@/lib/auth-validation";
 import { safeInternalRedirectPath } from "@/lib/safe-redirect";
 import { useTranslations } from "@/i18n/client";
 import { LanguageSwitcher } from "@/components/language-switcher";
+import { BrandMark } from "@/components/brand-mark";
 
 function LoginForm() {
   const router = useRouter();
@@ -102,9 +103,7 @@ function LoginForm() {
   return (
     <>
       <div className="text-center space-y-1 mb-6">
-        <h1 className="text-2xl font-bold tracking-tight">
-          <span className="text-amber-500">Hobby</span>Hoops
-        </h1>
+        <BrandMark logoHeight={64} nameClassName="text-2xl" />
         <p className="text-xs text-muted-foreground mt-2 leading-snug">
           {t("brand.tagline")}
         </p>

src/components/brand-mark.tsx

@@ -0,0 +1,52 @@
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+/** Ratio du viewBox de /brand/logo.svg (461×281). */
+const LOGO_ASPECT = 461 / 281;
+
+interface BrandMarkProps {
+  className?: string;
+  logoClassName?: string;
+  nameClassName?: string;
+  /** Hauteur du pictogramme (cartes). */
+  logoHeight?: number;
+}
+
+export function BrandMark({
+  className,
+  logoClassName,
+  nameClassName,
+  logoHeight = 56,
+}: BrandMarkProps) {
+  return (
+    <Link
+      href="/"
+      className={cn(
+        "group mx-auto flex w-full max-w-full flex-col items-center gap-2 rounded-lg outline-none transition-colors",
+        "hover:opacity-90 focus-visible:ring-2 focus-visible:ring-amber-500/60",
+        className
+      )}
+      aria-label="HobbyHoops — accueil"
+    >
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src="/brand/logo.svg"
+        alt=""
+        width={Math.round(logoHeight * LOGO_ASPECT)}
+        height={logoHeight}
+        className={cn(
+          "mx-auto block h-auto w-auto max-w-full object-contain object-center",
+          logoClassName
+        )}
+      />
+      <span
+        className={cn(
+          "text-center text-lg font-bold leading-none tracking-tight",
+          nameClassName
+        )}
+      >
+        <span className="text-amber-500">Hobby</span>Hoops
+      </span>
+    </Link>
+  );
+}

src/components/dashboard-charts.tsx

@@ -16,8 +16,11 @@ interface DashboardChartsProps {
   cards: Card[];
 }
 
+/** Couleur des barres « par année » — aussi utilisée pour le libellé du tooltip au survol. */
+const CHART_COUNT_COLOR = "hsl(38, 92%, 50%)";
+
 const COLORS = [
-  "hsl(38, 92%, 50%)",
+  CHART_COUNT_COLOR,
   "hsl(220, 70%, 50%)",
   "hsl(142, 71%, 45%)",
   "hsl(0, 72%, 51%)",
@@ -27,6 +30,33 @@ const COLORS = [
   "hsl(142, 71%, 55%)",
 ];
 
+const tooltipCursor = { fill: "hsl(38, 92%, 50%, 0.12)" };
+
+function ChartTooltipContent({
+  active,
+  payload,
+  label,
+  cardsLabel,
+}: {
+  active?: boolean;
+  payload?: ReadonlyArray<{ value?: number | string }>;
+  label?: string | number;
+  cardsLabel: string;
+}) {
+  if (!active || !payload?.length) return null;
+  const value = payload[0]?.value;
+  return (
+    <div className="rounded-lg border border-[hsl(0,0%,20%)] bg-[hsl(0,0%,12%)] px-3 py-2 text-sm shadow-md">
+      {label ? (
+        <p className="mb-1 text-[hsl(0,0%,70%)]">{label}</p>
+      ) : null}
+      <p className="font-medium" style={{ color: CHART_COUNT_COLOR }}>
+        {cardsLabel} : {value}
+      </p>
+    </div>
+  );
+}
+
 export function DashboardCharts({ cards }: DashboardChartsProps) {
   const t = useTranslations();
   const cardsLabel = t("common.cardsLabel");
@@ -88,11 +118,19 @@ export function DashboardCharts({ cards }: DashboardChartsProps) {
               tickLine={false}
             />
             <Tooltip
-              contentStyle={{
-                background: "hsl(0, 0%, 12%)",
-                border: "1px solid hsl(0, 0%, 20%)",
-                borderRadius: "8px",
-              }}
+              content={(props) => (
+                <ChartTooltipContent
+                  active={props.active}
+                  payload={
+                    props.payload as
+                      | ReadonlyArray<{ value?: number | string }>
+                      | undefined
+                  }
+                  label={props.label}
+                  cardsLabel={cardsLabel}
+                />
+              )}
+              cursor={tooltipCursor}
             />
             <Bar dataKey="count" name={cardsLabel} radius={[4, 4, 0, 0]}>
               {brandData.map((_, i) => (
@@ -124,13 +162,26 @@ export function DashboardCharts({ cards }: DashboardChartsProps) {
               tickLine={false}
             />
             <Tooltip
-              contentStyle={{
-                background: "hsl(0, 0%, 12%)",
-                border: "1px solid hsl(0, 0%, 20%)",
-                borderRadius: "8px",
-              }}
+              content={(props) => (
+                <ChartTooltipContent
+                  active={props.active}
+                  payload={
+                    props.payload as
+                      | ReadonlyArray<{ value?: number | string }>
+                      | undefined
+                  }
+                  label={props.label}
+                  cardsLabel={cardsLabel}
+                />
+              )}
+              cursor={tooltipCursor}
+            />
+            <Bar
+              dataKey="count"
+              name={cardsLabel}
+              fill={CHART_COUNT_COLOR}
+              radius={[4, 4, 0, 0]}
             />
-            <Bar dataKey="count" name={cardsLabel} fill="hsl(38, 92%, 50%)" radius={[4, 4, 0, 0]} />
           </BarChart>
         </ResponsiveContainer>
       </div>
@@ -156,11 +207,19 @@ export function DashboardCharts({ cards }: DashboardChartsProps) {
               width={150}
             />
             <Tooltip
-              contentStyle={{
-                background: "hsl(0, 0%, 12%)",
-                border: "1px solid hsl(0, 0%, 20%)",
-                borderRadius: "8px",
-              }}
+              content={(props) => (
+                <ChartTooltipContent
+                  active={props.active}
+                  payload={
+                    props.payload as
+                      | ReadonlyArray<{ value?: number | string }>
+                      | undefined
+                  }
+                  label={props.label}
+                  cardsLabel={cardsLabel}
+                />
+              )}
+              cursor={tooltipCursor}
             />
             <Bar dataKey="count" name={cardsLabel} radius={[0, 4, 4, 0]}>
               {playerData.map((_, i) => (

src/components/sidebar.tsx

@@ -16,6 +16,7 @@ import { useTranslations } from "@/i18n/client";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { LanguageSwitcher } from "@/components/language-switcher";
+import { BrandMark } from "@/components/brand-mark";
 
 interface SidebarProps {
   username: string | null;
@@ -57,15 +58,13 @@ export function Sidebar({ username, onNavigate, className }: SidebarProps) {
       )}
     >
       <div className="p-6 border-b border-border">
-        <h1 className="text-lg font-bold tracking-tight">
-          <span className="text-amber-500">Hobby</span>Hoops
-        </h1>
-        <p className="text-xs text-muted-foreground mt-2 leading-snug">
+        <BrandMark logoHeight={52} className="w-full" />
+        <p className="text-xs text-muted-foreground mt-3 leading-snug text-center">
           {t("brand.tagline")}
         </p>
         {username && (
           <p
-            className="text-xs text-amber-500/90 mt-2 font-medium truncate"
+            className="text-xs text-amber-500/90 mt-2 font-medium truncate text-center"
             title={username}
           >
             {username}