feat: grille dashboard fluide, conteneur élargi et theme toggle plus visible

- max-w-5xl → max-w-7xl sur le layout global
- grille auto-fill minmax(300px,1fr) pour grands écrans
- ThemeToggle : bordure + fond permanents, emoji text-lg

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/layout.tsx

@@ -31,7 +31,7 @@ export default function RootLayout({
         <SessionProvider>
           <ThemeProvider>
             <Header />
-            <main className="mx-auto max-w-5xl px-4 py-6">{children}</main>
+            <main className="mx-auto max-w-7xl px-4 py-6">{children}</main>
           </ThemeProvider>
         </SessionProvider>
       </body>

src/components/DashboardClient.tsx

@@ -21,6 +21,7 @@ interface EvalRow {
   evaluationDate: string;
   template?: { name: string; dimensions?: Dimension[] };
   status: string;
+  isPublic?: boolean;
   dimensionScores?: { dimensionId: string; score: number | null; dimension?: { title: string } }[];
 }
 
@@ -86,14 +87,21 @@ function EvalCard({
               {e.candidateTeam && ` · ${e.candidateTeam}`}
             </p>
           </div>
+          <div className="flex shrink-0 items-center gap-1">
+            {!e.isPublic && (
+              <span className="font-mono text-xs px-1.5 py-0.5 rounded bg-purple-500/20 text-purple-600 dark:text-purple-400">
+                privé
+              </span>
+            )}
             <span
-            className={`shrink-0 font-mono text-xs px-1.5 py-0.5 rounded ${
+              className={`font-mono text-xs px-1.5 py-0.5 rounded ${
                 e.status === "submitted" ? "bg-emerald-500/20 text-emerald-600 dark:text-emerald-400" : "bg-amber-500/20 text-amber-600 dark:text-amber-400"
               }`}
             >
               {e.status === "submitted" ? "ok" : "draft"}
             </span>
           </div>
+        </div>
         <div className="mb-3 flex flex-wrap gap-x-3 gap-y-0.5 font-mono text-xs text-zinc-500 dark:text-zinc-400">
           <span>{e.evaluatorName}</span>
           <span>{format(new Date(e.evaluationDate), "yyyy-MM-dd")}</span>
@@ -297,7 +305,7 @@ export function DashboardClient({ evaluations }: DashboardClientProps) {
                 <h2 className="mb-3 font-mono text-sm font-medium text-zinc-600 dark:text-zinc-400">
                   {team ?? "Sans équipe"}
                 </h2>
-                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                <div className="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(300px,1fr))]">
                   {evals.map((e) => (
                     <EvalCard
                       key={e.id}
@@ -314,7 +322,7 @@ export function DashboardClient({ evaluations }: DashboardClientProps) {
             ))}
         </div>
       ) : (
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <div className="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(300px,1fr))]">
           {list.map((e) => (
             <EvalCard
               key={e.id}

src/components/ThemeToggle.tsx

@@ -9,7 +9,7 @@ export function ThemeToggle() {
     <button
       type="button"
       onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-      className="font-mono text-xs text-zinc-600 dark:text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-300 transition-colors"
+      className="flex items-center justify-center w-8 h-8 rounded border border-zinc-200 dark:border-zinc-600 bg-zinc-50 dark:bg-zinc-800 text-lg text-zinc-600 dark:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors"
       title={theme === "dark" ? "Passer au thème clair" : "Passer au thème sombre"}
     >
       {theme === "dark" ? "☀" : "☽"}