@mostajs/wagon-ui 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changelog — @mostajs/wagon-ui
+
+**Auteur** : Dr Hamid MADANI <drmdh@msn.com>
+
+## 0.1.0 — 2026-10-01
+Première version : les pages du wagon de mdseal (mise en page, accueil, tarifs, inscription, connexion par mot
+de passe ou par code, espace client, administration des paliers et de l'usage, pages légales, introuvable), en
+français, anglais et arabe, sans rien de ce que mdseal vend. Identité, couleurs, navigation de la charge utile et
+ressources mesurées par configuration. 9 essais, chacun confronté à un sabotage.

package/README.md

@@ -0,0 +1,40 @@
+# @mostajs/wagon-ui
+
+**Auteur** : Dr Hamid MADANI <drmdh@msn.com> · AGPL-3.0-or-later
+
+Les **pages du wagon** d'un SaaS : tout ce qu'il montre en dehors de ce qu'il vend. Extraites de mdseal,
+où elles font, avec leurs traductions, environ 60 % du wagon — sans rien de ce que mdseal vend.
+
+| vue | ce qu'elle rend |
+|---|---|
+| `page()` | la mise en page : langue et sens (arabe de droite à gauche), sélecteur de langues, navigation, connexion, pied légal, en-têtes pour les moteurs |
+| `accueil()` | la vitrine : titre, chapeau, actions, preuves |
+| `tarifs()` | les paliers, une ligne par **ressource déclarée**, les clés d'API, l'inscription par palier |
+| `inscription()`, `inscriptionFaite()`, `connexion()`, `merci()` | le parcours d'entrée — mot de passe, ou code reçu par courriel |
+| `espace()` | le compte du client : palier, jauges, clés, factures, gestion de l'abonnement |
+| `adminPaliers()`, `adminUsage()` | l'administration : quotas par palier, tableau d'usage |
+| `legal()`, `introuvable()` | les documents légaux, la page introuvable |
+
+Trois langues : français, anglais, arabe. Vues pures, aucune dépendance, aucun script.
+
+## Greffer un nouveau SaaS
+
+```js
+import { creerWagonUi } from '@mostajs/wagon-ui'
+
+const ui = creerWagonUi({
+  marque: { nom: 'Acme Proof', symbole: '◆', slogan: { fr: 'la preuve, simplement', en: 'proof, simply' }, auteur: 'Jeanne Martin', courriel: 'contact@acme.test' },
+  couleurs: { brand: '#123456', lien: '#234567', ornement: '#ABCDEF' },
+  liens: [{ href: '/outil', libelle: { fr: 'L’outil', en: 'The tool' } }],          // la charge utile
+  ressources: [{ cle: 'certificat', limite: 'certificatsParMois', periode: 'mois',
+    libelle: { fr: 'Certificats', en: 'Certificates' }, parPeriode: { fr: '{n} certificats par mois', en: '{n} certificates per month' } }],
+})
+
+res.end(ui.page({ actif: '/tarifs', titre: 'Tarifs', lang: 'fr', base: 'https://acme.test',
+  contenu: ui.tarifs({ lang: 'fr', paliers }) }))
+```
+
+La logique vient des modules : comptes (`@mostajs/comptes`), abonnements et quotas
+(`@mostajs/subscriptions-plan`), connexion (`@mostajs/auth-lite`, `@mostajs/auth-plug`).
+
+Voir `llms.txt` pour l'API complète.

package/llms.txt

@@ -0,0 +1,31 @@
+# @mostajs/wagon-ui — fiche pour assistants
+
+> Les pages du wagon d'un SaaS (tout sauf ce qu'il vend), extraites de mdseal : mise en page, accueil, tarifs, inscription, connexion, espace client, administration, pages légales — fr, en, ar. Vues pures (données → HTML), zéro dépendance. Auteur : Dr Hamid MADANI <drmdh@msn.com>.
+
+## RÔLE
+Rendre les écrans communs à tout SaaS, identiques d'un produit à l'autre, sans nommer le produit : l'identité et ce que le service mesure viennent de la configuration.
+
+## NE FAIT PAS
+- router, sessions → @mostajs/auth-plug · mot de passe / code → @mostajs/auth-lite · écran de saisie du code → @mostajs/auth-ui
+- quotas, paiement → @mostajs/subscriptions-plan · comptes, clés → @mostajs/comptes
+
+## API
+`creerWagonUi({ marque: { nom, auteur, symbole?, slogan?, courriel?, licence? }, couleurs?: { brand, lien, ornement, encre, surface }, langues?: ['fr','en','ar'], liens?: [{ href, libelle }], ressources?: [{ cle, limite, periode: 'jour'|'mois', libelle, parPeriode?, sansLimite?, aucun? }], textes?: { fr: { … } } })` → `ui` :
+- `ui.page({ actif, titre, contenu, lang, connecte?, base?, description? })` — la page entière ; `contenu` = HTML déjà rendu.
+- `ui.accueil({ lang, titre, lede?, actions?: [{ href, libelle, principal? }], preuves?: [{ titre, texte }], note? })`
+- `ui.tarifs({ lang, paliers: [{ slug, name, price (centimes), active?, limits: { <limite>: n, maxCles } }], sousTitre?, inscriptionHref? })`
+- `ui.inscription({ lang, palier, erreur?, minMotDePasse?, methode?: 'motdepasse'|'code', action? })` · `ui.inscriptionFaite({ lang, cle?, base?, paiement?: { compteId, planSlug } })`
+- `ui.connexion({ lang, erreur?, methode?: 'motdepasse'|'code', action? })` · `ui.merci({ lang })`
+- `ui.espace({ lang, vue: { plan, quotas: { <cle>: { courant, limite|null, restant } }, cles, factures, portailPossible, limites }, erreur?, cleNeuve? })`
+- `ui.adminPaliers({ lang, offres, message? })` — champs `<slug>.<limite>` et `<slug>.maxCles` (POST /admin/plans).
+- `ui.adminUsage({ lang, usage: { jours, totaux: { comptes, actifs, payants, erreurs, parRessource }, lignes: [{ nom, plan, actif, dernierJour, erreursFenetre, parRessource: { <cle>: { courant, limite, part, fenetre } } }] }, anonyme? })`
+- `ui.legal({ lang, doc: 'mentions-legales'|'cgu'|'cgv'|'confidentialite', html })` · `ui.introuvable({ lang })`
+- `ui.t(lang)(cle, vars)` · `CATALOGUES` · `dirDe(lang)` · `esc`
+
+## ROUTES ATTENDUES (liens et formulaires des vues)
+`/`, `/tarifs`, `/aide`, `/apropos`, `/inscription` (POST : plan, nom, courriel, motdepasse), `/connexion` (POST : courriel, motdepasse), `/deconnexion`, `/compte`, `/compte/cles` (POST : libelle), `/compte/cles/revoquer` (POST : prefix), `/compte/portail` (POST), `/paiement` (POST : compte, plan), `/admin/plans` (POST), `/admin/usage`, `/mentions-legales`, `/cgu`, `/cgv`, `/confidentialite`.
+
+## PIÈGES
+- `legal({ html })` n'échappe pas `html` : il doit venir des textes de l'éditeur (mostajs/templates), jamais d'un formulaire.
+- Les prix sont en CENTIMES. `-1` = sans limite ; `0` = non compris.
+- Une ressource sans `parPeriode` s'affiche « libellé : n ».

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@mostajs/wagon-ui",
+  "version": "0.1.0",
+  "description": "Les pages du wagon d'un SaaS — mise en page (langues, pied légal, en-têtes pour les moteurs), accueil, tarifs, inscription, connexion (mot de passe ou code), espace client (palier, jauges, clés, factures, gestion de l'abonnement), administration (paliers, usage), pages légales — en fr, en, ar. Extraites de mdseal, sans ce qu'il vend : l'identité et les ressources mesurées viennent de la configuration. Vues pures, zéro dépendance.",
+  "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",
+    "README.md",
+    "llms.txt",
+    "CHANGELOG.md"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "test": "mkdir -p test-scripts/.out && node node_modules/@mostajs/mjs-unit/bin/cli.mjs test-scripts/unit/*.test.mjs --json=test-scripts/.out/report.json --title=\"@mostajs/wagon-ui\""
+  },
+  "keywords": [
+    "mostajs",
+    "ui",
+    "html",
+    "saas",
+    "pricing",
+    "account",
+    "billing",
+    "i18n",
+    "rtl",
+    "ui-html-stack",
+    "wagon"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/apolocine/mosta-ui-html-stack"
+  },
+  "mostajs": {
+    "niveau": "N2",
+    "nature": "vue",
+    "reutilisabilite": "multi-domaine",
+    "depend_de": [],
+    "forme": "vues",
+    "question": "Quelles pages montre un SaaS en dehors de ce qu'il vend — et comment les reprendre telles quelles pour le suivant ?",
+    "verbes": [
+      "creerWagonUi",
+      "page",
+      "accueil",
+      "tarifs",
+      "inscription",
+      "connexion",
+      "espace",
+      "adminPaliers",
+      "adminUsage",
+      "legal",
+      "introuvable"
+    ],
+    "ne_fait_pas": [
+      "router, ouvrir une session → @mostajs/auth-plug",
+      "vérifier un mot de passe ou un code → @mostajs/auth-lite",
+      "compter un quota, encaisser → @mostajs/subscriptions-plan",
+      "créer un compte, une clé → @mostajs/comptes",
+      "écran de saisie du code par courriel → @mostajs/auth-ui"
+    ]
+  },
+  "devDependencies": {
+    "@mostajs/mjs-unit": "^0.7.0"
+  }
+}

package/src/i18n/ar.js

@@ -0,0 +1,128 @@
+// @mostajs/wagon-ui — catalogue ar. Libellés génériques repris de mdseal (01/10/2026),
+// sans ce qui nomme la charge utile. Author: Dr Hamid MADANI <drmdh@msn.com>
+export const ar = {
+  "nav": {
+    "tarifs": "الأسعار",
+    "aide": "مساعدة",
+    "apropos": "حول",
+    "legal": "قانوني"
+  },
+  "layout": {
+    "auteur": "المؤلّف",
+    "propulse": "مبنيّ على منظومة",
+    "langue": "اللغة"
+  },
+  "tarifs": {
+    "titre": "الأسعار",
+    "parMois": "/شهريًّا",
+    "gratuit": "مجّاني",
+    "cles": "مفتاح واجهة واحد",
+    "clesPluriel": "{n} مفاتيح واجهة",
+    "choisir": "اختر هذه الخطّة",
+    "commencer": "ابدأ مجّانًا",
+    "encours": "الدفع غير متاح حاليًّا",
+    "note": "الأسعار دون رسوم. يمكن الإلغاء في أيّ وقت: يسري الاشتراك إلى نهاية المدّة المدفوعة.",
+    "aucun": "غير مشمول"
+  },
+  "inscription": {
+    "titre": "إنشاء حساب",
+    "plan": "الخطّة المختارة",
+    "nom": "الاسم (الذي سيظهر على الفاتورة)",
+    "courriel": "عنوان البريد الإلكتروني",
+    "courrielAide": "إليه تُرسَل الفاتورة، وهو كذلك معرّفك.",
+    "bouton": "أنشئ الحساب",
+    "boutonPayant": "أنشئ الحساب وادفع",
+    "deja": "يوجد حساب بهذا العنوان بالفعل.",
+    "faite": "أُنشئ الحساب",
+    "voiciLaCle": "هذا مفتاح واجهتك. لن يُعرَض مرّة أخرى أبدًا: انسخه الآن.",
+    "etEnsuite": "جرّبه في الحال:",
+    "versPaiement": "تابِع إلى الدفع",
+    "merci": "شكرًا",
+    "merciTexte": "سُجِّل الدفع. وتصير خطّتك نافذة بمجرّد أن يؤكّد لنا Stripe ذلك — وهو فوريّ في العادة.",
+    "merciVerif": "تحقّق من خطّتك:",
+    "gardezLaCle": "انسخ مفتاحك قبل المتابعة: لن يُعرَض مرّة أخرى.",
+    "planIndisponible": "هذه الخطّة غير متاحة."
+  },
+  "espace": {
+    "motDePasse": "كلمة السرّ",
+    "motDePasseAide": "{n} محارف على الأقلّ. وبها يُفتَح فضاؤك.",
+    "faible": "رُفضت كلمة السرّ: {motifs}",
+    "tropCourt": "قصيرة جدًّا",
+    "tropLong": "طويلة جدًّا",
+    "trivial": "شائعة جدًّا",
+    "seConnecter": "تسجيل الدخول",
+    "seDeconnecter": "تسجيل الخروج",
+    "compte": "حسابي",
+    "identifiantsFaux": "العنوان أو كلمة السرّ غير صحيح.",
+    "connexionRequise": "سجّل الدخول لترى فضاءك.",
+    "votrePlan": "خطّتك",
+    "consommationDuJour": "اليوم",
+    "consommationDuMois": "هذا الشهر",
+    "restant": "بقي {n}",
+    "illimite": "بلا حدّ",
+    "vosCles": "مفاتيح واجهتك",
+    "creerUneCle": "أنشئ مفتاحًا",
+    "libelleCle": "فيمَ يُستعمل هذا المفتاح؟",
+    "revoquer": "إلغاء",
+    "revoquee": "مُلغًى",
+    "jamaisUtilisee": "لم يُستعمَل قطّ",
+    "appels": "{n} نداء",
+    "plafondAtteint": "تسمح خطّتك بـ {n} مفتاح/مفاتيح نشِطة.",
+    "cleCreee": "أُنشئ المفتاح. انسخه: لن يُعرَض مرّة أخرى.",
+    "gererAbonnement": "إدارة اشتراكي",
+    "gererAide": "وسيلة الدفع والفواتير والإلغاء — لدى Stripe.",
+    "vosFactures": "فواتيرك",
+    "aucuneFacture": "لا فاتورة بعد.",
+    "voirFacture": "عرض",
+    "payee": "مدفوعة",
+    "impayee": "غير مدفوعة",
+    "ameliorer": "غيّر الخطّة",
+    "recevoirCode": "استلام رمز عبر البريد الإلكتروني"
+  },
+  "usage": {
+    "titre": "لوحة الاستعمال",
+    "sousTitre": "الحسابات والاستهلاك الجاري والاتّجاه على {jours} يومًا. الأرقام من سجلّ الاستهلاك — وهو الذي يُحاسِب.",
+    "comptes": "الحسابات",
+    "actifs": "منها النشطة",
+    "payants": "منها المدفوعة",
+    "erreurs": "الأخطاء",
+    "parCompte": "حسب الحساب",
+    "aucunCompte": "لا حساب بعد.",
+    "compte": "الحساب",
+    "plan": "الفئة",
+    "surFenetre": "على المدّة",
+    "dernierJour": "آخر يوم نشِط",
+    "suspendu": "(موقوف)",
+    "jamais": "أبدًا",
+    "erreursCourt": "خطأ",
+    "sansLimite": "بلا حدّ",
+    "anonyme": "حصّة التجربة (المجهول)",
+    "anonymeVolatil": "⚠ هذه الأرقام تعيش في الذاكرة وتعود إلى الصفر عند كلّ إعادة تشغيل — محسوبة منذ {depuis} بالتوقيت العالمي. لا تُحاسَب، ومن ثمّ لا تُكتب في القاعدة: خدمةٌ عموميّة تتلقّى من الزيارات المجهولة ما لا يبرّر كتابةً عند كلّ زيارة. فـ«0» هنا قد يعني «الخدمة أُعيد تشغيلها للتوّ»، لا «لم يأتِ أحد» أبدًا.",
+    "visiteursJour": "زوّار اليوم",
+    "adressesJour": "عناوين اليوم",
+    "seaux": "عدّادات في الذاكرة",
+    "operationsAnon": "العمليات المجهولة"
+  },
+  "admin": {
+    "titre": "المستويات والحصص",
+    "sousTitre": "ما يُضبط هنا هو ما يُطبَّق — وما تُعلنه صفحة الأسعار.",
+    "palier": "المستوى",
+    "cles": "مفاتيح الواجهة",
+    "nonVendu": "(لا يُباع)",
+    "sansLimite": "−1 تعني «بلا حدّ». و0 تُغلق العمليّة لهذا المستوى.",
+    "enregistrer": "حفظ",
+    "enregistre": "تمّ الحفظ. صفحة الأسعار والحصص تتبعان بالفعل."
+  },
+  "legal": {
+    "mentions": "البيانات القانونية",
+    "cgu": "شروط الاستخدام",
+    "cgv": "شروط البيع",
+    "confidentialite": "الخصوصية",
+    "indisponible": "لم تُنشر هذه الوثيقة بعد."
+  },
+  "erreur": {
+    "introuvable": "الصفحة غير موجودة",
+    "introuvableTexte": "هذا العنوان لا يؤدّي إلى أيّ صفحة.",
+    "retour": "العودة إلى الصفحة الرئيسية"
+  }
+};

package/src/i18n/en.js

@@ -0,0 +1,128 @@
+// @mostajs/wagon-ui — catalogue en. Libellés génériques repris de mdseal (01/10/2026),
+// sans ce qui nomme la charge utile. Author: Dr Hamid MADANI <drmdh@msn.com>
+export const en = {
+  "nav": {
+    "tarifs": "Pricing",
+    "aide": "Help",
+    "apropos": "About",
+    "legal": "Legal"
+  },
+  "layout": {
+    "auteur": "Author",
+    "propulse": "built on the",
+    "langue": "Language"
+  },
+  "tarifs": {
+    "titre": "Pricing",
+    "parMois": "/month",
+    "gratuit": "Free",
+    "cles": "{n} API key",
+    "clesPluriel": "{n} API keys",
+    "choisir": "Choose this plan",
+    "commencer": "Start for free",
+    "encours": "Payment is not available yet",
+    "note": "Prices exclude tax. Cancel at any time: the subscription runs to the end of the period already paid for.",
+    "aucun": "Not included"
+  },
+  "inscription": {
+    "titre": "Create an account",
+    "plan": "Chosen plan",
+    "nom": "Name (the one that will appear on the invoice)",
+    "courriel": "Email address",
+    "courrielAide": "This is where the invoice goes, and it is also your identifier.",
+    "bouton": "Create the account",
+    "boutonPayant": "Create the account and pay",
+    "deja": "An account already exists for this address.",
+    "faite": "Account created",
+    "voiciLaCle": "Here is your API key. It will never be shown again: copy it now.",
+    "etEnsuite": "Try it straight away:",
+    "versPaiement": "Continue to payment",
+    "merci": "Thank you",
+    "merciTexte": "The payment is recorded. Your plan becomes active as soon as Stripe confirms it to us — usually at once.",
+    "merciVerif": "Check your plan:",
+    "gardezLaCle": "Copy your key before continuing: it will not be shown again.",
+    "planIndisponible": "That plan is not available."
+  },
+  "espace": {
+    "motDePasse": "Password",
+    "motDePasseAide": "At least {n} characters. This is what opens your account area.",
+    "faible": "Password refused: {motifs}",
+    "tropCourt": "too short",
+    "tropLong": "too long",
+    "trivial": "too common",
+    "seConnecter": "Sign in",
+    "seDeconnecter": "Sign out",
+    "compte": "My account",
+    "identifiantsFaux": "Incorrect address or password.",
+    "connexionRequise": "Sign in to see your account area.",
+    "votrePlan": "Your plan",
+    "consommationDuJour": "Today",
+    "consommationDuMois": "This month",
+    "restant": "{n} left",
+    "illimite": "unlimited",
+    "vosCles": "Your API keys",
+    "creerUneCle": "Create a key",
+    "libelleCle": "What is this key for?",
+    "revoquer": "Revoke",
+    "revoquee": "Revoked",
+    "jamaisUtilisee": "never used",
+    "appels": "{n} calls",
+    "plafondAtteint": "Your plan allows {n} active key(s).",
+    "cleCreee": "Key created. Copy it: it will not be shown again.",
+    "gererAbonnement": "Manage my subscription",
+    "gererAide": "Payment method, invoices, cancellation — at Stripe.",
+    "vosFactures": "Your invoices",
+    "aucuneFacture": "No invoice yet.",
+    "voirFacture": "View",
+    "payee": "paid",
+    "impayee": "unpaid",
+    "ameliorer": "Change plan",
+    "recevoirCode": "Receive a code by email"
+  },
+  "usage": {
+    "titre": "Usage dashboard",
+    "sousTitre": "Accounts, current consumption and the trend over {jours} days. The figures come from the usage log — the one that bills.",
+    "comptes": "Accounts",
+    "actifs": "Of which active",
+    "payants": "Of which paying",
+    "erreurs": "Errors",
+    "parCompte": "By account",
+    "aucunCompte": "No account yet.",
+    "compte": "Account",
+    "plan": "Tier",
+    "surFenetre": "Over the window",
+    "dernierJour": "Last active day",
+    "suspendu": "(suspended)",
+    "jamais": "never",
+    "erreursCourt": "err.",
+    "sansLimite": "no limit",
+    "anonyme": "The trial share (anonymous)",
+    "anonymeVolatil": "⚠ These figures live in MEMORY and restart from zero on every restart — counted since {depuis} UTC. They are not billed, so not written to the database: a public service receives far too many anonymous visits for one write per visit to be justified. A “0” here may therefore mean “the service has just restarted”, never “nobody came”.",
+    "visiteursJour": "Visitors today",
+    "adressesJour": "Addresses today",
+    "seaux": "In-memory counters",
+    "operationsAnon": "Anonymous operations"
+  },
+  "admin": {
+    "titre": "Tiers and quotas",
+    "sousTitre": "What is set here is what is enforced — and what the Pricing page announces.",
+    "palier": "Tier",
+    "cles": "API keys",
+    "nonVendu": "(not for sale)",
+    "sansLimite": "−1 means “no limit”. 0 closes the operation for that tier.",
+    "enregistrer": "Save",
+    "enregistre": "Saved. The Pricing page and the quotas already follow."
+  },
+  "legal": {
+    "mentions": "Legal notice",
+    "cgu": "Terms of use",
+    "cgv": "Terms of sale",
+    "confidentialite": "Privacy",
+    "indisponible": "This document is not published yet."
+  },
+  "erreur": {
+    "introuvable": "Page not found",
+    "introuvableTexte": "This address leads to no page.",
+    "retour": "Back to the home page"
+  }
+};

package/src/i18n/fr.js

@@ -0,0 +1,128 @@
+// @mostajs/wagon-ui — catalogue fr. Libellés génériques repris de mdseal (01/10/2026),
+// sans ce qui nomme la charge utile. Author: Dr Hamid MADANI <drmdh@msn.com>
+export const fr = {
+  "nav": {
+    "tarifs": "Tarifs",
+    "aide": "Aide",
+    "apropos": "À propos",
+    "legal": "Légal"
+  },
+  "layout": {
+    "auteur": "Auteur",
+    "propulse": "propulsé par l’écosystème",
+    "langue": "Langue"
+  },
+  "tarifs": {
+    "titre": "Tarifs",
+    "parMois": "/mois",
+    "gratuit": "Gratuit",
+    "cles": "{n} clé d’API",
+    "clesPluriel": "{n} clés d’API",
+    "choisir": "Choisir ce plan",
+    "commencer": "Commencer gratuitement",
+    "encours": "Paiement indisponible pour l’instant",
+    "note": "Les prix sont hors taxes. Résiliable à tout moment : l’abonnement court jusqu’à la fin de la période déjà payée.",
+    "aucun": "Non compris"
+  },
+  "inscription": {
+    "titre": "Créer un compte",
+    "plan": "Plan choisi",
+    "nom": "Nom (celui qui figurera sur la facture)",
+    "courriel": "Adresse de courriel",
+    "courrielAide": "C’est là que part la facture, et c’est aussi votre identifiant.",
+    "bouton": "Créer le compte",
+    "boutonPayant": "Créer le compte et payer",
+    "deja": "Un compte existe déjà pour cette adresse.",
+    "faite": "Compte créé",
+    "voiciLaCle": "Voici votre clé d’API. Elle ne sera plus jamais affichée : copiez-la maintenant.",
+    "etEnsuite": "Essayez-la tout de suite :",
+    "versPaiement": "Continuer vers le paiement",
+    "merci": "Merci",
+    "merciTexte": "Le paiement est enregistré. Votre plan sera actif dès que Stripe nous l'aura confirmé — c'est généralement immédiat.",
+    "merciVerif": "Vérifiez votre plan :",
+    "gardezLaCle": "Copiez votre clé avant de continuer : elle ne sera plus affichée.",
+    "planIndisponible": "Ce plan n’est pas disponible."
+  },
+  "espace": {
+    "motDePasse": "Mot de passe",
+    "motDePasseAide": "Au moins {n} caractères. C’est lui qui ouvrira votre espace.",
+    "faible": "Mot de passe refusé : {motifs}",
+    "tropCourt": "trop court",
+    "tropLong": "trop long",
+    "trivial": "trop courant",
+    "seConnecter": "Se connecter",
+    "seDeconnecter": "Se déconnecter",
+    "compte": "Mon compte",
+    "identifiantsFaux": "Adresse ou mot de passe incorrect.",
+    "connexionRequise": "Connectez-vous pour voir votre espace.",
+    "votrePlan": "Votre plan",
+    "consommationDuJour": "Aujourd’hui",
+    "consommationDuMois": "Ce mois-ci",
+    "restant": "{n} restant(e)s",
+    "illimite": "sans limite",
+    "vosCles": "Vos clés d’API",
+    "creerUneCle": "Créer une clé",
+    "libelleCle": "À quoi sert cette clé ?",
+    "revoquer": "Révoquer",
+    "revoquee": "Révoquée",
+    "jamaisUtilisee": "jamais utilisée",
+    "appels": "{n} appels",
+    "plafondAtteint": "Votre plan permet {n} clé(s) active(s).",
+    "cleCreee": "Clé créée. Copiez-la : elle ne sera plus affichée.",
+    "gererAbonnement": "Gérer mon abonnement",
+    "gererAide": "Moyen de paiement, factures, résiliation — chez Stripe.",
+    "vosFactures": "Vos factures",
+    "aucuneFacture": "Aucune facture pour l’instant.",
+    "voirFacture": "Voir",
+    "payee": "payée",
+    "impayee": "impayée",
+    "ameliorer": "Changer de plan",
+    "recevoirCode": "Recevoir un code par courriel"
+  },
+  "usage": {
+    "titre": "Tableau de bord d’usage",
+    "sousTitre": "Comptes, consommation courante et tendance sur {jours} jours. Les chiffres viennent du journal de consommation — celui qui facture.",
+    "comptes": "Comptes",
+    "actifs": "Dont actifs",
+    "payants": "Dont payants",
+    "erreurs": "Erreurs",
+    "parCompte": "Par compte",
+    "aucunCompte": "Aucun compte pour l’instant.",
+    "compte": "Compte",
+    "plan": "Palier",
+    "surFenetre": "Sur la fenêtre",
+    "dernierJour": "Dernier jour actif",
+    "suspendu": "(suspendu)",
+    "jamais": "jamais",
+    "erreursCourt": "err.",
+    "sansLimite": "sans limite",
+    "anonyme": "La part d’essai (anonyme)",
+    "anonymeVolatil": "⚠ Ces chiffres vivent en MÉMOIRE et repartent de zéro à chaque redémarrage — comptés depuis {depuis} UTC. Ils ne sont pas facturés, donc pas écrits en base : un service public reçoit trop de visites anonymes pour qu’une écriture par visite se justifie. Un « 0 » ici peut donc vouloir dire « le service vient de redémarrer », jamais « personne n’est venu ».",
+    "visiteursJour": "Visiteurs du jour",
+    "adressesJour": "Adresses du jour",
+    "seaux": "Compteurs en mémoire",
+    "operationsAnon": "Opérations anonymes"
+  },
+  "admin": {
+    "titre": "Paliers et quotas",
+    "sousTitre": "Ce qui est réglé ici est ce qui est appliqué — et ce qui est annoncé sur la page Tarifs.",
+    "palier": "Palier",
+    "cles": "Clés d’API",
+    "nonVendu": "(ne se vend pas)",
+    "sansLimite": "−1 vaut « sans limite ». 0 ferme l’opération pour ce palier.",
+    "enregistrer": "Enregistrer",
+    "enregistre": "Enregistré. La page Tarifs et les quotas suivent déjà."
+  },
+  "legal": {
+    "mentions": "Mentions légales",
+    "cgu": "Conditions d’utilisation",
+    "cgv": "Conditions de vente",
+    "confidentialite": "Confidentialité",
+    "indisponible": "Ce document n’est pas encore publié."
+  },
+  "erreur": {
+    "introuvable": "Page introuvable",
+    "introuvableTexte": "Cette adresse ne mène à aucune page.",
+    "retour": "Retour à l’accueil"
+  }
+};

package/src/index.js

@@ -0,0 +1,402 @@
+/**
+ * @mostajs/wagon-ui — les PAGES du wagon : tout ce qu'un SaaS montre, sauf ce qu'il vend.
+ * @author Dr Hamid MADANI <drmdh@msn.com>
+ * @license AGPL-3.0-or-later
+ *
+ * Extrait de mdseal (01/10/2026), où ces pages font, avec leurs traductions, environ 60 % du wagon
+ * (saas-making/methode/AUDIT-WAGON-MDSEAL-01102026.md) : la mise en page (en-tête, langues, pied
+ * légal, en-têtes pour les moteurs), l'accueil, les tarifs, l'inscription, la connexion, le
+ * remerciement après paiement, l'espace du client (palier, jauges, clés, factures, gestion de
+ * l'abonnement), l'administration (paliers, tableau d'usage), les pages légales et l'introuvable.
+ *
+ * Vues PURES — des données en entrée, du HTML en sortie ; aucune route, aucune base, aucun script.
+ * Rien n'y nomme mdseal ni ce qu'il vend :
+ *   - l'IDENTITÉ (nom, slogan, auteur, couleurs, liens de la charge utile) vient de la configuration ;
+ *   - ce que le service MESURE (« certificats », « conversions »…) se déclare en `ressources`,
+ *     avec ses libellés : les tarifs, les jauges et l'administration en font une ligne chacune ;
+ *   - les libellés communs sont ceux de mdseal, en français, anglais et arabe (`src/i18n/`).
+ *
+ * Les règles que mdseal a payées restent dans ces vues : la couleur d'accent ne porte jamais de
+ * texte (elle va aux filets et aux jauges) ; une jauge écrit son pourcentage à côté (daltonisme,
+ * impression) ; le code reste de gauche à droite dans une page arabe ; une clé n'est montrée
+ * qu'une fois ; la gestion de l'abonnement n'apparaît que si elle est possible.
+ */
+import { fr } from './i18n/fr.js';
+import { en } from './i18n/en.js';
+import { ar } from './i18n/ar.js';
+
+export const CATALOGUES = Object.freeze({ fr, en, ar });
+export const LIBELLES_LANGUES = Object.freeze({ fr: 'Français', en: 'English', ar: 'العربية' });
+const RTL = new Set(['ar', 'he', 'fa', 'ur']);
+export const dirDe = (lang) => (RTL.has(lang) ? 'rtl' : 'ltr');
+
+export const esc = (s = '') => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+/** Une adresse sûre pour un href : relative, http(s) ou mailto/tel ; tout le reste devient « # ». */
+const lien = (href) => {
+  const h = String(href ?? '').trim();
+  return /^(\/(?!\/)|https?:\/\/|mailto:|tel:|#|\?)/i.test(h) ? esc(h) : '#';
+};
+const NBSP = ' ';
+const euros = (centimes) => `${(Number(centimes) || 0) / 100}${NBSP}€`;
+
+const DERIVES = '--survol:#eef2f9;--bordure:#cbd5e0;--doux:#475569;--fond-doux:#f1f5f9;'
+  + '--succes-fond:#f0fdf4;--succes-bord:#bbf7d0;--succes-texte:#166534;'
+  + '--erreur-fond:#fef2f2;--erreur-bord:#fecaca;--erreur-texte:#991b1b';
+const REPLI = { brand: '#06284A', lien: '#2c5282', ornement: '#2c5282', encre: '#1a1a1a', surface: '#fff' };
+const COULEUR = /^#[0-9a-fA-F]{3,8}$/;
+
+/** La feuille de style de mdseal, sans ce qui servait la charge utile. Aucune couleur en dur. */
+function style(c) {
+  return `:root{--brand:${c.brand};--accent:${c.lien};--ornement:${c.ornement};--ink:${c.encre};--surface:${c.surface};--line:#e2e8f0;${DERIVES}}
+*{box-sizing:border-box} body{font:15px/1.6 system-ui,sans-serif;margin:0;color:var(--ink);background:var(--surface)}
+header{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;max-width:920px;margin:0 auto;padding:1rem;border-bottom:3px solid var(--ornement)}
+.brand{font-weight:800;font-size:1.25rem;color:var(--brand);text-decoration:none}
+nav{display:flex;gap:.3rem;flex-wrap:wrap} nav a{color:var(--accent);text-decoration:none;padding:.3em .7em;border-radius:6px} nav a.on,nav a:hover{background:var(--survol)}
+main{max-width:920px;margin:0 auto;padding:0 1rem 2rem}
+h1{color:var(--brand)} h2{color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:.2em;margin-top:1.6em}
+h3{color:var(--brand);font-size:1.02rem;margin:1.2em 0 .3em}
+fieldset{border:1px solid var(--line);border-radius:8px;margin:.8em 0;padding:.6em 1em} legend{color:var(--accent);font-weight:700}
+input[type=text],input[type=email],input[type=password],input[type=number]{padding:5px 8px;border:1px solid var(--bordure);border-radius:6px;font-size:14px}
+input[type=text],input[type=email],input[type=password]{min-width:15em} input[type=number]{width:7em}
+.champs{display:flex;flex-wrap:wrap;gap:.8em 1.4em;align-items:flex-end}
+.champs label{display:flex;flex-direction:column;gap:.25em;margin:0;font-size:.92em;color:var(--doux)}
+.ok{background:var(--succes-fond);border:1px solid var(--succes-bord);color:var(--succes-texte);padding:.6em 1em;border-radius:6px}
+.msg{background:var(--erreur-fond);border:1px solid var(--erreur-bord);color:var(--erreur-texte);padding:.6em 1em;border-radius:6px}
+button{background:var(--brand);color:var(--surface);border:0;border-radius:6px;padding:.7em 1.4em;font-size:15px;cursor:pointer}
+table{border-collapse:collapse;margin:.8em 0} th,td{border:1px solid var(--line);padding:5px 10px;text-align:start} th{background:var(--survol)}
+.vitrine{border-bottom:1px solid var(--line);margin-bottom:1.6em;padding-bottom:1.2em}
+.vitrine h1{margin-bottom:.2em} .vitrine .lede{font-size:1.15em;color:var(--doux);max-width:60ch;margin:.2em 0 1em}
+.vitrine .actions a{margin-inline-end:1em}
+a.bouton{display:inline-block;padding:.55em 1.2em;border-radius:6px;background:var(--brand);color:var(--surface);text-decoration:none}
+.preuves{display:flex;flex-wrap:wrap;gap:1em} .preuves>div{flex:1 1 15em;min-width:15em;border:1px solid var(--line);border-radius:8px;padding:.8em 1em;background:var(--fond-doux)}
+.preuves h2{font-size:1em;margin:0 0 .3em;border:0} .preuves p{margin:0;color:var(--doux);font-size:.94em}
+table.chiffres td{font-size:1.15em} table.chiffres th{font-weight:normal;color:var(--doux)}
+.jauge{display:inline-block;width:64px;height:8px;background:var(--fond-doux);border:1px solid var(--bordure);border-radius:4px;overflow:hidden;vertical-align:middle}
+.jauge>span{display:block;height:100%;background:var(--ornement)} [dir="rtl"] .jauge>span{float:right}
+code{background:var(--fond-doux);padding:1px 5px;border-radius:3px}
+pre,code,kbd,samp{direction:ltr;text-align:left;unicode-bidi:isolate} [dir="rtl"] pre{text-align:left}
+.grille-tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(15em,1fr));gap:1em;margin:1.5em 0}
+.plan{border:1px solid var(--line);border-radius:10px;padding:1em 1.2em} .plan h2{margin-top:0;border:0}
+.plan .prix{font-size:1.6rem;color:var(--brand);margin:.2em 0} .plan .prix .hint{font-size:.9rem}
+.plan ul{padding-inline-start:1.2em;margin:.6em 0} .plan li{margin:.2em 0}
+.jauges{list-style:none;padding:0} .jauges li{margin:.5em 0}
+.barre{display:inline-block;vertical-align:middle;width:9em;height:.55em;background:var(--line);border-radius:99px;margin-inline-start:.6em;overflow:hidden}
+.barre i{display:block;height:100%;background:var(--ornement)}
+.moi{margin-inline-start:auto;font-size:.9em} .moi a{color:var(--accent);text-decoration:none}
+.langues{margin-inline-start:.8em;font-size:.9em;color:var(--doux)} .langues a{color:var(--accent);text-decoration:none} .langues b{color:var(--brand)}
+.hint{color:var(--doux);font-size:.9em} footer{max-width:920px;margin:2rem auto 0;padding:1rem;border-top:1px solid var(--line);color:var(--doux);font-size:.9em}
+footer a{color:var(--accent)}`;
+}
+
+/** Un texte multilingue de la configuration : chaîne simple, ou { fr, en, ar }. */
+const dansLangue = (v, lang) => (v && typeof v === 'object' ? (v[lang] ?? v.fr ?? Object.values(v)[0] ?? '') : (v ?? ''));
+const remplir = (s, vars = {}) => String(s).replace(/\{(\w+)\}/g, (m, k) => (k in vars ? String(vars[k]) : m));
+
+const DOCUMENTS_LEGAUX = Object.freeze([['mentions-legales', 'mentions'], ['cgu', 'cgu'], ['cgv', 'cgv'], ['confidentialite', 'confidentialite']]);
+
+/**
+ * @param {object} o
+ * @param {{ nom: string, auteur: string, symbole?: string, slogan?: string|object, courriel?: string, licence?: string }} o.marque
+ * @param {{ brand?: string, lien?: string, ornement?: string, encre?: string, surface?: string }} [o.couleurs]
+ * @param {string[]} [o.langues]   parmi fr, en, ar
+ * @param {Array<{ href: string, libelle: string|object }>} [o.liens]   la navigation de la charge utile
+ * @param {Array<{ cle: string, limite: string, periode: 'jour'|'mois', libelle: string|object,
+ *                 parPeriode?: string|object, sansLimite?: string|object, aucun?: string|object }>} [o.ressources]
+ * @param {object} [o.textes]   surcharges des libellés, par langue : { fr: { tarifs: { note: '…' } } }
+ */
+export function creerWagonUi({ marque, couleurs = {}, langues = ['fr', 'en', 'ar'], liens = [], ressources = [], textes = {} } = {}) {
+  if (!String(marque?.nom ?? '').trim()) throw new Error('@mostajs/wagon-ui : `marque.nom` requis — le nom du service');
+  if (!String(marque?.auteur ?? '').trim()) throw new Error('@mostajs/wagon-ui : `marque.auteur` requis — qui édite le service');
+  const LANGUES = langues.filter((l) => CATALOGUES[l]);
+  if (!LANGUES.length) throw new Error('@mostajs/wagon-ui : aucune langue connue (fr, en, ar)');
+  const C = Object.fromEntries(Object.entries({ ...REPLI, ...couleurs }).map(([k, v]) => [k, COULEUR.test(String(v)) ? v : REPLI[k]]));
+  const STYLE = style(C);
+
+  /** Le traducteur d'une langue : surcharges de l'application, puis le catalogue, puis le français. */
+  function t(lang) {
+    const L = LANGUES.includes(lang) ? lang : LANGUES[0];
+    const chercher = (cat, cle) => cle.split('.').reduce((o, k) => (o && typeof o === 'object' ? o[k] : undefined), cat);
+    return (cle, vars) => remplir(chercher(textes[L] ?? {}, cle) ?? chercher(CATALOGUES[L], cle) ?? chercher(CATALOGUES.fr, cle) ?? cle, vars);
+  }
+  const langueDe = (lang) => (LANGUES.includes(lang) ? lang : LANGUES[0]);
+
+  /** Une ligne de ressource pour un palier : « 20 certificats par mois », « sans limite », « non compris ». */
+  function ligneRessource(r, valeur, lang) {
+    const tr = t(lang);
+    if (Number(valeur) === -1) return dansLangue(r.sansLimite, lang) || `${dansLangue(r.libelle, lang)} · ${tr('espace.illimite')}`;
+    if (!Number(valeur)) return dansLangue(r.aucun, lang) || `${dansLangue(r.libelle, lang)} · ${tr('tarifs.aucun')}`;
+    return r.parPeriode ? remplir(dansLangue(r.parPeriode, lang), { n: valeur }) : `${dansLangue(r.libelle, lang)} : ${valeur}`;
+  }
+
+  const ui = {
+    t, dir: dirDe, langues: LANGUES, style: STYLE,
+
+    /**
+     * La page entière. `contenu` est du HTML déjà rendu (par une vue de ce module, ou par la charge
+     * utile). `base` — l'adresse publique — ajoute les en-têtes que lisent les moteurs et les aperçus.
+     */
+    page({ actif = '/', titre = '', contenu = '', lang, connecte = false, base = '', description = '' }) {
+      const L = langueDe(lang); const tr = t(L);
+      const nom = esc(marque.nom);
+      const slogan = dansLangue(marque.slogan, L);
+      const chemin = lien(actif);
+      const canonique = base ? `${String(base).replace(/\/$/, '')}${actif === '/' ? '/' : actif}` : '';
+      const tete = canonique ? `<meta name="description" content="${esc(description || slogan)}">
+<link rel="canonical" href="${esc(canonique)}">${LANGUES.map((l) => `<link rel="alternate" hreflang="${l}" href="${esc(canonique)}?lang=${l}">`).join('')}<link rel="alternate" hreflang="x-default" href="${esc(canonique)}">
+<meta property="og:type" content="website"><meta property="og:site_name" content="${nom}"><meta property="og:title" content="${esc(titre)} — ${nom}">
+<meta property="og:description" content="${esc(description || slogan)}"><meta property="og:url" content="${esc(canonique)}"><meta property="og:locale" content="${L}">` : '';
+      const nav = [...liens.map((x) => [x.href, dansLangue(x.libelle, L)]), ['/tarifs', tr('nav.tarifs')], ['/aide', tr('nav.aide')], ['/apropos', tr('nav.apropos')]];
+      const choixLangue = LANGUES.length < 2 ? '' : `<span class="langues">${LANGUES.map((l) => (l === L
+        ? `<b lang="${l}">${esc(LIBELLES_LANGUES[l])}</b>`
+        : `<a href="${chemin}?lang=${l}" hreflang="${l}" lang="${l}" rel="alternate">${esc(LIBELLES_LANGUES[l])}</a>`)).join(' · ')}</span>`;
+      return `<!doctype html><html lang="${L}" dir="${dirDe(L)}"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1"><title>${esc(titre)} — ${nom}</title>
+${tete}<style>${STYLE}</style></head><body>
+<header><a class="brand" href="/">${marque.symbole ? `${esc(marque.symbole)} ` : ''}${nom}</a><nav>${nav.map(([h, l]) => `<a href="${lien(h)}"${actif === h ? ' class="on"' : ''}>${esc(l)}</a>`).join('')}</nav><span class="moi"><a href="${connecte ? '/compte' : '/connexion'}">${esc(tr(connecte ? 'espace.compte' : 'espace.seConnecter'))}</a>${connecte ? ` · <a href="/deconnexion">${esc(tr('espace.seDeconnecter'))}</a>` : ''}</span>${choixLangue}</header>
+<main>${contenu}</main>
+<footer><b>${nom}</b>${slogan ? ` — ${esc(slogan)}` : ''} · ${esc(tr('layout.auteur'))} : <b>${esc(marque.auteur)}</b>${marque.courriel ? ` &lt;${esc(marque.courriel)}&gt;` : ''} · ${esc(marque.licence ?? 'AGPL-3.0')} · ${esc(tr('layout.propulse'))} <code>@mostajs/*</code><br><span class="legal">${DOCUMENTS_LEGAUX.map(([h, k]) => `<a href="/${h}">${esc(tr(`legal.${k}`))}</a>`).join(' · ')}</span></footer>
+</body></html>`;
+    },
+
+    /** La vitrine. Ses phrases sont celles de l'application — et ne promettent que ce que l'aide garantit. */
+    accueil({ lang, titre = '', lede = '', actions = [], preuves = [], note = '' }) {
+      return `
+<section class="vitrine">
+  <h1>${esc(titre)}</h1>
+  ${lede ? `<p class="lede">${esc(lede)}</p>` : ''}
+  ${actions.length ? `<p class="actions">${actions.map((a) => `<a${a.principal ? ' class="bouton"' : ''} href="${lien(a.href)}">${esc(a.libelle)}</a>`).join(' ')}</p>` : ''}
+  ${preuves.length ? `<div class="preuves">${preuves.map((p) => `<div><h2>${esc(p.titre)}</h2><p>${esc(p.texte)}</p></div>`).join('')}</div>` : ''}
+  ${note ? `<p class="hint">${esc(note)}</p>` : ''}
+</section>`;
+    },
+
+    /** Les tarifs — nourris par les paliers EN BASE, jamais réécrits à la main (le prix affiché est le prix débité). */
+    tarifs({ lang, paliers = [], sousTitre = '', inscriptionHref = '/inscription' }) {
+      const L = langueDe(lang); const tr = t(L);
+      return `
+<h1>${esc(tr('tarifs.titre'))}</h1>
+${sousTitre ? `<p class="hint">${esc(sousTitre)}</p>` : ''}
+<div class="grille-tarifs">
+${paliers.filter((p) => p.active !== false).map((p) => {
+  const gratuit = !Number(p.price);
+  const cles = p.limits?.maxCles;
+  return `<section class="plan">
+  <h2>${esc(p.name)}</h2>
+  <p class="prix">${gratuit ? esc(tr('tarifs.gratuit')) : `<b>${esc(euros(p.price))}</b><span class="hint">${esc(tr('tarifs.parMois'))}</span>`}</p>
+  <ul>
+    ${ressources.map((r) => `<li>${esc(ligneRessource(r, p.limits?.[r.limite], L))}</li>`).join('\n    ')}
+    ${cles !== undefined ? `<li>${esc(Number(cles) === -1 ? `${tr('tarifs.clesPluriel', { n: '∞' })}` : tr(Number(cles) > 1 ? 'tarifs.clesPluriel' : 'tarifs.cles', { n: cles }))}</li>` : ''}
+  </ul>
+  <p><a class="bouton" href="${lien(`${inscriptionHref}?plan=${encodeURIComponent(p.slug)}`)}">${esc(tr(gratuit ? 'tarifs.commencer' : 'tarifs.choisir'))}</a></p>
+</section>`;
+}).join('\n')}
+</div>
+<p class="hint">${esc(tr('tarifs.note'))}</p>`;
+    },
+
+    /** L'inscription. `methode: 'code'` : sans mot de passe — l'adresse se vérifie par un code reçu par courriel. */
+    inscription({ lang, palier, erreur = '', minMotDePasse = 12, methode = 'motdepasse', action = '/inscription' }) {
+      const L = langueDe(lang); const tr = t(L);
+      const gratuit = !Number(palier?.price);
+      return `
+<h1>${esc(tr('inscription.titre'))}</h1>
+${erreur ? `<p class="msg">${esc(erreur)}</p>` : ''}
+<form method="post" action="${lien(action)}">
+  <input type="hidden" name="plan" value="${esc(palier?.slug ?? '')}">
+  <fieldset><legend>${esc(tr('inscription.plan'))}</legend>
+    <p><b>${esc(palier?.name ?? '')}</b> — ${gratuit ? esc(tr('tarifs.gratuit')) : `${esc(euros(palier.price))}${esc(tr('tarifs.parMois'))}`}</p>
+  </fieldset>
+  <div class="champs">
+    <label>${esc(tr('inscription.nom'))}<input type="text" name="nom" required maxlength="80"></label>
+    <label>${esc(tr('inscription.courriel'))}<input type="email" name="courriel" required maxlength="120" autocomplete="username"></label>
+    ${methode === 'motdepasse' ? `<label>${esc(tr('espace.motDePasse'))}<input type="password" name="motdepasse" required minlength="${Number(minMotDePasse) || 12}" autocomplete="new-password"></label>` : ''}
+  </div>
+  <p class="hint">${esc(tr('inscription.courrielAide'))}</p>
+  ${methode === 'motdepasse' ? `<p class="hint">${esc(tr('espace.motDePasseAide', { n: Number(minMotDePasse) || 12 }))}</p>` : ''}
+  <button type="submit">${esc(tr(gratuit ? 'inscription.bouton' : 'inscription.boutonPayant'))}</button>
+</form>`;
+    },
+
+    /** La clé, montrée UNE fois : seule son empreinte est conservée. */
+    inscriptionFaite({ lang, cle, base = '', paiement = null }) {
+      const tr = t(langueDe(lang));
+      return `
+<h1>${esc(tr('inscription.faite'))}</h1>
+${cle ? `<p class="msg">${esc(tr('inscription.voiciLaCle'))}</p>
+<pre><code>${esc(cle)}</code></pre>
+<p>${esc(tr('inscription.etEnsuite'))}</p>
+<pre><code>curl -H "Authorization: Bearer ${esc(cle)}" ${esc(base)}/api/v1/moi</code></pre>` : ''}
+${paiement ? `${cle ? `<p class="hint">⚠ ${esc(tr('inscription.gardezLaCle'))}</p>` : ''}
+<form method="post" action="/paiement">
+  <input type="hidden" name="compte" value="${esc(paiement.compteId)}">
+  <input type="hidden" name="plan" value="${esc(paiement.planSlug)}">
+  <button type="submit">${esc(tr('inscription.versPaiement'))}</button>
+</form>` : ''}`;
+    },
+
+    /** La connexion : mot de passe, ou code reçu par courriel (`methode: 'code'`). */
+    connexion({ lang, erreur = '', methode = 'motdepasse', action = '/connexion' }) {
+      const tr = t(langueDe(lang));
+      return `
+<h1>${esc(tr('espace.seConnecter'))}</h1>
+${erreur ? `<p class="msg">${esc(erreur)}</p>` : ''}
+<form method="post" action="${lien(action)}">
+  <div class="champs">
+    <label>${esc(tr('inscription.courriel'))}<input type="email" name="courriel" required autocomplete="username"></label>
+    ${methode === 'motdepasse' ? `<label>${esc(tr('espace.motDePasse'))}<input type="password" name="motdepasse" required autocomplete="current-password"></label>` : ''}
+  </div>
+  <button type="submit">${esc(tr(methode === 'motdepasse' ? 'espace.seConnecter' : 'espace.recevoirCode'))}</button>
+</form>
+<p class="hint"><a href="/tarifs">${esc(tr('tarifs.commencer'))}</a></p>`;
+    },
+
+    merci({ lang }) {
+      const tr = t(langueDe(lang));
+      return `
+<h1>${esc(tr('inscription.merci'))}</h1>
+<p>${esc(tr('inscription.merciTexte'))}</p>
+<p><a href="/compte">${esc(tr('espace.compte'))}</a></p>`;
+    },
+
+    /**
+     * L'espace du client. `vue.quotas` : { [cle de ressource]: { courant, limite (null = sans), restant } }.
+     * La gestion de l'abonnement (portail du prestataire) n'apparaît que si `portailPossible`.
+     */
+    espace({ lang, vue, erreur = '', cleNeuve = null }) {
+      const L = langueDe(lang); const tr = t(L);
+      const v = vue ?? {};
+      const jauge = (r) => {
+        const q = v.quotas?.[r.cle];
+        if (!q) return '';
+        const titre = dansLangue(r.libelle, L);
+        const periode = tr(r.periode === 'jour' ? 'espace.consommationDuJour' : 'espace.consommationDuMois');
+        if (q.limite === null || Number(q.limite) === -1) return `<li><b>${esc(titre)}</b> · ${esc(periode)} : ${esc(q.courant)} · ${esc(tr('espace.illimite'))}</li>`;
+        const part = Number(q.limite) ? Math.min(100, Math.round((Number(q.courant) / Number(q.limite)) * 100)) : 100;
+        return `<li><b>${esc(titre)}</b> · ${esc(periode)} : ${esc(q.courant)}/${esc(q.limite)} (${part}%)
+    <span class="hint">${esc(tr('espace.restant', { n: q.restant ?? 0 }))}</span>
+    <span class="barre" role="img" aria-label="${part}%"><i style="width:${part}%"></i></span></li>`;
+      };
+      return `
+<h1>${esc(tr('espace.compte'))}</h1>
+${erreur ? `<p class="msg">${esc(erreur)}</p>` : ''}
+${cleNeuve ? `<p class="ok">${esc(tr('espace.cleCreee'))}</p><pre><code>${esc(cleNeuve)}</code></pre>` : ''}
+<h2>${esc(tr('espace.votrePlan'))}</h2>
+<p><b>${esc(v.plan?.name ?? '—')}</b>${Number(v.plan?.price) ? ` — ${esc(euros(v.plan.price))}${esc(tr('tarifs.parMois'))}` : ''}</p>
+<ul class="jauges">
+  ${ressources.map(jauge).join('\n  ')}
+</ul>
+<p>
+  <a class="bouton" href="/tarifs">${esc(tr('espace.ameliorer'))}</a>
+  ${v.portailPossible ? `<form method="post" action="/compte/portail" style="display:inline"><button type="submit">${esc(tr('espace.gererAbonnement'))}</button></form>
+  <span class="hint">${esc(tr('espace.gererAide'))}</span>` : ''}
+</p>
+<h2>${esc(tr('espace.vosCles'))}</h2>
+${(v.cles ?? []).length ? `<table>
+  ${v.cles.map((c) => `<tr>
+    <td><code>${esc(c.prefix)}</code> · ${esc(c.label)}</td>
+    <td class="hint">${c.usageCount ? esc(tr('espace.appels', { n: c.usageCount })) : esc(tr('espace.jamaisUtilisee'))}</td>
+    <td>${c.enabled
+      ? `<form method="post" action="/compte/cles/revoquer" style="display:inline"><input type="hidden" name="prefix" value="${esc(c.prefix)}"><button type="submit">${esc(tr('espace.revoquer'))}</button></form>`
+      : `<span class="hint">${esc(tr('espace.revoquee'))}</span>`}</td>
+  </tr>`).join('')}
+</table>` : ''}
+<form method="post" action="/compte/cles">
+  <div class="champs"><label>${esc(tr('espace.libelleCle'))}<input type="text" name="libelle" required maxlength="60"></label></div>
+  <button type="submit">${esc(tr('espace.creerUneCle'))}</button>
+  ${v.limites?.maxCles !== undefined ? `<span class="hint">${esc(tr('espace.plafondAtteint', { n: v.limites.maxCles }))}</span>` : ''}
+</form>
+<h2>${esc(tr('espace.vosFactures'))}</h2>
+${(v.factures ?? []).length ? `<table>
+  ${v.factures.map((f) => `<tr>
+    <td>${esc(String(f.createdAt ?? '').slice(0, 10))}</td>
+    <td>${esc((Number(f.amount) || 0) / 100)}${NBSP}${esc(String(f.currency ?? 'eur').toUpperCase())} · ${esc(tr(f.status === 'paid' ? 'espace.payee' : 'espace.impayee'))}</td>
+    <td>${f.hostedUrl && /^https:\/\//i.test(f.hostedUrl) ? `<a href="${esc(f.hostedUrl)}" rel="noopener">${esc(tr('espace.voirFacture'))}</a>` : ''}</td>
+  </tr>`).join('')}
+</table>` : `<p class="hint">${esc(tr('espace.aucuneFacture'))}</p>`}`;
+    },
+
+    /** Les paliers : un champ par ressource et par palier, et les clés. Le prix vit chez le prestataire de paiement. */
+    adminPaliers({ lang, offres = [], message = '' }) {
+      const L = langueDe(lang); const tr = t(L);
+      const colonnes = [...ressources.map((r) => [r.limite, dansLangue(r.libelle, L)]), ['maxCles', tr('admin.cles')]];
+      return `
+<h1>${esc(tr('admin.titre'))}</h1>
+<p class="hint">${esc(tr('admin.sousTitre'))}</p>
+<p><a href="/admin/usage">${esc(tr('usage.titre'))}</a></p>
+${message ? `<p class="msg">${esc(message)}</p>` : ''}
+<form method="post" action="/admin/plans">
+<table>
+  <thead><tr><th>${esc(tr('admin.palier'))}</th>${colonnes.map(([, l]) => `<th>${esc(l)}</th>`).join('')}</tr></thead>
+  <tbody>${offres.map((p) => `
+    <tr><th scope="row">${esc(p.name)}${p.active === false ? ` <span class="hint">${esc(tr('admin.nonVendu'))}</span>` : ''}</th>
+      ${colonnes.map(([cle]) => `<td><input type="number" name="${esc(p.slug)}.${esc(cle)}" value="${esc(String(p.limits?.[cle] ?? 0))}" step="1" min="-1" inputmode="numeric"></td>`).join('')}
+    </tr>`).join('')}
+  </tbody>
+</table>
+<p class="hint">${esc(tr('admin.sansLimite'))}</p>
+<button type="submit">${esc(tr('admin.enregistrer'))}</button>
+</form>`;
+    },
+
+    /**
+     * Le tableau d'usage. Les deux sources restent SÉPARÉES : le journal (durable, facturé) et la part
+     * anonyme (en mémoire, perdue au redémarrage) — additionnées, un « 0 » se lirait « personne n'est venu ».
+     */
+    adminUsage({ lang, usage, anonyme = null }) {
+      const L = langueDe(lang); const tr = t(L);
+      const u = usage ?? { jours: 0, totaux: {}, lignes: [] };
+      const pourcent = (p) => (p === null || p === undefined ? '—' : `${p}${NBSP}%`);
+      const jauge = (p) => (p === null || p === undefined
+        ? `<span class="hint">${esc(tr('usage.sansLimite'))}</span>`
+        : `<span class="jauge" role="img" aria-label="${esc(pourcent(p))}"><span style="width:${Math.min(100, Number(p))}%"></span></span> ${esc(pourcent(p))}`);
+      return `
+<h1>${esc(tr('usage.titre'))}</h1>
+<p class="hint">${esc(tr('usage.sousTitre', { jours: String(u.jours ?? '') }))}</p>
+<p><a href="/admin/plans">${esc(tr('admin.titre'))}</a></p>
+<table class="chiffres"><tbody>
+  <tr><th scope="row">${esc(tr('usage.comptes'))}</th><td><b>${esc(u.totaux?.comptes ?? 0)}</b></td>
+      <th scope="row">${esc(tr('usage.actifs'))}</th><td><b>${esc(u.totaux?.actifs ?? 0)}</b></td>
+      <th scope="row">${esc(tr('usage.payants'))}</th><td><b>${esc(u.totaux?.payants ?? 0)}</b></td></tr>
+  <tr>${ressources.map((r) => `<th scope="row">${esc(dansLangue(r.libelle, L))}</th><td><b>${esc(u.totaux?.parRessource?.[r.cle] ?? 0)}</b></td>`).join('')}
+      <th scope="row">${esc(tr('usage.erreurs'))}</th><td><b>${esc(u.totaux?.erreurs ?? 0)}</b></td></tr>
+</tbody></table>
+<h2>${esc(tr('usage.parCompte'))}</h2>
+${!(u.lignes ?? []).length ? `<p class="hint">${esc(tr('usage.aucunCompte'))}</p>` : `<table>
+  <thead><tr><th>${esc(tr('usage.compte'))}</th><th>${esc(tr('usage.plan'))}</th>${ressources.map((r) => `<th>${esc(dansLangue(r.libelle, L))}</th>`).join('')}<th>${esc(tr('usage.surFenetre'))}</th><th>${esc(tr('usage.dernierJour'))}</th></tr></thead>
+  <tbody>${u.lignes.map((l) => `
+    <tr><th scope="row">${esc(l.nom)}${l.actif === false ? ` <span class="hint">${esc(tr('usage.suspendu'))}</span>` : ''}</th>
+      <td>${esc(l.plan)}</td>
+      ${ressources.map((r) => { const q = l.parRessource?.[r.cle] ?? {}; return `<td>${esc(q.courant ?? 0)}${q.limite === null || q.limite === undefined ? '' : ` / ${esc(q.limite)}`}<br>${jauge(q.part)}</td>`; }).join('')}
+      <td>${ressources.map((r) => esc(l.parRessource?.[r.cle]?.fenetre ?? 0)).join(' + ')}${l.erreursFenetre ? ` <span class="hint">(${esc(l.erreursFenetre)} ${esc(tr('usage.erreursCourt'))})</span>` : ''}</td>
+      <td>${l.dernierJour ? esc(l.dernierJour) : `<span class="hint">${esc(tr('usage.jamais'))}</span>`}</td>
+    </tr>`).join('')}
+  </tbody>
+</table>`}
+${anonyme ? `<h2>${esc(tr('usage.anonyme'))}</h2>
+<p class="msg">${esc(tr('usage.anonymeVolatil', { depuis: new Date(anonyme.depuis).toISOString().slice(0, 16).replace('T', ' ') }))}</p>
+<table class="chiffres"><tbody>
+  <tr><th scope="row">${esc(tr('usage.visiteursJour'))}</th><td><b>${esc(anonyme.visiteursJour ?? 0)}</b></td>
+      <th scope="row">${esc(tr('usage.adressesJour'))}</th><td><b>${esc(anonyme.adressesJour ?? 0)}</b></td></tr>
+  <tr><th scope="row">${esc(tr('usage.operationsAnon'))}</th><td><b>${esc(anonyme.operationsJour ?? 0)}</b></td>
+      <th scope="row">${esc(tr('usage.seaux'))}</th><td><b>${esc(anonyme.seaux ?? 0)}</b></td></tr>
+</tbody></table>` : ''}`;
+    },
+
+    /**
+     * Un document légal. `html` est rendu par l'application (depuis ses textes, `mostajs/templates`) :
+     * il est écrit par l'éditeur, jamais reçu d'un formulaire — il n'est donc pas échappé. Absent : on le dit.
+     */
+    legal({ lang, doc, html = '' }) {
+      const tr = t(langueDe(lang));
+      const cle = (DOCUMENTS_LEGAUX.find(([h, k]) => h === doc || k === doc) ?? [doc, doc])[1];
+      return html ? `<article class="legal">${html}</article>`.replace('<article class="legal">', `<article class="legal"><p class="hint">${esc(tr(`legal.${cle}`))}</p>`)
+        : `<h1>${esc(tr(`legal.${cle}`))}</h1><p class="hint">${esc(tr('legal.indisponible'))}</p>`;
+    },
+
+    introuvable({ lang }) {
+      const tr = t(langueDe(lang));
+      return `<h1>${esc(tr('erreur.introuvable'))}</h1><p>${esc(tr('erreur.introuvableTexte'))}</p><p><a href="/">${esc(tr('erreur.retour'))}</a></p>`;
+    },
+  };
+  return ui;
+}