---
suivi: 1471
date: 2026-09-07
sujet: Code couleur Historique Chronologique demande juridique
chantier: juridique / demandes
type: feature
statut: poussé
hash: 29014b87
fichiers:
  - resources/js/utils/juridiqueChronologieNature.js
  - resources/js/Pages/Juridique/Show.vue
  - public/build/
  - tests/Unit/JuridiqueChronologieCouleur1471SourceTest.php
  - database/data/journal_mises_a_jour_post_2026_06_12.php
  - docs/suivi/SUIVI_1471_chronologie_code_couleur.md
---

# SUIVI #1471 — Code couleur Historique Chronologique

## PROMPT ENVOYÉ

Option B (Robin) : badge coloré + barre verticale à gauche par nature
(`evenement` / `commentaire` / `piece_jointe`). Pas de fond teinté (C).
Pas d’orange (#1472). Pas de vert (action ERP). Lot purement visuel.

## BASE GIT

```
git log --oneline -1 origin/main
30c8865d chore(suivi): hash fiche #1470
```

## FICHES LUES

- **#1469** — structure chronologie, builder, `afficher_liste`, max-h 60vh ;
  ne pas toucher builder ni EntiteCommentairesPanel.
- **#1456** — Dialog aperçu + helper ; ne pas toucher DocumentPreviewDialog.
- **#1439 / #1447** — overflow-y-auto, pas overflow-x-hidden (#1271/#1444).
- **#1463** — pas de classes Tailwind inventées.

## MESURES ÉTAPE 1

1. **Rendu entrée (#1469)** dans `Show.vue` (~L846+) : `li` avec
   `rounded-md border border-[#E5E7EB] bg-[#FAFAF8]`, badge blanc
   `bg-white text-[#4B5563] ring-[#E5E7EB]`, icônes via
   `natureChronologieLabel` / `natureChronologieIcon` locaux ;
   `nature` consommée pour libellé/icône et branches template
   commentaire / pièce / événement.

2. **Palette existante** (hex relevés) :
   - Marque : navy `#1B2B4B`, gold `#C8973A`
   - Neutres fiche : `#FAFAF8`, `#E5E7EB`, `#6B7280`, `#4B5563`
   - Bleu statut a_qualifier : `#2563EB` / fond `#EFF6FF` / texte `#1E40AF`
   - Priorité élevé : amber `#D97706` — **évité** (proche orange #1472)
   - Vert action / validé : `#059669` — **évité**

3. **Mode couleurs** : classes Tailwind arbitraires `bg-[#RRGGBB]` /
   `text-[#…]` / `ring-[#…]` (aligné Show.vue / badges juridiques).

## TABLEAU DE MAPPING

| nature | libellé badge | icône | barre (hex) | badge texte / fond (hex) | cohérence |
|--------|---------------|-------|-------------|--------------------------|-----------|
| evenement | Événement | pi-history | #64748B | #475569 / #F1F5F9 | gris-bleu discret, proche slate UI |
| commentaire | Commentaire | pi-comment | #2563EB | #1E40AF / #EFF6FF | bleu a_qualifier / info |
| piece_jointe | Pièce jointe | pi-paperclip | #8B5E3C | #5C3D2E / #F3EBE3 | marron/terre cuite, pas vert ni orange |
| (inconnue) | Événement | pi-history | #64748B | #475569 / #F1F5F9 | FALLBACK = evenement |

## AVANT / APRÈS classes entrée

**AVANT (#1469)** :
`li` → `rounded-md border border-[#E5E7EB] bg-[#FAFAF8] px-3 py-2 text-sm`
badge → `inline-flex … rounded bg-white px-1.5 py-0.5 text-[#4B5563] ring-1 ring-[#E5E7EB]`

**APRÈS (#1471)** :
`li` → `flex overflow-hidden rounded-md border border-[#E5E7EB] bg-[#FAFAF8] text-sm`
+ barre `span.w-1.shrink-0.self-stretch` + `barClass` mapping
contenu → `div.min-w-0.flex-1.px-3.py-2`
badge → `inline-flex … rounded px-1.5 py-0.5 ring-1` + `badgeClass` mapping
(icônes inchangées via mapping unique)

## SYNTHÈSE

Mapping unique `juridiqueChronologieNature.js`. Show.vue uniquement.
Aucun PHP applicatif. EntiteCommentairesPanel / builder #1469 inchangés.
Journal #1469 mis à jour (même `code`). Rebuild Vite commités.

## DÉPLOIEMENT-TEST

```
git pull origin main
php artisan view:clear
php artisan journal:sync
```

Pas de migrate. Pas de `route:clear`. OPcache : **non nécessaire**
(aucun PHP applicatif modifié ; seul test Unit + journal data PHP).
`public/build/` déjà dans le commit — pas de npm sur OVH.

## LEÇON

Couleurs natures chronologie : un seul util JS ; option B barre+badge ;
orange réservé #1472 ; vert réservé actions ERP ; overflow-x-hidden interdit.