humalis 1.0.4 → 1.2.0

package/dist/cibles/commun/mouvement.js

@@ -31,8 +31,20 @@ function classesUtilisees(codes) {
             trouvees.add(`${m[1]}-${m[2]}`);
     return trouvees;
 }
+/**
+ * Les attributs d'un bloc « code … avec animation frappe » : sa classe, le moment de la frappe et une
+ * clé stable (la ligne et une empreinte du code), pour ne pas refaire la frappe quand la page se redessine.
+ */
+export function attributsFrappe(bloc) {
+    if (!bloc.frappe)
+        return undefined;
+    let empreinte = 0;
+    for (const lettre of bloc.code)
+        empreinte = (empreinte * 31 + lettre.charCodeAt(0)) >>> 0;
+    return { classe: 'humalis-animation-frappe', frappe: bloc.frappe, cle: `${bloc.ligne}-${empreinte.toString(36)}` };
+}
 /** Vrai si une page anime un élément « au defilement » (l'observateur doit alors être écrit). */
-export const animeAuDefilement = (codes) => codes.some((c) => c.includes('humalis-animation-defilement'));
+export const animeAuDefilement = (codes) => codes.some((c) => c.includes('humalis-animation-defilement') || c.includes('humalis-animation-frappe'));
 /** Le CSS du mouvement utilisé, rangé dans le bloc « no-preference » ; une chaîne vide s'il n'y en a pas. */
 export function cssMouvement(codes) {
     const utilisees = classesUtilisees(codes);
@@ -53,6 +65,15 @@ export function cssMouvement(codes) {
             regles.push('.humalis-animation-defilement:not([data-humalis-vu]) { animation: none; }');
             regles.push('.humalis-js .humalis-animation-defilement:not([data-humalis-vu]) { opacity: 0; }');
         }
+        else if (option === 'animation' && valeur === 'frappe') {
+            // « code … avec animation frappe » : le vrai code reste en place mais transparent (lecteurs d'écran,
+            // copie, taille du bloc) ; le script pose par-dessus une copie qui s'écrit lettre par lettre.
+            regles.push('.humalis-animation-frappe { position: relative; }');
+            regles.push('.humalis-js .humalis-animation-frappe:not([data-humalis-tape="fini"]) > code:not(.humalis-frappe-copie), .humalis-js .humalis-animation-frappe:not([data-humalis-tape="fini"]) > code:not(.humalis-frappe-copie) * { color: transparent; }');
+            regles.push('.humalis-frappe-copie { position: absolute; inset: 0; padding: inherit; overflow: hidden; pointer-events: none; }');
+            regles.push('.humalis-frappe-copie::after { content: ""; display: inline-block; width: 0.55em; height: 1.1em; margin-left: 1px; vertical-align: text-bottom; background: currentColor; animation: humalis-curseur 1s steps(1) infinite; }');
+            regles.push('@keyframes humalis-curseur { 50% { opacity: 0; } }');
+        }
         else if (option === 'duree' && DUREES[valeur]) {
             regles.push(`${selecteur} { --humalis-duree: ${DUREES[valeur]}; }`);
         }
@@ -71,6 +92,16 @@ export function cssMouvement(codes) {
             regles.push(`${selecteur}:hover, ${selecteur}:focus-within, ${selecteur}:active { transform: scale(1.03); }`);
         }
     }
+    // « en cascade » : le bloc reste en place, ses enfants s'animent l'un après l'autre (80 ms d'écart).
+    if (utilisees.has('animation-cascade')) {
+        regles.push('.humalis-animation-cascade.humalis-animation-cascade { animation: none; }');
+        for (const valeur of Object.keys(ENTREES).filter((v) => utilisees.has(`animation-${v}`))) {
+            regles.push(`.humalis-animation-cascade.humalis-animation-${valeur} > * { animation: humalis-${valeur} var(--humalis-duree, 300ms) ease-out var(--humalis-delai, 0ms) backwards; }`);
+        }
+        for (let rang = 2; rang <= 12; rang++)
+            regles.push(`.humalis-animation-cascade > :nth-child(${rang}) { --humalis-delai: ${(rang - 1) * 80}ms; }`);
+        regles.push('.humalis-animation-cascade:not([data-humalis-vu]) > * { animation: none; }');
+    }
     if (regles.length === 0)
         return '';
     return `\n/* Le mouvement : seulement si l'appareil ne demande pas de réduire les animations. */\n${REQUETE_MOUVEMENT} {\n${regles.map((r) => `  ${r}`).join('\n')}\n}\n`;
@@ -127,10 +158,73 @@ export const OBSERVATEUR_DEFILEMENT = `function observerLeDefilement() {
   if (!('IntersectionObserver' in window)) return;
   const reduire = matchMedia('(prefers-reduced-motion: reduce)');
   const montrer = (element) => element.setAttribute('data-humalis-vu', '');
+  // « code … avec animation frappe » : une copie du code s'écrit par-dessus le vrai, puis s'efface.
+  // Chaque bloc garde où il en est : redessiné en cours de frappe, il reprend au même endroit ;
+  // déjà tapé (un retour sur la page), il est montré entier tout de suite.
+  const etats = new Map();
+  const taper = (pre) => {
+    const code = pre.querySelector(':scope > code');
+    const cle = pre.getAttribute('data-humalis-frappe-cle');
+    const etat = etats.get(cle) ?? { ecrites: 0, fini: false };
+    etats.set(cle, etat);
+    if (!code || reduire.matches || etat.fini) {
+      pre.setAttribute('data-humalis-tape', 'fini');
+      return;
+    }
+    const copie = code.cloneNode(true);
+    copie.className = 'humalis-frappe-copie';
+    copie.setAttribute('aria-hidden', 'true');
+    const morceaux = [];
+    const parcours = document.createTreeWalker(copie, NodeFilter.SHOW_TEXT);
+    while (parcours.nextNode()) {
+      const noeud = parcours.currentNode;
+      morceaux.push([noeud, noeud.data]);
+      noeud.data = '';
+    }
+    pre.append(copie);
+    pre.setAttribute('data-humalis-tape', 'en-cours');
+    // Les lettres déjà tapées sur le bloc d'avant reviennent d'un coup.
+    let deja = etat.ecrites;
+    for (const morceau of morceaux) {
+      const part = morceau[1].slice(0, deja);
+      morceau[0].data = part;
+      deja -= part.length;
+    }
+    // Une lettre toutes les 30 ms au plus, et pas plus de 5 secondes en tout ; une pause en fin de ligne.
+    const total = morceaux.reduce((somme, morceau) => somme + morceau[1].length, 0);
+    const pas = Math.max(8, Math.min(30, 5000 / Math.max(total, 1)));
+    let rang = 0;
+    let position = 0;
+    for (let reste = etat.ecrites; rang < morceaux.length && reste > 0; ) {
+      const pris = Math.min(reste, morceaux[rang][1].length);
+      reste -= pris;
+      if (pris === morceaux[rang][1].length) rang++;
+      else position = pris;
+    }
+    const suivante = () => {
+      if (!copie.isConnected) return;
+      while (rang < morceaux.length && position >= morceaux[rang][1].length) {
+        rang++;
+        position = 0;
+      }
+      if (rang >= morceaux.length || reduire.matches) {
+        etat.fini = true;
+        copie.remove();
+        pre.setAttribute('data-humalis-tape', 'fini');
+        return;
+      }
+      const lettre = morceaux[rang][1][position++];
+      morceaux[rang][0].data += lettre;
+      etat.ecrites++;
+      setTimeout(suivante, lettre === '\\n' ? pas * 6 : pas);
+    };
+    suivante();
+  };
   const observateur = new IntersectionObserver((entrees) => {
     for (const entree of entrees) {
       if (!entree.isIntersecting) continue;
-      montrer(entree.target);
+      if (entree.target.hasAttribute('data-humalis-frappe')) taper(entree.target);
+      else montrer(entree.target);
       observateur.unobserve(entree.target);
     }
   });
@@ -139,6 +233,12 @@ export const OBSERVATEUR_DEFILEMENT = `function observerLeDefilement() {
       if (reduire.matches) montrer(element);
       else observateur.observe(element);
     }
+    for (const pre of document.querySelectorAll('[data-humalis-frappe]:not([data-humalis-tape])')) {
+      if (pre.getAttribute('data-humalis-frappe') === 'defilement' && !reduire.matches) {
+        pre.setAttribute('data-humalis-tape', 'attente');
+        observateur.observe(pre);
+      } else taper(pre);
+    }
   };
   document.documentElement.classList.add('humalis-js');
   suivre();
@@ -148,9 +248,15 @@ export const OBSERVATEUR_DEFILEMENT = `function observerLeDefilement() {
 }`;
 /** src/humalis/mouvement.ts du web et du desktop : le même observateur, typé. */
 export const MOUVEMENT_WEB = `// Produit par Humalis : les animations « au defilement » se jouent quand l'élément entre à l'écran.
-${OBSERVATEUR_DEFILEMENT.replace('function observerLeDefilement() {', 'export function observerLeDefilement(): void {').replace('(element) =>', '(element: Element) =>')}
+${OBSERVATEUR_DEFILEMENT.replace('function observerLeDefilement() {', 'export function observerLeDefilement(): void {')
+    .replace('(element) =>', '(element: Element) =>')
+    .replace('const etats = new Map();', 'const etats = new Map<string | null, { ecrites: number; fini: boolean }>();')
+    .replace('(pre) =>', '(pre: Element) =>')
+    .replace('code.cloneNode(true);', 'code.cloneNode(true) as HTMLElement;')
+    .replace('const morceaux = [];', 'const morceaux: [Text, string][] = [];')
+    .replace('const noeud = parcours.currentNode;', 'const noeud = parcours.currentNode as Text;')}
 `;
 /** Le prérendu capture la page après le script : il retire les marques du mouvement (rien de caché sans JavaScript). */
 export const NETTOYAGE_PRERENDU = `  // Le script du mouvement marque la page (humalis-js, data-humalis-vu) : le HTML prérendu ne garde aucune de ces marques.
-  transformHtml: (html) => html.replace(/(<html[^>]*class="[^"]*)\\bhumalis-js\\b/, '$1').replace(/ data-humalis-vu=""/g, ''),
+  transformHtml: (html) => html.replace(/(<html[^>]*class="[^"]*)\\bhumalis-js\\b/, '$1').replace(/ data-humalis-vu=""/g, '').replace(/ data-humalis-tape="[a-z-]*"/g, '').replace(/<code class="humalis-frappe-copie"[\\s\\S]*?<\\/code>/g, ''),
 `;

package/dist/cibles/mobile/projet.js

@@ -885,6 +885,9 @@ function styles(formulaires = false, blocs = false, theme, codes = []) {
             `titre: { fontSize: 28, fontWeight: '700', color: '${encre}', marginVertical: 12 },`,
             `sousTitre: { fontSize: 22, fontWeight: '700', color: '${encre}', marginVertical: 10 },`,
             `texte: { fontSize: 16, lineHeight: 24, color: '${encre}', marginVertical: 6 },`,
+            ...(codes.some((c) => c.includes('s.accent')) ? [theme?.couleurs.some((c) => c.nom === 'marque')
+                    ? `accent: { color: '${theme.couleurs.find((c) => c.nom === 'marque')[mode === 'clair' ? 'clair' : 'sombre']}' },`
+                    : `accent: { fontWeight: '700' },`] : []),
             `bouton: { alignSelf: 'flex-start', paddingVertical: 8, paddingHorizontal: 16, marginVertical: 4, borderWidth: 1, borderColor: '${encre}', borderRadius: 6 },`,
             `texteBouton: { fontSize: 16, color: '${encre}' },`,
             `lien: { alignSelf: 'flex-start', fontSize: 16, color: '${bleu}', marginVertical: 12, textDecorationLine: 'underline' },`,
@@ -910,6 +913,9 @@ function styles(formulaires = false, blocs = false, theme, codes = []) {
                     `colonne: { gap: 12 },`,
                     `grille: { gap: 16 },`,
                     `menu: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 12 },`,
+                    // « menu vertical » : une colonne ; « menu repliable » n'a pas de style propre sur le téléphone.
+                    `menuVertical: { flexDirection: 'column', flexWrap: 'nowrap', alignItems: 'stretch' },`,
+                    `menuRepliable: {},`,
                 ]
                 : []),
         ];
@@ -1046,10 +1052,12 @@ l'écraser.
 /** « changer theme par sombre » sur le téléphone : le réglage de l'application, pour cette session. */
 const THEME_MOBILE = `import { Appearance } from 'react-native';
 
-export type Theme = 'clair' | 'sombre' | 'automatique';
+export type Theme = 'clair' | 'sombre' | 'automatique' | 'bascule';
 
 /** Change le thème de l'application (le choix n'est pas gardé après la fermeture). */
-export function definirTheme(theme: Theme): void {
+export function definirTheme(demande: Theme): void {
+  // « basculer theme » : l'inverse du thème affiché.
+  const theme = demande === 'bascule' ? (Appearance.getColorScheme() === 'dark' ? 'clair' : 'sombre') : demande;
   Appearance.setColorScheme(theme === 'clair' ? 'light' : theme === 'sombre' ? 'dark' : 'unspecified');
 }
 `;

package/dist/cibles/mobile/rendu.js

@@ -13,7 +13,7 @@ const SANS_STYLE = new Set(['sur', 'degrade', 'colle', 'animation', 'duree', 'de
  * et « effet » sont sans effet sur le téléphone.
  */
 function ouvrirAnime(options) {
-    const animation = options.find((o) => o.nom === 'animation' && o.valeur !== 'defilement');
+    const animation = options.find((o) => o.nom === 'animation' && o.valeur !== 'defilement' && o.valeur !== 'cascade');
     if (!animation)
         return '';
     const duree = MILLISECONDES.duree[options.find((o) => o.nom === 'duree')?.valeur ?? 'moyenne'] ?? 300;
@@ -136,12 +136,15 @@ function elementMobile(el) {
     const options = stylesDe(el.options);
     // Le texte posé sur un fond prend la couleur d'encre de ce fond.
     const encres = el.options.filter((o) => o.nom === 'fond').map((o) => camel(`encre_${o.valeur}`));
+    const contenu = ['titre', 'soustitre', 'texte'].includes(el.genre)
+        ? el.contenu.replace(/<span className="humalis-accent">/g, '<Text style={s.accent}>').replace(/<code className="humalis-code-ligne">/g, '<Text style={{ fontFamily: "monospace" }}>').replace(/<\/(span|code)>/g, '</Text>')
+        : el.contenu;
     switch (el.genre) {
         case 'titre':
         case 'soustitre':
-            return `<Text ${id} accessibilityRole="header" ${style([el.niveau === 1 ? 'titre' : 'sousTitre', ...options, ...encres])}${evenements}>${el.contenu}</Text>`;
+            return `<Text ${id} accessibilityRole="header" ${style([el.niveau === 1 ? 'titre' : 'sousTitre', ...options, ...encres])}${evenements}>${contenu}</Text>`;
         case 'texte':
-            return `<Text ${id} ${style(['texte', ...options, ...encres])}${evenements}>${el.contenu}</Text>`;
+            return `<Text ${id} ${style(['texte', ...options, ...encres])}${evenements}>${contenu}</Text>`;
         case 'bouton': {
             // Le fond, la bordure et la position vont au bouton ; la couleur et la taille, à son texte.
             const duBouton = el.options.filter((o) => ['fond', 'bordure', 'position'].includes(o.nom)).map(nomStyle);

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', 'aria-label': 'Menu' }, creer('span', { class: 'humalis-menu-icone', 'aria-hidden': 'true' })), ` : '';
+                    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" aria-label="Menu"><span class="humalis-menu-icone" aria-hidden="true"></span></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,33 @@ 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));
+});
+// Un clic à côté d'un menu ouvert, ou la touche Échap, le referme.
+const fermerLesMenus = (garder) => {
+  for (const menu of document.querySelectorAll('.humalis-menu-repliable[data-ouvert]')) {
+    if (garder && menu.contains(garder)) continue;
+    menu.removeAttribute('data-ouvert');
+    menu.querySelector(':scope > .humalis-menu-bouton')?.setAttribute('aria-expanded', 'false');
+  }
+};
+document.addEventListener('click', (evenement) => fermerLesMenus(evenement.target instanceof Node ? evenement.target : null), true);
+document.addEventListener('keydown', (evenement) => {
+  if (evenement.key !== 'Escape') return;
+  const ouvert = document.querySelector('.humalis-menu-repliable[data-ouvert] > .humalis-menu-bouton');
+  fermerLesMenus(null);
+  ouvert?.focus();
+});
+`;

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/web/css-ecran.js

@@ -34,9 +34,39 @@ 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 vertical » : les liens en colonne, qui ne passent jamais sur une deuxième colonne
+    // (un sommaire de hauteur limitée défile au lieu de s'étaler).
+    if (codes.some((c) => c.includes('humalis-menu-vertical')))
+        regles.push('.humalis-menu-vertical { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }');
+    // « 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; }');
+        // L'icône burger : trois traits (le trait du milieu et ses deux ombres), une croix quand le menu est ouvert.
+        regles.push('.humalis-menu-bouton { align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; }');
+        regles.push('.humalis-menu-icone { position: relative; display: block; width: 1.125rem; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }');
+        regles.push('.humalis-menu-bouton[aria-expanded="true"] .humalis-menu-icone { box-shadow: none; transform: rotate(45deg); }');
+        regles.push('.humalis-menu-bouton[aria-expanded="true"] .humalis-menu-icone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; transform: rotate(-90deg); }');
+        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)