@mostajs/flotte-ui 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog — @mostajs/flotte-ui
+
+Format [Keep a Changelog](https://keepachangelog.com/fr/1.0.0/) · [SemVer](https://semver.org/lang/fr/).
+Auteur : Dr Hamid MADANI <drmdh@msn.com>
+
+## [0.1.0] — non publiée
+### Added
+- `construireTableau` et `rendreTableau` : l'écran ECR-16 de Guerway (indicateurs et variation, liste filtrée et
+  paginée, alertes et échéances, répartition par type, statuts, kilométrage sur six mois, véhicules par station,
+  top 5, actions rapides), sans script.
+- `construireFiche` et `rendreFiche` : fiche du véhicule, bandeau « peut partir », onglets en liens GET.
+- `exporterCsv`, `texte` et `TEXTES` (clés `flotte.ecran.*`), `KIT_DEFAUT` et `FLOTTE_CSS`. Le kit de
+  l'application, c'est-à-dire sa charte, remplace celui du module membre à membre.
+- Essais T-FUI-1 à 10 ; exemple `examples/verifier.mjs`. Rendu vérifié avec la charte de Guerway.

package/LICENSE

@@ -0,0 +1,15 @@
+@mostajs/flotte-ui
+Copyright (C) 2026 Dr Hamid MADANI <drmdh@msn.com>
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License as published by the Free
+Software Foundation, either version 3 of the License, or (at your option) any
+later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/agpl-3.0.html>.

package/README.md

@@ -1,3 +1,83 @@
-# Temporary Holding Version
+# @mostajs/flotte-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**Auteur** : Dr Hamid MADANI <drmdh@msn.com> · Licence AGPL-3.0-or-later
+
+Les écrans du carnet du parc ([`@mostajs/flotte`](../mosta-flotte)), en HTML rendu par le serveur, **sans React ni
+script**. Le module sert le même écran à Guerway et au SaaS « Carnet du parc ». Chacun l'habille de sa propre charte.
+
+- **Le tableau de bord** (écran ECR-16 de Guerway) :
+  - cinq indicateurs avec leur variation sur la période ;
+  - la liste filtrée et paginée, avec le statut, l'indicateur « document expiré » et la réponse « peut partir » du
+    jour ;
+  - les alertes et échéances ;
+  - la répartition par type, les statuts et le kilométrage sur six mois ;
+  - les véhicules par station, le top 5 et les actions rapides.
+- **La fiche du véhicule** :
+  - le bandeau « peut partir », ou ses motifs ;
+  - les onglets Informations, Documents, Entretiens, Affectations et Historique, chacun en lien GET ;
+  - le prochain entretien daté, y compris quand cette date est estimée au rythme du véhicule.
+
+L'écran se fait en deux temps :
+1. **construire** : lit l'API de `flotte` et produit une vue-modèle faite de codes ;
+2. **rendre** : une fonction pure qui produit le HTML.
+
+L'application garde son gabarit, son menu, ses routes et ses droits.
+
+```js
+import { construireTableau, rendreTableau, FLOTTE_CSS } from '@mostajs/flotte-ui';
+
+const vm = await construireTableau(flotte, {
+  declarations,                                   // celles données à createFlotte
+  date: '2026-10-24', filtres: req.query,          // q, type, statut, region, page, v (véhicule choisi), onglet
+  sites: { 'ALG-01': { libelle: 'Alger Centre', region: 'Centre' } },
+  conducteurs: (id) => ({ nom, telephone }),       // l'identifiant du conducteur est opaque pour flotte
+  perimetre: ['ALG-01'],                           // la console d'un bureau ; absent : tout le parc
+});
+const { titre, sousTitre, outils, corps } = rendreTableau(vm, {
+  kit,                                             // la charte de l'application ; absent : KIT_DEFAUT
+  t,                                               // sa traduction : clés flotte.ecran.* et flotte.<famille>.<code>
+  liens: { base: '/flotte', tournee: '/tournees/nouvelle' },
+  droits: { gerer: peut('flotte:gerer') },
+});
+// La page : votre gabarit (titre, sousTitre, outils) + `<style>${FLOTTE_CSS}</style>${corps}`
+```
+
+## Le kit
+
+Le kit reprend les signatures des composants de Guerway (`src/charte.mjs`), qui se branchent tels quels :
+
+| membre | signature |
+|---|---|
+| `kpi` | `({ teinte, icone, valeur, libelle, sous })` |
+| `badge` | `(texte, teinte, icone)` |
+| `carte` | `(titre, icone, corps, { droite, id })` |
+| `anneau` | `(segments, { unite })` |
+| `courbes` | `(libelles, series)` |
+| `icone` | `(nom, taille)` |
+| `alerte` | `(genre, texte)` |
+| `pagination` | `({ total, page, parPage, lien })` |
+| `classes` | `{ tableau, onglets, rapides, rapide, btn }` |
+
+Un membre absent est pris dans `KIT_DEFAUT`.
+
+## Langues
+
+Le module ne contient aucune chaîne en dur.
+- **Les textes de l'écran** passent par `texte(cle, t)` : l'application reçoit d'abord la clé `flotte.ecran.<cle>`.
+  Si elle ne la connaît pas, le français du module s'affiche.
+- **Les codes de la flotte** (statut, motif, type, échéance) passent par `libelle()` de `@mostajs/flotte`.
+
+## Ce que le module ne fait pas
+
+- Écrire ou décider : c'est `@mostajs/flotte`, qui porte toutes les règles.
+- Router, poser le menu ou vérifier les droits : c'est l'application. `droits.gerer` ne fait que masquer, le serveur
+  refuse.
+- Les formulaires d'écriture (nouveau véhicule, affectation, entretien, plein) : ils viendront en 0.2.0, une fois
+  les maquettes reçues (`Entreprise/GUERWAY/docs/L0/PROMPT-MAQUETTE-FLOTTE.md`).
+
+## Vérifier
+
+```bash
+npm test                      # T-FUI-1 à 10
+node examples/verifier.mjs    # écrit test-scripts/.out/exemple-flotte-ui.html (le parc de la maquette)
+```

package/llms.txt

@@ -0,0 +1,42 @@
+# @mostajs/flotte-ui — llms.txt
+
+RÔLE
+  Écrans HTML du carnet du parc (@mostajs/flotte), sans React ni script : tableau de bord ECR-16 de Guerway et fiche
+  du véhicule à onglets. Deux temps : construire (async, lit l'API de flotte → vue-modèle de CODES) puis rendre (pur,
+  vue-modèle → HTML, avec le kit et la traduction de l'application). N3, métier, forme « vue ».
+
+EXPORTS
+  construireTableau(flotte, opts) -> vm   opts : { declarations, date?, filtres?: { q, type, statut, region, page, v, onglet },
+      sites?: { code: { libelle, region } }, conducteurs?: objet|fonction id → { nom, telephone },
+      activite?: async (id, { du, au }) → { tournees, colis }, perimetre?: [sites], periodeJours? (30), parPage? (10 ; Infinity = tout),
+      alertesMax? (5) }
+    vm = { date, filtres, indicateurs: { vehicules, chauffeurs, enService, enMaintenance, documentsExpires } (n, part?, variation
+      { sens, pct|null, favorable }), liste: { lignes, total, page, pages, parPage }, options, alertes: { lignes, total, jours },
+      repartition, statuts, km: { mois, valeurs }, parSite, top, avecActivite, fiche }
+    ligne = { id, code, plaque, type, capacite: { kg, m3 }, site, region, conducteur, km, statut, documentExpire, depart }
+  construireFiche(flotte, id, { declarations, date?, sites?, conducteurs?, onglet? }) -> fiche
+    onglet ∈ ONGLETS (informations, documents, entretiens, affectations, historique) ; inconnu → informations
+  rendreTableau(vm, { kit?, t?, locale?, liens?: { base, nouveau?, modifier?(id), affecter?(id), planifier?(id), tournee?,
+      alertes?, export? }, droits?: { gerer }, declarations? }) -> { titre, sousTitre, outils, corps }
+  rendreFiche(fiche, mêmes opts + filtres?) -> HTML
+  exporterCsv(vm, opts?) -> CSV « ; » (construire avec parPage: Infinity)
+  TEXTES, texte(cle, t?, vars?)   t('flotte.ecran.<cle>') puis repli français
+  KIT_DEFAUT { icone, kpi, badge, carte, alerte, anneau, courbes, pagination, classes } ; FLOTTE_CSS (classes fl-*) ; COULEURS
+
+RÈGLES
+  - Aucune règle de flotte ici : expiré, prochain entretien, peut partir viennent du moteur. Seuls des agrégats
+    d'affichage (comptes, parts, variation à date − periodeJours rejouée sur l'historique, km par mois, top 5).
+  - Le texte cherche aussi le NOM du chauffeur (le moteur ne connaît que l'identifiant).
+  - « Document expiré » est un indicateur (pastille), jamais un statut.
+  - Une action n'apparaît que si son lien est fourni ; une action d'écriture, que si droits.gerer.
+
+PIÈGES
+  - Toute valeur est échappée ; titre et corps des cartes du kit reçoivent du HTML déjà sûr.
+  - Les nombres sont formatés par Intl (fr-FR : espace fine insécable U+202F) : en test, accepter [\s ].
+  - Dépend de @mostajs/flotte ^0.3.0 (vehicules()) en peerDependency : l'application fournit l'instance.
+
+EXEMPLE / TEST
+  examples/verifier.mjs   le parc de la maquette, page complète → test-scripts/.out/exemple-flotte-ui.html
+  test-scripts/unit/flotte-ui.test.mjs   T-FUI-1 à 10
+
+LICENCE AGPL-3.0-or-later · Auteur Dr Hamid MADANI <drmdh@msn.com>

package/package.json

@@ -1,6 +1,27 @@
 {
   "name": "@mostajs/flotte-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Écrans HTML du carnet du parc (@mostajs/flotte), sans React ni script : tableau de bord (indicateurs, liste filtrée, alertes et échéances, répartitions, kilométrage, véhicules par station, top 5, actions rapides) et fiche du véhicule à onglets. Vue-modèle lue dans l'API de flotte, rendue avec le kit de composants de l'application (sa charte) ou un kit sobre par défaut.",
+  "license": "AGPL-3.0-or-later",
+  "author": "Dr Hamid MADANI <drmdh@msn.com>",
+  "type": "module",
+  "main": "src/index.js",
+  "exports": { ".": "./src/index.js" },
+  "files": ["src", "llms.txt", "README.md", "CHANGELOG.md"],
+  "engines": { "node": ">=20" },
+  "scripts": { "test": "bash test-scripts/run-tests.sh" },
+  "keywords": ["mostajs", "flotte", "fleet", "fleet-management", "html", "server-side", "no-react", "dashboard"],
+  "repository": { "type": "git", "url": "https://github.com/apolocine/mosta-flotte-ui" },
+  "dependencies": { "@mostajs/app-shell-ui": "^0.3.0" },
+  "peerDependencies": { "@mostajs/flotte": "^0.3.0" },
+  "devDependencies": { "@mostajs/mjs-unit": "0.10.0" },
+  "mostajs": {
+    "niveau": "N3", "nature": "metier", "reutilisabilite": "mono-domaine", "depend_de": ["@mostajs/flotte", "@mostajs/app-shell-ui"],
+    "question": "Comment le chef de parc voit-il son parc, et chaque véhicule, sans React ?",
+    "forme": "vue",
+    "entites": [],
+    "verbes": ["construireTableau", "rendreTableau", "construireFiche", "rendreFiche", "exporterCsv"],
+    "interop": { "moteur": "@mostajs/flotte (vehicules, peutPartir, prochainsEntretiens, echeances, releves, affectations)", "primitives": "@mostajs/app-shell-ui (esc, pagination)", "charte": "kit de composants injecté par l'application" },
+    "ne_fait_pas": { "stocker, calculer une règle de flotte": "@mostajs/flotte", "gabarit, menu, routes": "l'application (ou @mostajs/app-shell-ui)", "droits": "l'application (droits.gerer)" }
+  }
+}

package/src/index.js

@@ -0,0 +1,9 @@
+// @mostajs/flotte-ui — écrans HTML du carnet du parc (@mostajs/flotte), sans React ni script.
+// Author: Dr Hamid MADANI <drmdh@msn.com> · AGPL-3.0-or-later
+//
+// Deux temps : CONSTRUIRE (async, lit l'API de flotte → vue-modèle de codes) puis RENDRE (pur, vue-modèle → HTML,
+// avec le kit et la langue de l'application). L'application garde son gabarit, son menu, ses routes et ses droits.
+export { construireTableau, construireFiche, ONGLETS } from './vue.js';
+export { rendreTableau, rendreFiche, exporterCsv } from './rendu.js';
+export { TEXTES, texte } from './textes.js';
+export { KIT_DEFAUT, FLOTTE_CSS, COULEURS } from './kit.js';

package/src/kit.js

@@ -0,0 +1,118 @@
+// @mostajs/flotte-ui — le kit de composants par défaut, et sa feuille de style.
+// Author: Dr Hamid MADANI <drmdh@msn.com> · AGPL-3.0-or-later
+//
+// L'application passe SON kit (sa charte : Guerway fournit kpi, badge, carte, anneau, courbes, icone, alerte de
+// src/charte.mjs, et les noms de ses classes). Ce kit-ci, sobre, sert à défaut : un SaaS sans charte, un essai, un
+// exemple. Mêmes signatures que la charte de Guerway, pour que l'une remplace l'autre membre à membre.
+import { esc, pagination } from '@mostajs/app-shell-ui';
+
+const nf = (x) => new Intl.NumberFormat('fr-FR').format(x);
+
+/** Icônes pleines 24 × 24, sans ressource externe. */
+const ICONES = {
+  camion: '<path d="M3 6h11v9H3zM14 9h4l3 3v3h-7zM6.5 18.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm11 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>',
+  utilisateur: '<path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-7 8a7 7 0 0 1 14 0z"/>',
+  coche: '<path d="M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L20.1 8.4 18.7 7z"/>',
+  croix: '<path d="M6.4 5 5 6.4 10.6 12 5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6L19 6.4 17.6 5 12 10.6z"/>',
+  cle: '<path d="M21 4.5 19.5 3l-8.6 8.6a5 5 0 1 0 1.5 1.5L15 10.5l2 2 1.5-1.5-2-2L18 7.5l2 2 1.5-1.5-2-2zM7 18a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>',
+  document: '<path d="M6 2h8l6 6v14H6zm7 1.5V9h5.5z"/>',
+  alerte: '<path d="M12 2 1 21h22zm-1 7h2v6h-2zm0 8h2v2h-2z"/>',
+  plus: '<path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/>',
+  calendrier: '<path d="M7 2h2v2h6V2h2v2h3v18H4V4h3zm-1 8v10h12V10z"/>',
+  epingle: '<path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>',
+  barres: '<path d="M4 20V10h3v10zm6.5 0V4h3v16zM17 20v-7h3v7z"/>',
+  oeil: '<path d="M12 5C6 5 2 12 2 12s4 7 10 7 10-7 10-7-4-7-10-7zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/>',
+  horloge: '<path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 10.4 3.6 2.1-.8 1.3L11 13V6h2z"/>',
+  fleche: '<path d="M4 11h12.2l-5.6-5.6L12 4l8 8-8 8-1.4-1.4 5.6-5.6H4z"/>',
+  liste: '<path d="M3 5h2v2H3zm4 0h14v2H7zM3 11h2v2H3zm4 0h14v2H7zM3 17h2v2H3zm4 0h14v2H7z"/>',
+  menu: '<path d="M12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>',
+};
+
+export const KIT_DEFAUT = Object.freeze({
+  icone: (nom, taille = 20) => `<svg class="fl-ic" width="${taille}" height="${taille}" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">${ICONES[nom] || ''}</svg>`,
+  kpi: ({ teinte, icone, valeur, libelle, sous = '' }) => `<div class="fl-kpi fl-${esc(teinte)}"><span class="fl-pastille">${KIT_DEFAUT.icone(icone, 28)}</span>`
+    + `<div><div class="fl-valeur">${esc(valeur)}</div><div class="fl-libelle">${esc(libelle)}</div>${sous ? `<div class="fl-sous">${sous}</div>` : ''}</div></div>`,
+  badge: (texte, teinte, icone) => `<span class="fl-badge fl-${esc(teinte)}">${icone ? KIT_DEFAUT.icone(icone, 14) : ''}${esc(texte)}</span>`,
+  carte: (titre, icone, corps, { droite = '', classe = '', id = '' } = {}) => `<section class="fl-carte ${esc(classe)}"${id ? ` id="${esc(id)}"` : ''}>`
+    + `<header>${icone ? KIT_DEFAUT.icone(icone, 20) : ''}<h2>${titre}</h2>${droite ? `<div class="fl-droite">${droite}</div>` : ''}</header>${corps}</section>`,
+  alerte: (genre, texte) => `<div class="fl-alerte fl-${esc(genre)}" role="${genre === 'erreur' ? 'alert' : 'status'}">${esc(texte)}</div>`,
+  /** Anneau : segments [{ libelle, valeur, couleur }], total au centre, légende chiffrée. */
+  anneau(segments, { unite = '' } = {}) {
+    const total = segments.reduce((s, x) => s + x.valeur, 0);
+    let decal = 25;
+    const arcs = segments.filter((s) => s.valeur > 0).map((s) => {
+      const l = (100 * s.valeur) / total;
+      const a = `<circle cx="21" cy="21" r="15.9155" fill="none" stroke="${esc(s.couleur)}" stroke-width="6" stroke-dasharray="${l.toFixed(3)} ${(100 - l).toFixed(3)}" stroke-dashoffset="${decal.toFixed(3)}"/>`;
+      decal -= l; return a;
+    }).join('');
+    return `<div class="fl-duo"><svg width="150" height="150" viewBox="0 0 42 42" role="img" aria-label="${esc(`${nf(total)} ${unite}`)}">${arcs}`
+      + `<text x="21" y="22" text-anchor="middle" font-size="7" font-weight="700" fill="currentColor">${nf(total)}</text><text x="21" y="27" text-anchor="middle" font-size="3" fill="currentColor">${esc(unite)}</text></svg>`
+      + `<table class="fl-legende"><tbody>${segments.map((s) => `<tr><td><span class="fl-point" style="background:${esc(s.couleur)}"></span></td><td>${esc(s.libelle)}</td><td>${nf(s.valeur)}</td><td>(${total ? Math.round((100 * s.valeur) / total) : 0} %)</td></tr>`).join('')}</tbody></table></div>`;
+  },
+  /** Courbe : libellés en abscisse, series [{ libelle, couleur, valeurs }] ; aire sous la première. */
+  courbes(libelles, series) {
+    const L = 520, H = 170, g = 40, bas = H - 22, utile = bas - 12;
+    const max = Math.max(1, ...series.flatMap((s) => s.valeurs));
+    const x = (i) => g + 10 + ((L - g - 20) * i) / Math.max(1, libelles.length - 1), y = (v) => bas - (utile * v) / max;
+    let s = `<line x1="${g}" x2="${L}" y1="${bas}" y2="${bas}" stroke="currentColor" opacity=".2"/>`;
+    series.forEach((se, k) => {
+      const pts = se.valeurs.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(' ');
+      if (k === 0) s += `<polygon points="${x(0)},${bas} ${pts} ${x(se.valeurs.length - 1)},${bas}" fill="${esc(se.couleur)}" opacity=".12"/>`;
+      s += `<polyline points="${pts}" fill="none" stroke="${esc(se.couleur)}" stroke-width="2.2"/>`;
+    });
+    libelles.forEach((l, i) => { s += `<text x="${x(i)}" y="${H - 5}" text-anchor="middle" font-size="11" fill="currentColor">${esc(l)}</text>`; });
+    return `<svg viewBox="0 0 ${L} ${H}" width="100%" role="img" aria-hidden="true">${s}</svg>`;
+  },
+  pagination,
+  classes: Object.freeze({ grille: 'fl-grille', tableau: 'fl-tableau', onglets: 'fl-onglets', rapides: 'fl-rapides', rapide: 'fl-rapide', fiche: 'fl-fiche', btn: 'fl-btn' }),
+});
+
+/** Les couleurs des types (anneau) et des statuts : celles de la maquette d'ECR-16. */
+export const COULEURS = Object.freeze({
+  types: ['#2878E0', '#FD8A2B', '#E5484D', '#8EA3C0', '#7C3AED', '#18A048'],
+  statut: { en_service: '#18A048', a_l_atelier: '#FD8A2B', immobilise: '#E5484D', reforme: '#8EA3C0' },
+});
+
+/**
+ * Feuille de style : les classes fl-* sur des variables --fl-* à valeurs de repli. Une application qui passe sa
+ * charte n'en a besoin que pour ce que sa charte n'a pas (grille à cinq indicateurs, barres de statut, menu « ⋮ »).
+ */
+export const FLOTTE_CSS = `
+.fl-ecran{--fl-bleu:var(--gw-bleu,#0757ca);--fl-texte:var(--gw-texte,#182040);--fl-doux:var(--gw-texte-doux,#586880);--fl-ligne:var(--gw-piste,#e1e6ed);--fl-carte:var(--gw-carte,#fff);--fl-vert:#18a048;--fl-orange:#c06000;--fl-rouge:#d01010;display:grid;gap:16px;color:var(--fl-texte)}
+.fl-k5{display:grid;gap:16px;grid-template-columns:repeat(5,minmax(0,1fr))}
+.fl-c21{display:grid;gap:16px;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}
+.fl-large{display:grid;gap:16px;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);align-items:start}
+.fl-c3{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
+@media (max-width:1100px){.fl-k5{grid-template-columns:repeat(2,minmax(0,1fr))}.fl-c3{grid-template-columns:1fr}}
+@media (max-width:900px){.fl-c21,.fl-large{grid-template-columns:1fr}}
+.fl-c2{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}@media (max-width:900px){.fl-c2{grid-template-columns:1fr}}
+.fl-plaque,.fl-nowrap{white-space:nowrap}
+.fl-ecran nav.fl-serres a{padding-inline:8px}.fl-menu>summary{font-size:20px;line-height:1;font-weight:700}
+.fl-pile{display:grid;gap:16px;align-content:start}
+.fl-carte{background:var(--fl-carte);border:1px solid var(--fl-ligne);border-radius:12px;padding:18px}.fl-carte>header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.fl-carte h2{font-size:16px;margin:0}.fl-droite{margin-inline-start:auto}
+.fl-kpi{display:flex;gap:12px;align-items:center;border:1px solid var(--fl-ligne);border-radius:12px;padding:14px;background:var(--fl-carte)}.fl-pastille{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#eef3fb}
+.fl-valeur{font-size:26px;font-weight:700}.fl-libelle{font-weight:500}.fl-sous{font-size:12.5px;color:var(--fl-doux)}
+.fl-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:6px;font-size:12.5px;font-weight:500;white-space:nowrap}
+.fl-vert{background:#e1f7eb;color:#086840}.fl-orange{background:#fef1d4;color:#a05000}.fl-rouge{background:#fdecec;color:#b00}.fl-gris{background:#e5e9ee;color:#445}.fl-bleu{background:#e3f0fe;color:#0757ca}.fl-violet{background:#ede7fd;color:#5b21b6}
+.fl-tableau{width:100%;border-collapse:collapse;font-size:13.5px}.fl-tableau th{text-align:start;font-weight:600;padding:8px;background:#eff2f5}.fl-tableau td{padding:8px;border-bottom:1px solid var(--fl-ligne)}
+.fl-defile{overflow-x:auto}
+.fl-filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.fl-filtres input[type=search]{flex:1 1 220px}.fl-filtres select,.fl-filtres input,.fl-filtres button{height:38px;border:1px solid var(--fl-ligne);border-radius:8px;padding:0 10px;font:inherit;background:var(--fl-carte);color:inherit}
+.fl-btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:8px;background:var(--fl-bleu);color:#fff;text-decoration:none;font-weight:500;border:0}
+.fl-depart{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%}.fl-depart.ok{color:var(--fl-vert)}.fl-depart.ko{color:var(--fl-rouge)}
+.fl-marque{display:inline-block;margin-inline-start:6px;padding:0 7px;border-radius:9px;background:#fdecec;color:#b00;font-size:11.5px;font-weight:600;white-space:nowrap}
+.fl-menu{position:relative}.fl-menu>summary{list-style:none;cursor:pointer;padding:2px 6px;border-radius:6px}.fl-menu>summary::-webkit-details-marker{display:none}
+.fl-menu[open]>div{position:absolute;inset-inline-end:0;z-index:5;display:grid;min-width:200px;background:var(--fl-carte);border:1px solid var(--fl-ligne);border-radius:8px;box-shadow:0 6px 18px rgb(16 40 66/12%);padding:6px}
+.fl-menu[open]>div a{padding:7px 10px;border-radius:6px;text-decoration:none;color:inherit}.fl-menu[open]>div a:hover{background:#eff2f5}
+.fl-bandeau{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:8px;font-weight:500;margin:10px 0}.fl-bandeau.ok{background:#ebf9f2;color:#086840}.fl-bandeau.ko{background:#fdecec;color:#9b1c1c}.fl-bandeau ul{margin:4px 0 0;padding-inline-start:18px;font-weight:400}
+.fl-entete-fiche{display:flex;gap:14px;align-items:center}.fl-entete-fiche b{font-size:20px}.fl-vignette{display:grid;place-items:center;width:84px;height:60px;border-radius:10px;background:#eef3fb;color:#5a7194}
+.fl-onglets{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--fl-ligne);margin:12px 0}.fl-onglets a{padding:8px 10px;text-decoration:none;color:var(--fl-doux);border-bottom:2px solid transparent}.fl-onglets a[aria-current]{color:var(--fl-bleu);border-bottom-color:currentColor;font-weight:600}
+.fl-infos{display:grid;grid-template-columns:minmax(120px,170px) 1fr;gap:7px 12px;margin:0;font-size:13.5px}.fl-infos dt{color:var(--fl-doux)}.fl-infos dd{margin:0;font-weight:500}
+.fl-delai{color:var(--fl-orange);font-weight:500}.fl-retard{color:var(--fl-rouge);font-weight:600}.fl-ok{color:var(--fl-vert)}.fl-doux{color:var(--fl-doux);font-size:12px;font-weight:400}
+.fl-alertes{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13.5px}.fl-alertes li{display:grid;grid-template-columns:20px auto 1fr auto;gap:8px;align-items:center}.fl-alertes small{display:block;color:var(--fl-doux);font-weight:400}.fl-alertes li.fl-retard small{color:inherit}
+.fl-barres{display:grid;gap:12px;font-size:13.5px}.fl-barre{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center}.fl-barre>span:nth-child(2){height:12px;border-radius:6px;background:var(--fl-ligne);overflow:hidden}.fl-barre i{display:block;height:100%;border-radius:6px}
+.fl-donnees{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px;color:var(--fl-doux)}.fl-donnees th,.fl-donnees td{padding:3px 6px;text-align:center;border-top:1px solid var(--fl-ligne)}
+.fl-duo{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.fl-legende td{padding:3px 6px}.fl-point{display:inline-block;width:10px;height:10px;border-radius:50%}
+.fl-rapides{display:grid;grid-template-columns:1fr 1fr;gap:10px}.fl-rapide{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border-radius:8px;text-decoration:none;font-weight:500;font-size:14px}.fl-rapide.plein{background:var(--fl-bleu);color:#fff}
+.fl-vide{color:var(--fl-doux);margin:8px 0}
+.fl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
+`;

package/src/rendu.js

@@ -0,0 +1,268 @@
+// @mostajs/flotte-ui — le rendu : vue-modèle → HTML, sans script (DEC-UI-13 de Guerway). Fonctions PURES.
+// Author: Dr Hamid MADANI <drmdh@msn.com> · AGPL-3.0-or-later
+//
+// Chaque filtre est un formulaire GET, chaque onglet un lien GET, le menu « ⋮ » un <details>. Toute valeur passe par
+// esc(). Les composants viennent du kit (celui de l'application, sinon KIT_DEFAUT) ; les textes, de texte() ; les
+// codes de la flotte, de libelle() de @mostajs/flotte.
+import { esc } from '@mostajs/app-shell-ui';
+import { libelle } from '@mostajs/flotte';
+import { texte } from './textes.js';
+import { KIT_DEFAUT, COULEURS } from './kit.js';
+import { ONGLETS } from './vue.js';
+
+const BADGE = { en_service: ['vert', 'coche'], a_l_atelier: ['orange', 'cle'], immobilise: ['rouge', 'croix'], reforme: ['gris', 'document'] };
+
+/** Le contexte de rendu : kit complété, traduction, formats. */
+function contexte({ kit = {}, t, locale = 'fr-FR', liens = {}, droits = {}, declarations = {} } = {}) {
+  const k = { ...KIT_DEFAUT, ...kit, classes: { ...KIT_DEFAUT.classes, ...(kit.classes || {}) } };
+  const nf = (x) => new Intl.NumberFormat(locale).format(x);
+  const tx = (cle, vars) => texte(cle, t, vars);
+  // Un code de la flotte ; à défaut de traduction, le libellé déclaré, sinon le code.
+  const lib = (famille, code, vars) => {
+    const l = libelle(famille, code, t, vars);
+    if (l !== code) return l;
+    const d = famille === 'type' ? declarations.types?.[code] : famille === 'echeance' ? declarations.echeances?.[code] : null;
+    return d?.libelle ?? code;
+  };
+  const jj = (d) => (d ? d.split('-').reverse().join('/') : '—');
+  /** Une phrase de motif ou d'avertissement : les valeurs qui sont des codes sont traduites, les dates mises en forme. */
+  const phrase = (famille, m) => {
+    const v = { ...m };
+    if (v.statut) v.statut = lib('statut', v.statut);
+    if (v.type) v.type = lib('echeance', v.type);
+    if (v.unite) v.unite = lib('unite', v.unite);
+    if (v.date) v.date = jj(v.date);
+    if (Number.isFinite(v.n)) v.n = nf(v.n);
+    return lib(famille, m.code, v);
+  };
+  return { k, c: k.classes, nf, tx, lib, jj, phrase, liens, droits, peutGerer: Boolean(droits.gerer) };
+}
+
+/** Une URL GET : la base, puis les paramètres non vides, dans l'ordre donné. */
+function url(base, params) {
+  const q = Object.entries(params).filter(([, v]) => v !== undefined && v !== null && v !== '')
+    .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join('&');
+  return q ? `${base}?${q}` : base;
+}
+const garder = (f = {}) => ({ q: f.q, type: f.type, statut: f.statut, region: f.region, ...(f.page > 1 ? { page: f.page } : {}) });
+
+function delai(x, n) {
+  if (n === null || n === undefined) return '';
+  if (n < 0) return `<span class="fl-retard">(${esc(x.tx('info.depuisJours', { n: x.nf(-n) }))})</span>`;
+  if (n === 0) return `<span class="fl-delai">(${esc(x.tx('info.aujourdhui'))})</span>`;
+  return `<span class="fl-delai">(${esc(x.tx('info.dansJours', { n: x.nf(n) }))})</span>`;
+}
+const badgeStatut = (x, s) => x.k.badge(x.lib('statut', s), ...(BADGE[s] || ['gris']));
+const capacite = (x, c) => [c.kg !== null ? `${x.nf(c.kg)} kg` : null, c.m3 !== null ? `${x.nf(c.m3)} m³` : null].filter(Boolean).join(' / ') || '—';
+
+/** La variation d'un indicateur : flèche selon le sens, couleur selon le sens favorable. */
+function variationHtml(x, v) {
+  if (!v) return '';
+  const fl = v.sens === 'hausse' ? '↑' : v.sens === 'baisse' ? '↓' : '→';
+  const cl = v.favorable === null ? 'fl-doux' : v.favorable ? 'fl-ok' : 'fl-retard';
+  const p = v.pct === null ? x.tx('kpi.nouveau') : `${v.pct > 0 ? '+' : ''}${x.nf(v.pct)} %`;
+  return `<span class="${cl}">${fl} ${esc(p)}</span> <span class="fl-doux">${esc(x.tx('kpi.vsPeriode'))}</span>`;
+}
+
+function indicateurs(x, I) {
+  const part = (o) => (o.part !== undefined ? `<span class="fl-doux">(${x.nf(o.part)} %)</span> ` : '');
+  const un = (o, cle, teinte, icone) => x.k.kpi({ teinte, icone, valeur: x.nf(o.n), libelle: x.tx(`kpi.${cle}`), sous: `${part(o)}${variationHtml(x, o.variation)}` });
+  return `<div class="fl-k5">${un(I.vehicules, 'vehicules', 'bleu', 'camion')}${un(I.chauffeurs, 'chauffeurs', 'vert', 'utilisateur')}${un(I.enService, 'enService', 'orange', 'coche')}`
+    + `${un(I.enMaintenance, 'enMaintenance', 'rouge', 'cle')}${un(I.documentsExpires, 'documentsExpires', 'rouge', 'document')}</div>`;
+}
+
+/** Les actions d'une ligne : « Voir » toujours ; les autres si l'application en donne le lien (et le droit, pour écrire). */
+function actionsLigne(x, l, filtres) {
+  const L = x.liens, base = L.base || '';
+  const a = [[url(base, { ...garder(filtres), v: l.id }), 'voir']];
+  if (x.peutGerer && L.modifier) a.push([L.modifier(l.id), 'modifier']);
+  if (x.peutGerer && L.affecter) a.push([L.affecter(l.id), 'affecter']);
+  if (x.peutGerer && L.planifier) a.push([L.planifier(l.id), 'planifier']);
+  return a;
+}
+
+function liste(x, vm) {
+  const { filtres, liste: L, options } = vm;
+  const opt = (v, l, cour) => `<option value="${esc(v)}"${v === cour ? ' selected' : ''}>${esc(l)}</option>`;
+  const form = `<form class="fl-filtres" method="get" action="${esc(x.liens.base || '')}" role="search">`
+    + `<input type="search" name="q" value="${esc(filtres.q)}" placeholder="${esc(x.tx('liste.recherche'))}" aria-label="${esc(x.tx('liste.recherche'))}">`
+    + `<select name="type" aria-label="${esc(x.tx('col.type'))}">${opt('', x.tx('liste.tousTypes'), filtres.type)}${options.types.map((c) => opt(c, x.lib('type', c), filtres.type)).join('')}</select>`
+    + `<select name="statut" aria-label="${esc(x.tx('col.statut'))}">${opt('', x.tx('liste.tousStatuts'), filtres.statut)}${options.statuts.map((c) => opt(c, x.lib('statut', c), filtres.statut)).join('')}</select>`
+    + (options.regions.length ? `<select name="region" aria-label="${esc(x.tx('col.region'))}">${opt('', x.tx('liste.toutesRegions'), filtres.region)}${options.regions.map((c) => opt(c, c, filtres.region)).join('')}</select>` : '')
+    + `<button type="submit">${esc(x.tx('liste.filtrer'))}</button></form>`;
+  if (!L.lignes.length) return `${form}<p class="fl-vide">${esc(x.tx('liste.vide'))}</p>`;
+  const dep = (d) => (d.ok
+    ? `<span class="fl-depart ok" title="${esc(x.tx('depart.ouiCourt'))}">${x.k.icone('coche', 18)}<span class="fl-sr">${esc(x.tx('depart.ouiCourt'))}</span></span>`
+    : `<span class="fl-depart ko" title="${esc(d.motifs.map((m) => x.phrase('motif', m)).join(' ; '))}">${x.k.icone('croix', 18)}<span class="fl-sr">${esc(x.tx('depart.nonCourt'))}</span></span>`);
+  const choisi = vm.fiche?.vehicule.id;
+  const debut = (L.page - 1) * (Number.isFinite(L.parPage) ? L.parPage : 0);
+  const lignes = L.lignes.map((l, i) => {
+    const acts = actionsLigne(x, l, filtres);
+    const menu = `<details class="fl-menu"><summary aria-label="${esc(x.tx('action.menu', { plaque: l.plaque }))}"><span aria-hidden="true">⋮</span></summary><div>${acts.map(([h, cle]) => `<a href="${esc(h)}">${esc(x.tx(`action.${cle}`))}</a>`).join('')}</div></details>`;
+    return `<tr${l.id === choisi ? ' class="choisi"' : ''}><td class="num">${x.nf(debut + i + 1)}</td><td class="fl-plaque"><a href="${esc(acts[0][0])}">${esc(l.plaque)}</a></td><td class="fl-nowrap">${esc(x.lib('type', l.type))}</td>`
+      + `<td class="fl-nowrap">${l.capacite.kg !== null ? `${x.nf(l.capacite.kg)} kg` : '—'}</td><td>${esc(l.region ?? '—')}</td><td>${esc(l.conducteur?.nom ?? '—')}</td>`
+      + `<td class="fl-nowrap">${l.km !== null ? `${x.nf(l.km)} km` : '—'}</td><td>${badgeStatut(x, l.statut)}${l.documentExpire ? `<span class="fl-marque">${esc(x.tx('documentExpire'))}</span>` : ''}</td>`
+      + `<td>${dep(l.depart)}</td><td>${menu}</td></tr>`;
+  }).join('');
+  const C = (cle) => `<th scope="col">${esc(x.tx(`col.${cle}`))}</th>`;
+  const table = `<div class="fl-defile"><table class="${esc(x.c.tableau)}"><thead><tr>${['numero', 'plaque', 'type', 'capacite', 'region', 'chauffeur', 'km', 'statut', 'depart', 'actions'].map(C).join('')}</tr></thead><tbody>${lignes}</tbody></table></div>`;
+  const pages = Number.isFinite(L.parPage) ? x.k.pagination({ total: L.total, page: L.page, parPage: L.parPage, lien: (p) => url(x.liens.base || '', { ...garder(filtres), page: p > 1 ? p : '' }) }) : '';
+  const exp = x.liens.export ? ` <a href="${esc(url(x.liens.export, garder(filtres)))}">${esc(x.tx('liste.exporter'))}</a>` : '';
+  return `${form}${table}<div class="fl-pied">${pages}${exp}</div>`;
+}
+
+function alertesHtml(x, vm) {
+  const A = vm.alertes;
+  if (!A.lignes.length) return `<p class="fl-vide">${esc(x.tx('alertes.vide', { n: x.nf(A.jours) }))}</p>`;
+  const ico = (a) => (a.genre === 'entretien' ? 'cle' : a.type === 'assurance' ? 'document' : 'calendrier');
+  return `<ul class="fl-alertes">${A.lignes.map((a) => `<li class="${a.n < 0 ? 'fl-retard' : ''}">${x.k.icone(ico(a), 18)}<span>${esc(x.jj(a.date))}</span>`
+    + `<span>${esc(a.genre === 'entretien' ? `${x.tx('alertes.entretien')} — ${a.type}` : x.lib('echeance', a.type))}<small class="fl-plaque">${esc(a.plaque)}</small></span><span>${delai(x, a.n)}</span></li>`).join('')}</ul>`;
+}
+
+function statutsHtml(x, S) {
+  return `<div class="fl-barres">${['en_service', 'a_l_atelier', 'immobilise'].map((s) => {
+    const p = S.total ? Math.round((100 * S[s]) / S.total) : 0;
+    return `<div class="fl-barre"><span>${esc(x.lib('statut', s))}</span><span role="img" aria-label="${p} %"><i style="width:${p}%;background:${COULEURS.statut[s]}"></i></span><span><b>${x.nf(S[s])}</b> <span class="fl-doux">(${x.nf(p)} %)</span></span></div>`;
+  }).join('')}</div>`;
+}
+
+function kmHtml(x, km, locale) {
+  const mois = km.mois.map((m) => { const s = new Intl.DateTimeFormat(locale, { month: 'short', timeZone: 'UTC' }).format(new Date(`${m}-15T00:00:00Z`)); return s.charAt(0).toUpperCase() + s.slice(1); });
+  return x.k.courbes(mois, [{ libelle: x.tx('graphe.kmSerie'), couleur: '#2878E0', valeurs: km.valeurs }])
+    + `<table class="fl-donnees"><caption class="fl-sr">${esc(x.tx('graphe.kmSerie'))}</caption><thead><tr><th scope="row">${esc(x.tx('graphe.mois'))}</th>${mois.map((m) => `<th scope="col">${esc(m)}</th>`).join('')}</tr></thead>`
+    + `<tbody><tr><th scope="row">km</th>${km.valeurs.map((v) => `<td>${x.nf(v)}</td>`).join('')}</tr></tbody></table>`;
+}
+
+function parSiteHtml(x, vm) {
+  if (!vm.parSite.length) return `<p class="fl-vide">—</p>`;
+  return `<div class="fl-defile"><table class="${esc(x.c.tableau)}"><thead><tr><th scope="col">${esc(x.tx('col.station'))}</th><th scope="col">${esc(x.tx('col.region'))}</th>${['en_service', 'a_l_atelier', 'immobilise'].map((s) => `<th scope="col"><span class="fl-point" style="background:${COULEURS.statut[s]}"></span> ${esc(x.lib('statut', s))}</th>`).join('')}</tr></thead>`
+    + `<tbody>${vm.parSite.map((s) => `<tr><td>${esc(s.libelle ?? '—')}</td><td>${esc(s.region ?? '—')}</td><td>${x.nf(s.en_service)}</td><td>${x.nf(s.a_l_atelier)}</td><td>${x.nf(s.immobilise)}</td></tr>`).join('')}</tbody></table></div>`;
+}
+
+function topHtml(x, vm) {
+  const act = vm.avecActivite;
+  return `<div class="fl-defile"><table class="${esc(x.c.tableau)}"><thead><tr><th scope="col">#</th><th scope="col">${esc(x.tx('col.plaque'))}</th><th scope="col">${esc(x.tx('col.type'))}</th><th scope="col">${esc(x.tx('graphe.kmMois'))}</th>`
+    + `${act ? `<th scope="col">${esc(x.tx('graphe.tournees'))}</th><th scope="col">${esc(x.tx('graphe.colis'))}</th>` : ''}</tr></thead><tbody>`
+    + vm.top.map((t, i) => `<tr><td class="num">${i + 1}</td><td class="fl-plaque">${esc(t.plaque)}</td><td class="fl-nowrap">${esc(x.lib('type', t.type))}</td><td>${x.nf(t.km)}</td>${act ? `<td>${x.nf(t.tournees ?? 0)}</td><td>${x.nf(t.colis ?? 0)}</td>` : ''}</tr>`).join('')
+    + '</tbody></table></div>';
+}
+
+function rapidesHtml(x, vm) {
+  const L = x.liens, id = vm.fiche?.vehicule.id, base = L.base || '';
+  const items = [
+    x.peutGerer && L.nouveau && [L.nouveau, 'nouveau', 'plein', 'plus'],
+    x.peutGerer && L.affecter && id && [L.affecter(id), 'action.affecter', 'vert', 'utilisateur'],
+    x.peutGerer && L.planifier && id && [L.planifier(id), 'action.planifier', 'orange', 'cle'],
+    id && [url(base, { ...garder(vm.filtres), v: id, onglet: 'documents' }), 'action.documents', 'violet', 'document'],
+    L.tournee && [L.tournee, 'action.tournee', 'bleu', 'calendrier'],
+    id && [url(base, { ...garder(vm.filtres), v: id, onglet: 'historique' }), 'action.historique', 'rouge', 'horloge'],
+  ].filter(Boolean);
+  return `<div class="${esc(x.c.rapides)}">${items.map(([h, cle, teinte, ic]) => `<a class="${esc(x.c.rapide)} ${teinte}" href="${esc(h)}">${x.k.icone(ic, 18)}${esc(x.tx(cle))}</a>`).join('')}</div>`;
+}
+
+// ── La fiche ────────────────────────────────────────────────────────────────────────────────────────────────
+function bandeau(x, d) {
+  if (d.ok) return `<div class="fl-bandeau ok" role="status">${x.k.icone('coche', 18)}<div>${esc(x.tx('depart.oui'))}${d.avertissements.length ? `<ul>${d.avertissements.map((a) => `<li>${esc(x.phrase('avertissement', a))}</li>`).join('')}</ul>` : ''}</div></div>`;
+  return `<div class="fl-bandeau ko" role="alert">${x.k.icone('croix', 18)}<div>${esc(x.tx('depart.non'))}<ul>${d.motifs.map((m) => `<li>${esc(x.phrase('motif', m))}</li>`).join('')}</ul></div></div>`;
+}
+
+function informations(x, f) {
+  const p = f.prochain;
+  const prochain = p ? (p.le ? `${esc(x.jj(p.le))} ${delai(x, p.dans)}${p.estime ? ` <span class="fl-doux">${esc(x.tx('info.estimee'))}</span>` : ''}<br><span class="fl-doux">${esc(p.libelle)}</span>`
+    : `${esc(p.libelle)}${p.km ? ` <span class="fl-doux">${esc(x.tx('info.auKm', { km: x.nf(p.km.echeance) }))}</span>` : ''}`) : esc(x.tx('info.aucunPlan'));
+  const ech = f.echeances.map((e) => {
+    const v = e.etat === 'absente' ? `<span class="${e.obligatoire ? 'fl-retard' : 'fl-doux'}">${esc(x.tx('info.absent'))}</span>`
+      : e.etat === 'expiree' ? `<span class="fl-retard">${x.k.icone('croix', 16)} ${esc(x.tx('info.expireeLe', { date: x.jj(e.courante.fin) }))}</span>`
+        : e.etat === 'proche' ? `<span class="fl-delai">${x.k.icone('alerte', 16)} ${esc(x.tx('info.expireBientot', { date: x.jj(e.courante.fin) }))}</span> ${delai(x, e.n)}`
+          : `<span class="fl-ok">${x.k.icone('coche', 16)}</span> ${esc(x.tx('info.valideJusquau', { date: x.jj(e.courante.fin) }))}`;
+    return [x.lib('echeance', e.type), v];
+  });
+  const ch = f.conducteur ? `${esc(f.conducteur.nom)}${f.conducteur.telephone ? ` <span class="fl-doux">(${esc(f.conducteur.telephone)})</span>` : ''}` : esc(x.tx('info.aucunChauffeur'));
+  const lignes = [
+    [x.tx('info.plaque'), esc(f.plaque)], [x.tx('info.type'), esc(x.lib('type', f.vehicule.type))], [x.tx('info.capacite'), esc(capacite(x, f.capacite))],
+    [x.tx('info.region'), esc(f.region ?? '—')], [x.tx('info.station'), esc(f.siteLibelle ?? '—')], [x.tx('info.km'), f.km !== null ? `${x.nf(f.km)} km` : '—'],
+    [x.tx('info.miseEnService'), esc(x.jj(f.miseEnService))], [x.tx('info.chauffeur'), ch],
+    [x.tx('info.consommation'), f.consommation !== null && f.consommation !== undefined ? `${x.nf(f.consommation)} L / 100 km` : '—'],
+    [x.tx('info.prochainEntretien'), prochain], ...ech.map(([l, v]) => [l, v]),
+  ];
+  return `<dl class="fl-infos ${esc(x.c.fiche)}">${lignes.map(([l, v]) => `<dt>${esc(l)}</dt><dd>${v}</dd>`).join('')}</dl>`;
+}
+
+function tableau(x, entetes, lignes, vide) {
+  if (!lignes.length) return `<p class="fl-vide">${esc(vide)}</p>`;
+  return `<div class="fl-defile"><table class="${esc(x.c.tableau)}"><thead><tr>${entetes.map((e) => `<th scope="col">${esc(e)}</th>`).join('')}</tr></thead><tbody>${lignes.map((l) => `<tr>${l.map((c) => `<td>${c}</td>`).join('')}</tr>`).join('')}</tbody></table></div>`;
+}
+
+function contenuOnglet(x, f) {
+  const T = (c) => x.tx(c);
+  if (f.onglet === 'documents') {
+    return tableau(x, [T('documents.type'), T('documents.du'), T('documents.au'), T('documents.cout'), T('documents.piece'), T('documents.etat')],
+      (f.documents || []).map((d) => [esc(x.lib('echeance', d.type)), esc(x.jj(d.debut)), esc(x.jj(d.fin)), d.cout ? esc(x.nf(d.cout)) : '—',
+        d.piece ? `<code>${esc(String(d.piece.empreinte ?? d.piece.nom ?? d.piece).slice(0, 16))}</code>` : '—',
+        d.courante ? (d.fin < f.date ? `<span class="fl-retard">${esc(x.tx('info.expireeLe', { date: x.jj(d.fin) }))}</span>` : esc(T('documents.courante'))) : `<span class="fl-doux">${esc(T('documents.ancienne'))}</span>`]),
+      T('documents.vide'));
+  }
+  if (f.onglet === 'entretiens') {
+    const E = f.entretiens;
+    const pas = (q) => [q?.tousLesKm ? x.tx('entretiens.km', { n: x.nf(q.tousLesKm) }) : null, q?.tousLesJours ? x.tx('entretiens.jours', { n: x.nf(q.tousLesJours) }) : null].filter(Boolean).join(` ${T('entretiens.ou')} `);
+    const plans = tableau(x, [T('entretiens.plan'), T('entretiens.pas'), T('entretiens.prochain'), T('col.statut')],
+      E.prochains.map((p) => [esc(p.libelle), esc(pas(p.pas)), p.le ? `${esc(x.jj(p.le))} ${delai(x, p.dans)}${p.estime ? ` <span class="fl-doux">${esc(T('info.estimee'))}</span>` : ''}` : (p.km ? esc(x.tx('info.auKm', { km: x.nf(p.km.echeance) })) : '—'),
+        p.etat === 'ok' ? '' : x.k.badge(p.etat === 'proche' ? x.lib('avertissement', 'ENTRETIEN_PROCHE', { plan: p.libelle, n: x.nf(p.n), unite: x.lib('unite', p.unite) }) : x.lib('motif', 'ENTRETIEN_DEPASSE', { plan: p.libelle, n: x.nf(p.n), unite: x.lib('unite', p.unite) }), p.etat === 'proche' ? 'orange' : 'rouge')]),
+      T('info.aucunPlan'));
+    const inter = tableau(x, [T('entretiens.numero'), T('entretiens.nature'), T('entretiens.ouverte'), T('entretiens.close'), T('entretiens.atelier'), T('entretiens.cout')],
+      E.interventions.map((i) => [`<code>${esc(i.numero)}</code>`, esc(x.lib('nature', i.nature)), esc(x.jj(i.ouverteLe)), i.closeLe ? esc(x.jj(i.closeLe)) : x.k.badge(T('entretiens.enCours'), 'orange', 'horloge'),
+        esc(i.prestataire ?? '—'), i.cout ? esc(x.nf(i.cout)) : '—']), T('entretiens.vide'));
+    return `<h3>${esc(T('entretiens.plans'))}</h3>${plans}<h3>${esc(T('entretiens.interventions'))}</h3>${inter}`;
+  }
+  if (f.onglet === 'affectations') {
+    return tableau(x, [T('affectations.chauffeur'), T('affectations.du'), T('affectations.au'), T('affectations.par')],
+      f.affectations.map((a) => [esc(a.conducteur?.nom ?? '—'), esc(x.jj(a.du)), a.au ? esc(x.jj(a.au)) : x.k.badge(T('affectations.enCours'), 'vert'), esc(a.parAgent ?? '—')]), T('affectations.vide'));
+  }
+  if (f.onglet === 'historique') {
+    const lignes = f.historique.map((h) => [esc(x.jj(h.le)), badgeStatut(x, h.de), badgeStatut(x, h.vers), esc(h.motif ?? '—'), esc(h.agent ?? '—')]);
+    lignes.push([esc(x.jj(f.vehicule.inscritLe)), '—', badgeStatut(x, 'en_service'), esc(T('historique.inscrit')), esc(f.vehicule.inscritPar ?? '—')]);
+    return tableau(x, [T('historique.le'), T('historique.de'), T('historique.vers'), T('historique.motif'), T('historique.par')], lignes, T('historique.vide'));
+  }
+  return informations(x, f);
+}
+
+/** La fiche d'un véhicule : en-tête, bandeau « peut partir », onglets en liens GET, contenu de l'onglet. */
+export function rendreFiche(f, opts = {}) {
+  const x = contexte(opts);
+  if (!f) return `<p class="fl-vide">${esc(x.tx('detail.aucun'))}</p>`;
+  const base = x.liens.base || '', keep = garder(opts.filtres || {});
+  const onglets = `<nav class="${esc(x.c.onglets)} fl-serres" aria-label="${esc(x.tx('detail.titre'))}">${ONGLETS.map((o) => `<a href="${esc(url(base, { ...keep, v: f.vehicule.id, onglet: o === 'informations' ? '' : o }))}"${o === f.onglet ? ' aria-current="page" class="actif"' : ''}>${esc(x.tx(`onglet.${o}`))}</a>`).join('')}</nav>`;
+  const modifier = x.peutGerer && x.liens.modifier ? `<a class="${esc(x.c.btn)} petit" href="${esc(x.liens.modifier(f.vehicule.id))}">${esc(x.tx('action.modifier'))}</a>` : '';
+  const tete = `<div class="fl-entete-fiche"><span class="fl-vignette">${x.k.icone('camion', 40)}</span><div><b>${esc(f.plaque)}</b><div>${esc(x.lib('type', f.vehicule.type))}</div></div><div>${badgeStatut(x, f.vehicule.statut)}</div>${modifier ? `<div class="fl-droite">${modifier}</div>` : ''}</div>`;
+  return `${tete}${bandeau(x, f.depart)}${onglets}${contenuOnglet(x, f)}`;
+}
+
+/**
+ * Le tableau de bord d'ECR-16. Rend { titre, sousTitre, outils, corps } : l'application les pose dans son gabarit
+ * (zone de titre et corps). opts : { kit?, t?, locale?, liens?: { base, nouveau?, modifier?(id), affecter?(id),
+ * planifier?(id), tournee?, alertes?, export? }, droits?: { gerer }, declarations? }
+ */
+export function rendreTableau(vm, opts = {}) {
+  const x = contexte(opts);
+  const locale = opts.locale || 'fr-FR';
+  const outils = x.peutGerer && x.liens.nouveau ? `<a class="${esc(x.c.btn)}" href="${esc(x.liens.nouveau)}">${x.k.icone('plus', 18)}${esc(x.tx('nouveau'))}</a>` : '';
+  const carte = (cle, ic, corps, o = {}) => x.k.carte(esc(x.tx(cle)) + (o.sous ? ` <span class="fl-doux">${esc(x.tx(o.sous))}</span>` : ''), ic, corps, o);
+  const voirTout = x.liens.alertes ? `<a href="${esc(x.liens.alertes)}">${esc(x.tx('alertes.voirTout'))}</a>` : '';
+  const segments = vm.repartition.map((r, i) => ({ libelle: x.lib('type', r.type), valeur: r.n, couleur: COULEURS.types[i % COULEURS.types.length] }));
+  const corps = `<div class="fl-ecran">${indicateurs(x, vm.indicateurs)}
+<div class="fl-large"><div class="fl-pile">${carte('liste.titre', 'liste', liste(x, vm))}
+<div class="fl-c3">${carte('graphe.types', 'barres', x.k.anneau(segments, { unite: x.tx('graphe.vehicules') }))}${carte('graphe.statuts', 'barres', statutsHtml(x, vm.statuts))}${carte('graphe.km', 'barres', kmHtml(x, vm.km, locale), { sous: 'graphe.kmSous' })}</div>
+<div class="fl-c2">${carte('graphe.carte', 'epingle', parSiteHtml(x, vm), { sous: 'graphe.carteSous' })}${carte('graphe.top', 'camion', topHtml(x, vm))}</div></div>
+<div class="fl-pile">${carte('detail.titre', 'utilisateur', rendreFiche(vm.fiche, { ...opts, filtres: vm.filtres }), { id: 'detail' })}${carte('alertes.titre', 'calendrier', alertesHtml(x, vm), { droite: voirTout })}${carte('rapides.titre', 'fleche', rapidesHtml(x, vm))}</div></div></div>`;
+  return { titre: x.tx('titre'), sousTitre: x.tx('sousTitre'), outils, corps };
+}
+
+/** La liste en CSV (séparateur « ; », guillemets doublés) : construire le vue-modèle avec parPage: Infinity. */
+export function exporterCsv(vm, opts = {}) {
+  const x = contexte(opts);
+  const champ = (v) => { const s = String(v ?? ''); return /[;"\n\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s; };
+  const ent = ['plaque', 'type', 'capacite', 'region', 'station', 'chauffeur', 'km', 'statut', 'depart'].map((c) => x.tx(`col.${c}`));
+  const lignes = vm.liste.lignes.map((l) => [l.plaque, x.lib('type', l.type), l.capacite.kg ?? '', l.region ?? '', l.site ?? '', l.conducteur?.nom ?? '', l.km ?? '',
+    x.lib('statut', l.statut) + (l.documentExpire ? ` (${x.tx('documentExpire')})` : ''), l.depart.ok ? x.tx('depart.ouiCourt') : l.depart.motifs.map((m) => x.phrase('motif', m)).join(' ; ')]);
+  return `${[ent, ...lignes].map((l) => l.map(champ).join(';')).join('\n')}\n`;
+}

package/src/textes.js

@@ -0,0 +1,73 @@
+// @mostajs/flotte-ui — les textes des écrans : le français de référence, traduit par l'application.
+// Author: Dr Hamid MADANI <drmdh@msn.com> · AGPL-3.0-or-later
+//
+// Aucune chaîne en dur dans le rendu (DEVRULES §11.5) : tout passe par texte(cle, t), qui demande d'abord
+// `flotte.ecran.<cle>` à la traduction de l'application et se replie sur ce catalogue. Les CODES de la flotte
+// (statut, motif…) ne sont pas ici : ils passent par libelle() de @mostajs/flotte (`flotte.<famille>.<code>`).
+
+export const TEXTES = Object.freeze({
+  titre: 'Véhicules et gestion de la flotte',
+  sousTitre: 'Gérez vos véhicules, chauffeurs, entretiens, documents et leur affectation aux tournées et transferts.',
+  rechercheGlobale: 'Rechercher un véhicule, un chauffeur, une plaque, une tournée…',
+  nouveau: 'Nouveau véhicule',
+  kpi: {
+    vehicules: 'Véhicules', chauffeurs: 'Chauffeurs', enService: 'En service', enMaintenance: 'En maintenance',
+    documentsExpires: 'Documents expirés', vsPeriode: 'vs période précédente', nouveau: 'nouveau',
+  },
+  liste: {
+    titre: 'Liste des véhicules', recherche: 'Rechercher un véhicule, une plaque, un chauffeur…', tousTypes: 'Tous les types',
+    tousStatuts: 'Tous les statuts', toutesRegions: 'Toutes les régions', filtrer: 'Filtrer', vide: 'Aucun véhicule ne répond à ces filtres.',
+    exporter: 'Exporter (CSV)', resultat: '{n} véhicule(s)',
+  },
+  col: {
+    numero: '#', plaque: 'Plaque', type: 'Type', capacite: 'Capacité', region: 'Région', station: 'Station', chauffeur: 'Chauffeur',
+    km: 'Kilométrage', statut: 'Statut', depart: 'Départ', actions: 'Actions',
+  },
+  action: {
+    voir: 'Voir', modifier: 'Modifier', affecter: 'Affecter un chauffeur', planifier: 'Planifier un entretien', documents: 'Voir les documents',
+    tournee: 'Planifier une tournée', historique: 'Consulter l’historique', menu: 'Actions sur {plaque}',
+  },
+  depart: { oui: 'Peut partir aujourd’hui', non: 'Ne peut pas partir', ouiCourt: 'peut partir', nonCourt: 'ne peut pas partir' },
+  documentExpire: 'document expiré',
+  detail: { titre: 'Détail du véhicule', aucun: 'Choisissez un véhicule dans la liste.' },
+  onglet: { informations: 'Informations', documents: 'Documents', entretiens: 'Entretiens', affectations: 'Affectations', historique: 'Historique' },
+  info: {
+    plaque: 'Plaque d’immatriculation', type: 'Type', capacite: 'Capacité', region: 'Région', station: 'Station principale', km: 'Kilométrage',
+    miseEnService: 'Date de mise en service', chauffeur: 'Chauffeur actuel', consommation: 'Consommation moyenne', prochainEntretien: 'Prochain entretien',
+    valideJusquau: 'Valide jusqu’au {date}', expireeLe: 'Expirée le {date}', expireBientot: 'Expire le {date}', absent: 'Aucun document',
+    dansJours: 'dans {n} jours', depuisJours: 'depuis {n} jours', aujourdhui: 'aujourd’hui', estimee: 'estimée', aucunPlan: 'Aucun plan d’entretien',
+    auKm: 'à {km} km', aucunChauffeur: 'Aucun chauffeur', aucuneDonnee: '—',
+  },
+  documents: { type: 'Document', du: 'Du', au: 'Au', cout: 'Coût', piece: 'Pièce', etat: 'État', courante: 'en vigueur', ancienne: 'ancienne', vide: 'Aucun document enregistré.' },
+  entretiens: {
+    plans: 'Plans d’entretien', plan: 'Plan', pas: 'Tous les', prochain: 'Prochain', interventions: 'Interventions', numero: 'N°', nature: 'Nature',
+    ouverte: 'Ouverte le', close: 'Close le', atelier: 'Atelier', cout: 'Coût', enCours: 'En cours', vide: 'Aucune intervention.',
+    ou: 'ou', km: '{n} km', jours: '{n} jours',
+  },
+  affectations: { chauffeur: 'Chauffeur', du: 'Du', au: 'Au', par: 'Affecté par', enCours: 'en cours', vide: 'Aucune affectation.' },
+  historique: { le: 'Le', de: 'De', vers: 'Vers', motif: 'Motif', par: 'Par', inscrit: 'Inscription au parc', vide: 'Aucun changement de statut.' },
+  alertes: { titre: 'Alertes et échéances', voirTout: 'Voir tout', vide: 'Aucune échéance dans les {n} jours.', entretien: 'Entretien périodique' },
+  graphe: {
+    types: 'Répartition des véhicules par type', vehicules: 'véhicules', statuts: 'Statut des véhicules', km: 'Évolution du kilométrage',
+    kmSous: '(6 derniers mois)', kmSerie: 'Kilomètres parcourus', mois: 'Mois', carte: 'Véhicules par station', carteSous: '(station de rattachement)',
+    top: 'Top 5 des véhicules par activité', kmMois: 'Km (30 j)', tournees: 'Tournées', colis: 'Colis', total: 'Total',
+  },
+  rapides: { titre: 'Actions rapides' },
+});
+
+const lire = (o, cle) => cle.split('.').reduce((x, k) => (x && typeof x === 'object' ? x[k] : undefined), o);
+const remplir = (s, vars) => s.replace(/\{(\w+)\}/g, (m, k) => (vars && vars[k] !== undefined && vars[k] !== null ? String(vars[k]) : m));
+
+/**
+ * Le texte d'une clé de l'écran. `t` (facultative) est la traduction de l'application, appelée avec
+ * `flotte.ecran.<cle>` ; si elle rend la clé nue, ou rien, le français du module s'applique.
+ */
+export function texte(cle, t, vars) {
+  const pleine = `flotte.ecran.${cle}`;
+  if (typeof t === 'function') {
+    const tr = t(pleine, vars);
+    if (typeof tr === 'string' && tr && tr !== pleine) return tr;
+  }
+  const s = lire(TEXTES, cle);
+  return typeof s === 'string' ? remplir(s, vars) : cle;
+}

package/src/vue.js

@@ -0,0 +1,187 @@
+// @mostajs/flotte-ui — les vue-modèles : l'état du parc LU dans l'API de @mostajs/flotte, mis en forme pour l'écran.
+// Author: Dr Hamid MADANI <drmdh@msn.com> · AGPL-3.0-or-later
+//
+// Lecture seule. Toute RÈGLE (expiré, prochain entretien, peut partir) vient du moteur ; ici, seulement des agrégats
+// d'affichage : comptes, parts, variations sur la période, km par mois, top 5. Les vue-modèles portent des CODES :
+// la langue n'intervient qu'au rendu.
+import { regles as R } from '@mostajs/flotte';
+
+const STATUTS_PARC = ['en_service', 'a_l_atelier', 'immobilise'];
+const jourDe = (d) => (typeof d === 'string' ? d : d.toISOString().slice(0, 10));
+const pct = (n, total) => (total ? Math.round((100 * n) / total) : 0);
+const nomDe = (conducteurs, id) => {
+  if (!id) return null;
+  const c = typeof conducteurs === 'function' ? conducteurs(id) : conducteurs?.[id];
+  return { id, nom: c?.nom ?? id, telephone: c?.telephone ?? null };
+};
+
+/** Le statut d'un véhicule à une date passée, rejoué sur son historique ; null s'il n'était pas encore inscrit. */
+function statutAu(v, jour) {
+  if (v.inscritLe && v.inscritLe > jour) return null;
+  let s = 'en_service';
+  for (const pas of v.historique || []) if (pas.le <= jour) s = pas.vers;
+  return s;
+}
+/** Une échéance déclarée a-t-elle expiré à `jour` ? On lit celle qui faisait foi à cette date. */
+const expireeAu = (echeances, jour) => [...new Set(echeances.map((e) => e.type))]
+  .some((type) => { const e = R.echeanceCourante(echeances.filter((x) => x.debut <= jour), type); return Boolean(e && e.fin < jour); });
+const conducteurAu = (affectations, jour) => affectations.find((a) => a.du <= jour && (!a.au || a.au > jour))?.conducteur ?? null;
+/** Les km parcourus de `du` (exclu) à `au` : différence des derniers relevés, ou depuis le premier relevé de la période. */
+function kmEntre(releves, du, au) {
+  const fin = R.dernierReleve(releves, au);
+  const debut = R.dernierReleve(releves, du) || releves.find((r) => r.le > du && r.le <= au);
+  return fin && debut ? Math.max(0, fin.km - debut.km) : 0;
+}
+
+/** La variation d'un effectif ; `pct` null quand la base est nulle (pas de pourcentage depuis zéro). */
+function variation(n, avant, hausseFavorable) {
+  if (n === avant) return { sens: 'stable', pct: 0, favorable: null };
+  const sens = n > avant ? 'hausse' : 'baisse';
+  return { sens, pct: avant ? Math.round((100 * (n - avant)) / avant) : null, favorable: (sens === 'hausse') === hausseFavorable };
+}
+
+/** Tout ce que l'écran lit d'un véhicule, une fois. */
+async function lireVehicule(flotte, v, jour) {
+  const [releves, echeances, affectations, depart] = await Promise.all([
+    flotte.releves(v.id), flotte.echeances(v.id), flotte.affectations(v.id), flotte.peutPartir(v.id, { date: jour }),
+  ]);
+  return { v, releves, echeances, affectations, depart, km: R.dernierReleve(releves, jour)?.km ?? null };
+}
+
+const plat = (s) => String(s ?? '').toLowerCase().replace(/[\s-]+/g, '');
+
+/**
+ * Le tableau de bord d'ECR-16.
+ * opts : { declarations, date?, filtres?: { q, type, statut, region, page, v, onglet }, sites?: { code: { libelle, region } },
+ *          conducteurs?: objet ou fonction id → { nom, telephone }, activite?: async (id, { du, au }) → { tournees, colis },
+ *          perimetre?: [codes de site], periodeJours? (30), parPage? (10), alertesMax? (5) }
+ */
+export async function construireTableau(flotte, opts = {}) {
+  const { declarations = {}, sites = {}, conducteurs = {}, activite, perimetre = null, periodeJours = 30, parPage = 10, alertesMax = 5 } = opts;
+  const jour = jourDe(opts.date ?? new Date());
+  const avant = R.ajouterJours(jour, -periodeJours);
+  const f0 = opts.filtres || {};
+  const filtres = { q: String(f0.q ?? '').trim(), type: f0.type || '', statut: f0.statut || '', region: f0.region || '', page: Math.max(1, Number.parseInt(f0.page, 10) || 1), v: f0.v || '', onglet: f0.onglet || '' };
+  const dansPerimetre = (v) => !perimetre || perimetre.includes(v.site);
+  const regionDe = (v) => sites[v.site]?.region ?? null;
+
+  // Le parc du périmètre, réformés compris : il faut connaître le parc d'il y a `periodeJours` jours.
+  const tous = (await flotte.vehicules({ reformes: true })).filter(dansPerimetre);
+  const lus = await Promise.all(tous.map((v) => lireVehicule(flotte, v, jour)));
+  const parc = lus.filter((x) => x.v.statut !== 'reforme');
+
+  // ── Indicateurs (16.04–16.08) ──
+  const passe = lus.map((x) => ({ x, s: statutAu(x.v, avant) })).filter(({ s }) => s && s !== 'reforme');
+  const compte = (liste, pred) => liste.filter(pred).length;
+  const n = parc.length, n0 = passe.length;
+  const expires = compte(parc, (x) => expireeAu(x.echeances, jour));
+  const chauffeurs = new Set(parc.map((x) => conducteurAu(x.affectations, jour)).filter(Boolean)).size;
+  const chauffeurs0 = new Set(passe.map(({ x }) => conducteurAu(x.affectations, avant)).filter(Boolean)).size;
+  const parStatut = (s) => compte(parc, (x) => x.v.statut === s), parStatut0 = (s) => compte(passe, (p) => p.s === s);
+  const indicateurs = {
+    vehicules: { n, variation: variation(n, n0, true) },
+    chauffeurs: { n: chauffeurs, variation: variation(chauffeurs, chauffeurs0, true) },
+    enService: { n: parStatut('en_service'), part: pct(parStatut('en_service'), n), variation: variation(parStatut('en_service'), parStatut0('en_service'), true) },
+    enMaintenance: { n: parStatut('a_l_atelier'), part: pct(parStatut('a_l_atelier'), n), variation: variation(parStatut('a_l_atelier'), parStatut0('a_l_atelier'), false) },
+    documentsExpires: { n: expires, part: pct(expires, n), variation: variation(expires, compte(passe, ({ x }) => expireeAu(x.echeances, avant)), false) },
+  };
+
+  // ── Liste (16.09–16.11) : le texte cherche aussi le NOM du chauffeur, que le moteur ne connaît pas ──
+  const parTexte = filtres.q ? new Set((await flotte.vehicules({ q: filtres.q, reformes: true })).map((v) => v.id)) : null;
+  const ligne = (x) => {
+    const c = nomDe(conducteurs, conducteurAu(x.affectations, jour));
+    return {
+      id: x.v.id, code: x.v.code, plaque: x.v.immatriculation, type: x.v.type, site: x.v.site, region: regionDe(x.v),
+      capacite: { kg: x.v.attributs?.chargeUtileKg ?? null, m3: x.v.attributs?.volumeM3 ?? null }, conducteur: c, km: x.km, statut: x.v.statut,
+      documentExpire: expireeAu(x.echeances, jour), depart: x.depart,
+    };
+  };
+  const retenus = (filtres.statut === 'reforme' ? lus : parc).filter((x) => (!filtres.statut || x.v.statut === filtres.statut)
+    && (!filtres.type || x.v.type === filtres.type) && (!filtres.region || regionDe(x.v) === filtres.region)
+    && (!parTexte || parTexte.has(x.v.id) || plat(nomDe(conducteurs, conducteurAu(x.affectations, jour))?.nom).includes(plat(filtres.q))));
+  const pages = Number.isFinite(parPage) ? Math.max(1, Math.ceil(retenus.length / parPage)) : 1;
+  const page = Math.min(filtres.page, pages);
+  const tranche = Number.isFinite(parPage) ? retenus.slice((page - 1) * parPage, page * parPage) : retenus;
+  const liste = { lignes: tranche.map(ligne), total: retenus.length, page, pages, parPage };
+
+  // ── Alertes (16.19) : échéances et prochains entretiens à moins de alerteJours, expirés compris ──
+  const alerteJours = declarations.alerteJours ?? 30, limite = R.ajouterJours(jour, alerteJours);
+  const ids = new Set(parc.map((x) => x.v.id)), plaque = Object.fromEntries(parc.map((x) => [x.v.id, x.v.immatriculation]));
+  const alertes = (await flotte.aEcheance({ dans: alerteJours, date: jour })).filter((e) => ids.has(e.vehicule))
+    .map((e) => ({ date: e.fin, n: e.n, genre: 'echeance', type: e.type, vehicule: e.vehicule, plaque: plaque[e.vehicule], expiree: e.expiree }));
+  for (const x of parc) {
+    for (const p of await flotte.prochainsEntretiens(x.v.id, { date: jour })) {
+      if (p.le && p.le <= limite) alertes.push({ date: p.le, n: p.dans, genre: 'entretien', type: p.libelle, vehicule: x.v.id, plaque: x.v.immatriculation, expiree: p.dans < 0, estime: p.estime });
+    }
+  }
+  alertes.sort((a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0));
+
+  // ── Répartitions, kilométrage, stations, top 5 (16.20–16.24) ──
+  const repartition = Object.keys(declarations.types || {}).map((type) => ({ type, n: compte(parc, (x) => x.v.type === type) })).filter((r) => r.n);
+  const statuts = { ...Object.fromEntries(STATUTS_PARC.map((s) => [s, parStatut(s)])), total: n };
+  const mois = [];
+  for (let i = 5; i >= 0; i--) { const d = new Date(`${jour.slice(0, 7)}-01T00:00:00Z`); d.setUTCMonth(d.getUTCMonth() - i); mois.push(d.toISOString().slice(0, 7)); }
+  const fin = (m) => { const d = new Date(`${m}-01T00:00:00Z`); d.setUTCMonth(d.getUTCMonth() + 1); d.setUTCDate(0); const f = d.toISOString().slice(0, 10); return f < jour ? f : jour; };
+  const veille = (m) => R.ajouterJours(`${m}-01`, -1);
+  const km = { mois, valeurs: mois.map((m) => parc.reduce((s, x) => s + kmEntre(x.releves, veille(m), fin(m)), 0)) };
+  const parSiteMap = new Map();
+  for (const x of parc) {
+    const k = x.v.site ?? '';
+    if (!parSiteMap.has(k)) parSiteMap.set(k, { site: x.v.site ?? null, libelle: sites[k]?.libelle ?? x.v.site ?? null, region: sites[k]?.region ?? null, en_service: 0, a_l_atelier: 0, immobilise: 0, total: 0 });
+    const s = parSiteMap.get(k); s[x.v.statut] += 1; s.total += 1;
+  }
+  const parSite = [...parSiteMap.values()].sort((a, b) => String(a.site).localeCompare(String(b.site)));
+  const top = await Promise.all(parc.map(async (x) => ({
+    vehicule: x.v.id, code: x.v.code, plaque: x.v.immatriculation, type: x.v.type, km: kmEntre(x.releves, avant, jour),
+    ...(activite ? await activite(x.v.id, { du: avant, au: jour }) : {}),
+  })));
+  top.sort((a, b) => b.km - a.km || (a.code < b.code ? -1 : 1));
+
+  const choisi = filtres.v && lus.some((x) => x.v.id === filtres.v) ? filtres.v : liste.lignes[0]?.id;
+  const fiche = choisi ? await construireFiche(flotte, choisi, { ...opts, date: jour, onglet: filtres.onglet }) : null;
+
+  return {
+    date: jour, periodeJours, filtres, indicateurs, liste,
+    options: { types: Object.keys(declarations.types || {}), statuts: [...STATUTS_PARC, 'reforme'], regions: [...new Set(Object.values(sites).map((s) => s.region).filter(Boolean))].sort() },
+    alertes: { lignes: alertes.slice(0, alertesMax), total: alertes.length, jours: alerteJours },
+    repartition, statuts, km, parSite, top: top.slice(0, 5), avecActivite: typeof activite === 'function', fiche,
+  };
+}
+
+export const ONGLETS = Object.freeze(['informations', 'documents', 'entretiens', 'affectations', 'historique']);
+
+/**
+ * La fiche d'un véhicule : l'en-tête et l'onglet Informations toujours ; le contenu de l'onglet demandé.
+ * opts : { declarations, date?, sites?, conducteurs?, onglet? }
+ */
+export async function construireFiche(flotte, id, opts = {}) {
+  const { declarations = {}, sites = {}, conducteurs = {} } = opts;
+  const jour = jourDe(opts.date ?? new Date());
+  const onglet = ONGLETS.includes(opts.onglet) ? opts.onglet : 'informations';
+  const v = await flotte.lire(id);
+  const x = await lireVehicule(flotte, v, jour);
+  const alerteJours = declarations.alerteJours ?? 30;
+  const echeances = Object.entries(declarations.echeances || {}).map(([type, d]) => {
+    const courante = R.echeanceCourante(x.echeances.filter((e) => e.debut <= jour), type) || R.echeanceCourante(x.echeances, type);
+    const n = courante ? R.jours(jour, courante.fin) : null;
+    return { type, obligatoire: Boolean(d.obligatoire), courante, n, etat: !courante ? 'absente' : n < 0 ? 'expiree' : n < alerteJours ? 'proche' : 'valide' };
+  });
+  const fiche = {
+    date: jour, onglet, vehicule: v, plaque: v.immatriculation, site: v.site, siteLibelle: sites[v.site]?.libelle ?? v.site ?? null, region: sites[v.site]?.region ?? null,
+    capacite: { kg: v.attributs?.chargeUtileKg ?? null, m3: v.attributs?.volumeM3 ?? null },
+    conducteur: nomDe(conducteurs, conducteurAu(x.affectations, jour)), km: x.km, depart: x.depart,
+    consommation: (await flotte.consommation(id)).lPour100Km, prochain: await flotte.prochainEntretien(id, { date: jour }), echeances,
+    miseEnService: v.acquisition?.le ?? v.inscritLe ?? null,
+  };
+  if (onglet === 'documents') {
+    fiche.documents = [...x.echeances].sort((a, b) => (a.type === b.type ? (a.debut < b.debut ? 1 : -1) : a.type < b.type ? -1 : 1))
+      .map((e) => ({ ...e, courante: echeances.find((c) => c.type === e.type)?.courante?.id === e.id }));
+  }
+  if (onglet === 'entretiens') {
+    const [prochains, plans, interventions] = await Promise.all([flotte.prochainsEntretiens(id, { date: jour }), flotte.plans(id), flotte.interventions(id)]);
+    fiche.entretiens = { prochains: prochains.map((p) => ({ ...p, pas: plans.find((q) => q.id === p.plan) })), interventions: [...interventions].sort((a, b) => (a.ouverteLe < b.ouverteLe ? 1 : -1)) };
+  }
+  if (onglet === 'affectations') fiche.affectations = [...x.affectations].reverse().map((a) => ({ ...a, conducteur: nomDe(conducteurs, a.conducteur) }));
+  if (onglet === 'historique') fiche.historique = [...(v.historique || [])].reverse();
+  return fiche;
+}