Page bénévole : vraie page responsive, plus une maquette de téléphone

C'est l'écran d'accueil réel d'un compte bénévole (`homePath`) — consulté sur
son propre téléphone la plupart du temps, mais la page rendait un cadre de
téléphone factice à taille fixe (376×772 px, fausse barre de statut) pensé
pour être visionné sur un écran d'ordinateur, plus une note de choix de
conception destinée à l'équipe, pas au bénévole. Sur un vrai téléphone,
c'était un téléphone dessiné à l'intérieur du vrai téléphone.

- Retiré le cadre (`PhoneFrame`) et la note de conception (`DesignNote`) —
  toujours utilisés par la page référent (`MobileLeadPage.tsx`, non touchée
  ici), donc le composant partagé reste en place.
- Le contenu (bandeau d'accueil + cartes de créneaux) devient la page
  elle-même : pleine largeur sur mobile, centrée avec une largeur de lecture
  confortable (max 640 px) et un peu plus d'air à partir de `sm:` pour un
  écran d'ordinateur. Mêmes repères de conception qu'avant (fonds opaques,
  cibles tactiles ≥ 52 px), déplacés en commentaire de code.
- `AppShell` : la barre d'onglets ne s'affiche plus quand il n'y a qu'un seul
  écran accessible (bénévole, référent) — elle n'a de sens que pour la
  coordination (3 écrans) ; simplifie l'en-tête sur les rôles qui n'ont nulle
  part où naviguer.

Vérifié : typecheck, lint, build, smoke frontend OK.

À noter : `MobileLeadPage.tsx` (référent) a exactement le même défaut
(maquette de téléphone + note de conception) — pas touchée ici, la demande
portait sur la vue bénévole.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017uUsRg7XzopkCPWimwg9ZM

frontend/src/app/AppShell.tsx

@@ -36,7 +36,9 @@ export function AppShell() {
           )}
         </div>
 
-        <nav className="flex overflow-x-auto">
+        {/* Rien à choisir avec un seul écran (bénévole, référent) : la
+            barre d'onglets n'a de sens que pour la coordination. */}
+        <nav className={cx('flex overflow-x-auto', tabs.length <= 1 && 'hidden')}>
           {tabs.map((tab) => (
             <NavLink
               key={tab.to}

frontend/src/i18n/locales/fr.json

@@ -115,7 +115,6 @@
   "volunteers.noData": "Aucun bénévole pour le moment. Ajoutez-les dans Configuration → « Bénévoles & import ».",
   "volunteers.footnote": "Surcharge = plus de 8 h sur une même journée ou moins de 8 h entre deux créneaux. Oublié = aucune affectation.",
   "design.noteTitle": "CHOIX DE CONCEPTION",
-  "mobileVol.statusTime": "9:41",
   "mobileVol.kicker": "MON PLANNING BÉNÉVOLE",
   "mobileVol.greeting": "SALUT {name}",
   "mobileVol.slots": "{count} CRÉNEAUX",
@@ -125,7 +124,6 @@
   "mobileVol.noSlots": "Aucun créneau pour l'instant. La coordination t'affectera bientôt.",
   "mobileVol.noAccount": "Ce compte n'est rattaché à aucun bénévole. Contactez la coordination.",
   "mobileVol.detailsUnavailable": "Le détail des créneaux (poste, horaires) n'est pas encore exposé aux bénévoles par l'API.",
-  "mobileVol.designNote": "Lisibilité plein soleil : fonds opaques, texte noir sur jaune ou blanc, aucun gris clair. Cibles tactiles à 52–62 px de haut. Une seule action par créneau. Les données proviennent des affectations réelles de l'API.",
   "mobileLead.statusTime": "18:07",
   "mobileLead.kicker": "RÉFÉRENT DE POSTE",
   "mobileLead.inProgress": "CRÉNEAU · {hours}",

frontend/src/pages/MobileVolunteerPage.tsx

@@ -4,10 +4,18 @@ import { ApiError } from '@/api';
 import { useAssignments, usePositions, useShifts, useVolunteer } from '@/api/hooks';
 import { useAuth } from '@/auth/auth-context';
 import { ErrorNote, Loading } from '@/components/state';
-import { DesignNote, PhoneFrame } from '@/pages/mobile/PhoneFrame';
 import { hourRangeLabel, hoursBetween, longDayLabel, naiveMinutes } from '@/lib/time';
 import { t } from '@/i18n';
 
+// Page réellement consultée par le bénévole (accueil de son rôle, cf.
+// `auth/roles.ts:homePath`) — sur son propre téléphone la plupart du temps,
+// mais aussi possible depuis un ordinateur : le rendu ci-dessous s'adapte
+// (mobile d'abord, une seule colonne pleine largeur ; élargi et centré à
+// partir de `sm:`), sans jamais simuler un cadre de téléphone. Repères de
+// conception conservés : fonds opaques, texte noir sur jaune ou blanc (pas
+// de gris clair, lisibilité plein soleil), cibles tactiles ≥ 52 px de haut,
+// une seule action par créneau.
+
 export function MobileVolunteerPage() {
   const { account } = useAuth();
   const volunteerId = account?.volunteer_id ?? null;
@@ -30,8 +38,10 @@ export function MobileVolunteerPage() {
 
   if (!volunteerId) {
     return (
-      <div className="m-6 max-w-[560px] border-[3px] border-dashed border-ink bg-paper p-4 font-display text-[13px] font-bold">
+      <div className="mx-auto w-full max-w-[640px] p-4 sm:p-6">
-        {t('mobileVol.noAccount')}
+        <div className="border-[3px] border-dashed border-ink bg-paper p-4 font-display text-[13px] font-bold">
+          {t('mobileVol.noAccount')}
+        </div>
       </div>
     );
   }
@@ -62,72 +72,68 @@ export function MobileVolunteerPage() {
     ) / 10;
 
   return (
-    <div className="flex flex-wrap items-start gap-[26px] p-6">
+    <div className="mx-auto flex w-full max-w-[640px] flex-1 flex-col">
-      <PhoneFrame time={t('mobileVol.statusTime')}>
+      <div className="bg-ink px-4 py-5 text-cream sm:px-6 sm:py-7">
-        <div className="bg-ink px-4 pb-4 pt-3 text-cream">
+        <div className="font-mono text-[10px] text-yellow">{t('mobileVol.kicker')}</div>
-          <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]">
-          <div className="mt-[5px] font-display text-[30px] font-black leading-tight tracking-tight">
+          {t('mobileVol.greeting', { name: firstName.toUpperCase() })}
-            {t('mobileVol.greeting', { name: firstName.toUpperCase() })}
-          </div>
-          <div className="mt-3 flex gap-2">
-            <div className="bg-yellow px-[9px] py-[7px] font-display text-[12px] font-extrabold text-ink">
-              {t('mobileVol.slots', { count: slots.length })}
-            </div>
-            {!detailsUnavailable ? (
-              <div className="border-2 border-cream px-[9px] py-[6px] font-display text-[12px] font-extrabold">
-                {t('mobileVol.hours', { count: totalHours })}
-              </div>
-            ) : null}
-          </div>
         </div>
-
+        <div className="mt-3 flex flex-wrap gap-2">
-        <div className="flex flex-col gap-[14px] px-[14px] pb-[26px] pt-[14px]">
+          <div className="bg-yellow px-[9px] py-[7px] font-display text-[12px] font-extrabold text-ink">
-          {detailsUnavailable ? (
+            {t('mobileVol.slots', { count: slots.length })}
-            <div className="border-2 border-dashed border-ink bg-yellow-soft p-3 font-mono text-[10px] leading-relaxed">
+          </div>
-              {t('mobileVol.detailsUnavailable')}
+          {!detailsUnavailable ? (
+            <div className="border-2 border-cream px-[9px] py-[6px] font-display text-[12px] font-extrabold">
+              {t('mobileVol.hours', { count: totalHours })}
             </div>
           ) : null}
-          {slots.map(({ assignment, shift }) => {
+        </div>
-            const position = shift ? positionsById.get(shift.position_id) : undefined;
+      </div>
-            return (
+
-              <div key={assignment.id} className="border-[3px] border-ink bg-paper shadow-brutal-lg">
+      <div className="flex flex-1 flex-col gap-[14px] p-4 sm:p-6">
-                {shift ? (
+        {detailsUnavailable ? (
-                  <div className="flex items-baseline gap-2 bg-ink px-[11px] py-2 text-cream">
+          <div className="border-2 border-dashed border-ink bg-yellow-soft p-3 font-mono text-[10px] leading-relaxed">
-                    <span className="font-display text-[15px] font-black">
+            {t('mobileVol.detailsUnavailable')}
-                      {longDayLabel(shift.starts_at)}
+          </div>
-                    </span>
+        ) : null}
-                    <span className="ml-auto font-mono text-[16px] font-bold text-yellow">
+        {slots.map(({ assignment, shift }) => {
-                      {hourRangeLabel(shift.starts_at, shift.ends_at)}
+          const position = shift ? positionsById.get(shift.position_id) : undefined;
-                    </span>
+          return (
+            <div key={assignment.id} className="border-[3px] border-ink bg-paper shadow-brutal-lg">
+              {shift ? (
+                <div className="flex items-baseline gap-2 bg-ink px-[11px] py-2 text-cream">
+                  <span className="font-display text-[15px] font-black">
+                    {longDayLabel(shift.starts_at)}
+                  </span>
+                  <span className="ml-auto font-mono text-[16px] font-bold text-yellow">
+                    {hourRangeLabel(shift.starts_at, shift.ends_at)}
+                  </span>
+                </div>
+              ) : null}
+              <div className="p-[11px]">
+                {position ? (
+                  <div className="font-display text-[23px] font-black leading-tight tracking-tight">
+                    {position.name.toUpperCase()}
                   </div>
                 ) : null}
-                <div className="p-[11px]">
+                {position?.location ? (
-                  {position ? (
+                  <div className="mt-[9px] border-t-2 border-ink pt-[9px] font-mono text-[12px]">
-                    <div className="font-display text-[23px] font-black leading-tight tracking-tight">
+                    {t('mobileVol.location', { location: position.location })}
-                      {position.name.toUpperCase()}
-                    </div>
-                  ) : null}
-                  {position?.location ? (
-                    <div className="mt-[9px] border-t-2 border-ink pt-[9px] font-mono text-[12px]">
-                      {t('mobileVol.location', { location: position.location })}
-                    </div>
-                  ) : null}
-                  <div className="mt-[11px] flex min-h-[52px] items-center justify-center border-[3px] border-ink bg-green font-display text-[15px] font-black text-white">
-                    {t('mobileVol.slotAssigned')}
                   </div>
+                ) : null}
+                <div className="mt-[11px] flex min-h-[52px] items-center justify-center border-[3px] border-ink bg-green font-display text-[15px] font-black text-white">
+                  {t('mobileVol.slotAssigned')}
                 </div>
               </div>
-            );
-          })}
-          {slots.length === 0 ? (
-            <div className="border-[3px] border-dashed border-ink p-4 font-mono text-[11px] leading-relaxed opacity-70">
-              {t('mobileVol.noSlots')}
             </div>
-          ) : null}
+          );
-        </div>
+        })}
-      </PhoneFrame>
+        {slots.length === 0 ? (
-
+          <div className="border-[3px] border-dashed border-ink p-4 font-mono text-[11px] leading-relaxed opacity-70">
-      <DesignNote>{t('mobileVol.designNote')}</DesignNote>
+            {t('mobileVol.noSlots')}
+          </div>
+        ) : null}
+      </div>
     </div>
   );
 }