Nouveau logo L'Agora (favicon, header, login, signup, classement)

Remplace le laurier dessiné à la main par le logo fourni (badge circulaire
« L'Agora ») comme identité visuelle principale : favicon (icon.png),
icône iOS (apple-icon.png, remplace icon.svg), marque du header, page
login, page signup, et grand format en en-tête du classement.

- components/agora-logo.tsx : composant partagé, `unoptimized` sur
  next/image — l'optimiseur d'images de Next.js aplatit systématiquement
  la transparence de ce fichier (PNG ou WebP) lors du redimensionnement
  à la volée, donc on sert l'asset statique tel quel.
- Asset retravaillé (public/logo-agora.webp) : le fichier fourni n'avait
  pas de vraie transparence (damier dessiné en dur, y compris dans les
  zones "vides" de l'illustration) et le cercle était mal centré dans
  son canevas carré (anneau doré rogné en haut). Recadré, recentré avec
  une marge uniforme, fond extérieur en transparence réelle, fond
  intérieur aplati en blanc crème (#F4ECD8, le token "marble" existant)
  pour se fondre dans les cartes marbre de l'app.
- Header : bandeau renommé « LE TRIBUNAL » → « L'AGORA » (à gauche) ;
  les icônes du menu déroulant restent inchangées (icônes distinctes
  par page, nécessaires pour s'y retrouver).

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

src/app/icon.svg

@@ -1,18 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="#C9A227">
-  <rect x="0" y="0" width="100" height="100" rx="20" fill="#0A1B33" />
-  <ellipse cx="44.18" cy="85.39" rx="7.00" ry="2.80" transform="rotate(-168.00 44.18 85.39)"/>
-  <ellipse cx="31.70" cy="81.14" rx="6.71" ry="2.68" transform="rotate(-141.67 31.70 81.14)"/>
-  <ellipse cx="21.98" cy="71.26" rx="6.42" ry="2.57" transform="rotate(-115.33 21.98 71.26)"/>
-  <ellipse cx="17.50" cy="57.43" rx="6.13" ry="2.45" transform="rotate(-89.00 17.50 57.43)"/>
-  <ellipse cx="19.80" cy="42.39" rx="5.83" ry="2.33" transform="rotate(-62.67 19.80 42.39)"/>
-  <ellipse cx="28.97" cy="29.40" rx="5.54" ry="2.22" transform="rotate(-36.33 28.97 29.40)"/>
-  <ellipse cx="43.58" cy="21.56" rx="5.25" ry="2.10" transform="rotate(-10.00 43.58 21.56)"/>
-  <ellipse cx="55.82" cy="85.39" rx="7.00" ry="2.80" transform="rotate(-168.00 55.82 85.39)"/>
-  <ellipse cx="68.30" cy="81.14" rx="6.71" ry="2.68" transform="rotate(-141.67 68.30 81.14)"/>
-  <ellipse cx="78.02" cy="71.26" rx="6.42" ry="2.57" transform="rotate(-115.33 78.02 71.26)"/>
-  <ellipse cx="82.50" cy="57.43" rx="6.13" ry="2.45" transform="rotate(-89.00 82.50 57.43)"/>
-  <ellipse cx="80.20" cy="42.39" rx="5.83" ry="2.33" transform="rotate(-62.67 80.20 42.39)"/>
-  <ellipse cx="71.03" cy="29.40" rx="5.54" ry="2.22" transform="rotate(-36.33 71.03 29.40)"/>
-  <ellipse cx="56.42" cy="21.56" rx="5.25" ry="2.10" transform="rotate(-10.00 56.42 21.56)"/>
-  <circle cx="50" cy="85" r="2.4"/>
-</svg>

src/app/leaderboard/page.tsx

@@ -1,6 +1,7 @@
 import { redirect } from "next/navigation";
 import { createClient } from "@/lib/supabase/server";
 import { LeaderboardView } from "./leaderboard-view";
+import { AgoraLogo } from "@/components/agora-logo";
 
 export default async function LeaderboardPage() {
   const supabase = await createClient();
@@ -21,11 +22,9 @@ export default async function LeaderboardPage() {
 
   return (
     <div className="mx-auto w-full max-w-2xl px-4 py-8">
-      <div className="mb-6 text-center">
+      <div className="mb-6 flex flex-col items-center text-center">
-        <h1 className="font-heading text-2xl tracking-[0.1em] text-gold-bright uppercase">
+        <AgoraLogo className="h-32 w-32 sm:h-40 sm:w-40" />
-          L&apos;Agora
+        <p className="mt-2 font-serif text-sm text-marble/60 italic">Le classement des Citoyens</p>
-        </h1>
-        <p className="font-serif text-sm text-marble/60 italic">Le classement des Citoyens</p>
       </div>
 
       {error && (

src/components/agora-logo.tsx

@@ -0,0 +1,20 @@
+import Image from "next/image";
+
+// unoptimized : l'optimiseur d'images de Next.js aplatit systématiquement la
+// transparence de ce fichier (PNG ou WebP) lors du redimensionnement à la
+// volée — on sert donc le fichier statique tel quel, sa transparence réelle
+// est alors préservée par le navigateur.
+export function AgoraLogo({ className = "h-9 w-9" }: { className?: string }) {
+  return (
+    <span className={`relative block shrink-0 ${className}`}>
+      <Image
+        src="/logo-agora.webp"
+        alt="L'Agora"
+        fill
+        priority
+        unoptimized
+        className="object-cover"
+      />
+    </span>
+  );
+}

src/components/avatar-picker.tsx

@@ -3,7 +3,8 @@
 import { useRef, useState } from "react";
 import Cropper, { type Area } from "react-easy-crop";
 import { cropImageToBlob } from "@/lib/image";
-import { IconCamera, IconClose } from "@/components/icons";
+import { IconClose } from "@/components/icons";
+import { AgoraLogo } from "@/components/agora-logo";
 
 export function AvatarPicker({
   hasExistingPhoto = false,
@@ -126,7 +127,7 @@ export function AvatarPicker({
         onClick={() => inputRef.current?.click()}
         className="flex items-center gap-2 rounded-md bg-ink-2 px-3 py-1.5 text-sm font-medium text-gold-bright hover:bg-ink"
       >
-        <IconCamera className="h-4 w-4" />
+        <AgoraLogo className="h-4 w-4" />
         {fileName || hasExistingPhoto ? "Changer ma photo" : "Choisir une photo"}
       </button>
 

src/components/header.tsx

@@ -6,6 +6,7 @@ import { useEffect, useRef, useState } from "react";
 import { createClient } from "@/lib/supabase/client";
 import { LaurelWreath } from "@/components/laurel-wreath";
 import { Avatar } from "@/components/avatar";
+import { AgoraLogo } from "@/components/agora-logo";
 import {
   IconWheel,
   IconScroll,
@@ -106,9 +107,9 @@ export function Header({
     <header className="sticky top-0 z-10 bg-ink-2/95 backdrop-blur">
       <div className="mx-auto flex max-w-4xl items-center justify-between gap-2 px-2 py-2.5 sm:px-4 sm:py-3">
         <Link href="/leaderboard" className="flex min-w-0 items-center gap-1.5 sm:gap-2">
-          <LaurelWreath className="h-5 w-5 shrink-0 sm:h-7 sm:w-7" color="#E7C560" />
+          <AgoraLogo className="h-7 w-7 sm:h-9 sm:w-9" />
           <span className="whitespace-nowrap font-heading text-[0.6rem] tracking-[0.08em] text-gold-bright uppercase sm:text-sm sm:tracking-[0.15em]">
-            Le Tribunal
+            L&apos;Agora
           </span>
         </Link>