Pages mentions légales et politique de confidentialité

Nouvelles pages publiques /mentions-legales et /confidentialite,
conformes aux obligations d'une association loi 1901 : LCEN (identité de
l'éditeur, RNA, directeur de la publication, hébergeur), RGPD art. 13
(responsable de traitement, données/finalités/bases légales par
formulaire, durées de conservation, destinataires, droits, réclamation
CNIL), cookies (unique cookie de session exempté de consentement — pas
de bandeau nécessaire), droit à l'image et propriété intellectuelle.

Les pages sont alimentées par les paramètres de l'association existants,
étendus des champs légalement requis : numéro RNA, hébergeur (nom,
adresse, téléphone) et date de mise à jour des pages légales — nouvelle
carte « Pages légales & hébergeur » dans l'onglet Paramètres, avec
alerte listant les champs requis manquants. Un champ vide s'affiche
« à compléter » sur la page publique plutôt que de disparaître.

Également : liens cliquables Mentions légales / Confidentialité dans le
pied de page, et mentions d'information RGPD sous les formulaires
publics (demande d'adhésion, inscription à une rencontre).

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

web/src/pages/Confidentialite.jsx

@@ -0,0 +1,135 @@
+import { usePublicData } from '../lib/usePublic.js';
+import { associationSettings } from '../lib/siteSettings.js';
+import { LegalLayout, LegalSection, LegalValue } from './MentionsLegales.jsx';
+
+// Privacy policy (art. 13 RGPD). The described processing matches exactly
+// what this application actually does — update this page if a new
+// collection or a third-party service (analytics, newsletter…) is added.
+export default function Confidentialite() {
+  const { data } = usePublicData();
+  const s = associationSettings(data?.content);
+  const email = s.association_email;
+
+  const row = { display: 'grid', gridTemplateColumns: '190px 1fr', gap: 14, padding: '12px 0', borderBottom: '1px solid var(--border-soft)', fontSize: 14.5, lineHeight: 1.6 };
+  const cellTitle = { fontWeight: 600, color: 'var(--ink)' };
+
+  return (
+    <LegalLayout kicker="Informations légales" title="Politique de confidentialité" updated={s.legal_updated}>
+      <LegalSection title="Responsable de traitement">
+        <p>
+          Le responsable du traitement des données personnelles collectées sur ce site est{' '}
+          <strong><LegalValue value={s.association_name} label="nom de l'association" /></strong>, association loi 1901,{' '}
+          <LegalValue value={s.association_address} label="adresse du siège" multiline />.
+          <br />
+          Contact : <LegalValue value={email} label="email de contact" />
+          {s.association_phone && <> · {s.association_phone}</>}
+        </p>
+      </LegalSection>
+
+      <LegalSection title="Données collectées et finalités">
+        <p>Nous ne collectons que les données strictement nécessaires au fonctionnement du club :</p>
+        <div className="card" style={{ borderRadius: 6, padding: '6px 22px', marginTop: 4 }}>
+          <div style={row}>
+            <span style={cellTitle}>Demande d'adhésion</span>
+            <span>
+              Nom et prénom, fonction, entreprise, email professionnel, téléphone.
+              <br /><em>Finalité :</em> instruire votre demande et vous recontacter. <em>Base légale :</em> mesures précontractuelles à votre demande.
+            </span>
+          </div>
+          <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.
+            </span>
+          </div>
+          <div style={row}>
+            <span style={cellTitle}>Annuaire des membres</span>
+            <span>
+              Fiche entreprise : nom, secteur, dirigeant·e, coordonnées professionnelles, présentation, logo, photo du dirigeant·e.
+              <br /><em>Finalité :</em> annuaire public des entreprises membres. <em>Base légale :</em> exécution de l'adhésion ; la photo est publiée avec le consentement de la personne, qui peut la retirer à tout moment depuis son espace membre.
+            </span>
+          </div>
+          <div style={{ ...row, borderBottom: 'none' }}>
+            <span style={cellTitle}>Espace membre</span>
+            <span>
+              Email de connexion et mot de passe (stocké haché, jamais en clair).
+              <br /><em>Finalité :</em> accès sécurisé à votre espace. <em>Base légale :</em> exécution de l'adhésion.
+            </span>
+          </div>
+        </div>
+        <p style={{ fontSize: 13.5, color: 'var(--gray-light)' }}>
+          Aucune donnée n'est utilisée à des fins publicitaires, ni cédée ou vendue à des tiers.
+          Le site n'utilise aucun outil de mesure d'audience ni traceur tiers.
+        </p>
+      </LegalSection>
+
+      <LegalSection title="Durées de conservation">
+        <p>
+          Les données des membres sont conservées pendant la durée de l'adhésion, puis au maximum
+          3 ans après son terme (animation du réseau et relance d'adhésion), avant suppression.
+          Les demandes d'adhésion non abouties sont supprimées au plus tard 3 ans après leur dépôt.
+          Les inscriptions aux rencontres sont conservées le temps de la saison en cours puis archivées
+          à des fins de statistiques de fréquentation (nombre de participants uniquement).
+          Les comptes de connexion sont supprimés avec la fiche du membre.
+        </p>
+      </LegalSection>
+
+      <LegalSection title="Destinataires et hébergement">
+        <p>
+          Les données sont accessibles aux seuls administrateurs et modérateurs habilités de
+          l'association, soumis à une obligation de confidentialité. Les fiches de l'annuaire et les
+          photographies des rencontres sont, elles, publiées sur le site public.
+        </p>
+        <p>
+          Les données sont hébergées par <LegalValue value={s.association_host_name} label="nom de l'hébergeur" />,{' '}
+          <LegalValue value={s.association_host_address} label="adresse de l'hébergeur" />. Aucun transfert de
+          données hors de l'Union européenne n'est réalisé.
+        </p>
+      </LegalSection>
+
+      <LegalSection title="Cookies">
+        <p>
+          Le site dépose un unique cookie de session, strictement nécessaire à l'authentification à
+          l'espace membre et à l'administration (cookie technique httpOnly, supprimé à l'expiration de la
+          session). Conformément aux lignes directrices de la CNIL, ce cookie est exempté de consentement.
+          Aucun cookie publicitaire, de mesure d'audience ou de réseau social n'est utilisé — c'est
+          pourquoi ce site n'affiche pas de bandeau cookies.
+        </p>
+      </LegalSection>
+
+      <LegalSection title="Sécurité">
+        <p>
+          L'association met en œuvre des mesures techniques et organisationnelles adaptées : mots de
+          passe stockés sous forme hachée, connexions chiffrées, accès à l'administration restreint et
+          protégé, validation des fichiers déposés. En cas de violation de données susceptible
+          d'engendrer un risque pour vos droits, vous en serez informé·e conformément à la réglementation.
+        </p>
+      </LegalSection>
+
+      <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.
+        </p>
+      </LegalSection>
+
+      <LegalSection title="Vos droits">
+        <p>
+          Conformément au Règlement général sur la protection des données (RGPD) et à la loi
+          Informatique et Libertés, vous disposez d'un droit d'accès, de rectification, d'effacement,
+          de limitation, d'opposition et de portabilité sur vos données.
+        </p>
+        <p>
+          Pour exercer ces droits, contactez-nous à <LegalValue value={email} label="email de contact" />.
+          Une réponse vous sera apportée dans un délai d'un mois. Si vous estimez, après nous avoir
+          contactés, que vos droits ne sont pas respectés, vous pouvez adresser une réclamation à la
+          CNIL (<a href="https://www.cnil.fr" target="_blank" rel="noopener noreferrer" className="btn-link" style={{ fontSize: 'inherit' }}>www.cnil.fr</a> —
+          3 place de Fontenoy, TSA 80715, 75334 Paris Cedex 07).
+        </p>
+      </LegalSection>
+    </LegalLayout>
+  );
+}

web/src/pages/Home.jsx

@@ -157,6 +157,10 @@ export function InscriptionModal({ rencontre, onClose, onDone }) {
           <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>
         </form>
       )}
     </Modal>

web/src/pages/MentionsLegales.jsx

@@ -0,0 +1,117 @@
+import { Link } from 'react-router-dom';
+import { usePublicData } from '../lib/usePublic.js';
+import { associationSettings } from '../lib/siteSettings.js';
+
+// Shared bits for the two legal pages. Values come from the association
+// parameters maintained in the admin backend (Paramètres) ; an empty
+// value renders a visible "à compléter" marker so a missing legal mention
+// never fails silently.
+export function LegalValue({ value, label, multiline = false }) {
+  if (value) {
+    return multiline ? <span style={{ whiteSpace: 'pre-line' }}>{value}</span> : <>{value}</>;
+  }
+  return (
+    <span style={{ background: '#FBEFD9', color: '#8A5A22', padding: '1px 8px', borderRadius: 3, fontSize: '.88em', fontWeight: 600 }}>
+      à compléter — {label}
+    </span>
+  );
+}
+
+export function LegalLayout({ kicker, title, updated, children }) {
+  return (
+    <main>
+      <section style={{ background: '#fff', borderBottom: '1px solid var(--border)' }}>
+        <div className="container" style={{ maxWidth: 880, padding: '64px 32px 46px' }}>
+          <div className="kicker" style={{ marginBottom: 14 }}>{kicker}</div>
+          <h1 className="serif" style={{ fontWeight: 500, fontSize: 'clamp(32px, 4.5vw, 46px)', lineHeight: 1.08 }}>{title}</h1>
+          {updated && (
+            <div style={{ fontSize: 13, color: 'var(--gray-light)', marginTop: 14 }}>Dernière mise à jour : {updated}</div>
+          )}
+        </div>
+      </section>
+      <section style={{ background: 'var(--bg)', padding: '52px 0 96px' }}>
+        <div className="container" style={{ maxWidth: 880 }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>{children}</div>
+        </div>
+      </section>
+    </main>
+  );
+}
+
+export function LegalSection({ title, children }) {
+  return (
+    <section>
+      <h2 className="serif" style={{ fontSize: 24, fontWeight: 600, marginBottom: 14 }}>{title}</h2>
+      <div style={{ fontSize: 15, lineHeight: 1.75, color: 'var(--gray)', display: 'flex', flexDirection: 'column', gap: 10 }}>
+        {children}
+      </div>
+    </section>
+  );
+}
+
+export default function MentionsLegales() {
+  const { data } = usePublicData();
+  const s = associationSettings(data?.content);
+
+  return (
+    <LegalLayout kicker="Informations légales" title="Mentions légales" updated={s.legal_updated}>
+      <LegalSection title="Éditeur du site">
+        <p>
+          Le présent site est édité par <strong><LegalValue value={s.association_name} label="nom de l'association" /></strong>,
+          association régie par la loi du 1<sup>er</sup> juillet 1901 et le décret du 16 août 1901.
+        </p>
+        <p>
+          Siège social : <LegalValue value={s.association_address} label="adresse du siège" multiline />
+          <br />
+          Numéro RNA : <LegalValue value={s.association_rna} label="numéro RNA" />
+          {s.association_siret && (<><br />SIRET : {s.association_siret}</>)}
+          <br />
+          Email : <LegalValue value={s.association_email} label="email de contact" />
+          <br />
+          Téléphone : <LegalValue value={s.association_phone} label="téléphone" />
+        </p>
+      </LegalSection>
+
+      <LegalSection title="Directeur de la publication">
+        <p>
+          Le directeur de la publication est <LegalValue value={s.association_president} label="nom du président" />,
+          en qualité de président·e de l'association.
+        </p>
+      </LegalSection>
+
+      <LegalSection title="Hébergement">
+        <p>
+          Le site est hébergé par <LegalValue value={s.association_host_name} label="nom de l'hébergeur" />
+          <br />
+          Adresse : <LegalValue value={s.association_host_address} label="adresse de l'hébergeur" />
+          <br />
+          Téléphone : <LegalValue value={s.association_host_tel} label="téléphone de l'hébergeur" />
+        </p>
+      </LegalSection>
+
+      <LegalSection title="Propriété intellectuelle">
+        <p>
+          L'ensemble des contenus du site (textes, photographies, logos, identité visuelle) est la
+          propriété de l'association ou de ses partenaires, et est protégé par le droit de la propriété
+          intellectuelle. Toute reproduction, représentation ou diffusion, totale ou partielle, sans
+          autorisation écrite préalable est interdite. Les logos et marques des entreprises membres
+          demeurent la propriété de leurs titulaires respectifs.
+        </p>
+      </LegalSection>
+
+      <LegalSection title="Données personnelles">
+        <p>
+          Le traitement des données personnelles collectées sur ce site est décrit dans la{' '}
+          <Link to="/confidentialite" className="btn-link" style={{ fontSize: 'inherit' }}>politique de confidentialité</Link>.
+        </p>
+      </LegalSection>
+
+      <LegalSection title="Droit applicable">
+        <p>
+          Le présent site est soumis au droit français. En cas de litige et à défaut de résolution
+          amiable, les tribunaux français seront seuls compétents.
+        </p>
+      </LegalSection>
+    </LegalLayout>
+  );
+}