Charte graphique officielle DMV

Statut

Ce document est la référence graphique obligatoire DMV pour tous les développements frontend, humains et IA.

• Toute nouvelle interface doit s’y conformer.
• Toute IA utilisée sur l’écosystème DMV doit considérer ce document comme source de vérité prioritaire.
• En cas de conflit entre habitudes locales, propositions d’outil, génération IA et cette charte, cette charte prévaut.
• Toute dérogation doit être explicite, documentée et validée.

1. Introduction

Ce document est la baseline graphique DMV.

• Base d’audit: code source réel de dmv-public, dmv-workspace, et contrôle ponctuel de dmv-backoffice.
• Méthode: lecture des layouts, CSS globaux, composants UI, pages de référence, classes Tailwind, couleurs hardcodées et primitives de navigation.
• Principe: aucune valeur estimée.
• Règle de gouvernance: toute évolution future doit rester conforme à cette charte ou faire l’objet d’une décision explicite.

Portée normative

Ce document remplit deux fonctions distinctes:

• inventaire de l’existant détecté dans le code;
• définition du sous-ensemble autorisé qui constitue la vraie charte DMV.

Règle de lecture:

• quand une valeur est marquée autorisée, elle peut être réutilisée;
• quand une valeur est marquée tolérée, elle peut rester temporairement en place mais ne doit plus être introduite;
• quand une valeur est marquée interdite, elle doit être évitée dans tout nouveau code et planifiée en correction.

2. Philosophie UI DMV

Les patterns observés dans dmv-public et dmv-workspace convergent vers les principes suivants:

• mobile-first;
• surfaces claires, majoritairement blanches ou neutral-50;
• interface locale, simple, directe, lisible;
• dominance de cartes, listes, chips, tabs et headers sticky;
• densité modérée, proche app mobile plutôt que backoffice dense;
• hiérarchie visuelle portée par le bleu, les neutres, l’ambre et les bordures légères;
• faible profondeur visuelle: shadow-sm, shadow-md, shadow-lg ponctuel;
• composants finalisés pour action rapide, lecture et contribution.

Non détecté dans le code cible:

• thème corporate sombre;
• palette IA dédiée validée;
• design futuriste;
• gradients systématiques;
• style SaaS froid comme baseline.

Position de design à figer

DMV adopte officiellement les choix suivants:

• application locale et mobile-first;
• esthétique chaleureuse et simple;
• surfaces claires et lisibles;
• densité modérée;
• priorité à l’action, au contenu et à la clarté;
• refus d’un style SaaS froid, corporate ou futuriste.

2 bis. Sous-ensemble obligatoire

L’audit montre beaucoup de variantes, mais aussi un noyau récurrent. La charte DMV officielle retient ce noyau et interdit l’expansion implicite.

Niveaux de décision

Niveau	Définition
Autorisé	sous-ensemble officiel à réutiliser dans tout nouveau code
Toléré	existant admissible à court terme, mais à ne plus étendre
Interdit	non conforme à la baseline DMV

Décision de gouvernance

• Le code actuel ne définit pas encore une charte stable par simple répétition.
• La charte officielle DMV doit donc être un sous-ensemble resserré de l’existant.
• Cette charte ne cherche pas à refléter toutes les variantes du code.
• Elle cherche à figer les variantes qui doivent survivre.

Priorité d’interprétation mobile

Sur DMV, la version mobile a priorité sur la version desktop.

• En cas d’arbitrage entre confort desktop et efficacité mobile, la décision mobile prévaut.
• Le contenu principal du mur, en particulier les publications, doit exploiter au maximum la largeur disponible du téléphone.
• La charte desktop doit rester disciplinée, mais ne doit jamais dégrader l’efficacité mobile.

3. Typographie

Police principale

• Police principale: Ubuntu.
• Source: dmv-public/app/layout.tsx, dmv-workspace/app/layout.tsx.
• Import: next/font/google.
• Poids détectés: 300, 400, 500, 700.
• Styles détectés: normal, italic.

Fallbacks

• dmv-public/app/globals.css: var(--font-ubuntu), Arial, Helvetica, sans-serif.
• dmv-workspace/app/globals.css: --font-sans injecté par next/font; fallback explicite non redéfini dans ce fichier.

Classes observées

Tailles observées dans les composants auditables:

Classe	Taille exacte
text-[10px]	10 px
text-[11px]	11 px
text-xs	12 px
text-[0.8rem]	12.8 px
text-sm	14 px
text-base	16 px
text-lg	18 px
text-xl	20 px
text-2xl	24 px
text-3xl	30 px

Poids observés:

• font-medium = 500
• font-semibold = 600
• font-bold = 700

Autres classes typographiques observées:

• tracking-tight
• tracking-wide
• tracking-wider
• uppercase
• leading-none
• leading-tight
• leading-snug
• leading-relaxed

Norme typographique DMV

Autorisé

Usage	Classes autorisées
Texte secondaire / badge / meta	text-xs
Texte courant UI	text-sm
Texte courant prioritaire / input mobile	text-base
Titre de carte / sous-section	text-lg
Titre d’écran mobile	text-xl
Titre d’écran important desktop	text-2xl

Poids autorisés:

• font-medium
• font-semibold
• font-bold

Tracking autorisé:

• tracking-tight
• tracking-wide

Toléré

• text-3xl pour hero, page d’entrée ou cas exceptionnel déjà en place
• text-[10px]
• text-[11px]
• text-[0.8rem]

Interdit

• toute nouvelle taille arbitraire hors sous-ensemble ci-dessus;
• text-[9px], text-[12px], text-[13px], text-[14px], text-[15px], text-[16px], text-[20px], text-[22px] dans du nouveau code;
• multiplication de tailles spécifiques par composant.

Usages détectés

Usage	Classes observées	Sources
Titre écran	text-xl font-bold, sm:text-2xl, text-3xl font-bold	dmv-public/app/components/CityHeader.tsx, dmv-workspace/app/(workspace)/acteur/[slug]/acteur-layout-client.tsx, dmv-public/app/page.tsx
Titre section	text-base font-semibold, text-sm font-semibold	dmv-public/app/mon-espace/acteur/MonEspaceActeurClient.tsx, dmv-workspace/components/ui/card.tsx
Titre carte	text-sm font-medium, font-semibold	dmv-public/components/publications/PublicationCard.tsx, dmv-workspace/components/acteur/publications/publication-card.tsx
Texte courant	text-sm, text-base	usage transversal
Texte secondaire	text-xs text-neutral-400, text-sm text-neutral-500, text-muted-foreground	usage transversal
Badge	text-xs font-medium, text-[10px] font-semibold	dmv-workspace/components/ui/badge.tsx, dmv-workspace/app/(workspace)/acteur/[slug]/acteur-layout-client.tsx
Bouton	text-sm font-medium, text-xs font-medium, text-base font-semibold	dmv-public/lib/buttonStyles.ts, dmv-workspace/components/ui/button.tsx, dmv-public/app/components/HomeHero.tsx

4. Palette de couleurs

Méthode palette

• Couleurs hardcodées: relevées directement depuis les fichiers.
• Couleurs Tailwind: relevées depuis les classes utilisées et converties en hex sRGB à partir des tokens OKLCH exacts présents dans dmv-public/node_modules/tailwindcss/index.css.
• Couleurs workspace sémantiques: souvent définies en variables oklch(...) dans dmv-workspace/app/globals.css; hex non stocké directement dans le code.

Palette DMV principale détectée

Nom fonctionnel	Valeur exacte	Classes associées	Usage observé	Sources
Fond app clair	#ffffff	bg-white, bg-card, bg-popover	cartes, menus, modales, headers	dmv-public/app/globals.css, dmv-workspace/app/globals.css
Fond général doux	#fafafa	bg-neutral-50	fond global public, pages acteur/workspace	dmv-public/app/layout.tsx, dmv-workspace/app/(workspace)/acteur/[slug]/acteur-layout-client.tsx
Texte principal	#171717	text-neutral-900	titres, contenu principal	dmv-public/app/globals.css, classes transversales
Texte secondaire	#737373	text-neutral-500, text-muted-foreground	métadonnées, aides, états secondaires	usage transversal
Texte tertiaire	#a1a1a1	text-neutral-400	placeholders, détails, icônes passives	usage transversal
Bordure principale	#e5e5e5	border-neutral-200, border-border, border-input	cartes, tabs, headers, inputs	usage transversal
Bordure douce	#f5f5f5	border-neutral-100	séparateurs internes	usage transversal
Bleu DMV secondaire	#155dfc	bg-blue-600, text-blue-600	CTA actifs, onglets actifs public, liens	dmv-public/app/mon-espace/page.tsx, dmv-public/lib/buttonStyles.ts
Bleu DMV fort	#1447e6	text-blue-700	avatar, CTA texte, accents	dmv-public/app/components/HeaderUserButton.tsx, dmv-workspace/app/(workspace)/acteur/[slug]/acteur-layout-client.tsx
Bleu clair	#eff6ff	bg-blue-50	badges, chips, thèmes par défaut acteur	dmv-public/app/[commune]/acteur/[slug]/ActorsClient.tsx, dmv-workspace/app/(workspace)/acteur/[slug]/profil/page.tsx
Bleu clair 2	#dbeafe	bg-blue-100, dégradé secondaire	avatar fallback, hover, gradient profil	dmv-public/app/components/HeaderUserButton.tsx, dmv-workspace/app/(workspace)/acteur/[slug]/profil/page.tsx
Succès	#dcfce7 / #008236	bg-green-100, text-green-700, bg-green-50	confirmations, états positifs	dmv-public/app/contact/page.tsx, dmv-public/app/components/*
Avertissement / action chaude	#fffbeb, #fef3c6, #bb4d00	bg-amber-50, bg-amber-100, text-amber-700, text-amber-800, border-amber-200, border-amber-300	boutons “revendiquer”, alertes quota, badges hors quota	dmv-public/lib/buttonStyles.ts, dmv-public/components/espace/DocumentManager.tsx, dmv-workspace/app/(workspace)/acteur/[slug]/profil/page.tsx
Danger	#fef2f2, #e7000b	bg-red-50, text-red-600, text-destructive, border-red-200	suppression, erreurs, signalements	usage transversal
Neutre sombre footer	#0a0a0a à #171717	bg-neutral-950, bg-neutral-900	footer public, CTA hero	dmv-public/app/components/SiteFooter.tsx, dmv-public/app/components/HomeHero.tsx

Norme palette DMV

Autorisé

Rôle	Valeur de référence	Classes de référence
Fond principal	#fafafa	bg-neutral-50
Surface carte	#ffffff	bg-white, bg-card
Texte principal	#171717	text-neutral-900
Texte secondaire	#737373	text-neutral-500, text-muted-foreground
Bordure	#e5e5e5	border-neutral-200, border-border, border-input
Accent principal	#155dfc	bg-blue-600, text-blue-600
Accent fort	#1447e6	text-blue-700
Accent doux	#eff6ff	bg-blue-50
Accent doux 2	#dbeafe	bg-blue-100
Warning	#fffbeb / #bb4d00	bg-amber-50, text-amber-700
Success	#dcfce7 / #008236	bg-green-100, text-green-700
Danger	#fef2f2 / #e7000b	bg-red-50, text-red-600, text-destructive

Toléré

• couleurs de thème acteur #1E40AF et #EFF6FF comme défauts de personnalisation existants;
• #2563EB tant que les fallbacks existants ne sont pas harmonisés;
• #dbeafe dans les gradients déjà en place.
• des accents couleur ponctuels, si leur usage est sémantique, stable et cohérent pour une même signification produit;
• des badges ou libellés colorés, si la même famille visuelle est réutilisée partout pour le même objet métier.

Interdit

• toute nouvelle couleur hardcodée isolée sans token;
• toute couleur d’accent utilisée uniquement comme décoration locale sans signification claire;
• toute même signification produit exprimée par plusieurs familles de couleurs concurrentes;
• toute palette IA dédiée.

Couleurs hardcodées exactes détectées

Valeur exacte	Usage détecté	Sources
#ffffff	background global, texte sur accent	dmv-public/app/globals.css, dmv-workspace/app/(workspace)/acteur/[slug]/acteur-layout-client.tsx
#171717	foreground global public, CTA hero	dmv-public/app/globals.css, dmv-public/app/components/HomeHero.tsx
#2563EB	fallback accent espace acteur	dmv-workspace/app/(workspace)/acteur/[slug]/acteur-layout-client.tsx
#1E40AF	DEFAULT_COULEUR_TEXTE acteur	dmv-public/app/[commune]/acteur/[slug]/ActorsClient.tsx, dmv-workspace/app/(workspace)/acteur/[slug]/profil/page.tsx
#EFF6FF	DEFAULT_COULEUR_FOND acteur	dmv-public/app/[commune]/acteur/[slug]/ActorsClient.tsx, dmv-workspace/app/(workspace)/acteur/[slug]/profil/page.tsx
#dbeafe	seconde couleur de gradient profil	dmv-workspace/app/(workspace)/acteur/[slug]/profil/page.tsx
#9CA3AF	état achat / disabled ad hoc	dmv-public/app/mon-espace/acteur/MonEspaceActeurClient.tsx
#f59e0b, #fffbeb, #92400e	drag/drop tags et warning	dmv-workspace/app/(workspace)/acteur/[slug]/profil/page.tsx
#e5e7eb, #374151	état neutre ad hoc	dmv-workspace/app/(workspace)/acteur/[slug]/profil/page.tsx

Couleurs non conformes ou à valider

Valeur / classe	Détection	Statut
bg-purple-100 text-purple-700	dmv-public/app/[commune]/AnnuaireClient.tsx	accent couleur présent hors système sémantique centralisé
bg-violet-50 text-violet-700	dmv-public/app/[commune]/acteur/[slug]/ActorsClient.tsx	accent couleur à formaliser et à réutiliser de manière cohérente
text-violet-600 hover:text-violet-800	dmv-workspace/components/acteur/publications/publication-modal.tsx	accent couleur isolé appliqué à l’assistant sans règle partagée

5. Espacements

Échelle observée

Classe	Valeur exacte
p-1, px-1, py-1	4 px
p-1.5, px-1.5, py-1.5	6 px
p-2, px-2, py-2	8 px
p-2.5, px-2.5, py-2.5	10 px
p-3, px-3, py-3	12 px
p-4, px-4, py-4	16 px
p-5, px-5, py-5	20 px
p-6, px-6, py-6	24 px
p-8, px-8, py-8	32 px
p-10, px-10, py-10	40 px

Gaps les plus fréquents:

• gap-1, gap-1.5, gap-2, gap-2.5, gap-3, gap-4

Norme d’espacement DMV

Autorisé

• px-3, px-4
• py-2, py-2.5, py-3
• p-4, p-6
• gap-2, gap-3, gap-4
• space-y-2, space-y-3, space-y-4

Toléré

• p-3, p-5
• px-2.5
• py-1.5
• gap-1.5

Interdit

• toute nouvelle multiplication de paddings arbitraires;
• px-7, py-3.5 hors CTA hero déjà existant;
• valeurs spécifiques par écran sans justification système.

Patterns détectés

Pattern	Classes exactes	Sources
Padding page mobile public	px-3 py-4, px-4 py-4	dmv-public/app/mon-espace/page.tsx, dmv-public/app/components/*
Padding page desktop public	sm:px-4, sm:px-6, sm:py-6	dmv-public/app/components/CityHeader.tsx, dmv-public/app/mon-espace/page.tsx
Padding page workspace	px-4, sm:p-5, sm:p-6	dmv-workspace/app/(workspace)/acteur/[slug]/profil/page.tsx
Padding carte standard	p-4	très fréquent
Padding carte secondaire	p-5, p-6	hero, cartes pricing, écrans plus riches
Max width desktop public	max-w-2xl, max-w-5xl	headers, contenus, acteurs
Max width desktop workspace	max-w-5xl, max-w-md, max-w-sm	espace acteur, modales
Colonnes desktop	lg:grid-cols-[260px_1fr_260px], grid-cols-2, sm:grid-cols-2, grid-cols-3	dmv-public/app/mon-espace/page.tsx, dmv-workspace/app/*

6. Bordures et rayons

Rayons observés

Classe	Rayon exact
rounded	4 px
rounded-md	6 px
rounded-lg	8 px
rounded-xl	12 px
rounded-2xl	16 px
rounded-3xl	24 px
rounded-4xl	26 px via variable workspace
rounded-full	pill/cercle
rounded-none	0

Norme rayons DMV

Autorisé

• rounded-lg
• rounded-xl
• rounded-2xl
• rounded-full

Toléré

• rounded-md pour inputs ou miniatures compactes;
• rounded-none dans les sections mobile plein écran qui deviennent cartes en sm;
• rounded-3xl sur quelques écrans existants, sans extension.

Interdit

• toute nouvelle valeur arbitraire rounded-[...];
• rounded-4xl hors composant badge existant;
• multiplication de rayons différents dans un même composant.

Usages

• Cartes public: rounded-2xl, border border-neutral-200 ou border-neutral-100.
• Menus dropdown public: rounded-2xl border border-neutral-200 bg-white shadow-lg.
• Workspace primitives: rounded-xl sur Card, rounded-lg sur Button, Input, DropdownMenu.
• Onglets public mobile: bordure basse active border-b-2.
• Hero/logo acteur: rounded-2xl, parfois border-2 border-white/30.
• Avatars: rounded-full.
• Dropzone/documents: rounded-lg ou rounded-xl, border-dashed quand zone d’upload.

7. Ombres et profondeur

Ombres observées:

• shadow-sm
• shadow-md
• shadow-lg
• shadow-xl
• shadow-none
• shadow-xs côté workspace UI

Usages détectés:

• cartes ordinaires: shadow-sm;
• cartes interactives / hover: hover:shadow-md;
• menus et dropdowns: shadow-lg;
• modales / galerie: shadow-xl ou shadow-2xl;
• composants workspace de base: ring-1 ring-foreground/10 plus que shadow lourde.

Effets de profondeur complémentaires:

• backdrop-blur
• backdrop-blur-sm
• supports-backdrop-filter:backdrop-blur-xs
• bg-white/80, bg-white/90, bg-background/95

Règle constatée: DMV reste en ombres légères. La profondeur forte est ponctuelle.

Norme profondeur DMV

Autorisé

• shadow-sm
• shadow-md
• shadow-lg
• backdrop-blur-sm

Toléré

• shadow-xl pour modales et galeries;
• shadow-none pour sections mobile qui montent en carte sur desktop;
• ring-1 ring-foreground/10 côté primitives workspace.

Interdit

• ombres colorées;
• empilement de plusieurs effets lourds sur un même composant;
• style glassmorphism fort ou profondeur futuriste.

8. Boutons

Public: styles centralisés

Source: dmv-public/lib/buttonStyles.ts.

Type	Classes exactes
Primaire ambre	rounded-2xl border border-amber-300 bg-amber-50 px-4 py-2 text-sm font-medium text-amber-800 hover:bg-amber-100
Secondaire neutre	rounded-2xl border border-neutral-300 px-4 py-2 text-sm font-medium text-neutral-700 bg-white hover:bg-neutral-50
Tertiaire neutre	rounded-2xl border border-neutral-200 bg-white px-4 py-2 text-sm font-medium text-neutral-900 hover:bg-neutral-50
Lien	text-sm font-medium text-blue-600 hover:text-blue-700 hover:underline

Public: autres patterns

• Bouton header: rounded-xl border border-neutral-200 bg-white px-3 py-1.5 text-sm font-medium.
• CTA hero: rounded-2xl bg-neutral-900 px-7 py-3.5 text-base font-semibold text-white shadow-md hover:bg-neutral-700.
• Onglet mobile actif: font-medium text-blue-600 border-b-2 border-blue-600 -mb-px.
• Boutons assistant contributeur: rounded-lg px-3 py-1.5 text-xs font-medium text-white avec style={{ backgroundColor: actor.couleur_texte ?? DEFAULT_COULEUR_TEXTE }}.

Norme boutons DMV

Autorisé

Familles:

• primaire;
• secondaire;
• ghost;
• destructive;
• link;
• icon;

Tailles:

• texte principal: text-sm
• compact: text-xs
• hauteur: h-7, h-8, h-9

Rayons:

• rounded-lg pour boutons système;
• rounded-xl ou rounded-2xl pour CTA public visibles.

Padding recommandé:

• px-3 py-2
• px-4 py-2
• px-3 py-1.5

Toléré

• text-base sur CTA hero;
• styles ambre public existants;
• boutons thème acteur ad hoc existants tant qu’ils restent dans la palette DMV.

Interdit

• nouveau bouton violet;
• nouveau bouton gradient;
• nouveaux styles par écran sans variante commune;
• multiplication de plus de 5 familles de boutons.

Workspace: primitive Button

Source: dmv-workspace/components/ui/button.tsx.

Variants:

• default: bg-primary text-primary-foreground
• outline: border-border bg-background hover:bg-muted
• secondary: bg-secondary text-secondary-foreground
• ghost: hover:bg-muted hover:text-foreground
• destructive: bg-destructive/10 text-destructive hover:bg-destructive/20
• link: text-primary underline-offset-4 hover:underline

Sizes:

• default: h-8 px-2.5 text-sm
• xs: h-6 px-2 text-xs
• sm: h-7 px-2.5 text-[0.8rem]
• lg: h-9 px-2.5
• icon: size-8
• icon-xs: size-6
• icon-sm: size-7
• icon-lg: size-9

États détectés:

• focus-visible:border-ring
• focus-visible:ring-3 focus-visible:ring-ring/50
• active:not-aria-[haspopup]:translate-y-px
• disabled:pointer-events-none disabled:opacity-50

Boutons upload / appareil photo / D&D

• dmv-workspace/components/acteur/profil/profil-visuels.tsx: bouton logo variant="outline" size="sm" + icône Camera.
• dmv-public/components/espace/DocumentManager.tsx: zone drag sortable et boutons d’action ad hoc en rounded-lg / rounded-xl.
• dmv-workspace/app/(workspace)/acteur/[slug]/profil/page.tsx: upload documents avec zones et boutons theme-aware ad hoc.

Non trouvé

• bouton galerie dédié centralisé;
• composant bouton D&D partagé;
• composant bouton appareil photo partagé entre public et workspace.

9. Cartes

Carte publication public

Source principale: dmv-public/components/publications/PublicationCard.tsx.

• fond: bg-white
• bordure: border border-neutral-200
• rayon: rounded-2xl
• padding: p-4
• image: overflow-hidden, miniatures object-cover
• textes: text-sm, text-xs, text-neutral-900, text-neutral-500
• actions: menus ronds, signalement, favoris, suppression

Règle obligatoire mobile pour les publications

• Sur mobile, les publications du mur doivent être en pleine largeur utile.
• Il ne doit pas y avoir de gouttière latérale décorative entre la publication et le bord utile de l’écran.
• Les publications mobile ne doivent pas avoir de coins arrondis visibles sur leur conteneur principal.
• Les images de publication mobile doivent elles aussi être en pleine largeur utile.
• La logique mobile du mur est éditoriale et immersive, pas “carte flottante”.

Conséquence de charte:

• le pattern “carte blanche arrondie avec marges latérales” n’est pas la référence pour le mur mobile;
• ce pattern reste acceptable pour d’autres zones, mais pas comme règle du flux principal de publications mobile.

Carte publication workspace

Source: dmv-workspace/components/acteur/publications/publication-card.tsx.

• fond: bg-card
• bordure: border
• rayon: rounded-lg
• padding: p-4
• image: h-16 w-16 rounded-md object-cover
• badges: Badge variant selon statut

Carte acteur / espace / profil

Patterns dominants:

• public: border-b border-neutral-200 bg-white p-4 sm:rounded-2xl sm:border sm:p-6 sm:shadow-sm
• workspace: Card (rounded-xl bg-card py-4 ring-1 ring-foreground/10) et cartes ad hoc rounded-none sm:rounded-2xl border-y sm:border shadow-none sm:shadow-sm

Norme cartes DMV

Cartes de référence autorisées

Famille	Classes de référence
Carte public standard	rounded-2xl border border-neutral-200 bg-white p-4
Carte public enrichie	rounded-2xl border border-neutral-200 bg-white p-6
Carte workspace standard	rounded-xl bg-card ring-1 ring-foreground/10 py-4
Section mobile -> carte desktop	rounded-none border-y sm:rounded-2xl sm:border shadow-none sm:shadow-sm

Ajout obligatoire:

• Mur de publications mobile: conteneur pleine largeur, sans arrondi visible, sans marge décorative latérale.

Toléré

• rounded-lg border bg-card p-4 pour cartes compactes workspace;
• rounded-xl border bg-white p-3 pour documents et listes denses.

Interdit

• création d’une nouvelle famille de carte sans décision explicite;
• mélange non justifié de rounded-xl, rounded-2xl et rounded-[...] dans un même écran;
• cartes avec fonds colorés forts hors statut/warning/assistant validé.
• usage du pattern carte arrondie flottante pour le flux principal de publications mobile.

Carte avantage / stat / document

• stats: souvent bg-white, rounded-2xl, border, p-4 ou p-5
• document public: rounded-xl border bg-white p-3
• document workspace: rounded-xl border p-3 avec variante warning border-amber-200 bg-amber-50/50

Empty state

• public: rounded-2xl border border-neutral-100 bg-white p-8 text-center
• workspace: textes simples + cartes neutres; pas de composant empty state partagé centralisé

10. Navigation

Header ville public

Source: dmv-public/app/components/CityHeader.tsx.

• position: sticky top-0 z-30
• surface: border-b border-neutral-200 bg-white/90 backdrop-blur-sm
• grille: grid grid-cols-3 items-center
• hauteur réelle: pilotée par py-0, py-1.5, image h-12/w-12 puis sm:h-16/w-16

Header workspace

Source: dmv-workspace/components/layout/workspace-header.tsx.

• position: sticky top-0 z-40
• hauteur: h-14
• surface: border-b border-border bg-background/95 backdrop-blur
• padding horizontal: px-4

Navigation mobile public mon espace

Source: dmv-public/app/mon-espace/page.tsx.

• structure: flex border-b border-neutral-200
• onglet actif: font-medium text-blue-600 border-b-2 border-blue-600 -mb-px
• onglet inactif: text-neutral-500 hover:text-neutral-700

Règle mobile pour le carrousel

• Contrairement au flux de publications, le carrousel mobile ne doit pas être collé bord à bord.
• Le carrousel mobile doit conserver un léger espace latéral pour suggérer le défilement et la respiration.
• Cet espace doit rester faible.
• Le carrousel ne doit jamais paraître perdu dans l’écran, ni trop encadré.

Norme navigation DMV

Autorisé

• headers sticky;
• surface bg-white/90 ou bg-background/95 avec blur léger;
• onglet actif bleu ou accent du thème acteur;
• onglet inactif neutre;
• bottom nav mobile sobre, texte + icône monochromes.

Toléré

• accent de thème acteur sur la navigation d’espace acteur;
• offsets sticky spécifiques top-[45px] / top-[57px] tant qu’ils répondent à un vrai empilement de headers.

Interdit

• navigation principale en emoji;
• navigation principale multicolore;
• barres d’onglets avec couleurs aléatoires par écran.

Onglets acteur workspace

Source: dmv-workspace/app/(workspace)/acteur/[slug]/acteur-layout-client.tsx.

• wrapper: sticky top-[45px] z-20 bg-white border-b border-neutral-200 shadow-sm sm:top-[57px]
• nav: flex max-w-5xl overflow-x-auto
• item actif: font-semibold + style={{ borderBottomColor: accent, color: accent }}
• item inactif: border-transparent text-neutral-500 hover:text-neutral-900 hover:bg-neutral-50
• taille: px-3 py-3 text-[13px]

Bottom navigation workspace

Source: dmv-workspace/components/layout/workspace-bottom-nav.tsx.

• position: fixed bottom-0 left-0 right-0 z-40
• hauteur: h-16
• surface: border-t border-border bg-background/95 backdrop-blur
• visibilité: md:hidden
• état actif: text-foreground, icône stroke-[2.5]
• état inactif: text-muted-foreground hover:text-foreground

Footer public

Source: dmv-public/app/components/SiteFooter.tsx.

• surface: border-t border-neutral-800 bg-neutral-950
• couleur texte: text-white/70, text-white/55, text-white/40
• padding: px-3 py-2 sm:px-4

11. Icônes

Librairies détectées

• lucide-react dans dmv-workspace
• SVG inline majoritaire dans dmv-public

Tailles observées

• h-3.5 w-3.5
• h-4 w-4
• h-5 w-5
• size-3
• size-3.5
• size-4
• size-5

Stroke widths observés

• strokeWidth={1.5}
• strokeWidth={1.75}
• strokeWidth={2}
• actif navigation workspace: stroke-[2.5]

Règle constatée

• style trait simple;
• monochrome;
• couleur héritée de currentColor;
• pas d’icônes multicolores aléatoires en navigation.

Norme icônes DMV

Autorisé

• SVG monochrome;
• currentColor;
• strokeWidth entre 1.5 et 2;
• tailles size-4, size-5, h-4 w-4, h-5 w-5.

Toléré

• stroke-[2.5] pour l’état actif de navigation mobile;
• emojis dans quelques empty states éditoriaux.

Interdit

• icônes illustratives multicolores en navigation ou actions principales;
• mélange de styles filled/outline sans logique;
• emoji comme système d’icône principal.

Exceptions

• emojis présents dans certains empty states et messages (✍️, 🚧, 🔒, ⏳).
• pas d’emoji détecté dans la navigation principale auditée.

12. Images, médias et documents

Bannière acteur

• public profil acteur: dégradé et/ou bannière + logo
• workspace profil acteur: upload bannière ad hoc, zone éditable
• classes repérées: h-28, h-40, sm:h-56, object-cover, rounded-lg, rounded-2xl

Dimensions de référence validées

Sources exactes:

• dmv-public/lib/storageActeurs.ts
• dmv-workspace/lib/storage/acteurs.ts

Dimensions validées pour les uploads acteur:

• logo: format carré
• bannière: format paysage large

Règle de charte:

• les usages frontend doivent se conformer à ces dimensions de référence;
• les aperçus, cadres et placeholders doivent respecter ces ratios;
• une bannière ne doit pas être traitée comme une simple image libre;
• un logo ne doit pas être traité comme une vignette rectangulaire quelconque.

Logo acteur

• public: rounded-full ou rounded-xl selon contexte
• workspace visuels: Avatar className="size-16 border"

Règle de charte pour bannière et logo

• La bannière doit garder un ratio de couverture stable sur tous les points de contact.
• Le logo doit garder une logique carrée stable.
• Toute variation future sur ces dimensions doit partir de la source de vérité de stockage, pas d’une décision visuelle locale.

Image publication

• public et workspace: object-cover, dimensions fixes compactes, cards blanches

Documents / drag-and-drop

Sources: dmv-public/components/espace/DocumentManager.tsx, dmv-workspace/app/(workspace)/acteur/[slug]/profil/page.tsx.

• document item: rounded-xl border bg-white p-3
• hors quota: border-amber-200 bg-amber-50/50
• miniature: h-12 w-12 rounded-lg bg-neutral-100
• zone d’upload workspace visuels: border-2 border-dashed border-border bg-muted

Quota documents

• affichage workspace profil: compteur, barre de progression et message quota
• barre: h-full rounded-full transition-all, bg-blue-500 ou bg-amber-400

13. Formulaires et champs

Public

Patterns dominants:

• rounded-xl border border-neutral-200 px-3 py-2 text-sm outline-none focus:border-neutral-400
• recherche header: bg-transparent text-sm text-neutral-900 placeholder:text-neutral-400 outline-none
• textarea publication: min-h-[120px] w-full resize-none border-0 text-sm outline-none

Norme formulaires DMV

Autorisé

• text-sm comme taille standard de champ;
• text-base pour champs mobiles exposés au clavier iOS;
• rounded-lg, rounded-xl, rounded-md selon densité;
• bordure légère + focus bleu/neutre.

Toléré

• shadow-sm sur formulaires workspace ad hoc;
• border-0 pour certaines zones éditoriales de composition.

Interdit

• nouvelles variantes de champ par page;
• nouveaux placeholders colorés hors neutres;
• focus violets ou expérimentaux.

Workspace primitives

Sources: dmv-workspace/components/ui/input.tsx, composants pages.

• input: h-8 w-full rounded-lg border border-input bg-transparent px-2.5 py-1 text-base md:text-sm
• focus: focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50
• disabled: disabled:bg-input/50 disabled:opacity-50
• erreurs: aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20

Champs ad hoc workspace

Très utilisés:

• w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm
• resize-none
• placeholder:text-muted-foreground

Champs couleur

• type="color" avec className="h-9 w-10 cursor-pointer rounded border border-input p-0.5"

14. Badges et statuts

Workspace publication

Source: dmv-workspace/components/acteur/publications/publication-card.tsx.

Mapping détecté:

Statut	Label	Variant
pending	En attente	secondary
approved	Approuvé	outline
published	Publié	default
reported	Signalé	destructive
hidden	Masqué	secondary
rejected	Rejeté	destructive

Badge générique workspace

Source: dmv-workspace/components/ui/badge.tsx.

• taille: h-5
• padding: px-2 py-0.5
• rayon: rounded-4xl
• typo: text-xs font-medium

Norme badges DMV

Autorisé

• text-xs
• rounded-full ou rounded-4xl
• statuts neutre / success / warning / danger / outline

Toléré

• text-[10px] pour badge superposé sur hero acteur;
• badges de plan existants.

Interdit

• nouveaux badges violets;
• nouveaux badges très saturés non reliés à un statut produit réel.

Badges ad hoc

• Vérifié acteur: text-[10px] font-semibold px-1.5 py-0.5 rounded-full border border-white/30 bg-white/20
• Hors quota: rounded-full bg-amber-100 px-1.5 py-0.5 text-xs text-amber-700
• Plans offre: badge ad hoc text-xs font-semibold px-2.5 py-1 rounded-full

Non trouvé

• système centralisé de badge “ouvert/fermé”, “propriétaire/gestionnaire”, “visible/invisible” commun aux deux frontends

15. Responsive

Breakpoints détectés

Aucune surcharge détectée dans dmv-public. dmv-backoffice/tailwind.config.js ne surcharge pas les breakpoints. Les préfixes utilisés correspondent donc aux défauts Tailwind:

• sm = 640 px
• md = 768 px
• lg = 1024 px

Patterns responsive observés

• mobile-first quasi systématique;
• sm:rounded-2xl, sm:border, sm:shadow-sm pour transformer des sections plein écran mobile en cartes desktop;
• md:hidden pour bottom nav workspace;
• lg:hidden / hidden lg:block pour navigation public “mon espace”;
• overflow-x-auto sur tabs acteur;
• headers sticky et offsets top-[45px], sm:top-[57px].

Règle responsive prioritaire mobile

• Le mur de publications mobile doit utiliser la largeur maximum utile.
• Les images de publication mobile doivent suivre la même logique.
• Le desktop peut recentrer, encadrer et aérer.
• Le mobile ne doit pas hériter mécaniquement de marges “desktopifiées”.

Norme responsive DMV

Autorisé

• mobile-first;
• carte pleine largeur mobile puis carte flottante desktop;
• sm, md, lg standards Tailwind uniquement;
• overflow-x-auto sur tabs si nécessaire.

Ajout obligatoire:

• publication mobile full-bleed utile;
• image de publication mobile full-bleed utile;
• carrousel mobile avec léger gutter seulement.

Interdit

• breakpoints custom localisés sans décision globale;
• desktop-first;
• duplication complète des composants mobile et desktop hors nécessité.
• marges latérales décoratives sur le flux principal de publications mobile;
• arrondis visibles sur les publications principales du mur mobile.

Règles spécifiques

• @media (max-width: 640px) dans dmv-public/app/globals.css: input, select, textarea forcés à font-size: 16px.
• search-input public: font-size: 16px !important.

16. Animations et transitions

Classes détectées:

• transition
• transition-colors
• transition-all
• transition-opacity
• duration-100
• duration-200
• ease-in-out
• animate-in
• animate-out
• fade-in-0
• fade-out-0
• zoom-in-95
• zoom-out-95
• slide-in-from-top-2
• slide-in-from-left-2
• slide-in-from-right-2
• slide-in-from-bottom-2
• animate-spin

Usages:

• hover et focus de base;
• dropdowns et dialogs workspace;
• loaders documents/PDF;
• transitions tabs/bottom nav;
• active buttons avec translate-y-px.

17. IA et assistant

Règle produit à figer

La règle cible demandée est:

• ne pas afficher “IA” comme argument marketing principal;
• utiliser “Assistant”;
• ne pas introduire de couleur IA dédiée;
• ne pas utiliser de style futuriste ou d’accent décoratif autonome;
• l’assistant suit la charte DMV standard.

Norme obligatoire

• Dans tout nouveau code, l’assistant s’appelle Assistant.
• IA peut exister dans des textes techniques ou quotas, mais pas comme promesse visuelle ou marketing principale.
• L’assistant utilise les mêmes couleurs que le reste de DMV.
• Aucun accent couleur spécifique ne doit être réservé à l’assistant s’il n’existe pas déjà comme code sémantique produit partagé.

Détections non conformes

• dmv-workspace/components/acteur/publications/publication-modal.tsx: bouton Améliorer avec l'IA en text-violet-600 hover:text-violet-800.
• dmv-public/app/mon-espace/acteur/MonEspaceActeurClient.tsx: section correctement nommée ✨ Assistant, mais plusieurs messages parlent de crédits IA.

Conclusion d’audit:

• la dénomination “Assistant” existe déjà;
• la dénomination “IA” subsiste dans plusieurs microcopies;
• un accent couleur explicite est présent sans règle sémantique centralisée.

18. Sécurité / confidentialité UI

Détections produit/UI:

• confirmations de suppression présentes via confirm(...) ou window.confirm(...);
• affichage conditionnel de certains éléments selon rôle/session (user_acteurs, users_roles, isOwner);
• téléphone et email affichés côté fiche acteur selon contexte;
• backoffice standard non audité comme source de charte principale;
• actions sensibles explicites: suppression publication, suppression document, déconnexion.

Non trouvé dans cet audit statique:

• composant centralisé de confirmation destructrice commun public/workspace;
• politique UI centralisée de masquage systématique email/téléphone.

19. Règles interdites

À figer à partir de l’audit:

• pas de thème IA futuriste;
• pas de gradient arbitraire hors cas explicitement validés;
• pas de nouvelle police;
• pas de couleurs hardcodées isolées sans justification;
• pas de composants visuellement hors palette validée ni hors système sémantique partagé;
• pas de tableaux administratifs comme interface finale par défaut.

20. Tokens recommandés

Tokens actuels détectés

• --background
• --foreground
• --font-ubuntu / --font-sans
• --primary
• --primary-foreground
• --secondary
• --muted
• --muted-foreground
• --border
• --input
• --ring
• --card
• --popover
• --destructive
• --radius

Tokens à créer

Centralisation future recommandée, sans application dans cette passe:

• --dmv-primary
• --dmv-primary-strong
• --dmv-primary-soft
• --dmv-bg
• --dmv-card
• --dmv-text
• --dmv-muted
• --dmv-border
• --dmv-success
• --dmv-warning
• --dmv-danger
• --dmv-actor-theme-text
• --dmv-actor-theme-bg

Décision de centralisation

Les futurs développements doivent converger vers:

• une palette DMV centralisée;
• une échelle typo DMV centralisée;
• une échelle de rayons DMV centralisée;
• une grille de spacing DMV centralisée;
• un petit nombre de variantes de cartes et boutons.

Règle:

• aucun nouveau token implicite ne doit être ajouté directement dans un composant;
• tout nouveau besoin récurrent doit d’abord être discuté au niveau de cette charte.

Mapping Tailwind recommandé

Token recommandé	Valeur détectée de départ
--dmv-primary	#155dfc / blue-600
--dmv-primary-strong	#1447e6 / blue-700
--dmv-primary-soft	#eff6ff / blue-50
--dmv-bg	#fafafa / neutral-50
--dmv-card	#ffffff
--dmv-text	#171717 / neutral-900
--dmv-muted	#737373 / neutral-500
--dmv-border	#e5e5e5 / neutral-200
--dmv-success	#dcfce7 + #008236
--dmv-warning	#fffbeb + #bb4d00
--dmv-danger	#fef2f2 + #e7000b

21. Non-conformités détectées

Valeur détectée	Fichier	Problème	Recommandation
bg-purple-100 text-purple-700	dmv-public/app/[commune]/AnnuaireClient.tsx	accent isolé non relié à une règle sémantique centralisée	supprimer, centraliser ou valider explicitement
bg-violet-50 text-violet-700	dmv-public/app/[commune]/acteur/[slug]/ActorsClient.tsx	accent à stabiliser au niveau système	conserver seulement si le même usage est repris partout pour le même objet métier
text-violet-600 hover:text-violet-800	dmv-workspace/components/acteur/publications/publication-modal.tsx	style assistant isolé	remplacer par style “Assistant” standard ou rattacher à un code sémantique partagé
linear-gradient(135deg, ${actor.couleur_fond ?? DEFAULT_COULEUR_FOND}, #dbeafe)	dmv-workspace/app/(workspace)/acteur/[slug]/profil/page.tsx	gradient arbitraire non tokenisé	valider ou retirer
bg-gradient-to-br from-blue-100 to-blue-200	dmv-public/app/[commune]/contributeur/[slug]/ContributeurClient.tsx	gradient hors baseline principale	valider ou harmoniser
couleurs inline multiples #f59e0b, #92400e, #e5e7eb, #374151, #9CA3AF	plusieurs pages acteur/contributeur	dispersion non centralisée	centraliser dans tokens
style hero acteur basé sur couleur_fond / couleur_texte libres	public + workspace acteur	risque de dérive forte	encadrer la personnalisation par palette ou validation
microcopies IA	public + workspace assistant	non conforme à la règle produit cible	normaliser vers “Assistant”

21 bis. Décisions normatives finales

Les décisions suivantes sont désormais la base obligatoire pour tous les devs et toutes les IA.

Typographie

• Police unique: Ubuntu
• Sous-ensemble par défaut: text-xs, text-sm, text-base, text-lg, text-xl, text-2xl
• text-3xl réservé aux écrans hero ou landing
• nouvelles tailles arbitraires interdites

Couleurs

• Palette officielle: neutres + bleu DMV + ambre + rouge + vert
• des accents couleur sont autorisés s’ils sont ponctuels, justifiés et systématiquement associés à la même signification produit
• pas de nouvelle couleur hardcodée sans token validé

Espacements

• Base officielle: p-4, p-6, px-3, px-4, py-2, py-2.5, gap-2, gap-3, gap-4
• nouvelles tailles d’espacement arbitraires à éviter

Rayons

• Base officielle: rounded-lg, rounded-xl, rounded-2xl, rounded-full
• rounded-[...] interdit dans le nouveau code

Ombres

• Base officielle: shadow-sm, shadow-md, shadow-lg
• shadow-xl réservé aux modales et galeries

Cartes

• Carte public de référence: rounded-2xl border border-neutral-200 bg-white p-4
• Carte workspace de référence: rounded-xl bg-card ring-1 ring-foreground/10 py-4

Boutons

• 5 familles maximum: primaire, secondaire, ghost, destructive, link
• pas de style local supplémentaire sans décision explicite

Assistant

• libellé prioritaire: Assistant
• aucun style violet
• aucun univers futuriste

22. Annexes techniques

Fichiers inspectés

• dmv-public/app/globals.css
• dmv-public/app/layout.tsx
• dmv-public/app/components/CityHeader.tsx
• dmv-public/app/components/MurVille.tsx
• dmv-public/app/components/HeaderUserButton.tsx
• dmv-public/app/components/SiteFooter.tsx
• dmv-public/components/publications/PublicationCard.tsx
• dmv-public/components/espace/DocumentManager.tsx
• dmv-public/components/minisite/DocumentGallery.tsx
• dmv-public/components/ui/Carousel.tsx
• dmv-public/lib/buttonStyles.ts
• dmv-public/app/[commune]/AnnuaireClient.tsx
• dmv-public/app/[commune]/acteur/[slug]/ActorsClient.tsx
• dmv-public/app/mon-espace/page.tsx
• dmv-public/app/mon-espace/acteur/MonEspaceActeurClient.tsx
• dmv-workspace/AGENTS.md
• dmv-workspace/app/globals.css
• dmv-workspace/app/layout.tsx
• dmv-workspace/components/ui/button.tsx
• dmv-workspace/components/ui/card.tsx
• dmv-workspace/components/ui/badge.tsx
• dmv-workspace/components/ui/input.tsx
• dmv-workspace/components/ui/dialog.tsx
• dmv-workspace/components/ui/dropdown-menu.tsx
• dmv-workspace/components/ui/tabs.tsx
• dmv-workspace/components/ui/avatar.tsx
• dmv-workspace/components/layout/workspace-header.tsx
• dmv-workspace/components/layout/workspace-bottom-nav.tsx
• dmv-workspace/components/acteur/publications/publication-card.tsx
• dmv-workspace/components/acteur/publications/publication-modal.tsx
• dmv-workspace/components/acteur/profil/profil-theme.tsx
• dmv-workspace/components/acteur/profil/profil-visuels.tsx
• dmv-workspace/app/(workspace)/acteur/[slug]/acteur-layout-client.tsx
• dmv-workspace/app/(workspace)/acteur/[slug]/profil/page.tsx
• dmv-backoffice/tailwind.config.js

Composants de référence retenus

• CityHeader
• MurVille
• PublicationCard public
• HeaderUserButton
• SiteFooter
• DocumentManager
• DocumentGallery
• Carousel
• Button, Card, Badge, Input, Tabs, Dialog, DropdownMenu, Avatar
• WorkspaceHeader
• WorkspaceBottomNav
• ActeurLayoutClient
• PublicationCard workspace
• PublicationModal
• ProfilTheme
• ProfilVisuels

Classes Tailwind les plus fréquentes

Audit de fréquence brut:

• public: text-sm, flex, text-xs, items-center, border, border-neutral-200, font-medium, rounded-xl, bg-white, text-neutral-500
• workspace: flex, text-sm, items-center, text-xs, border, text-muted-foreground, rounded-xl, rounded-lg, gap-3, bg-white

Commandes utilisées

• rg --files -g 'AGENTS.md' -g 'tailwind.config.*' -g 'globals.css' -g 'layout.tsx' ...
• find ... -name '*.tsx' -o -name '*.ts' -o -name '*.css'
• rg -n 'lucide-react|svg|violet|purple|gradient|#[0-9A-Fa-f]{3,8}' ...
• sed -n 'start,endp' ...
• node -e "require('tailwindcss/colors') ..."
• conversion locale OKLCH -> hex sRGB pour les tokens Tailwind v4

Limites de l’audit

• audit statique uniquement;
• aucune capture runtime ni inspection navigateur;
• aucune compilation CSS finale;
• aucune correction UI dans cette passe;
• dmv-backoffice seulement contrôlé à la marge, non retenu comme source principale de baseline.

23. Backlog de mise en conformité

Cette section liste les corrections à appliquer dans le code pour converger vers la charte. Elle sert de base de travail pour les prochaines passes.

Priorité P1 — flux principal mobile

dmv-public/components/publications/PublicationCard.tsx

Problèmes:

• la publication reste traitée comme une carte avec shadow-sm;
• le composant applique encore un léger débord latéral compensé (-mx-1) au lieu d’une vraie logique de pleine largeur maîtrisée;
• l’image et le contenu ne sont pas encore formalisés comme un flux mobile plein écran utile;
• le contenu interne garde un comportement de carte compacte sur mobile.

Correction attendue:

• faire du composant la référence du flux principal mobile;
• supprimer la logique visuelle de “petite carte flottante” sur mobile;
• conserver le comportement carte uniquement à partir du breakpoint desktop si nécessaire;
• vérifier que l’image de publication suit la même règle pleine largeur utile.

dmv-public/app/components/MurVille.tsx

Problèmes:

• le conteneur principal du flux garde un encadrement max-w-2xl avec padding latéral mobile;
• la liste des publications est rendue dans une logique de colonne centrée qui reste trop “desktopifiée”;
• le carousel “acteurs en avant” utilise itemWidth="100%", mais son wrapper doit rester volontairement légèrement encadré sur mobile, contrairement au flux de publications.

Correction attendue:

• distinguer explicitement le traitement du carrousel et celui du flux de publications;
• garder un léger gutter sur le carrousel mobile;
• supprimer le gutter décoratif sur le flux principal mobile;
• vérifier que la section “À la une” suit la même logique que le reste des publications mobile.

dmv-public/app/mon-espace/page.tsx

Problèmes:

• le mur contributeur est rendu dans un wrapper px-3 py-4;
• les publications réutilisent PublicationCard dans une colonne encore encadrée;
• l’ensemble reste trop proche d’un layout cartes classique sur mobile.

Correction attendue:

• faire converger le mur contributeur mobile vers la même règle que le mur public;
• conserver les marges latérales pour le layout global si nécessaire, mais pas pour le flux publication lui-même;
• vérifier que le composer et les tabs ne réintroduisent pas visuellement une carte centrale étroite.

Priorité P1 — écrans publication dans l’espace acteur public

dmv-public/app/mon-espace/acteur/MonEspaceActeurClient.tsx

Problèmes:

• la liste des publications d’espace acteur utilise encore des blocs type cartes / lignes arrondies;
• plusieurs sections mobile héritent d’un pattern border-b ... bg-white ... sm:rounded-2xl ... qui est cohérent pour des panneaux, mais pas pour le flux éditorial principal;
• présence de violet dans les badges événement;
• le wrapper général max-w-2xl px-4 reste trop encadré pour certains blocs mobile.

Correction attendue:

• distinguer les panneaux de gestion et le flux de publications;
• garder les cartes pour les panneaux de gestion, pas pour le flux éditorial mobile;
• supprimer le violet événement;
• revoir les wrappers mobile des zones publication, statistiques éditoriales et hero si elles doivent être full-width utile.

Priorité P1 — fiche acteur publique mobile

dmv-public/app/[commune]/acteur/[slug]/ActorsClient.tsx

Problèmes:

• le hero bannière est déjà proche de la cible mobile avec bannière pleine largeur utile;
• le wrapper principal garde encore un conteneur centré avec padding latéral;
• présence de violet sur certains badges;
• présence de gradient de fond sur la page acteur.

Correction attendue:

• conserver la logique pleine largeur de la bannière mobile;
• vérifier si le reste du flux acteur doit lui aussi bénéficier d’une largeur utile maximale sur mobile;
• supprimer le violet;
• décider si le gradient de page acteur reste toléré ou doit être retiré.

Priorité P2 — annuaire et listing mobile

dmv-public/app/[commune]/AnnuaireClient.tsx

Problèmes:

• les cartes annuaire utilisent un pattern arrondi flottant cohérent pour une liste, mais pas encore homogène avec la charte resserrée;
• le filtre mobile emploie encore des tailles de texte ad hoc;
• présence de purple pour les associations;
• la carte de liste reste assez “app générique”.

Correction attendue:

• remplacer le purple association;
• harmoniser les tailles de texte des filtres mobiles;
• décider si la liste annuaire mobile reste en cartes arrondies ou doit se rapprocher d’un pattern plus plat.

Priorité P2 — carrousels et mises en avant

dmv-public/components/ui/Carousel.tsx

Problèmes:

• le composant est générique mais la charte impose désormais une règle spécifique mobile: léger gutter, pas full-bleed total;
• risque qu’il soit réutilisé ailleurs sans respecter la nuance mobile.

Correction attendue:

• documenter dans le composant ou via props la différence entre flux plein écran et carrousel encadré;
• éviter qu’une IA réutilise le carrousel comme conteneur plein écran par défaut.

Priorité P2 — bannières et logos

dmv-public/lib/storageActeurs.ts

dmv-workspace/lib/storage/acteurs.ts

Constat:

• la source de vérité actuelle est cohérente;
• logo: format carré;
• bannière: format paysage stable.

Action attendue:

• aligner tous les aperçus, placeholders, wrappers et ratios frontend sur cette source de vérité;
• éviter toute réinterprétation locale de dimensions.

Priorité P3 — nettoyage transversal

Couleurs non conformes

Fichiers prioritaires:

• dmv-public/app/[commune]/AnnuaireClient.tsx
• dmv-public/app/[commune]/acteur/[slug]/ActorsClient.tsx
• dmv-public/app/mon-espace/acteur/MonEspaceActeurClient.tsx
• dmv-workspace/components/acteur/publications/publication-modal.tsx

Actions:

• supprimer violet / purple;
• normaliser l’assistant sur la palette DMV;
• réduire les hex isolés et styles inline non tokenisés.

Variantes de cartes et wrappers

Fichiers prioritaires:

• dmv-public/app/components/MurVille.tsx
• dmv-public/components/publications/PublicationCard.tsx
• dmv-public/app/mon-espace/page.tsx
• dmv-public/app/mon-espace/acteur/MonEspaceActeurClient.tsx
• dmv-workspace/app/(workspace)/acteur/[slug]/profil/page.tsx

Actions:

• unifier les familles de cartes;
• éviter les wrappers centrés trop étroits sur mobile;
• conserver l’aération desktop sans l’imposer au téléphone.

Ordre recommandé d’exécution

1. dmv-public/components/publications/PublicationCard.tsx
2. dmv-public/app/components/MurVille.tsx
3. dmv-public/app/mon-espace/page.tsx
4. dmv-public/app/mon-espace/acteur/MonEspaceActeurClient.tsx
5. dmv-public/app/[commune]/acteur/[slug]/ActorsClient.tsx
6. dmv-public/app/[commune]/AnnuaireClient.tsx
7. nettoyage palette / assistant / hex isolés

Critère d’acceptation

Une fois la conformité atteinte:

• le flux principal de publications mobile utilise toute la largeur utile;
• les images de publication mobile suivent la même règle;
• le carrousel mobile garde seulement un léger gutter;
• le desktop reste centré, lisible et non sur-étalé;
• aucun accent couleur isolé non rattaché à une règle produit ne subsiste;
• bannière et logo respectent partout leur ratio de référence.