Front : les indications d'usage passent en bulle d'aide (icône « ? »)

Les explications sur comment utiliser un écran (grille des besoins, vue
bénévoles, artistes, import, disponibilités, créneaux types, seuils,
notification par email…) étaient affichées en permanence dans la page,
prenant de la place pour un contenu qu'on ne lit qu'une fois. Elles passent
dans une bulle affichée au survol (ou au focus clavier/tactile) d'un petit
repère « ? » posé à côté du titre ou du champ concerné.

- `HelpTip` (frontend/src/components/ui.tsx) : nouveau composant partagé,
  cohérent avec le design (bordures franches, pas d'arrondi) ; `side`
  ('top'/'bottom') pour éviter que la bulle ne sorte du cadre visible selon
  que le repère est en haut ou en bas de son conteneur.
- Appliqué à GrillePage, VolunteerViewPage, ConfigArtists, ConfigVolunteers
  (import, ajout manuel, disponibilités), ConfigGrid, ConfigRules, ConfigMail.
- Aucun texte déplacé n'a changé : mêmes clés i18n, seul l'endroit où elles
  s'affichent change.

Laissé en l'état (pas des indications d'usage mais des messages d'état) :
bannières identifiants de démo, liens de connexion en dev, états vides, et
la description des rôles (contenu propre des cartes, pas un mode d'emploi).

Vérifié : typecheck, lint, build, smoke (7 routes) OK.

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

frontend/src/pages/GrillePage.tsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
 
 import { useMatrix, useRunSolver } from '@/api/hooks';
 import type { MatrixPosition, MatrixShift, PositionCategory } from '@/api/schema';
-import { Chip } from '@/components/ui';
+import { Chip, HelpTip } from '@/components/ui';
 import { EmptyNote, ErrorNote, Loading } from '@/components/state';
 import { AssignmentPanel } from '@/pages/grille/AssignmentPanel';
 import { categoryLabel, columnWidthPx, latticeFromMatrix, type LatticeColumn } from '@/lib/planning';
@@ -132,8 +132,9 @@ export function GrillePage() {
       <div className="flex min-h-0 flex-1 items-stretch">
         <div className="max-h-[calc(100vh-118px)] min-w-0 flex-1 overflow-auto">
           <div className="grid w-max border-b-[3px] border-ink" style={{ gridTemplateColumns }}>
-            <div className="sticky left-0 top-0 z-[6] flex items-center border-b-2 border-r-[3px] border-ink border-b-cream bg-ink px-2 py-[6px] font-display text-[10px] font-extrabold uppercase tracking-wider text-cream">
+            <div className="sticky left-0 top-0 z-[6] flex items-center gap-[6px] border-b-2 border-r-[3px] border-ink border-b-cream bg-ink px-2 py-[6px] font-display text-[10px] font-extrabold uppercase tracking-wider text-cream">
               {t('grille.positionsCount', { count: matrix.data.positions.length })}
+              <HelpTip text={t('grille.footnote')} side="bottom" />
             </div>
             {shownDays.map((day) => (
               <div
@@ -169,9 +170,6 @@ export function GrillePage() {
               />
             ))}
           </div>
-          <div className="px-[14px] py-[10px] font-mono text-[9.5px] leading-relaxed opacity-60">
-            {t('grille.footnote')}
-          </div>
         </div>
 
         <aside className="max-h-[calc(100vh-118px)] w-[392px] flex-none overflow-auto border-l-[3px] border-ink bg-paper">