[V2] Intégration de la Représentation Équilibrée

[Viczei]

Contexte business

La Représentation Équilibrée (repeq, loi Rixain du 24/12/2021, art. L.1142-11 du Code du travail) impose aux entreprises de >= 1000 salariés (pendant 3 exercices consécutifs) de publier annuellement les écarts de représentation femmes/hommes parmi :

• les cadres dirigeants (art. L.3111-2)
• les membres des instances dirigeantes (art. L.23-12-1)

La V1 dispose déjà d'un parcours repeq fonctionnel mais disjoint de la déclaration d'index (URLs séparées, recherche publique dédiée, UX vieillissante, nombreux écarts RGAA recensés lors de l'audit Figma). La V2 unifie l'expérience : repeq devient une déclaration de premier rang accessible depuis mon-espace, dans le même pattern UX que la déclaration d'index rémunération V2 (panneau latéral d'entrée, funnel /etape/[step], persistance DB, transmission avec email + PDF).

Cette epic porte la feature complète côté déclaration. La recherche publique et la page info "À propos des écarts" sont hors scope pour cette itération.

Parcours utilisateur complet

1. Entrée — L'utilisateur connecté (ProConnect) consulte mon-espace. Pour chaque entreprise rattachée, un panneau latéral "Représentation équilibrée" (même pattern que le panneau rémunération) expose l'état courant (non commencée / en cours / transmise / modifiable jusqu'au JJ/MM/AAAA). Clic sur "Déclarer" / "Reprendre" / "Modifier" → entrée dans le funnel.
2. Vérification d'assujettissement (automatique, sans écran) — Au démarrage du funnel, contrôle auto sur les données entreprise :
   • Effectif >= REPEQ_MIN_HEADCOUNT (par défaut 1000)
   • Nombre d'exercices consécutifs d'assujettissement >= REPEQ_MIN_CONSECUTIVE_YEARS (par défaut 3)
   • Si NON assujettie → écran bloquant avec message explicatif, lien retour mon-espace, pas de possibilité de forcer la déclaration
   • Si assujettie → l'écran de vérification est skippé, entrée directe à l'étape 1
3. Étape 1 — Période de référence — Saisie de la date de fin de la période (DatePicker DSFR accessible, format attendu annoncé au lecteur d'écran). Mise en exergue de la période choisie.
4. Étape 2 — Écarts cadres dirigeants — Deux cas :
   • Calculable : saisie du nombre de femmes / nombre d'hommes → calcul automatique des pourcentages, annoncé au lecteur d'écran
   • Non calculable : choix d'un motif (libellés repris tels quels de master)
5. Étape 3 — Écarts instances dirigeantes — Mêmes cas que l'étape 2 (calculable / non calculable, libellés master). Le texte statique remplace l'ancienne liste déroulante à 1 choix.
6. Étape 4 — Récap & transmission — Récapitulatif + date et modalité de publication intégrées au récap (pas d'exergue redondante). Bouton "Transmettre" unique (max 1 primaire par page). Liens "Modifier" contextuels pour chaque section avec label explicite.
7. Transmission — Accusé de réception par email + PDF téléchargeable (migration techno V2, contenu identique master). Retour mon-espace avec statut "Transmise - modifiable jusqu'au JJ/MM/AAAA".
8. Modification avant deadline — Accès direct depuis le panneau latéral mon-espace (sans devoir rouvrir le récap d'abord). Deadline = repeqModificationDeadline (configurable, même pattern que decl1ModificationDeadline).
9. Après deadline — Panneau latéral en lecture seule, bouton "Modifier" désactivé/absent.
10. Consultation — Route /representation-equilibree/[siren]/[year] permet à l'utilisateur connecté de consulter le récap public de ses déclarations passées (lecture seule). Recherche publique hors scope.

Scénarios PO

S1 — Entrée depuis mon-espace (entreprise assujettie)

• Étant donné un utilisateur connecté avec une entreprise assujettie et aucune déclaration en cours
• Quand il clique sur "Déclarer" dans le panneau latéral "Représentation équilibrée"
• Alors il est redirigé vers l'étape 1 du funnel (l'écran d'assujettissement est skippé)

S2 — Blocage entreprise non-assujettie (< 1000 salariés)

• Étant donné un utilisateur connecté avec une entreprise < REPEQ_MIN_HEADCOUNT salariés
• Quand il tente d'entrer dans le funnel repeq
• Alors un écran bloquant affiche un message explicatif avec les seuils, aucun bouton pour forcer la déclaration, lien retour vers mon-espace

S3 — Blocage entreprise non-assujettie (< 3 exercices consécutifs)

• Étant donné un utilisateur connecté avec une entreprise >= REPEQ_MIN_HEADCOUNT mais < REPEQ_MIN_CONSECUTIVE_YEARS exercices consécutifs
• Quand il tente d'entrer dans le funnel repeq
• Alors le même écran bloquant s'affiche avec le message adapté

S4 — Étape 1 : saisie période de référence (DatePicker accessible)

• Étant donné l'utilisateur à l'étape 1
• Quand il ouvre le DatePicker DSFR pour la date de fin
• Alors le lecteur d'écran annonce le format attendu (JJ/MM/AAAA)
• Et après saisie, la période choisie est mise en exergue
• Et "Continuer" le mène à l'étape 2

S5 — Étape 2 : écarts cadres dirigeants (cas calculable)

• Étant donné l'utilisateur à l'étape 2, cas "calculable"
• Quand il saisit nombre de femmes et nombre d'hommes
• Alors les % calculés s'affichent et sont annoncés au lecteur d'écran via aria-live
• Et les champs % sont des champs calculés (lecture seule mais focusables)

S6 — Étape 2 : écarts cadres dirigeants (cas non calculable)

• Étant donné l'utilisateur à l'étape 2
• Quand il coche "non calculable" et sélectionne un motif (libellés master)
• Alors les champs de saisie F/H sont masqués et "Continuer" le mène à l'étape 3

S7 — Étape 3 : écarts instances dirigeantes (cas calculable)

• Mêmes règles que S5, appliquées au MID
• Le texte statique remplace l'ancienne liste déroulante à 1 choix

S8 — Étape 3 : écarts instances dirigeantes (cas non calculable)

• Mêmes règles que S6, appliquées au MID

S9 — Étape 4 : récap & transmission

• Étant donné l'utilisateur ayant rempli les étapes 1 à 3
• Quand il arrive sur l'étape 4
• Alors il voit le récap complet, avec la date et la modalité de publication intégrées au récap
• Et chaque section a un lien "Modifier" avec label explicite
• Et la hiérarchie de headings est correcte (<h3> pour les sections)
• Et un seul bouton primaire "Transmettre" est présent

S10 — Transmission : accusé email + PDF

• Étant donné l'utilisateur ayant cliqué "Transmettre"
• Quand la transmission réussit
• Alors un email d'accusé de réception est envoyé à l'utilisateur
• Et un PDF récap est téléchargeable depuis la page de confirmation
• Et le statut de la déclaration passe à "Transmise" dans mon-espace
• Note : contenu PDF identique à master, génération via la techno V2

S11 — Modification avant deadline (accès direct)

• Étant donné une déclaration transmise, deadline repeqModificationDeadline non dépassée
• Quand l'utilisateur clique "Modifier" dans le panneau latéral mon-espace
• Alors il entre directement à l'étape 1 du funnel (sans passer par le récap)
• Et ses réponses précédentes sont pré-remplies

S12 — Blocage modification après deadline

• Étant donné une déclaration transmise, deadline dépassée
• Quand l'utilisateur consulte son panneau latéral mon-espace
• Alors le statut affiche "Transmise" en lecture seule, aucun bouton "Modifier"
• Et toute tentative d'accès direct au funnel redirige vers la page récap en lecture seule

S13 — Consultation récap (utilisateur connecté, sa propre déclaration)

• Étant donné un utilisateur connecté ayant une déclaration transmise pour une année N
• Quand il navigue vers /representation-equilibree/[siren]/N
• Alors il voit le récap en lecture seule, avec option "Télécharger le PDF"

S14 — Accessibilité champs de calcul % (critique RGAA N°37)

• Étant donné un lecteur d'écran actif
• Quand l'utilisateur saisit nombre F / nombre H à l'étape 2 ou 3
• Alors les pourcentages calculés sont annoncés via aria-live ou équivalent
• Et les champs % sont focusables au clavier (accessibles à la lecture)
• Et les libellés sont reformulés pour lever l'ambiguïté

Points d'attention RGAA pour architect (à intégrer aux tickets)

Global (tous tickets UI)

• En-tête connectée (N°3bis) — Header DSFR V2 standard avec session ProConnect
• Info bulle pictogramme non DSFR (N°6) — composant tooltip DSFR
• Liens nouvelle fenêtre sans title (N°30) — <NewTabNotice /> systématiquement
• Champs obligatoires harmonisation (N°34) — convention DSFR unique

Étape 1

• Mise en exergue période (N°8) — composant callout/highlight DSFR après saisie
• DatePicker DSFR (N°9, N°36) — format attendu annoncé au lecteur d'écran (bloquant a11y)

Étape 2 + Étape 3

• Champs calcul % H/F (N°37 CRITIQUE) — aria-live, champs calculés focusables, libellés reformulés
• Liste déroulante MID à 1 choix (N°22) — texte statique à l'étape 3

Étape 4 (récap)

• Carte récap — typo & hiérarchie (N°10, N°11, N°12, N°13, N°13bis) — convention DSFR
• Sémantique <p> → <h3> (N°39) — sections du récap avec headings
• Mise en exergue récap à supprimer (N°16) — intégrer date/modalité publication dans le récap
• Liens "Modifier" vides (N°40) — labels explicites
• Boutons primaires trop nombreux (N°14bis P2) — max 1 primaire, "Transmettre" seul
• Bouton "Modifier" trop bas + accès via récap (N°15, N°17) — accès direct depuis mon-espace
• Bouton télécharger récap bug (N°17bis P2) — vérifier PDF

Bandeau global

• Bandeau d'alerte marges/titres (N°5, N°18, N°33) — marges DSFR fr-alert standard

Contraintes techniques

• Authentification obligatoire — protectedProcedure sur toutes les mutations ; SIREN lu en session (ProConnect)
• Année courante — via getCurrentYear() / getRepeqYear() depuis ~/modules/domain
• Seuils d'assujettissement configurables — constantes REPEQ_MIN_HEADCOUNT (1000) et REPEQ_MIN_CONSECUTIVE_YEARS (3) dans ~/modules/domain/constants.ts (à trancher par architect selon les patterns existants)
• Deadline de modification configurable — repeqModificationDeadline, même pattern que decl1ModificationDeadline
• Nouvelle table DB — à trancher par architect, indexée (siren, year) unique
• Zod schemas — dans ~/modules/representationEquilibree/schemas.ts, partagés forms + tRPC
• Pattern funnel — même que rémunération V2 : /representation-equilibree/etape/[step], DeclarationLayout, persistance à chaque étape
• Audit logging — nouvelles mutations → PROCEDURE_TO_ACTION + AUDIT_ACTIONS.*
• PDF V2 — migration techno : contenu identique master, génération via techno V2 (à trancher par architect selon ce qui est en place pour rémunération)
• Email d'accusé — template V2 à créer, même techno Brevo que rémunération

Référence à l'audit Figma

L'audit RGAA/UX des écrans repeq V1 a été réalisé sur Figma : https://www.figma.com/board/1wdScpvL7dgzl7hvOmxQ8e/AUDIT-DSFR_EGAPRO-Repr%C3%A9sentation-%C3%A9quilibr%C3%A9e?node-id=0-1&p=f&t=VRtJtn576cMuCr9i-0

Cet audit recense 23 points DSFR + 13 a11y + 3 UX, filtrés pour ne garder que ceux pertinents après la nouvelle archi V2. Cet audit est la source de vérité pour tous les écarts RGAA — chaque ticket UI référencera les N° correspondants.

[Viczei]

[Validation utilisateur] Epic validé

Epic refinée et validée avec l'utilisateur. Scénarios PO S1→S14, 5 questions tranchées, audit RGAA analysé. Prêt pour la phase designer (mockups panneau latéral mon-espace + 4 étapes funnel).

[Viczei]

Designer: proposition d'écrans

Mockups HTML DSFR statiques produits sous /tmp/egapro-mocks/epic-3287/ (hors repo, jamais committé). Tous les écrans ont été capturés en desktop (1280×800) et mobile (375×667) via Playwright MCP. Les screenshots sont hébergés sur la branche orpheline design-assets/epic-3287 (non mergeable, purement pour hébergement d'images).

Schéma de navigation

                        [mon-espace — panneau latéral]
                                    |
                                    v
                        Panneau (4 états A/B/C/D)
                                    |
   +--- Déclarer / Reprendre / Modifier (selon état) ---+
   |                                                     |
   v                                                     v
(vérification assujettissement auto, sans écran)     (consultation)
   |                                                     |
   +--[non assujettie]---> [non-assujetti.html] -----> retour mon-espace
   |
   +--[assujettie]---> Funnel 4 étapes
                             |
                             v
                    [step-1-periode.html]  <-- date de fin de période (DatePicker)
                             |
                             v
                    [step-2-cadres.html]   <-- écarts cadres dirigeants (radio Oui/Non, puis saisie F/H ou motif)
                             |
                             v
                    [step-3-instances.html] <-- écarts instances dirigeantes (motif = texte statique)
                             |
                             v
                    [step-4-recap.html]    <-- récap + publication intégrée + « Transmettre »
                             |
                             v
                    [transmission-success.html] --> retour mon-espace (statut Transmise)

   Consultation après coup : [consultation.html] sur /representation-equilibree/[siren]/[year]

Tous les écrans ci-dessous sont from scratch (pas de Figma d'écrans V2 fourni).

---

1. Panneau latéral mon-espace (4 états A/B/C/D)

Montre les 4 états côte à côte pour référence. État A (non commencée) avec alerte info + bouton « Déclarer ». État B (en cours) avec stepper DSFR 4 étapes + bouton « Reprendre ». État C (transmise, modifiable) avec alert success + deadline + lien download PDF + deux boutons (« Modifier » primaire, « Consulter » secondaire). État D (lecture seule) avec alerte info + download PDF + bouton « Consulter » unique.

Desktop

Mobile

---

2. Écran bloquant non-assujetti

Bannière entreprise en haut, fr-alert--info avec les deux critères (1000 salariés, 3 exercices), tableau comparatif « seuil requis / votre entreprise », message rassurant sur la vérification automatique, deux boutons retour (« Retour à mon espace » primaire, « En savoir plus » secondaire avec NewTabNotice).

Desktop

Mobile

---

3. Étape 1 — Période de référence

Stepper 1/4, fr-highlight bleu (mise en exergue) avec l'année de déclaration, champ DatePicker DSFR natif (<input type="date">) avec fr-hint-text annonçant le format attendu (N°9/N°36), bouton secondaire « Sélectionner la fin de l'année civile ».

Desktop

Mobile

---

4. Étape 2 — Écarts cadres dirigeants

Stepper 2/4, callout DSFR avec définition légale (art. L.3111-2), fieldset radio « calculable Oui/Non ». Cas calculable : saisie F/H + affichage pourcentages calculés dans un conteneur aria-live="polite" aria-atomic="true" (N°37 CRITIQUE). Cas non-calculable : fieldset radio avec les 2 motifs (libellés master). Les deux cas sont affichés l'un à côté de l'autre (un caché par hidden en HTML statique) à titre de référence design.

Desktop

Mobile

---

5. Étape 3 — Écarts instances dirigeantes

Stepper 3/4, callout DSFR avec définition légale (art. L.23-12-1), fieldset radio « calculable Oui/Non ». Point clé : pour le cas non-calculable, le motif unique (« Il n'y a aucune instance dirigeante ») est affiché en fr-highlight fr-highlight--grey + phrase explicative, pas de dropdown (règle N°22).

Desktop

Mobile

---

6. Étape 4 — Récap & transmission

Stepper 4/4, 4 sections <h2> (Période / Cadres / Instances / Publication), chaque section avec un lien « Modifier X » explicite et contextualisé (N°40), <dl> avec tokens DSFR pour les valeurs, champs de publication (date + radio site web + URL/modalités) intégrés dans le récap (N°16), alerte info rappelant les obligations CSE et publication, un seul bouton primaire « Transmettre la déclaration » + un secondaire « Précédent » (N°14bis).

Desktop

Mobile

---

7. Page transmission réussie

Alerte success avec confirmation d'email, <dl> avec numéro de transmission / date / année / modifiable jusqu'au, callout DSFR avec bouton download PDF (N°17bis), liste d'étapes suivantes (« Et maintenant ? »), deux boutons retour.

Desktop

Mobile

---

8. Page consultation (lecture seule)

Bouton download PDF en haut à droite, alerte info si deadline dépassée, 5 sections <h2> en lecture seule (Période / Cadres / Instances / Publication / Transmission) avec <dl> pour l'affichage des données, URL de publication avec NewTabNotice, bouton retour.

Desktop

Mobile

---

Composants partagés (réutilisés entre écrans)

• CompanyBanner (bandeau entreprise) — déjà existant dans ~/modules/declaration-remuneration/shared/. Réutilisable tel quel pour le funnel repeq, le récap et la consultation.
• DeclarationLayout — wrapper avec CompanyBanner + <main> centré. À adapter (ou généraliser) pour le funnel repeq.
• Stepper DSFR — 4 étapes au lieu de 6 pour rémunération. Composant DSFR natif fr-stepper (pas de composant React custom).
• Breadcrumb — via ~/modules/layout.
• NewTabNotice — via ~/modules/layout, pour tout lien target="_blank" (visible dans consultation.html sur l'URL de publication).
• Side panel — même pattern que DeclarationProcessPanel dans ~/modules/my-space. À dupliquer ou généraliser via un composant RepresentationProcessPanel.

---

Décisions design notables

1. Radios + texte statique pour le MID non-calculable — comme le motif unique « Il n'y a aucune instance dirigeante » rend la liste déroulante absurde (N°22), j'ai remplacé par un fr-highlight grisé avec le texte statique et une phrase explicative. Pas de choix à faire pour l'utilisateur : en cochant « Non calculable », il valide implicitement le motif.
2. Radios verticales au lieu d'horizontales pour « Calculable Oui/Non » — meilleure a11y mobile (target sizes) et cohérence avec les autres fieldsets du funnel rémunération V2. À trancher par l'architect si besoin de rester fidèle à V1.
3. Publication intégrée au récap (étape 4) — conformément à l'epic : V1 avait une étape dédiée avant validation, V2 fusionne date/modalités dans le récap pour réduire la friction et supprimer l'exergue redondante (N°16). Les champs de publication restent éditables directement dans le récap.
4. aria-live="polite" aria-atomic="true" sur le groupe des % calculés — approche choisie : un seul conteneur englobant les 2 champs, plutôt que 2 aria-live séparés. Évite les doubles annonces au lecteur d'écran quand femmes ET hommes changent simultanément.
5. Callout DSFR avec définition légale à chaque étape 2/3 — plutôt qu'un tooltip (N°6 : tooltips custom non DSFR). Visible par défaut, plus pédagogique, conforme a11y.
6. État C du panneau latéral avec 2 boutons (« Modifier » primaire + « Consulter » secondaire) — séparation claire : modification (entrée au step 1) vs consultation (récap lecture seule). Accès direct à l'étape 1 sans passer par le récap (N°15, N°17).
7. Bandeau entreprise identique à rémunération V2 — pattern de cohérence forte, réutilisation directe du composant CompanyBanner existant.
8. Pas de header/footer dans les mockups — ils seront fournis par RootLayout. Le mockup ne montre que la zone « main content » propre au funnel.
9. <input type="date"> natif — pas de custom date picker React. Le navigateur annonce automatiquement le format via locale + nous le redondons dans fr-hint-text (N°9/N°36). L'architect pourra confirmer le choix au moment du ticket.

---

Annexe — chemins locaux (pour pipeline code-dev / design-validator)

• HTML: /tmp/egapro-mocks/epic-3287/*.html
• Screenshots: /tmp/egapro-mocks/epic-3287/screenshots/*.png

Questions à trancher

Les 4 questions initiales ont été tranchées dans le commentaire Décisions finalisées.

[Viczei]

Designer: décisions finalisées

Réponses de l'utilisateur aux 4 questions posées dans le commentaire précédent :

1. Bannière « Existence d'un CSE » : conservée dans la bannière repeq (cohérence avec le flux rémunération, pas de différence de traitement). Mockups inchangés.
2. Date de publication (étape 4) : pré-remplie à la date du jour (divergence voulue vs V1). Mockup step-4-recap.html mis à jour, screenshots desktop + mobile regénérés.
3. CTA panneau mon-espace : « Reprendre » (état B — brouillon) / « Modifier » (état C — transmise) validés. Mockups inchangés.
4. Page de confirmation de transmission : page dédiée /representation-equilibree/transmise/[year] (option a, pattern master). Mockup transmission-success.html validé, inchangé.

Ajustements appliqués

• step-4-recap.html : champ publishDate désormais pré-rempli (value="2026-04-22") avec hint mis à jour (« Pré-remplie à la date du jour. Vous pouvez la modifier. »).
• Screenshots regénérés :
  • /tmp/egapro-mocks/epic-3287/screenshots/step-4-recap-desktop.png
  • /tmp/egapro-mocks/epic-3287/screenshots/step-4-recap-mobile.png

Tous les autres mockups et screenshots restent valides dans /tmp/egapro-mocks/epic-3287/ (jamais committés). Les chemins exacts sont listés dans le commentaire précédent.

[Validation utilisateur] Design validé