Phase 4 PDD · UI

Catalogue des mockups Portail Communal

Pages-types statiques inter-connectées (HTML + CSS + JS vanilla + Lit 3 patterns) pour valider visuellement les décisions UI.md, COMPOSANTS.md et BRAND.md. Commune-test : Fourques 66300 (Pyrénées-Orientales, 1 198 Fourcatins·es). Données fictives mais réalistes. Posture rendu non-IA §8.32 · sobre institutionnel.
Itération 1 (13 mai 2026) : retours utilisateur intégrés (D1-D12 + Q1-Q8 + 9 bugs corrigés). Phase 4.4 mockups restants + features structurelles N1-N6 différées itération 2.

~30

Pages-types prévues

Mockups créés

~110

Composants pc-* cibles

Breakpoints visés

Public

Pages visibles sans connexion. Visiteur anonyme + Adhérent non-certifié. Indexées SEO. Mention LCEN art. 1-1 obligatoire.

✓ Créé

Accueil tenant public

Hero compact + KPIs k-anonymat seuil 5 + 6 cards modules + onglets vie commune + carte interactive + footer LCEN.

fourques66.portail-communal.fr/ ✓ Créé

Annuaire Établissements

Liste 12 établissements de Fourques · filtres types (Écoles/Mairie & équipements/Commerces/Associations) · grille photo + nom + meta.

/etablissements ✓ Créé

Fiche Établissement

Header type + galerie photos + description + horaires + carte mini + QR Code + tickets si Habitant gestionnaire.

/etablissements/<slug>-<id> ✓ Créé

Liste Votes citoyens

6 votes (3 en cours + 3 passés) · filtres temporels · cards avec badge statut + date + barre de progression résultat.

/votes À créer

Fiche Information non-Établissement

Chemin rando, parking libre, ligne de bus, lavoir.

/informations/<slug>-<id> ✓ Créé

Page Article

Fiche article 'Restauration chapelle Saint-Andiol' · hero photo + chapeau + corps Markdown 5 sections + tags + partage social + sidebar auteur + 3 articles liés.

/articles/<slug>-<id> ✓ Créé

Page Document (Délibération, Arrêté)

PV Conseil municipal 7 mai 2026 · visualiseur PDF placeholder + métadonnées (référence, date, empreinte SHA-256) + sceau eIDAS Yousign niveau 2 + actions download/print/share.

/documents/<slug>-<id> ✓ Créé

Page Événement

Fiche Fête de la musique 21 juin 2026 · hero photo + sidebar infos pratiques (date, lieu, organisateur, tarif, mini-carte) + programme horaire + actions ajout calendrier.

/evenements/<slug>-<id> ✓ Créé

Calendrier événements

Liste 8 événements de Fourques · filtres temporels (Tous/Passés/À venir/En cours) + organisateurs (Mairie/asso/commerçant) · cohérent COMPORTEMENTS §14.

/calendrier ✓ Créé

Articles & communiqués

Liste 12 actualités · filtres catégorie (Travaux/École/Cérémonie/Vie locale/Infos pratiques) · grille responsive 1/2/3 colonnes.

/articles ✓ Créé

Démarches administratives

12 démarches en ligne · filtres famille (État civil/Urbanisme/Vie quotidienne/Social) · liens Service-public.fr + FranceConnect.

/demarches ✓ Créé

Équipe municipale

Trombinoscope 11 élus Conseil municipal 2020-2026 + 6 employés communaux · filtres rôle (Maire/Adjoints/Conseillers/Employés).

/mairie ✓ Créé

Carte interactive publique

Leaflet OSM (placeholder) + toggle IGN Plan · sidebar filtres 5 calques (Écoles/Mairie/Commerces/Associations/Patrimoine) · 11 marqueurs spotting selon Tableau de granularité §6.

/carte ✓ Créé

Compteur en direct

Barres horizontales / verticales / camembert + SSE updates Mercure + mention « PV officiel fait foi ».

/compteurs/<slug> À créer

Mentions légales

LCEN art. 1-1 + sous-traitants obligatoires + DPO + délai réponse RGPD.

/mentions-legales À créer

Politique de confidentialité

RGPD art. 13/14 + durées conservation + droits art. 15-22 + bandeau cookies.

/politique-confidentialite À créer

Déclaration accessibilité RGAA AA

Conformité audit + contact accessibilité + plan d'amélioration daté.

/accessibilite À créer

À propos de la commune

Auto-remplie API INSEE + section libre Maire + équipe municipale trombinoscope.

/a-propos À créer

Mandat / Récolement public

Maire + Adjoints + Conseillers + dates mandat + lien archives départementales post-passation.

/mandat À créer

Newsletter inscription

Double opt-in RFC 8058 + désabonnement token cliqué depuis email.

/newsletter À créer

Status page

BetterStack natif stylé aux couleurs Portail Communal. Incidents + maintenance window.

status.portail-communal.fr

Authentifié Habitant

Pages connectées Habitant (Compte certifié résident / Adhérent / Habitant gestionnaire). Cohérent COMPORTEMENTS §13.11 sections dynamiques selon rôles.

À créer

Dashboard Habitant

Sections dynamiques selon rôles : mes communes adhérées + tickets émis + contributions + présences + bibliothèque MD.

/dashboard À créer

Profil + paramètres

Édition prénom/nom/libellé/téléphone + 2FA TOTP/FIDO2/SMS + codes récupération.

/profil À créer

Paramètres notifications

Opt-in par catégorie §12.3 + quiet hours + mode Loop digest §12.10.

/profil/notifications À créer

Confidentialité (cases §13.7)

Toggle stats anonymes + tracking clics newsletter.

/profil/confidentialite À créer

Bibliothèque MD personnelle

MD COMMUNE générés + TUTOs + Export RGPD + Groupes ZIP + re-génération.

/profil/bibliotheque À créer

Tickets émis (backlog perso)

Table paginée filtrable + transition d'état + relance possible + historique transferts.

/profil/tickets À créer

Contributions backlog

Liste lignes Créer/Modifier/Supprimer + statut + motif si rejeté.

/profil/contributions ✓ Créé

Compose Ticket (6 types unifié)

Wizard : type → destinataire → catégorie + tags + sujet + message + PJ max 25 Mo.

/tickets/composer À créer

Compose Contribution (spotting carte)

Sélecteur Créer/Modifier/Supprimer + carte interactive + photo + GPS auto/manuel.

/contributions/composer

Authentifié Mairie

Dashboard admin Mairie. Sidebar fixe modules adaptés rôle (§13.2) + zone principale dynamique. Wizard premier accès Maire 3 phases progressives (§13.5).

✓ Créé

Dashboard admin Maire

Sidebar fixe + zone principale dynamique + header libellé compte + cumul rôles UI §13.13.

/admin ✓ Créé

Wizard premier accès Maire

3 phases progressives §13.5 · Consentements → Apparence → Modules. Mode ?mode=modification (N6) pour rejouer sans perte.

/admin/wizard · ?mode=modification À créer

Paramètres Sécurité

Rôles & permissions §6.10 + Catégories tickets §3.17 + Routage + Documents internes.

/admin/parametres/securite À créer

Paramètres Visibilité (granularité §6)

Tableau granularité §6 + Liste Sensible §6.6 + Conservation Documents.

/admin/parametres/visibilite ✓ Créé

Paramètres Apparence (Maire seul)

Formulaire 4 sections · Identité visuelle (blason + drapeau + gentilé) + Couleurs WCAG temps réel + Hero + Sceau du Maire envelope encryption. CTA « Voir l'aperçu en direct » → sidebar flottante sur pages public.

/admin/parametres/apparence À créer

Paramètres Modules

Toggles activation Articles / Agenda / Établissements / Asso / Commerces / Newsletter / etc.

/admin/parametres/modules À créer

Paramètres Mandat

Dates + durée + Adjoints + Conseillers + trombinoscope + contrat.

/admin/parametres/mandat À créer

Tickets reçus

File globale par catégorie + filtres + recherche full-text + re-catégorisation §3.17.5.

/admin/tickets À créer

Compose Article

Éditeur Markdown + photo une + galerie + tags + catégorie + statut + preview live.

/admin/articles/composer À créer

Compose Document

Upload PDF + métadonnées + sous-catégorie §11.2 + signature électronique workflow.

/admin/documents/composer À créer

Compose Newsletter

Éditeur + segmentation + planning envoi + preview email rendu.

/admin/newsletter/composer À créer

Compose Événement

Date + lieu + description + galerie + Compteur activable + Présence configurable.

/admin/evenements/composer À créer

Inventaire matériel

Vue table + carte interactive + filtres types + détail item + QR Code + sortie d'inventaire + parc auto.

/admin/inventaire À créer

Agenda interne

Vue Kanban V1 + Gantt V2 + assignation agent + statut Terminée/Bloquée + templates récurrents.

/admin/agenda À créer

Mandat trombinoscope

Upload photos élus + libellés + ordre affichage.

/admin/mandat/trombinoscope À créer

Récolement workflow

Préparer → checklist → signer eIDAS qualifié → sceller Sceau du Maire → distribuer clé §7.14.

/admin/recolement À créer

Configuration Compteur en direct

Mode vote + valeurs nommées + visualisation + dates + délégation totale §5.8 élections.

/admin/compteurs/composer

Super Admin (DEEDAS)

Vue technique transverse Super Admin. Distinction stricte vs PDCM SASU (cohérent §16 PROJECT).

À créer

Tableau tenants

Liste + filtres + statut abonnement + santé technique.

/super-admin/tenants À créer

Provisionnement nouveau tenant

Création onboarding + Maire fondateur + démos.

/super-admin/provisionner À créer

Santé plateforme

SLO observé + erreurs GlitchTip + paliers infra + volumes BDD + queue pg-boss.

/super-admin/sante

Documentation projet

Documents structurants Phase 4 PDD (à rédiger en parallèle des mockups).

✓ Créé