humalis 1.0.3 → 1.1.0

package/dist/cibles/statique/page.js

@@ -1,4 +1,4 @@
-import { verificationsDuChamp, messageEnCode, libellesEnLangues } from '../../i18n/messages.js';
+import { verificationsDuChamp, messageEnCode, libellesEnLangues, messageEnLangues } from '../../i18n/messages.js';
 /**
  * Un écran de la représentation intermédiaire → une page du site statique :
  * son contenu de départ, écrit dans le HTML (décision T2), et son script,
@@ -9,6 +9,8 @@ import { verificationsDuChamp, messageEnCode, libellesEnLangues } from '../../i1
  * script doivent donner exactement la même page.
  */
 import { sousActions } from '../../ri/actions.js';
+import { colorerCodeHumalis } from '../commun/colorerCode.js';
+import { attributsFrappe } from '../commun/mouvement.js';
 import { arbreWidget, arbreComposite, initiales } from './widgets.js';
 import { iconeHtml, etoilesHtml } from './html-elements.js';
 import { appelGraphique, htmlGraphique } from './graphique.js';
@@ -320,9 +322,13 @@ class GenerateurPage {
         this.nomsPris.add(resultat);
         return resultat;
     }
+    /** « Copier » dans chaque langue du site, la langue de base (celle du HTML de départ) en premier. */
+    messageCopier() {
+        return (this.site.langues && messageEnLangues('Copier', this.site.langues.map((l) => l.code))) || [{ code: 'fr', texte: 'Copier' }];
+    }
     // ─── La page ────────────────────────────────────────────────────────────
     generer() {
-        const { titre, description } = titreEtDescription(this.ecran);
+        const { titre, description } = titreEtDescription(this.ecran, this.site.langues);
         // Les fonctions et le dessin d'abord : on y lit les variables partagées
         // que la page utilise vraiment.
         const fonctions = new Ecrivain();
@@ -600,7 +606,7 @@ ${prise}${code}}
                     break;
                 case 'copie':
                     // « copier code » : le résultat est dit à la personne, sauf « sans message ».
-                    e.ligne(`await copier(${this.enTexte(action.valeur)}${action.message === null ? ', null' : action.message === 'Copié' ? '' : `, ${chaine(action.message)}`});`);
+                    e.ligne(`await copier(${this.enTexte(action.valeur)}${action.message === null ? ', null' : action.texte ? `, ${x(action.texte)}` : action.message === 'Copié' ? '' : `, ${chaine(action.message)}`});`);
                     break;
                 case 'partage': {
                     // La feuille de partage du système ; sans elle, le lien (ou le texte) est copié.
@@ -892,13 +898,40 @@ ${prise}${code}}
                 case 'graphique':
                     e.ligne(`${appelGraphique(noeud, (v) => expressionJs(v, this.contexte))},`);
                     break;
+                case 'codeDocumentation':
+                    const frappe = attributsFrappe(noeud);
+                    const marques = frappe ? `, 'data-humalis-frappe': '${frappe.frappe}', 'data-humalis-frappe-cle': '${frappe.cle}'` : '';
+                    e.ligne(`creer('div', { class: 'humalis-bloc-code-conteneur' }, creer('pre', { class: 'humalis-bloc-code${frappe ? ` ${frappe.classe}` : ''}', 'data-langage': ${chaine(noeud.langage ?? '')}${marques} }, (() => { const code = document.createElement('code'); code.innerHTML = ${chaine(colorerCodeHumalis(noeud.code, noeud.langage))}; return code; })()), creer('button', { type: 'button', onclick: () => copier(${chaine(noeud.code)}) }, ${messageEnCode(this.messageCopier(), chaine)})),`);
+                    break;
+                case 'tableauDocumentation': {
+                    const cellule = (valeur, balise) => `creer('${balise}', {}, ${this.contenuAccentJs(valeur, 'texte')})`;
+                    const rang = (valeurs, balise) => `creer('tr', {}, ${valeurs.map((v) => cellule(v, balise)).join(', ')})`;
+                    e.ligne(`creer('div', { class: 'humalis-tableau-conteneur' }, creer('table', {}, creer('caption', {}, ${this.contenuAccentJs(noeud.legende, 'texte')}), creer('thead', {}, ${rang(noeud.colonnes, 'th')}), creer('tbody', {}, ${noeud.rangees.map((r) => rang(r, 'td')).join(', ')}))),`);
+                    break;
+                }
                 case 'bloc': {
+                    if (noeud.genre === 'liste' || noeud.genre === 'listeNumerotee') {
+                        const balise = noeud.genre === 'liste' ? 'ul' : 'ol';
+                        e.ligne(`creer('${balise}', { class: 'humalis-liste' },`);
+                        e.indenter(() => noeud.corps.forEach((enfant) => {
+                            if (enfant.type === 'repetition') {
+                                const debut = `...${expressionJs(enfant.liste, this.contexte)}.flatMap((${nomJs(enfant.variable)}) => `;
+                                e.bloc(`${debut}[`, () => this.ecrireGroupe(e, enfant.corps, "creer('li', {}, ...", '),'), ']),');
+                            }
+                            else
+                                this.ecrireGroupe(e, [enfant], "creer('li', {}, ...", '),');
+                        }));
+                        e.ligne('),');
+                        break;
+                    }
                     if (COMPOSITES.has(noeud.genre)) {
                         this.ecrireEnfantJs(e, arbreComposite(this.aideComposite(noeud, this.environnement())));
                         break;
                     }
                     const balise = BALISES_BLOC[noeud.genre] ?? 'div';
-                    this.ecrireGroupe(e, noeud.corps, `creer('${balise}', { class: ${chaine(classesDuBloc(noeud))} }, ...`, '),');
+                    // « menu repliable » : le bouton « Menu » en premier enfant (l'écouteur est dans humalis.js).
+                    const bouton = estRepliable(noeud) ? `creer('button', { type: 'button', class: 'humalis-menu-bouton', 'aria-expanded': 'false' }, 'Menu'), ` : '';
+                    this.ecrireGroupe(e, noeud.corps, `creer('${balise}', { class: ${chaine(classesDuBloc(noeud))} }, ${bouton}...`, '),');
                     // « arrive en bas de » ce bloc : la sentinelle observée et le vrai bouton « Voir plus », tant que la condition est vraie.
                     const bas = noeud.id !== undefined ? this.basDesBlocs.get(noeud.id) : undefined;
                     if (bas) {
@@ -963,7 +996,7 @@ ${prise}${code}}
         const contenu = (lucideIcone ? `icone(${chaine(lucideIcone)}, 'humalis-icone'), ` : '') +
             (this.textesChanges.has(noeud.id)
                 ? `textes[${chaine(noeud.id)}] ?? ${contenuJs(noeud.contenu, this.contexte)}`
-                : contenuJs(noeud.contenu, this.contexte));
+                : this.contenuAccentJs(noeud.contenu, noeud.genre));
         switch (noeud.genre) {
             case 'titre':
             case 'soustitre':
@@ -1137,13 +1170,49 @@ ${prise}${code}}
                 case 'graphique':
                     lignes.push(htmlGraphique(noeud, (v) => this.initial(v, env), (v) => this.texteInitial(v, env)));
                     break;
+                case 'codeDocumentation':
+                    const frappe = attributsFrappe(noeud);
+                    const marques = frappe ? ` data-humalis-frappe="${frappe.frappe}" data-humalis-frappe-cle="${frappe.cle}"` : '';
+                    lignes.push(`<div class="humalis-bloc-code-conteneur"><pre class="humalis-bloc-code${frappe ? ` ${frappe.classe}` : ''}" data-langage="${echapperTexte(noeud.langage ?? '')}"${marques}><code>${colorerCodeHumalis(noeud.code, noeud.langage)}</code></pre><button type="button">${echapperTexte(this.messageCopier()[0].texte)}</button></div>`);
+                    break;
+                case 'tableauDocumentation': {
+                    const cellule = (v, balise) => `<${balise}>${this.contenuAccentHtml(v, 'texte', env)}</${balise}>`;
+                    lignes.push('<div class="humalis-tableau-conteneur"><table>');
+                    lignes.push(`<caption>${this.contenuAccentHtml(noeud.legende, 'texte', env)}</caption><thead><tr>${noeud.colonnes.map((v) => cellule(v, 'th')).join('')}</tr></thead><tbody>`);
+                    for (const rangee of noeud.rangees)
+                        lignes.push(`<tr>${rangee.map((v) => cellule(v, 'td')).join('')}</tr>`);
+                    lignes.push('</tbody></table></div>');
+                    break;
+                }
                 case 'bloc': {
+                    if (noeud.genre === 'liste' || noeud.genre === 'listeNumerotee') {
+                        const balise = noeud.genre === 'liste' ? 'ul' : 'ol';
+                        lignes.push(`<${balise} class="humalis-liste">`);
+                        for (const enfant of noeud.corps) {
+                            if (enfant.type === 'repetition') {
+                                const valeurs = evaluer(enfant.liste, env);
+                                for (const valeur of Array.isArray(valeurs) ? valeurs : []) {
+                                    lignes.push('<li>');
+                                    this.ecrireGroupeHtml(enfant.corps, env.enfant().definir(enfant.variable, valeur), lignes);
+                                    lignes.push('</li>');
+                                }
+                                continue;
+                            }
+                            lignes.push('<li>');
+                            this.ecrireGroupeHtml([enfant], env, lignes);
+                            lignes.push('</li>');
+                        }
+                        lignes.push(`</${balise}>`);
+                        break;
+                    }
                     if (COMPOSITES.has(noeud.genre)) {
                         this.ecrireEnfantHtml(arbreComposite(this.aideComposite(noeud, env)), env, lignes);
                         break;
                     }
                     const balise = BALISES_BLOC[noeud.genre] ?? 'div';
                     lignes.push(`<${balise}${attributs([['class', classesDuBloc(noeud)]])}>`);
+                    if (estRepliable(noeud))
+                        lignes.push('<button type="button" class="humalis-menu-bouton" aria-expanded="false">Menu</button>');
                     this.ecrireGroupeHtml(noeud.corps, env, lignes);
                     lignes.push(`</${balise}>`);
                     const bas = noeud.id !== undefined ? this.basDesBlocs.get(noeud.id) : undefined;
@@ -1192,6 +1261,27 @@ ${prise}${code}}
             return undefined;
         }
     }
+    contenuAccentJs(valeur, genre) {
+        if (valeur.type !== 'texte' || !['titre', 'soustitre', 'texte'].includes(genre))
+            return contenuJs(valeur, this.contexte);
+        const parties = (liste) => liste.map((p) => 'texte' in p
+            ? p.accent ? `creer('span', { class: 'humalis-accent' }, ${chaine(p.texte)})` : p.code ? `creer('code', { class: 'humalis-code-ligne' }, ${chaine(p.texte)})` : chaine(p.texte)
+            : contenuJs({ type: 'texte', parties: [p] }, this.contexte)).join(', ');
+        const accent = (liste) => liste.some((p) => 'texte' in p && (p.accent || p.code));
+        if (!accent(valeur.parties) && !valeur.versions?.some((v) => accent(v.parties)))
+            return contenuJs(valeur, this.contexte);
+        if (valeur.versions)
+            return `...(${valeur.versions.slice(1).map((v) => `langue() === ${chaine(v.code)} ? [${parties(v.parties)}] : `).join('')}[${parties(valeur.versions[0].parties)}])`;
+        return parties(valeur.parties);
+    }
+    contenuAccentHtml(valeur, genre, env) {
+        if (valeur.type !== 'texte' || !['titre', 'soustitre', 'texte'].includes(genre) || !valeur.parties.some((p) => 'texte' in p && (p.accent || p.code)))
+            return echapperTexte(texteDe(valeur, env, this.contexte.champs));
+        return valeur.parties.map((p) => {
+            const texte = echapperTexte('texte' in p ? p.texte : texteDe({ type: 'texte', parties: [p] }, env, this.contexte.champs));
+            return 'texte' in p && p.accent ? `<span class="humalis-accent">${texte}</span>` : 'texte' in p && p.code ? `<code class="humalis-code-ligne">${texte}</code>` : texte;
+        }).join('');
+    }
     texteInitial(valeur, env) {
         try {
             return texteDe(valeur, env, this.contexte.champs);
@@ -1456,7 +1546,7 @@ ${prise}${code}}
         const classes = this.classes(noeud) || undefined;
         const commun = (avant = []) => attributs([...avant, ['data-humalis', noeud.id], ['class', classes], ...(noeud.annonce ? [['aria-live', 'polite'], ['aria-atomic', 'true']] : []), ...attributsRaccourci(noeud)]);
         const lucideHtml = noeud.reglages?.icone ? chercherIcone(noeud.reglages.icone)?.lucide : undefined;
-        const contenu = (lucideHtml ? iconeHtml(lucideHtml, 'humalis-icone') : '') + echapperTexte(texteDe(noeud.contenu, env, this.contexte.champs));
+        const contenu = (lucideHtml ? iconeHtml(lucideHtml, 'humalis-icone') : '') + this.contenuAccentHtml(noeud.contenu, noeud.genre, env);
         switch (noeud.genre) {
             case 'titre':
             case 'soustitre': {
@@ -1485,6 +1575,8 @@ ${prise}${code}}
         }
     }
 }
+/** « menu repliable » : un bouton « Menu » le replie sur un petit écran. */
+const estRepliable = (noeud) => noeud.options.some((o) => o.nom === 'menu' && o.valeur === 'repliable');
 /** Les blocs d'éléments d'écran, décrits par widgets.ts. */
 const COMPOSITES = new Set(['onglets', 'deroulant', 'accordeon', 'carrousel', 'filAriane']);
 /** La balise de chaque bloc : une section, l'en-tête et le pied de la page, sinon une boîte. */
@@ -1512,6 +1604,7 @@ const OUTILS_PAGE = [
     'afficherMessage',
     'planifier',
     'mouvementReduit',
+    'themeSombre',
     'copier',
     'partager',
     'derniereRequete',

package/dist/cibles/statique/projet.js

@@ -133,6 +133,10 @@ ${fonctions.join('\n')}`);
     const emploie = (motif) => scriptsDesPages.some((contenu) => motif.test(contenu));
     const interactions = { pressePapier: emploie(/\b(copier|partager)\(/), fenetres: emploie(/\bfenetre\(/), questions: emploie(/\bconfirmer\(/), bas: emploie(/\bonbas:/) };
     fichiers.set('humalis/humalis.js', humalisJs(options.source, pagesFichiers, serveur, session, bascule ? modeTheme ?? '' : undefined, usage, application.langues, interactions));
+    // « menu repliable » : un seul écouteur pour tous les menus, ceux du HTML de départ comme ceux redessinés.
+    if ([...fichiers.values()].some((contenu) => contenu.includes('humalis-menu-bouton'))) {
+        fichiers.set('humalis/humalis.js', `${fichiers.get('humalis/humalis.js')}\n${MENU_REPLIABLE_JS}`);
+    }
     // L'observateur des animations « au defilement », seulement si une page en a : il pose humalis-js au chargement.
     if (animeAuDefilement([...fichiers.values()])) {
         fichiers.set('humalis/humalis.js', `${fichiers.get('humalis/humalis.js')}\n// Les animations « au defilement » attendent que l'élément entre à l'écran.\n${OBSERVATEUR_DEFILEMENT}\nobserverLeDefilement();\n`);
@@ -291,6 +295,7 @@ function humalisJs(source, pages, serveur, session, theme, elements, langues, in
         'afficherMessage',
         'planifier',
         'mouvementReduit',
+        'themeSombre',
         'cliquer',
         'focaliser',
         'retirerPremier',
@@ -544,6 +549,14 @@ ${interactions.fenetres ? '    // Une fenêtre fermée rend le focus à ce qui l
   // Le réglage change pendant la visite : la page est redessinée.
   animationsReduites?.addEventListener('change', () => actualiser());
 
+  /** « theme est sombre » : le thème affiché (choix du visiteur ou du projet, sinon le système). */
+  const schemaSombre = globalThis.matchMedia?.('(prefers-color-scheme: dark)');
+  const themeSombre = () => {
+    const choisi = document.documentElement.dataset.theme;
+    return choisi ? choisi === 'sombre' : (schemaSombre?.matches ?? false);
+  };
+  schemaSombre?.addEventListener('change', () => actualiser());
+
   /** Les minuteries de la page existent tant que leur condition est vraie ; « arreter » les arrête pour de bon. */
   function reglerMinuteries() {
     for (const m of page.minuteries ?? []) {
@@ -1112,6 +1125,11 @@ const themeJs = (defaut) => `
   const THEME_PAR_DEFAUT = ${defaut ? `'${defaut}'` : "''"};
 
   function definirTheme(theme) {
+    // « basculer theme » : l'inverse du thème affiché (choix du visiteur ou du projet, sinon le système).
+    if (theme === 'bascule') {
+      const affiche = document.documentElement.dataset.theme || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'sombre' : 'clair');
+      theme = affiche === 'sombre' ? 'clair' : 'sombre';
+    }
     try {
       if (theme === 'automatique') localStorage.removeItem('${CLE_THEME}');
       else localStorage.setItem('${CLE_THEME}', theme);
@@ -1121,5 +1139,18 @@ const themeJs = (defaut) => `
     const choisi = theme === 'automatique' ? THEME_PAR_DEFAUT : theme;
     if (choisi) document.documentElement.dataset.theme = choisi;
     else delete document.documentElement.dataset.theme;
+    // « theme est sombre » est relu : la page est redessinée.
+    actualiser();
   }
 `;
+/** « menu repliable » : le bouton « Menu » ouvre et ferme les liens ; un lien choisi referme le menu. */
+const MENU_REPLIABLE_JS = `// Les menus repliables : le bouton « Menu » d'un petit écran.
+document.addEventListener('click', (evenement) => {
+  const cible = evenement.target instanceof Element ? evenement.target : null;
+  const menu = cible?.closest('.humalis-menu-repliable');
+  if (!menu || !cible.closest('.humalis-menu-bouton, a')) return;
+  const ouvrir = cible.closest('.humalis-menu-bouton') !== null && !menu.hasAttribute('data-ouvert');
+  menu.toggleAttribute('data-ouvert', ouvrir);
+  menu.querySelector(':scope > .humalis-menu-bouton')?.setAttribute('aria-expanded', String(ouvrir));
+});
+`;

package/dist/cibles/statique/valeurs.js

@@ -133,6 +133,9 @@ export function expressionJs(valeur, contexte) {
         case 'mouvementReduit':
             // « réduire les animations » du système (humalis.js), relu à chaque dessin.
             return 'mouvementReduit()';
+        case 'themeSombre':
+            // Le thème affiché (humalis.js), relu à chaque dessin.
+            return 'themeSombre()';
         case 'etatRequete':
         case 'erreurRequete':
             // Les sources ne sont pas encore produites pour le site statique : l'analyse de la cible les refuse avant.
@@ -371,8 +374,9 @@ export function evaluer(valeur, env) {
         }
         case 'utilisateur':
         case 'etatRequete':
-        // Le HTML de départ n'écrit aucun mouvement.
+        // Le HTML de départ n'écrit aucun mouvement, et ne connaît pas le thème du visiteur.
         case 'mouvementReduit':
+        case 'themeSombre':
             return false;
         case 'erreurRequete':
             return '';

package/dist/cibles/statique/widgets.js

@@ -81,7 +81,7 @@ export function arbreWidget(genre, a) {
             throw new Error('le choix d’un fichier n’est pas encore produit pour le site statique');
     }
 }
-/** Les initiales d'un nom : « Emch Kongo » donne « EK » (le même calcul que humalis.initiales). */
+/** Les initiales d'un nom : « Camille Martin » donne « CM » (le même calcul que humalis.initiales). */
 export function initiales(nom) {
     const mots = nom.trim().split(/\s+/).filter(Boolean);
     return ((mots[0]?.[0] ?? '') + (mots.length > 1 ? (mots[mots.length - 1][0] ?? '') : '')).toUpperCase();

package/dist/cibles/web/css-ecran.js

@@ -34,9 +34,30 @@ export function reglagesUtilises(codes) {
 export function cssEcran(codes) {
     const utilises = reglagesUtilises(codes);
     const regles = [];
+    if (codes.some((c) => c.includes('humalis-accent')))
+        regles.push('.humalis-accent { color: var(--humalis-marque, currentColor); }');
+    if (codes.some((c) => c.includes('humalis-code-ligne')))
+        regles.push('.humalis-code-ligne { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; padding: 0.1em 0.25em; border-radius: 0.2em; background: rgb(127 127 127 / 0.12); }');
+    if (codes.some((c) => c.includes('humalis-bloc-code')))
+        regles.push('.humalis-bloc-code-conteneur { position: relative; max-width: 100%; overflow-x: auto; } .humalis-bloc-code { overflow-x: auto; padding: 1rem; border-radius: 0.5rem; background: rgb(127 127 127 / 0.12); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; } .humalis-bloc-code-conteneur button { position: absolute; top: 0.5rem; right: 0.5rem; }');
+    if (codes.some((c) => c.includes('humalis-code-mot')))
+        regles.push('.humalis-code-mot { color: #7348c3; font-weight: 600; } .humalis-code-texte { color: #147d50; } .humalis-code-commentaire { color: #68717d; } .humalis-code-nombre { color: #b25215; }');
+    if (codes.some((c) => c.includes('humalis-tableau-conteneur')))
+        regles.push('.humalis-tableau-conteneur { max-width: 100%; overflow-x: auto; } .humalis-tableau-conteneur table { border-collapse: collapse; width: 100%; } .humalis-tableau-conteneur th, .humalis-tableau-conteneur td { border: 1px solid rgb(127 127 127 / 0.3); padding: 0.5rem; text-align: left; } .humalis-tableau-conteneur caption { text-align: left; font-weight: 700; margin-bottom: 0.5rem; }');
+    if (codes.some((c) => c.includes('humalis-liste')))
+        regles.push('.humalis-liste { padding-inline-start: 1.5rem; } .humalis-liste > li { margin-block: 0.35rem; }');
     // L'en-tête et le pied communs : hors de la page, sur toute la largeur.
-    if (codes.some((c) => /humalis-entete\b/.test(c)))
+    if (codes.some((c) => /humalis-entete\b/.test(c))) {
         regles.push('.humalis-entete { padding: 0.75rem 1rem; border-bottom: 1px solid rgb(138 138 144 / 0.4); }');
+        // « Aller au contenu » : hors de l'écran, il apparaît quand le clavier l'atteint.
+        regles.push('.humalis-aller-au-contenu { position: absolute; left: 0.5rem; top: -4rem; z-index: 1000; padding: 0.5rem 1rem; border-radius: 0.5rem; background: Canvas; color: CanvasText; }');
+        regles.push('.humalis-aller-au-contenu:focus { top: 0.5rem; }');
+    }
+    // « menu repliable » : sur un petit écran, les liens attendent le bouton « Menu ».
+    if (codes.some((c) => c.includes('humalis-menu-repliable'))) {
+        regles.push('.humalis-menu-bouton { display: none; }');
+        regles.push('@media (max-width: 720px) { .humalis-menu-repliable { flex-direction: column; align-items: stretch; } .humalis-menu-bouton { display: inline-flex; align-self: flex-start; } .humalis-menu-repliable:not([data-ouvert]) > :not(.humalis-menu-bouton) { display: none; } }');
+    }
     if (codes.some((c) => /humalis-pied\b/.test(c)))
         regles.push('.humalis-pied { padding: 1.5rem 1rem; margin-top: 2rem; border-top: 1px solid rgb(138 138 144 / 0.4); }');
     if (utilises.size === 0 && regles.length === 0)

package/dist/cibles/web/ecran.js

@@ -2,6 +2,7 @@ import { verificationsDuChamp, messageEnCode, libellesEnLangues } from '../../i1
 import { titreComplet, adresseImage, sansBarreFinale } from '../publication.js';
 import { sousActions } from '../../ri/actions.js';
 import { nomDeLaCopie, estFichierLocal } from '../../ri/medias.js';
+import { estCombine } from '../../ri/types.js';
 import { simplifier } from '../../analyse/elements.js';
 import { lireCible } from '../../analyse/navigation.js';
 import { Ecrivain } from './ecrivain.js';
@@ -10,6 +11,8 @@ import { WIDGETS_WEB } from './widgets.js';
 import { baliseGraphique } from './graphique.js';
 import { typeTS, typeDe, expression, contenuJSX, condition, ficheAvec } from './valeurs.js';
 import { importsDesInteractions, decrireTouches } from './interactions.js';
+import { colorerCodeHumalis } from '../commun/colorerCode.js';
+import { attributsFrappe } from '../commun/mouvement.js';
 /** Les sortes de champ où l'on écrit une seule ligne : la touche Entrée y envoie le formulaire. */
 const UNE_LIGNE = new Set(['texte', 'email', 'telephone', 'nombre', 'date', 'heure', 'motDePasse', 'adresseWeb']);
 /** Un texte écrit en clair dans du JSX : tel quel, ou entre accolades s'il contient un caractère du JSX. */
@@ -152,7 +155,9 @@ export const RENDU_WEB = {
         ouvrir: (genre, options, classes, ancre) => {
             const toutes = [`humalis-${genre}`, ...options.map((o) => `humalis-${o.nom}-${o.valeur}`), ...classes];
             const balise = genre === 'section' ? 'section' : genre === 'menu' ? 'nav' : 'div';
-            return `<${balise} className="${toutes.join(' ')}"${ancre !== undefined ? ` id=${JSON.stringify(ancre)}` : ''}>`;
+            // « menu repliable » : le bouton « Menu » du petit écran (src/humalis/menu.ts).
+            const repliable = options.some((o) => o.nom === 'menu' && o.valeur === 'repliable');
+            return `<${balise} className="${toutes.join(' ')}"${ancre !== undefined ? ` id=${JSON.stringify(ancre)}` : ''}${repliable ? ' onClick={menuRepliable}' : ''}>${repliable ? '<button type="button" className="humalis-menu-bouton" aria-expanded="false">Menu</button>' : ''}`;
         },
         fermer: (genre) => (genre === 'section' ? '</section>' : genre === 'menu' ? '</nav>' : '</div>'),
     },
@@ -204,6 +209,7 @@ class GenerateurEcran {
     chemins;
     application;
     parametres;
+    listeEnCours;
     contexte = { types: new Map(), champs: new Map(), sortes: new Map() };
     /** Les champs qui ont une sorte ou des options, et le libellé de chaque champ (pour les messages). */
     saisies = new Map();
@@ -325,7 +331,7 @@ class GenerateurEcran {
         for (const g of this.ecran.gestionnaires)
             this.enregistrer(g, []);
         const composant = pascal(this.ecran.nom);
-        const { titre, description } = titreEtDescription(this.ecran);
+        const { titre, description } = titreEtDescription(this.ecran, this.application.langues);
         // Un composant reçoit ses paramètres comme des propriétés React, et ne
         // change pas le titre de la page qui l'affiche.
         const signature = this.parametres
@@ -392,7 +398,9 @@ class GenerateurEcran {
         const lues = [...new Set([...code.matchAll(/\bactuel\.current\.(\w+)/g)].map((m) => m[1]))];
         code = code.replace('  /*ACTUEL*/\n', lues.length > 0 ? `  const actuel = useActuel({ ${lues.join(', ')} });\n` : '');
         // « mouvement est reduit » : suivi en direct (src/humalis/temps.ts).
-        code = code.replace('  /*MOUVEMENT*/\n', /\bmouvementReduit\b/.test(code) ? '  const mouvementReduit = useMouvementReduit();\n' : '');
+        code = code.replace('  /*MOUVEMENT*/\n', (/\bmouvementReduit\b/.test(code) ? '  const mouvementReduit = useMouvementReduit();\n' : '') +
+            // « theme est sombre » : le thème affiché, suivi en direct.
+            (/\bthemeSombre\b/.test(code) ? '  const themeSombre = useThemeSombre();\n' : ''));
         // Sur le téléphone, « confirmer » vient d'un crochet : la question est une fenêtre de l'application.
         code = code.replace('  /*CONFIRMER*/\n', this.rendu.confirmationParCrochet && /\bconfirmer\(/.test(code) ? '  const confirmer = useConfirmer();\n' : '');
         code = code.replace('  /*PLANIFIER*/\n', (/\bplanifier\(/.test(code) ? '  const planifier = usePlanifier();\n' : '') + (/\bderniereRequete\(/.test(code) ? '  const derniereRequete = useDerniere();\n' : ''));
@@ -407,13 +415,16 @@ class GenerateurEcran {
     }
     /** Le premier titre (ou texte) de la page, s'il a des versions : il suit la langue (« t({ fr, en }) »). */
     traduit(genre) {
-        const valeur = this.application.langues ? premiereValeur(genre, this.ecran.vue) : undefined;
+        const valeur = this.application.langues ? premiereValeur(genre, this.ecran.vue, this.application.langues) : undefined;
         return valeur?.type === 'texte' && valeur.versions ? expression(valeur, this.contexte) : undefined;
     }
     // ─── Recensement : champs, cibles des événements, besoins ───────────────
     recenser(noeuds, boucles, formulaire) {
         for (const noeud of noeuds) {
             switch (noeud.type) {
+                case 'codeDocumentation':
+                    this.besoins.messages = true;
+                    break;
                 case 'element':
                     if (noeud.genre === 'champ') {
                         const libelle = texteDeBase(noeud.contenu) ?? noeud.id;
@@ -834,8 +845,8 @@ class GenerateurEcran {
             const code = expression(valeur, this.contexte);
             return complet && site?.nom ? `${code} + ${suffixe()}` : code;
         };
-        const titreCode = enCode(apercu?.titre ?? premiereValeur('titre', this.ecran.vue), true) ?? titreLitteral(titre);
-        const descriptionCode = enCode(apercu?.description ?? premiereValeur('texte', this.ecran.vue)) ??
+        const titreCode = enCode(apercu?.titre ?? premiereValeur('titre', this.ecran.vue, this.application.langues), true) ?? titreLitteral(titre);
+        const descriptionCode = enCode(apercu?.description ?? premiereValeur('texte', this.ecran.vue, this.application.langues)) ??
             (site?.descriptionLangues ? messageEnCode(site.descriptionLangues, chaine) : chaine(site?.description ?? description));
         const chemin = this.chemins.get(this.ecran.nom) ?? `/${simplifier(this.ecran.nom)}`;
         const image = apercu?.image ?? (site?.image !== undefined ? { type: 'texte', parties: [{ texte: site.image }] } : undefined);
@@ -1017,7 +1028,7 @@ class GenerateurEcran {
                     break;
                 case 'copie':
                     // « copier code » : le résultat est dit à la personne, sauf « sans message ».
-                    e.ligne(`await copier(${this.enTexte(action.valeur)}${action.message === null ? '' : `, afficherMessage${action.message === 'Copié' ? '' : `, ${chaine(action.message)}`}`});`);
+                    e.ligne(`await copier(${this.enTexte(action.valeur)}${action.message === null ? '' : `, afficherMessage${action.texte ? `, ${x(action.texte)}` : action.message === 'Copié' ? '' : `, ${chaine(action.message)}`}`});`);
                     break;
                 case 'partage': {
                     // La feuille de partage du système ; sans elle, le lien (ou le texte) est copié.
@@ -1437,6 +1448,50 @@ class GenerateurEcran {
     ecrireVue(e, noeuds) {
         for (const noeud of noeuds) {
             switch (noeud.type) {
+                case 'tableauDocumentation':
+                    if (this.application.rendu) {
+                        const mobile = (valeur) => contenuJSX(valeur, this.contexte)
+                            .replace(/<code className="humalis-code-ligne">/g, '<Text style={{ fontFamily: "monospace" }}>')
+                            .replace(/<span className="humalis-accent">/g, '<Text style={s.accent}>')
+                            .replace(/<\/(code|span)>/g, '</Text>');
+                        e.ligne('<ScrollView horizontal><View>');
+                        e.ligne(`<Text>${mobile(noeud.legende)}</Text>`);
+                        for (const ligne of [noeud.colonnes, ...noeud.rangees]) {
+                            e.ligne('<View style={{ flexDirection: "row" }}>');
+                            for (const cellule of ligne)
+                                e.ligne(`<Text style={{ minWidth: 120 }}>${mobile(cellule)}</Text>`);
+                            e.ligne('</View>');
+                        }
+                        e.ligne('</View></ScrollView>');
+                    }
+                    else {
+                        e.ligne('<div className="humalis-tableau-conteneur"><table><caption>');
+                        e.ligne(contenuJSX(noeud.legende, this.contexte));
+                        e.ligne('</caption><thead><tr>');
+                        for (const cellule of noeud.colonnes)
+                            e.ligne(`<th scope="col">${contenuJSX(cellule, this.contexte)}</th>`);
+                        e.ligne('</tr></thead><tbody>');
+                        for (const ligne of noeud.rangees) {
+                            e.ligne('<tr>');
+                            for (const cellule of ligne)
+                                e.ligne(`<td>${contenuJSX(cellule, this.contexte)}</td>`);
+                            e.ligne('</tr>');
+                        }
+                        e.ligne('</tbody></table></div>');
+                    }
+                    break;
+                case 'codeDocumentation':
+                    if (this.application.rendu)
+                        e.ligne(`<ScrollView horizontal><Text style={{ fontFamily: 'monospace' }}>{${chaine(noeud.code)}}</Text></ScrollView>`);
+                    else {
+                        const copie = this.application.langues ? `t({ fr: 'Copié', en: 'Copied' })` : `'Copié'`;
+                        const libelle = this.application.langues ? `{t({ fr: 'Copier', en: 'Copy' })}` : 'Copier';
+                        const frappe = attributsFrappe(noeud);
+                        const animation = frappe ? ` ${frappe.classe}` : '';
+                        const marques = frappe ? ` data-humalis-frappe="${frappe.frappe}" data-humalis-frappe-cle="${frappe.cle}"` : '';
+                        e.ligne(`<div className="humalis-bloc-code-conteneur"><pre className="humalis-bloc-code${animation}" data-langage=${chaine(noeud.langage ?? '')}${marques}><code dangerouslySetInnerHTML={{ __html: ${chaine(colorerCodeHumalis(noeud.code, noeud.langage))} }} /></pre><button type="button" onClick={() => void copier(${chaine(noeud.code)}, afficherMessage, ${copie})}>${libelle}</button></div>`);
+                    }
+                    break;
                 case 'element':
                     this.ecrireElement(e, noeud);
                     break;
@@ -1500,7 +1555,13 @@ class GenerateurEcran {
                         e.ligne(`{${liste}.map((${variable}, ${index}) => (`);
                         e.indenter(() => {
                             e.ligne(`<Fragment key={${index}}>`);
-                            e.indenter(() => this.ecrireVue(e, contenu));
+                            e.indenter(() => {
+                                if (this.listeEnCours)
+                                    e.ligne(this.application.rendu ? `<View style={{ flexDirection: "row" }}><Text>${this.listeEnCours === 'liste' ? '•' : `{${index} + 1}.`}</Text>` : '<li>');
+                                this.ecrireVue(e, contenu);
+                                if (this.listeEnCours)
+                                    e.ligne(this.application.rendu ? '</View>' : '</li>');
+                            });
                             e.ligne('</Fragment>');
                         });
                         e.ligne('))}');
@@ -1541,6 +1602,40 @@ class GenerateurEcran {
                     break;
                 }
                 case 'bloc':
+                    if (noeud.genre === 'liste' || noeud.genre === 'listeNumerotee') {
+                        if (this.application.rendu) {
+                            e.ligne('<View>');
+                            e.indenter(() => noeud.corps.forEach((enfant, index) => {
+                                if (enfant.type === 'repetition') {
+                                    this.listeEnCours = noeud.genre;
+                                    this.ecrireVue(e, [enfant]);
+                                    this.listeEnCours = undefined;
+                                    return;
+                                }
+                                e.ligne('<View style={{ flexDirection: "row" }}>');
+                                e.ligne(`<Text>${noeud.genre === 'liste' ? '•' : `${index + 1}.`}</Text>`);
+                                this.ecrireVue(e, [enfant]);
+                                e.ligne('</View>');
+                            }));
+                            e.ligne('</View>');
+                            break;
+                        }
+                        const balise = noeud.genre === 'liste' ? 'ul' : 'ol';
+                        e.ligne(`<${balise} className="humalis-liste">`);
+                        e.indenter(() => noeud.corps.forEach((enfant) => {
+                            if (enfant.type === 'repetition') {
+                                this.listeEnCours = noeud.genre;
+                                this.ecrireVue(e, [enfant]);
+                                this.listeEnCours = undefined;
+                                return;
+                            }
+                            e.ligne('<li>');
+                            e.indenter(() => this.ecrireVue(e, [enfant]));
+                            e.ligne('</li>');
+                        }));
+                        e.ligne(`</${balise}>`);
+                        break;
+                    }
                     if (COMPOSITES.has(noeud.genre)) {
                         this.ecrireComposite(e, noeud);
                         break;
@@ -1926,24 +2021,72 @@ function modifiees(actions, noms = new Set()) {
     }
     return noms;
 }
-/** La première valeur d'un élément de ce genre, affiché sans condition (même dans un bloc de mise en page). */
-function premiereValeur(genre, noeuds) {
+/**
+ * « si langue est anglais » : la branche montrée dans la langue `code` ;
+ * rien pour une condition qui ne porte pas sur la langue.
+ */
+function brancheDeLangue(noeud, code) {
+    if (noeud.type !== 'condition')
+        return undefined;
+    const test = noeud.test;
+    if (estCombine(test))
+        return undefined;
+    if (test.gauche.type !== 'variable' || test.gauche.nom !== 'langue' || (test.operateur !== 'egal' && test.operateur !== 'different'))
+        return undefined;
+    const visee = test.droite && texteDeBase(test.droite);
+    if (visee === undefined)
+        return undefined;
+    const vraie = (visee === code) !== (test.operateur === 'different') !== Boolean(test.negation);
+    return vraie ? noeud.alors : noeud.sinon;
+}
+/**
+ * La première valeur d'un élément de ce genre, affiché sans condition (même
+ * dans un bloc de mise en page), dans la langue `code` : avec des langues,
+ * une branche « si langue est … » compte.
+ */
+function premiereValeurEn(genre, noeuds, code) {
     for (const n of noeuds) {
         if (n.type === 'element' && n.genre === genre)
             return n.contenu;
-        if (n.type === 'bloc') {
-            const trouvee = premiereValeur(genre, n.corps);
+        const corps = n.type === 'bloc' ? n.corps : code !== undefined ? brancheDeLangue(n, code) : undefined;
+        if (corps) {
+            const trouvee = premiereValeurEn(genre, corps, code);
             if (trouvee)
                 return trouvee;
         }
     }
     return undefined;
 }
+/**
+ * La première valeur d'un élément de ce genre. Avec des langues, celle de la
+ * langue de base ; si les branches « si langue est … » en montrent une autre
+ * dans une autre langue, elle devient la version de cette langue.
+ */
+function premiereValeur(genre, noeuds, langues) {
+    if (!langues || langues.length === 0)
+        return premiereValeurEn(genre, noeuds);
+    const [base, ...autres] = langues;
+    const valeur = premiereValeurEn(genre, noeuds, base.code);
+    if (valeur?.type !== 'texte')
+        return valeur;
+    const versions = autres.flatMap(({ code }) => {
+        const autre = premiereValeurEn(genre, noeuds, code);
+        if (autre === valeur || autre?.type !== 'texte')
+            return [];
+        return [{ code, parties: autre.versions?.find((v) => v.code === code)?.parties ?? autre.parties }];
+    });
+    if (versions.length === 0)
+        return valeur;
+    // Les versions écrites avec « en anglais » restent, celles des branches les complètent.
+    const ecrites = (valeur.versions ?? []).filter((v) => v.code !== base.code && !versions.some((b) => b.code === v.code));
+    return { ...valeur, versions: [{ code: base.code, parties: valeur.parties }, ...ecrites, ...versions] };
+}
 /**
  * Le titre et la description de la page (décision W7) : le premier titre
  * et le premier texte écrits en clair, à défaut le nom de la page.
  */
-export function titreEtDescription(ecran) {
+export function titreEtDescription(ecran, langues) {
+    const base = langues?.[0]?.code;
     const premier = (genre, noeuds) => {
         for (const n of noeuds) {
             if (n.type === 'element' && n.genre === genre) {
@@ -1951,9 +2094,11 @@ export function titreEtDescription(ecran) {
                 if (texte)
                     return texte;
             }
-            // Toujours affiché : le contenu d'un bloc de mise en page compte aussi.
-            if (n.type === 'bloc') {
-                const texte = premier(genre, n.corps);
+            // Toujours affiché : le contenu d'un bloc de mise en page compte aussi, et
+            // avec des langues, la branche « si langue est … » de la langue de base.
+            const corps = n.type === 'bloc' ? n.corps : base !== undefined ? brancheDeLangue(n, base) : undefined;
+            if (corps) {
+                const texte = premier(genre, corps);
                 if (texte)
                     return texte;
             }