Droit à l'image par signature électronique (membre + accompagnants)

Remplace la feuille à imprimer par un recueil électronique du consentement,
construit selon l'article 9 du Code civil (droit à l'image = droit de la
personnalité, personnel) :

- Le membre signe une fois, dans son espace, une autorisation GÉNÉRALE
  couvrant toute photo de lui — plus besoin de valider chaque publication.
  Capture d'une signature dessinée (pad canvas), nom, horodatage et IP :
  une signature électronique simple, preuve de consentement (art. 7 RGPD).
  Étape proposée au premier accès mais NON bloquante (« Plus tard »).
- Un adulte ne pouvant pas consentir pour un autre, l'image des
  accompagnants est recueillie PAR PERSONNE au moment de l'inscription à
  la rencontre : case « autorise / n'autorise pas » par participant +
  attestation du membre d'avoir informé chaque personne et obtenu son
  accord (mineur : représentant légal).
- La publication n'est plus bloquée par le statut de consentement (évite
  le blocage systématique) ; le consentement est la preuve conservée.
- Admin : statut d'autorisation dans la liste des membres (avec la
  signature consultable) et par participant dans la liste des inscrits
  (badges + exports Excel/impression).
- Table image_consents (journal append-only) et colonne
  inscriptions.image_consent, migrations idempotentes.
- Politique de confidentialité mise à jour (consentement par personne,
  fondement art. 9, cas des mineurs).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fkg15RCxNgUys4ru73He2o

web/src/components/ImageConsent.jsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { api } from '../lib/api.js';
+import SignaturePad from './SignaturePad.jsx';
+
+// Blanket authorization: one signature covers any photo of the member, on
+// all of the association's media. Recorded server-side with the full scope
+// list so the record stays explicit.
+const ALL_SCOPES = ['site', 'social', 'print'];
+
+const CONSENT_TEXT =
+  "J'autorise l'association à photographier, reproduire et diffuser mon image — toute photographie de moi " +
+  "prise lors des rencontres et manifestations du club, ainsi que ma photographie de profil — sur l'ensemble " +
+  "de ses supports de communication (site internet, réseaux sociaux, supports imprimés). Cette autorisation " +
+  "générale est consentie à titre gratuit, pour une durée de 5 ans, pour une diffusion en France et à " +
+  "l'étranger. Les images ne seront ni cédées à des tiers ni utilisées à des fins commerciales. Je peux " +
+  "retirer mon consentement à tout moment depuis mon espace membre.";
+
+// Interactive image-rights consent form. Records a single blanket
+// electronic authorization (or a refusal), then calls onDone.
+export function ImageConsentForm({ dirigeant, onDone, compact = false }) {
+  const [name, setName] = useState(dirigeant || '');
+  const [signature, setSignature] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  const submit = async (decision) => {
+    setError('');
+    if (!name.trim()) return setError('Indiquez votre nom et prénom.');
+    if (decision === 'accepted' && !signature) return setError('Signez dans le cadre pour autoriser.');
+    setBusy(true);
+    try {
+      await api.post('/api/member/image-consent', {
+        decision,
+        scopes: decision === 'accepted' ? ALL_SCOPES : [],
+        signatoryName: name.trim(),
+        signaturePng: decision === 'accepted' ? signature : '',
+      });
+      onDone?.(decision);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
+      <p style={{ fontSize: 13.5, lineHeight: 1.65, color: 'var(--gray)' }}>{CONSENT_TEXT}</p>
+
+      <label className="field">Nom et prénom du signataire
+        <input value={name} onChange={(e) => setName(e.target.value)} maxLength={120} placeholder="Votre nom et prénom" />
+      </label>
+
+      <div>
+        <div style={{ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--gray-mid)', marginBottom: 8 }}>
+          Signature
+        </div>
+        <SignaturePad onChange={setSignature} />
+      </div>
+
+      {error && <p className="error-text">{error}</p>}
+
+      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+        <button type="button" className="btn btn-red btn-sm" style={{ fontSize: 14.5, padding: '13px 26px' }} disabled={busy} onClick={() => submit('accepted')}>
+          {busy ? 'Enregistrement…' : "J'autorise et je signe"}
+        </button>
+        <button type="button" className="btn btn-outline-soft btn-sm" style={{ fontSize: 14, padding: '13px 22px' }} disabled={busy} onClick={() => submit('refused')}>
+          Je n'autorise pas
+        </button>
+      </div>
+      {!compact && (
+        <p style={{ fontSize: 11.5, color: 'var(--gray-light)', lineHeight: 1.55 }}>
+          Votre choix, la date et votre signature sont enregistrés comme preuve de consentement (art. 7 RGPD),
+          et modifiables à tout moment. Refuser n'a aucune conséquence sur votre adhésion.
+        </p>
+      )}
+    </div>
+  );
+}

web/src/components/SignaturePad.jsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from 'react';
+
+// Self-contained signature pad: draw with mouse or finger, clear, and get
+// the drawing as a PNG data URL via onChange. Kept at a small fixed size so
+// the exported PNG stays well under the request body limit.
+const W = 500;
+const H = 160;
+
+export default function SignaturePad({ onChange }) {
+  const canvasRef = useRef(null);
+  const drawing = useRef(false);
+  const last = useRef(null);
+  const [empty, setEmpty] = useState(true);
+
+  useEffect(() => {
+    const ctx = canvasRef.current.getContext('2d');
+    ctx.lineWidth = 2.2;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.strokeStyle = '#1B1B1B';
+  }, []);
+
+  const pos = (e) => {
+    const rect = canvasRef.current.getBoundingClientRect();
+    const p = e.touches ? e.touches[0] : e;
+    return { x: (p.clientX - rect.left) * (W / rect.width), y: (p.clientY - rect.top) * (H / rect.height) };
+  };
+
+  const start = (e) => {
+    e.preventDefault();
+    drawing.current = true;
+    last.current = pos(e);
+  };
+
+  const move = (e) => {
+    if (!drawing.current) return;
+    e.preventDefault();
+    const ctx = canvasRef.current.getContext('2d');
+    const p = pos(e);
+    ctx.beginPath();
+    ctx.moveTo(last.current.x, last.current.y);
+    ctx.lineTo(p.x, p.y);
+    ctx.stroke();
+    last.current = p;
+    if (empty) setEmpty(false);
+  };
+
+  const end = () => {
+    if (!drawing.current) return;
+    drawing.current = false;
+    onChange?.(empty ? '' : canvasRef.current.toDataURL('image/png'));
+  };
+
+  const clear = () => {
+    canvasRef.current.getContext('2d').clearRect(0, 0, W, H);
+    setEmpty(true);
+    onChange?.('');
+  };
+
+  return (
+    <div>
+      <canvas
+        ref={canvasRef}
+        width={W}
+        height={H}
+        style={{ width: '100%', maxWidth: W, height: 'auto', aspectRatio: `${W} / ${H}`, border: '1px solid var(--input-border)', borderRadius: 6, background: '#fff', touchAction: 'none', cursor: 'crosshair', display: 'block' }}
+        onMouseDown={start}
+        onMouseMove={move}
+        onMouseUp={end}
+        onMouseLeave={end}
+        onTouchStart={start}
+        onTouchMove={move}
+        onTouchEnd={end}
+      />
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 6 }}>
+        <span style={{ fontSize: 11.5, color: 'var(--gray-light)' }}>Signez ci-dessus avec la souris ou le doigt.</span>
+        <button type="button" className="btn-link-gray" style={{ fontSize: 12.5 }} onClick={clear}>Effacer</button>
+      </div>
+    </div>
+  );
+}

web/src/components/admin/AdminTabs.jsx

@@ -97,6 +97,56 @@ function MemberFormModal({ member, categories, onClose, onSaved }) {
   );
 }
 
+const SCOPE_LABELS = { site: 'Site internet', social: 'Réseaux sociaux', print: 'Supports imprimés' };
+
+// Shows the member's recorded image-rights consent: decision, scopes, the
+// drawn signature and the audit metadata (date, IP) — the proof of consent.
+function ConsentRecordModal({ member, onClose }) {
+  const [consent, setConsent] = useState(undefined); // undefined = loading
+
+  useEffect(() => {
+    api.get(`/api/admin/members/${member.id}/image-consent`).then((d) => setConsent(d.consent)).catch(() => setConsent(null));
+  }, [member.id]);
+
+  return (
+    <Modal onClose={onClose} maxWidth={560} header={{ kicker: "Droit à l'image", title: member.nom }}>
+      <div style={{ padding: '26px 30px' }}>
+        {consent === undefined && <p style={{ color: 'var(--gray-light)' }}>Chargement…</p>}
+        {consent === null && <p style={{ color: 'var(--gray-light)' }}>Aucun consentement enregistré pour ce membre.</p>}
+        {consent && (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+            <div>
+              <span className={`badge ${consent.decision === 'accepted' ? 'badge-green' : 'badge-red'}`}>
+                {consent.decision === 'accepted' ? 'Publication autorisée' : 'Publication refusée'}
+              </span>
+            </div>
+            {consent.decision === 'accepted' && (
+              <div>
+                <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--gray-mid)', marginBottom: 6 }}>Supports autorisés</div>
+                <div style={{ fontSize: 13.5, color: 'var(--gray)' }}>
+                  {(consent.scopes || '').split(',').filter(Boolean).map((s) => SCOPE_LABELS[s] || s).join(', ') || '—'}
+                </div>
+              </div>
+            )}
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, fontSize: 13 }}>
+              <div><div style={{ fontSize: 11.5, color: 'var(--gray-light)' }}>Signataire</div>{consent.signatory_name}</div>
+              <div><div style={{ fontSize: 11.5, color: 'var(--gray-light)' }}>Date</div>{new Date(consent.created_at).toLocaleString('fr-FR')}</div>
+              <div><div style={{ fontSize: 11.5, color: 'var(--gray-light)' }}>Adresse IP</div>{consent.ip || '—'}</div>
+              <div><div style={{ fontSize: 11.5, color: 'var(--gray-light)' }}>Version</div>{consent.consent_version || '—'}</div>
+            </div>
+            {consent.signature_png && (
+              <div>
+                <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--gray-mid)', marginBottom: 6 }}>Signature</div>
+                <img src={consent.signature_png} alt="Signature" style={{ maxWidth: '100%', border: '1px solid var(--border)', borderRadius: 6, background: '#fff' }} />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}
+
 export function MembersTab() {
   const { user } = useAuth();
   const isAdmin = user.role === 'admin';
@@ -104,6 +154,7 @@ export function MembersTab() {
   const [categories, setCategories] = useState([]);
   const [modal, setModal] = useState(null); // null | 'new' | member
   const [credentials, setCredentials] = useState(null); // { email, tempPassword }
+  const [consentView, setConsentView] = useState(null); // member whose consent to view
   const [accessError, setAccessError] = useState('');
   const season = seasonLabel();
 
@@ -162,7 +213,7 @@ export function MembersTab() {
         <table className="table">
           <thead>
             <tr>
-              <th>Entreprise</th><th>Secteur</th><th>Dirigeant</th><th>Saison</th><th>Accès</th><th></th>
+              <th>Entreprise</th><th>Secteur</th><th>Dirigeant</th><th>Saison</th><th>Image</th><th>Accès</th><th></th>
             </tr>
           </thead>
           <tbody>
@@ -176,6 +227,20 @@ export function MembersTab() {
                     {m.valide ? `Validé ${season}` : 'Non validé'}
                   </span>
                 </td>
+                <td>
+                  {m.image_consent ? (
+                    <button
+                      className={`badge ${m.image_consent === 'accepted' ? 'badge-green' : 'badge-red'}`}
+                      style={{ border: 'none', cursor: 'pointer' }}
+                      title="Voir le consentement signé"
+                      onClick={() => setConsentView(m)}
+                    >
+                      {m.image_consent === 'accepted' ? 'Autorisé' : 'Refusé'}
+                    </button>
+                  ) : (
+                    <span className="badge badge-amber">En attente</span>
+                  )}
+                </td>
                 <td>
                   <AccessCell
                     hasEmail={!!m.email}
@@ -221,6 +286,7 @@ export function MembersTab() {
           onClose={() => setCredentials(null)}
         />
       )}
+      {consentView && <ConsentRecordModal member={consentView} onClose={() => setConsentView(null)} />}
     </div>
   );
 }
@@ -497,9 +563,10 @@ function ParticipantsModal({ renc, associationName, onClose, onEdit, onCancel, r
 
   const exportExcel = () => {
     let html = '<html xmlns:x="urn:schemas-microsoft-com:office:excel"><head><meta charset="utf-8"></head><body><table border="1"><thead>';
-    html += '<tr><th>Participant</th><th>Entreprise</th><th>Email</th><th>Téléphone</th><th>Rencontre</th><th>Statut</th></tr></thead><tbody>';
+    const imgLabel = (v) => (v === true ? 'Autorisée' : v === false ? 'Refusée' : '');
+    html += '<tr><th>Participant</th><th>Entreprise</th><th>Email</th><th>Téléphone</th><th>Rencontre</th><th>Droit image</th><th>Statut</th></tr></thead><tbody>';
     rows.forEach((p) => {
-      html += `<tr><td>${escHtml(p.nom)}</td><td>${escHtml(p.entreprise)}</td><td>${escHtml(p.email)}</td><td>${escHtml(p.tel)}</td><td>${escHtml(renc.titre)}</td><td>${escHtml(statutLabel(p.statut))}</td></tr>`;
+      html += `<tr><td>${escHtml(p.nom)}</td><td>${escHtml(p.entreprise)}</td><td>${escHtml(p.email)}</td><td>${escHtml(p.tel)}</td><td>${escHtml(renc.titre)}</td><td>${escHtml(imgLabel(p.image_consent))}</td><td>${escHtml(statutLabel(p.statut))}</td></tr>`;
     });
     html += '</tbody></table></body></html>';
     const blob = new Blob(['' + html], { type: 'application/vnd.ms-excel' });
@@ -516,8 +583,9 @@ function ParticipantsModal({ renc, associationName, onClose, onEdit, onCancel, r
 
   const print = () => {
     let body = '';
+    const imgLabel = (v) => (v === true ? 'Autorisée' : v === false ? 'Refusée' : '—');
     rows.forEach((p, i) => {
-      body += `<tr><td>${i + 1}</td><td>${escHtml(p.nom)}</td><td>${escHtml(p.entreprise)}</td><td>${escHtml(p.email)}</td><td>${escHtml(p.tel)}</td><td>${escHtml(statutLabel(p.statut))}</td></tr>`;
+      body += `<tr><td>${i + 1}</td><td>${escHtml(p.nom)}</td><td>${escHtml(p.entreprise)}</td><td>${escHtml(p.email)}</td><td>${escHtml(p.tel)}</td><td>${escHtml(imgLabel(p.image_consent))}</td><td>${escHtml(statutLabel(p.statut))}</td></tr>`;
     });
     const doc = `<!doctype html><html><head><meta charset="utf-8"><title>Inscrits — ${escHtml(renc.titre)}</title>`
       + '<style>body{font-family:Arial,Helvetica,sans-serif;color:#1B1B1B;padding:32px}h1{font-size:22px;margin:0 0 4px}.meta{color:#666;font-size:13px;margin-bottom:20px}'
@@ -525,7 +593,7 @@ function ParticipantsModal({ renc, associationName, onClose, onEdit, onCancel, r
       + '.brand{color:#C1272D;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}</style></head><body>'
       + `<div class="brand">${escHtml(associationName)}</div>`
       + `<h1>${escHtml(renc.titre)}</h1><div class="meta">${escHtml(meta)} — ${rows.length} inscrits</div>`
-      + '<table><thead><tr><th>#</th><th>Participant</th><th>Entreprise</th><th>Email</th><th>Téléphone</th><th>Statut</th></tr></thead><tbody>'
+      + '<table><thead><tr><th>#</th><th>Participant</th><th>Entreprise</th><th>Email</th><th>Téléphone</th><th>Droit image</th><th>Statut</th></tr></thead><tbody>'
       + body + '</tbody></table></body></html>';
     const w = window.open('', '_blank');
     if (!w) return;
@@ -548,14 +616,21 @@ function ParticipantsModal({ renc, associationName, onClose, onEdit, onCancel, r
       <div style={{ padding: '6px 0 12px' }}>
         <table className="table">
           <thead>
-            <tr><th>Participant</th><th>Entreprise</th><th>Email</th><th>Statut</th><th></th></tr>
+            <tr><th>Participant</th><th>Entreprise</th><th>Image</th><th>Statut</th><th></th></tr>
           </thead>
           <tbody>
             {rows.map((p) => (
               <tr key={p.id}>
                 <td>{p.nom}</td>
                 <td>{p.entreprise}</td>
-                <td>{p.email}</td>
+                <td>
+                  <span
+                    className={`badge ${p.image_consent === true ? 'badge-green' : p.image_consent === false ? 'badge-red' : 'badge-amber'}`}
+                    title="Autorisation de publication de l'image du participant"
+                  >
+                    {p.image_consent === true ? 'Autorisée' : p.image_consent === false ? 'Refusée' : '—'}
+                  </span>
+                </td>
                 <td><span className={`badge ${p.statut === 'confirmee' ? 'badge-green' : 'badge-amber'}`}>{statutLabel(p.statut)}</span></td>
                 <td style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
                   <button className="btn-link" style={{ fontSize: 12.5, marginRight: 12 }} onClick={() => onEdit(p)}>Modifier</button>

web/src/pages/Confidentialite.jsx

@@ -39,8 +39,9 @@ export default function Confidentialite() {
           <div style={row}>
             <span style={cellTitle}>Inscription à une rencontre</span>
             <span>
-              Noms et prénoms des participants, rattachés au compte membre qui les inscrit.
-              <br /><em>Finalité :</em> gérer les inscriptions et l'accueil des participants. <em>Base légale :</em> exécution de l'adhésion.
+              Noms et prénoms des participants (membre et accompagnants), rattachés au compte membre, et
+              l'autorisation de droit à l'image recueillie pour chacun.
+              <br /><em>Finalité :</em> gérer les inscriptions et l'accueil des participants. <em>Base légale :</em> exécution de l'adhésion ; l'autorisation d'image de chaque personne repose sur son consentement (art. 9 du Code civil), le membre attestant l'avoir recueilli.
             </span>
           </div>
           <div style={row}>
@@ -118,10 +119,12 @@ export default function Confidentialite() {
 
       <LegalSection title="Droit à l'image">
         <p>
-          Des photographies sont prises lors des rencontres du club et peuvent être publiées sur ce site
-          (section « Rencontres passées »). Elles ne sont publiées qu'avec l'accord des personnes
-          identifiables. Si vous apparaissez sur une photographie et souhaitez son retrait, écrivez à{' '}
-          <LegalValue value={email} label="email de contact" /> : elle sera retirée dans les meilleurs délais.
+          Des photographies sont prises lors des rencontres du club et peuvent être publiées sur ses supports
+          (site, réseaux sociaux, documents imprimés). Conformément à l'article 9 du Code civil, chaque
+          personne identifiable donne sa propre autorisation : les membres via leur espace personnel, les
+          accompagnants au moment de leur inscription à l'événement. Pour un mineur, l'autorisation est donnée
+          par son représentant légal. Si vous apparaissez sur une photographie et souhaitez son retrait, écrivez
+          à <LegalValue value={email} label="email de contact" /> : elle sera retirée dans les meilleurs délais.
         </p>
       </LegalSection>
 

web/src/pages/Espace.jsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useAuth } from '../lib/AuthContext.jsx';
 import { api, seasonLabel } from '../lib/api.js';
 import ImageSlot from '../components/ImageSlot.jsx';
+import { ImageConsentForm } from '../components/ImageConsent.jsx';
 import { AdminShell } from './Admin.jsx';
 
 function LoginSection({ title = 'Gérez votre présence au Club', kicker = 'Espace membre' }) {
@@ -153,6 +154,69 @@ function ForcedPasswordChange() {
   );
 }
 
+// Image-rights authorization prompt shown at a member's first access. It
+// is NOT blocking: the member can sign the general authorization, refuse,
+// or continue and decide later. Publication is never gated on this — it is
+// the association's recorded authorization, not a technical lock.
+function ImageConsentGate({ dirigeant, onDone, onSkip }) {
+  return (
+    <section style={{ minHeight: 'calc(100vh - 76px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '48px 24px', background: 'var(--bg)' }}>
+      <div className="card" style={{ width: '100%', maxWidth: 620, borderRadius: 10, padding: '34px 36px' }}>
+        <div className="kicker" style={{ marginBottom: 12 }}>Droit à l'image</div>
+        <h1 className="serif" style={{ fontWeight: 500, fontSize: 27, lineHeight: 1.15, marginBottom: 8 }}>
+          Autorisation de publier votre image
+        </h1>
+        <p style={{ fontSize: 13.5, color: 'var(--gray-light)', lineHeight: 1.6, marginBottom: 22 }}>
+          En signant, vous autorisez le club à publier toute photo de vous sur ses supports. C'est une
+          autorisation générale, valable pour l'ensemble de vos photos — vous n'aurez plus à valider chaque
+          publication. Modifiable à tout moment depuis votre espace.
+        </p>
+        <ImageConsentForm dirigeant={dirigeant} onDone={() => onDone?.()} />
+        <button type="button" onClick={onSkip} className="btn-link-gray" style={{ marginTop: 18 }}>
+          Plus tard — accéder à mon espace
+        </button>
+      </div>
+    </section>
+  );
+}
+
+// In-portal card: shows the current authorization status and lets the
+// member sign, update or withdraw it.
+function ConsentCard({ member, dirigeant, onChanged }) {
+  const [editing, setEditing] = useState(false);
+  const decision = member.image_consent; // 'accepted' | 'refused' | null
+  const at = member.image_consent_at ? new Date(member.image_consent_at).toLocaleDateString('fr-FR') : null;
+  const accepted = decision === 'accepted';
+
+  return (
+    <div className="card" style={{ borderRadius: 8, padding: 30, marginTop: 24 }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, flexWrap: 'wrap' }}>
+        <h2 className="serif" style={{ fontSize: 22, fontWeight: 600 }}>Droit à l'image</h2>
+        <span className={`badge ${accepted ? 'badge-green' : decision === 'refused' ? 'badge-red' : 'badge-amber'}`}>
+          {accepted ? 'Autorisation signée' : decision === 'refused' ? 'Refusé' : 'Non signée'}
+        </span>
+      </div>
+      <p style={{ fontSize: 13.5, color: 'var(--gray-light)', lineHeight: 1.6, margin: '8px 0 0' }}>
+        {accepted
+          ? `Vous avez autorisé la publication de toute photo de vous${at ? ` le ${at}` : ''}. Aucune validation supplémentaire n'est nécessaire.`
+          : decision === 'refused'
+            ? `Vous avez refusé la publication de votre image${at ? ` le ${at}` : ''}. Pour toute question, contactez le club.`
+            : "Vous n'avez pas encore signé l'autorisation de droit à l'image."}
+      </p>
+      {!editing ? (
+        <button className="btn btn-outline-soft btn-sm" style={{ marginTop: 16, fontSize: 14, padding: '11px 20px' }} onClick={() => setEditing(true)}>
+          {decision ? 'Modifier mon choix' : "Signer l'autorisation"}
+        </button>
+      ) : (
+        <div style={{ marginTop: 18 }}>
+          <ImageConsentForm dirigeant={dirigeant} compact onDone={() => { setEditing(false); onChanged?.(); }} />
+          <button type="button" className="btn-link-gray" style={{ marginTop: 10 }} onClick={() => setEditing(false)}>Annuler</button>
+        </div>
+      )}
+    </div>
+  );
+}
+
 function Portal() {
   const { logout } = useAuth();
   const [member, setMember] = useState(null);
@@ -162,6 +226,9 @@ function Portal() {
   const [error, setError] = useState('');
   const season = seasonLabel();
 
+  const loadProfile = () =>
+    api.get('/api/member/profile').then((p) => { setMember(p.member); setForm((f) => f ? { ...f, ...p.member } : p.member); });
+
   useEffect(() => {
     Promise.all([api.get('/api/member/profile'), api.get('/api/public/bootstrap')])
       .then(([p, b]) => {
@@ -180,6 +247,11 @@ function Portal() {
     );
   }
 
+  // First access: require an explicit image-rights decision before the portal.
+  if (member.image_consent == null) {
+    return <ImageConsentGate dirigeant={member.dirigeant} onDone={loadProfile} />;
+  }
+
   const onChange = (e) => {
     const { name, value } = e.target;
     setForm({ ...form, [name]: name === 'categorie_id' ? (value ? Number(value) : null) : value });
@@ -251,6 +323,11 @@ function Portal() {
                 <div style={{ width: 96, height: 96 }}>
                   <ImageSlot circle endpoint="/api/member/profile/photo" value={form.photo_path} placeholder="Déposez votre photo" onUploaded={(path) => { setForm((f) => ({ ...f, photo_path: path })); setMember((m) => ({ ...m, photo_path: path })); }} />
                 </div>
+                {form.photo_path && member.image_consent !== 'accepted' && (
+                  <div style={{ fontSize: 10.5, color: 'var(--red)', marginTop: 6, lineHeight: 1.4, maxWidth: 96 }}>
+                    Non publiée sans autorisation d'image
+                  </div>
+                )}
               </div>
             </div>
 
@@ -298,6 +375,7 @@ function Portal() {
               </div>
             </form>
           </div>
+          <ConsentCard member={member} dirigeant={form.dirigeant} onChanged={loadProfile} />
           <PasswordCard />
         </div>
 

web/src/pages/Home.jsx

@@ -11,7 +11,10 @@ import { associationSettings } from '../lib/siteSettings.js';
 export function InscriptionModal({ rencontre, onClose, onDone }) {
   const { user, login } = useAuth();
   const [context, setContext] = useState(null);
-  const [participants, setParticipants] = useState(['']);
+  // Each participant: { nom, imageConsent } — image consent is recorded per
+  // person (an adult can't consent for another, art. 9 Code civil).
+  const [participants, setParticipants] = useState([{ nom: '', imageConsent: true }]);
+  const [attestation, setAttestation] = useState(false);
   const [credentials, setCredentials] = useState({ email: '', password: '' });
   const [done, setDone] = useState(false);
   const [wasRegistered, setWasRegistered] = useState(false);
@@ -26,7 +29,13 @@ export function InscriptionModal({ rencontre, onClose, onDone }) {
       .then((d) => {
         setContext(d);
         setWasRegistered(d.participants.length > 0);
-        setParticipants(d.participants.length ? d.participants.map((p) => p.nom) : [d.member.dirigeant || '']);
+        setParticipants(
+          d.participants.length
+            ? d.participants.map((p) => ({ nom: p.nom, imageConsent: p.image_consent !== false }))
+            : [{ nom: d.member.dirigeant || '', imageConsent: true }]
+        );
+        // A returning registration already carried the attestation.
+        setAttestation(d.participants.length > 0);
       })
       .catch((err) => setError(err.message));
   }, [user, rencontre.id]);
@@ -45,7 +54,10 @@ export function InscriptionModal({ rencontre, onClose, onDone }) {
   };
 
   const changeParticipant = (index, value) => {
-    setParticipants((current) => current.map((name, i) => (i === index ? value : name)));
+    setParticipants((current) => current.map((p, i) => (i === index ? { ...p, nom: value } : p)));
+  };
+  const toggleParticipantImage = (index) => {
+    setParticipants((current) => current.map((p, i) => (i === index ? { ...p, imageConsent: !p.imageConsent } : p)));
   };
 
   const maxPerAccount = context?.rencontre.participants_par_compte || rencontre.participants_par_compte || 1;
@@ -53,9 +65,13 @@ export function InscriptionModal({ rencontre, onClose, onDone }) {
   const submit = async (e) => {
     e.preventDefault();
     setError('');
+    if (!attestation) {
+      setError("Merci de confirmer l'attestation sur le droit à l'image.");
+      return;
+    }
     setBusy(true);
     try {
-      await api.post(`/api/public/rencontres/${rencontre.id}/inscriptions`, { participants });
+      await api.post(`/api/public/rencontres/${rencontre.id}/inscriptions`, { participants, attestation });
       setDone(true);
       onDone?.();
     } catch (err) {
@@ -133,33 +149,40 @@ export function InscriptionModal({ rencontre, onClose, onDone }) {
           <div style={{ background: 'var(--beige)', padding: '12px 14px', borderRadius: 4, fontSize: 13, color: 'var(--gray)', marginBottom: 18 }}>
             Compte : <strong>{context.member.nom}</strong> · maximum {maxPerAccount} participant{maxPerAccount > 1 ? 's' : ''}
           </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-            {participants.map((name, index) => (
-              <div key={index} style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}>
-                <label className="field-plain" style={{ flex: 1 }}>Participant {index + 1} — nom & prénom
-                  <input value={name} onChange={(e) => changeParticipant(index, e.target.value)} required maxLength={120} />
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+            {participants.map((p, index) => (
+              <div key={index} style={{ border: '1px solid var(--border-soft)', borderRadius: 6, padding: '12px 14px' }}>
+                <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}>
+                  <label className="field-plain" style={{ flex: 1 }}>Participant {index + 1} — nom & prénom
+                    <input value={p.nom} onChange={(e) => changeParticipant(index, e.target.value)} required maxLength={120} />
+                  </label>
+                  {participants.length > 1 && (
+                    <button type="button" className="btn btn-outline-soft btn-sm" style={{ padding: '11px 13px' }} onClick={() => setParticipants((current) => current.filter((_, i) => i !== index))} aria-label={`Retirer le participant ${index + 1}`}>×</button>
+                  )}
+                </div>
+                <label style={{ display: 'flex', gap: 8, alignItems: 'flex-start', marginTop: 10, fontSize: 12.5, color: 'var(--gray)', cursor: 'pointer' }}>
+                  <input type="checkbox" checked={p.imageConsent} onChange={() => toggleParticipantImage(index)} style={{ marginTop: 2 }} />
+                  <span>Cette personne autorise la publication de son image (photos de l'événement) sur les supports du club.</span>
                 </label>
-                {participants.length > 1 && (
-                  <button type="button" className="btn btn-outline-soft btn-sm" style={{ padding: '11px 13px' }} onClick={() => setParticipants((current) => current.filter((_, i) => i !== index))} aria-label={`Retirer le participant ${index + 1}`}>×</button>
-                )}
               </div>
             ))}
           </div>
           {participants.length < maxPerAccount && (
-            <button type="button" className="btn-link" style={{ marginTop: 14 }} onClick={() => setParticipants((current) => [...current, ''])}>
+            <button type="button" className="btn-link" style={{ marginTop: 14 }} onClick={() => setParticipants((current) => [...current, { nom: '', imageConsent: true }])}>
               + Ajouter un participant
             </button>
           )}
+          <label style={{ display: 'flex', gap: 8, alignItems: 'flex-start', marginTop: 16, fontSize: 12, color: 'var(--gray)', cursor: 'pointer', lineHeight: 1.5 }}>
+            <input type="checkbox" checked={attestation} onChange={(e) => setAttestation(e.target.checked)} style={{ marginTop: 2 }} />
+            <span>J'atteste avoir informé chaque personne inscrite que des photos peuvent être prises et publiées, et avoir recueilli son accord (ou son refus) ci-dessus. Pour un mineur, l'accord est donné par son représentant légal.</span>
+          </label>
           {error && <p className="error-text" style={{ marginTop: 12 }}>{error}</p>}
-          <button type="submit" className="btn btn-red" style={{ width: '100%', marginTop: 22, padding: 14 }} disabled={busy}>
+          <button type="submit" className="btn btn-red" style={{ width: '100%', marginTop: 18, padding: 14 }} disabled={busy}>
             {busy ? 'Enregistrement…' : `Enregistrer ${participants.length} participant${participants.length > 1 ? 's' : ''}`}
           </button>
-          <p style={{ fontSize: 12, color: 'var(--gray-light)', textAlign: 'center', marginTop: 12, lineHeight: 1.5 }}>
-            Vous pourrez rouvrir ce formulaire pour modifier les noms enregistrés.
-          </p>
-          <p style={{ fontSize: 11, color: 'var(--gray-light)', textAlign: 'center', marginTop: 8, lineHeight: 1.5 }}>
-            Les noms recueillis servent uniquement à gérer les inscriptions à cette rencontre —{' '}
-            <Link to="/confidentialite" style={{ color: 'var(--red)' }}>politique de confidentialité</Link>.
+          <p style={{ fontSize: 11, color: 'var(--gray-light)', textAlign: 'center', marginTop: 10, lineHeight: 1.5 }}>
+            Vous pourrez rouvrir ce formulaire pour modifier les noms et les choix.{' '}
+            <Link to="/confidentialite" style={{ color: 'var(--red)' }}>Politique de confidentialité</Link>.
           </p>
         </form>
       )}