ui: center target article in topbar

app/components/GameScreen.tsx

@@ -263,16 +263,16 @@ export function GameScreen({
   return (
     <div className="min-h-dvh w-full bg-[#0f0f0f] flex flex-col">
       {/* Topbar */}
-      <div className="sticky top-0 z-50 bg-[#0f0f0f]/97 backdrop-blur-sm border-b border-[#2e2e2e] flex items-center gap-2 sm:gap-3 px-3 sm:px-3.5 py-2">
+      <div className="sticky top-0 z-50 bg-[#0f0f0f]/97 backdrop-blur-sm border-b border-[#2e2e2e] flex flex-col px-3 sm:px-3.5 py-2 gap-1">
-        <div className="flex-1 min-w-0 flex flex-col gap-1">
+        {/* Cible centrée */}
-          <div className="flex items-center gap-1.5 min-w-0">
+        <div className="flex justify-center">
-            <span className="shrink-0 text-xs font-black text-[#a78bfa]">
+          <span className="text-sm sm:text-base font-black text-white bg-[#7c3aed] px-2 py-0.5 rounded-lg leading-tight">
-              Cible →
-            </span>
-            <span className="truncate text-sm sm:text-base font-black text-white bg-[#7c3aed] px-2 py-0.5 rounded-lg leading-tight">
             {room.targetArticle}
           </span>
         </div>
+        {/* Breadcrumbs + stats */}
+        <div className="flex items-center gap-2 sm:gap-3 min-w-0">
+          <div className="flex-1 min-w-0">
             <Breadcrumbs history={history} endRef={breadcrumbEndRef} />
           </div>
           <div className="flex items-center gap-2 sm:gap-3 shrink-0">
@@ -319,6 +319,7 @@ export function GameScreen({
             )}
           </div>
         </div>
+      </div>
 
       {/* Content */}
       <div className="flex flex-1 min-h-0">