Afficher la photo du bénévole sur son écran et sur l'écran référent

Photo transmise via le formulaire public (Volunteer.photo) : nouveau
composant partagé VolunteerAvatar (photo si disponible, sinon repli sur
le carré d'initiales existant, même gabarit dans les deux cas).

- Écran bénévole (VolunteerHomeView) : photo dans le bandeau d'accueil,
  à côté du message de bienvenue.
- Écran référent (MobileLeadPage) : photo devant le nom de chaque membre
  de l'équipe, à la place du carré d'initiales.

GET .../volunteers/{id}/photo n'était accessible qu'à COORDINATION/
RÉFÉRENT ; ouvert aussi à l'intéressé lui-même (même garde que
get_volunteer), sinon l'écran bénévole ne pouvait jamais charger sa
propre photo.

Vérifié : pytest (274 passés, dont le nouveau test d'accès à sa propre
photo), ruff, tsc --noEmit, eslint, vite build, smoke — tous verts.

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

frontend/src/components/VolunteerAvatar.tsx

@@ -0,0 +1,43 @@
+import { useVolunteerPhotoUrl } from '@/api/hooks';
+import { cx } from '@/lib/cx';
+
+/**
+ * Photo du bénévole (formulaire public, voir `app/api/forms.py`) si
+ * disponible, sinon repli sur un carré d'initiales — même gabarit dans les
+ * deux cas pour ne jamais faire sauter la mise en page. `className` fixe la
+ * taille (ex. `h-[38px] w-[38px] text-[13px]`).
+ */
+export function VolunteerAvatar({
+  volunteerId,
+  hasPhoto,
+  initials,
+  className,
+}: {
+  volunteerId: string;
+  hasPhoto: boolean;
+  initials: string;
+  className?: string;
+}) {
+  const photoUrl = useVolunteerPhotoUrl(volunteerId, hasPhoto);
+
+  if (photoUrl) {
+    return (
+      <img
+        src={photoUrl}
+        alt=""
+        className={cx('flex-none border-[3px] border-ink object-cover', className)}
+      />
+    );
+  }
+
+  return (
+    <span
+      className={cx(
+        'flex flex-none items-center justify-center border-[3px] border-ink bg-yellow font-display font-extrabold text-ink',
+        className,
+      )}
+    >
+      {initials}
+    </span>
+  );
+}

frontend/src/pages/MobileLeadPage.tsx

@@ -5,6 +5,7 @@ import { useAssignments, usePositions, useShifts, useVolunteers } from '@/api/ho
 import { useAuth } from '@/auth/auth-context';
 import { ErrorNote, Loading } from '@/components/state';
 import { NowLine } from '@/components/NowLine';
+import { VolunteerAvatar } from '@/components/VolunteerAvatar';
 import { hourRangeLabel, longDayLabel, naiveMinutes } from '@/lib/time';
 import { useNowMinutes } from '@/lib/useNowMinutes';
 import { t } from '@/i18n';
@@ -122,12 +123,14 @@ export function MobileLeadPage() {
                       const volunteer = volunteersById.get(a.volunteer_id);
                       return {
                         id: a.id,
+                        volunteerId: a.volunteer_id,
                         name: volunteer
                           ? `${volunteer.first_name} ${volunteer.last_name}`
                           : a.volunteer_id,
                         initials: volunteer
                           ? `${volunteer.first_name[0]}${volunteer.last_name[0]}`
                           : '?',
+                        hasPhoto: volunteer?.has_photo ?? false,
                         phone: volunteer?.phone ?? '',
                         present: presence[a.id] === 'present',
                         absent: presence[a.id] === 'absent',
@@ -155,9 +158,12 @@ export function MobileLeadPage() {
                               className="border-[3px] border-ink bg-cream shadow-brutal-sm"
                             >
                               <div className="flex items-center gap-[10px] px-[11px] py-[10px]">
-                                <span className="flex h-[38px] w-[38px] flex-none items-center justify-center border-[3px] border-ink bg-yellow font-display text-[13px] font-extrabold">
-                                  {member.initials}
-                                </span>
+                                <VolunteerAvatar
+                                  volunteerId={member.volunteerId}
+                                  hasPhoto={member.hasPhoto}
+                                  initials={member.initials}
+                                  className="h-[38px] w-[38px] text-[13px]"
+                                />
                                 <span className="min-w-0 flex-1">
                                   <span className="block font-display text-[17px] font-extrabold leading-tight">
                                     {member.name}

frontend/src/pages/VolunteerHomeView.tsx

@@ -3,6 +3,7 @@ import { Fragment, useMemo } from 'react';
 import { useVolunteer, useVolunteerPlanning } from '@/api/hooks';
 import { ErrorNote, Loading } from '@/components/state';
 import { NowLine } from '@/components/NowLine';
+import { VolunteerAvatar } from '@/components/VolunteerAvatar';
 import { hourRangeLabel, longDayLabel, naiveMinutes } from '@/lib/time';
 import { useNowMinutes } from '@/lib/useNowMinutes';
 import { t } from '@/i18n';
@@ -39,6 +40,9 @@ export function VolunteerHomeView({
   if (planning.error) return <ErrorNote error={planning.error} />;
 
   const firstName = meVolunteer.data?.first_name ?? fallbackName ?? '';
+  const initials = meVolunteer.data
+    ? `${meVolunteer.data.first_name[0]}${meVolunteer.data.last_name[0]}`
+    : (firstName[0] ?? '?');
 
   const totalHours =
     Math.round(
@@ -55,9 +59,19 @@ export function VolunteerHomeView({
   return (
     <div className="mx-auto flex w-full max-w-[640px] flex-1 flex-col">
       <div className="bg-ink px-4 py-5 text-cream sm:px-6 sm:py-7">
-        <div className="font-mono text-[10px] text-yellow">{t('mobileVol.kicker')}</div>
-        <div className="mt-[5px] font-display text-[28px] font-black leading-tight tracking-tight sm:text-[34px]">
-          {t('mobileVol.greeting', { name: firstName.toUpperCase() })}
+        <div className="flex items-center gap-[12px]">
+          <VolunteerAvatar
+            volunteerId={volunteerId}
+            hasPhoto={meVolunteer.data?.has_photo ?? false}
+            initials={initials}
+            className="h-[52px] w-[52px] text-[18px]"
+          />
+          <div className="min-w-0">
+            <div className="font-mono text-[10px] text-yellow">{t('mobileVol.kicker')}</div>
+            <div className="mt-[5px] font-display text-[28px] font-black leading-tight tracking-tight sm:text-[34px]">
+              {t('mobileVol.greeting', { name: firstName.toUpperCase() })}
+            </div>
+          </div>
         </div>
         <div className="mt-3 flex flex-wrap gap-2">
           <div className="bg-yellow px-[9px] py-[7px] font-display text-[12px] font-extrabold text-ink">