Lien d'inscription protégé par jeton, reçus fiscaux mécénat, infobulles et revue de sécurité

- Lien d'inscription protégé par un jeton (FormTemplate.access_token,
  /inscription/<token>), avec régénération depuis l'écran de configuration.
- Reçus fiscaux mécénat (cerfa 11580*05) : un PDF par bénévole ayant payé en
  mécénat, donateur/montant (chiffres et toutes lettres en français,
  app/mecenat/number_words.py)/date complétés par-dessus le modèle officiel.
- Jeu de démonstration : bénévoles avec cotisation classique ou mécénat payée.
- Infobulles (HelpTip et détail de cellule de la grille des besoins)
  repositionnées en position: fixed via JS, bornées à l'écran.
- Revue de sécurité : logo des emails en pièce jointe inline au lieu d'une
  URL (fuyait le jeton d'inscription), sujet retiré du log de remise des
  emails (pouvait porter un nom de bénévole), photo du formulaire public
  revalidée par décodage réel avant stockage, export Excel protégé contre
  l'injection de formule, sondage du statut de paiement limité en
  fréquence, pyjwt mis à jour.

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

frontend/src/components/ui.tsx

@@ -1,6 +1,7 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
 
 import { cx } from '@/lib/cx';
+import { useTooltipPosition } from '@/lib/useTooltipPosition';
 
 // Primitives visuelles du design « Bénévoles Festival » : bordures franches,
 // ombres portées dures, libellés capitales. Aucun texte en dur ici — les
@@ -196,20 +197,27 @@ export function HelpTip({
   side?: 'top' | 'bottom';
   className?: string;
 }) {
+  const { anchorRef, tooltipRef, pos, reposition } = useTooltipPosition<
+    HTMLButtonElement,
+    HTMLSpanElement
+  >(side);
+
   return (
     <span className={cx('group relative inline-flex align-middle', className)}>
       <button
+        ref={anchorRef}
         type="button"
+        onMouseEnter={reposition}
+        onFocus={reposition}
         className="flex h-[15px] w-[15px] flex-none cursor-help items-center justify-center border-[1.5px] border-ink bg-cream font-mono text-[9px] font-bold leading-none text-ink hover:bg-yellow focus-visible:bg-yellow focus-visible:outline-none"
         aria-label={text}
       >
         ?
       </button>
       <span
-        className={cx(
-          'pointer-events-none absolute left-1/2 z-20 w-max max-w-[260px] -translate-x-1/2 border-2 border-ink bg-ink px-[9px] py-[7px] font-mono text-[10px] font-normal normal-case leading-relaxed tracking-normal text-cream opacity-0 shadow-brutal-md transition-opacity duration-100 group-hover:opacity-100 group-focus-within:opacity-100',
-          side === 'top' ? 'bottom-full mb-[6px]' : 'top-full mt-[6px]',
-        )}
+        ref={tooltipRef}
+        style={{ left: pos.left, top: pos.top }}
+        className="pointer-events-none fixed z-30 w-max max-w-[260px] border-2 border-ink bg-ink px-[9px] py-[7px] font-mono text-[10px] font-normal normal-case leading-relaxed tracking-normal text-cream opacity-0 shadow-brutal-md transition-opacity duration-100 group-hover:opacity-100 group-focus-within:opacity-100"
       >
         {text}
       </span>