@@ -1,35 +1,111 @@
 # Site MG4Control (GitHub Pages)
 
-Site statique de présentation de [MG4Control](https://github.com/SliDeeN/MG4Control), bilingue FR/EN,
-construit autour d'une maquette interactive de l'application (écran 1280 × 480) et d'un « véhicule
-virtuel ». La maquette reste collée en haut de l'écran ; cliquer une fonctionnalité dans la liste
-l'amène au bon écran et surligne l'élément concerné.
+Site statique de présentation de [MG4Control](https://github.com/SliDeeN/MG4Control), en français et
+en anglais, construit autour d'une maquette interactive de l'application (écran 1280 × 480) et d'un
+« véhicule virtuel ». La maquette reste collée en haut de l'écran ; cliquer une fonctionnalité dans la
+liste l'amène au bon écran et surligne l'élément concerné.
 
-Aucun outil de build : du HTML, du CSS et du JavaScript servis tels quels.
+Chaque langue a sa page : `https://slideen.github.io/MG4Control/` (français) et
+`https://slideen.github.io/MG4Control/en/` (anglais). Les deux sont **générées** depuis une seule
+source bilingue, `site-src/index.src.html`, par un script PowerShell (fourni avec Windows, aucune
+dépendance). Le CSS et le JavaScript sont servis tels quels.
+
+> **Ne pas modifier `index.html` ni `en/index.html` à la main** : ils sont réécrits à chaque
+> génération. Le contenu se modifie dans `site-src/index.src.html`.
 
 ## Structure
 
 ```
-index.html              Page unique (contenu FR + EN, bascule par data-lang)
+../site-src/index.src.html  SOURCE des deux pages (chaque texte en double : data-l="fr" et data-l="en")
+../site-src/build.ps1       Génère index.html, en/index.html, sitemap.xml (et les images d'aperçu)
+../site-src/og-card.html    Modèle de l'image d'aperçu des liens partagés (1200 × 630)
+
+index.html              Page française (générée)
+en/index.html           Page anglaise (générée)
+sitemap.xml             Plan du site pour les moteurs de recherche (généré)
 assets/css/site.css     Mise en page commune (thème clair/sombre, cartes, widgets)
 assets/css/explorer.css Explorateur : maquette collée, barre de thèmes, liste des fonctionnalités
 assets/css/sim.css      Maquette de l'app : palette et dimensions de res/values*/colors.xml
 assets/js/strings.js    Libellés de l'app en 7 langues, générés depuis res/values*/strings.xml
 assets/js/sim.js        Simulateur : écrans, règles par firmware, raccourcis, automatisations, API
-assets/js/site.js       Langue, thème, liens fonctionnalités → maquette, widgets
+assets/js/site.js       Lien de langue, thème, liens fonctionnalités → maquette, widgets
 assets/js/explorer.js   Maquette épinglée, barre de thèmes, filtre 2.6.7, retour aux explications
-assets/img/             Icônes (dérivées de ic_launcher-playstore.png)
+assets/img/             Icônes (dérivées de ic_launcher-playstore.png) et images d'aperçu og-fr / og-en
 tools/strings2js.ps1    Régénère strings.js depuis les ressources de l'app
 .nojekyll               Désactive Jekyll sur GitHub Pages
 ```
 
+`site-src/` est à la racine du dépôt, hors de `docs/`, pour ne pas être publié : la source contient
+les deux langues et ferait doublon avec les pages.
+
+## Générer les pages
+
+Depuis la racine du dépôt :
+
+```powershell
+powershell -ExecutionPolicy Bypass -File site-src/build.ps1
+```
+
+À relancer après **toute** modification de `site-src/index.src.html`, d'un fichier CSS ou d'un
+fichier JavaScript. Le script :
+
+- ne garde, dans chaque page, que les textes de sa langue (`data-l`) et les libellés d'accessibilité
+  correspondants (`data-aria-fr` / `data-aria-en` → `aria-label`) ;
+- écrit le titre et la description de la page, lus dans la source (`data-title-*` sur `<html>`,
+  `data-fr` / `data-en` sur la balise `description`) ;
+- remplace `<!-- @seo -->` par le bloc de référencement : adresse canonique, langues alternatives
+  (`hreflang`), Open Graph et Twitter (aperçu des liens partagés), données structurées
+  `SoftwareApplication` — la version y est celle de la pastille `vX.Y.Z` de l'accueil ;
+- ajoute `?v=<empreinte>` aux fichiers CSS et JavaScript, pour qu'un navigateur ne garde pas une
+  ancienne copie en cache à côté d'une page plus récente ;
+- s'arrête avec un message si la source ne respecte pas ses règles (voir ci-dessous).
+
+Images d'aperçu (`assets/img/og-fr.png`, `og-en.png`), à refaire quand l'écran d'accueil de la
+maquette change visiblement — il faut Edge ou Chrome sur la machine :
+
+```powershell
+powershell -ExecutionPolicy Bypass -File site-src/build.ps1 -Cards
+```
+
+### Règles de la source
+
+- Un texte traduit s'écrit en deux éléments voisins, `data-l="fr"` puis `data-l="en"`, sur une balise
+  `span`, `p`, `td`, `ul` ou `ol`. Un tel élément ne doit pas en contenir un autre du même nom
+  (pas de `<span>` dans un `<span data-l>`).
+- Les liens vers les fichiers du site s'écrivent `assets/…` : le script ajoute `../` pour la page
+  anglaise.
+- `build.ps1` reste en ASCII pur (PowerShell 5.1 lit les scripts sans BOM en ANSI) : aucun texte
+  affiché n'y figure, tout est lu dans la source.
+
+## Langue
+
+Le bouton FR / EN est un lien vers l'autre page ; le choix est mémorisé (`localStorage`,
+`mg4site.lang`) et l'ancre conservée. Un visiteur qui a choisi une langue y est renvoyé d'office, de
+même qu'un ancien lien `?lang=fr|en`.
+
+Il n'y a volontairement **aucune redirection d'après la langue du navigateur** : elle emporterait
+aussi les robots d'indexation, qui s'annoncent en anglais, et la page française ne serait plus lue.
+À la place, un bandeau propose l'autre page au visiteur dont la langue ne correspond pas, tant qu'il
+n'a rien choisi.
+
+## Référencement
+
+- `sitemap.xml` liste les deux pages ; il est à déclarer une fois dans Google Search Console
+  (propriété « Préfixe de l'URL » `https://slideen.github.io/MG4Control/`).
+- Pas de `robots.txt` : il ne compte qu'à la racine de l'hôte (`slideen.github.io/`), hors de portée
+  d'un site de projet. Sans lui, tout est autorisé.
+- Tester l'aperçu d'un lien partagé : coller l'adresse dans Discord, WhatsApp ou
+  [opengraph.xyz](https://www.opengraph.xyz/).
+
 ## Publication (GitHub Pages)
 
 Ce dossier `docs/` est servi par GitHub Pages depuis la branche `main`
 (**Settings → Pages** : Deploy from a branch, `main`, `/docs`). Toute modification poussée sur
 `main` est en ligne une à deux minutes plus tard à l'adresse `https://slideen.github.io/MG4Control/`
 (suivi dans l'onglet **Actions**, « pages build and deployment »).
 
+Les pages générées sont versionnées avec leur source : pousser `site-src/` **et** `docs/`.
+
 Le dossier `docs/` n'est pas lu par Gradle : il n'a aucun effet sur la compilation de l'APK.
 
 ## Tester en local
@@ -40,8 +116,9 @@ N'importe quel serveur statique convient, par exemple :
 python -m http.server 8000
 ```
 
-depuis le dossier `docs/`, puis ouvrir `http://localhost:8000`. (Ouvrir `index.html` directement en
-`file://` fonctionne aussi dans la plupart des navigateurs.)
+depuis le dossier `docs/`, puis ouvrir `http://localhost:8000` (page anglaise :
+`http://localhost:8000/en/`). Un serveur est nécessaire : ouvert directement en `file://`, le lien de
+langue mène à un dossier et non à sa page.
 
 ## Version documentée
 
@@ -55,21 +132,24 @@ et réécrire l'encadré des nouveautés.
 
 ## Ajouter ou modifier une fonctionnalité
 
-Chaque fonctionnalité est une carte `.pt` dans un thème `<section class="grp">` de `index.html` :
+Chaque fonctionnalité est une carte `.pt` dans un thème `<section class="grp">` de
+`site-src/index.src.html` :
 
 - `data-hl-key` : l'élément de la maquette à surligner (attribut `data-hl` dans `sim.js`) ;
 - `data-go="écran:onglet"` ou `data-demo="nom"` : ce que la maquette affiche au clic ;
 - un résumé d'une ou deux phrases, puis le détail dans `<details class="more">`.
 
 Un nouveau thème doit aussi avoir sa puce dans la barre `.x-chips` (`data-grp` = id du thème).
+Régénérer ensuite les pages.
 
 ## Mettre à jour les libellés de l'app
 
 `assets/js/strings.js` est une copie des `strings.xml` de l'application (7 langues). Après une
-modification des traductions, le régénérer depuis la racine du dépôt :
+modification des traductions, le régénérer depuis la racine du dépôt, puis régénérer les pages :
 
 ```powershell
 powershell -ExecutionPolicy Bypass -File docs/tools/strings2js.ps1 -Res app/src/main/res -Out docs/assets/js/strings.js
+powershell -ExecutionPolicy Bypass -File site-src/build.ps1
 ```
 
 ## Quand l'application évolue
 
@@ -50,10 +50,6 @@
   color-scheme: dark;
 }
 
-/* Langue : chaque bloc existe en FR et en EN, un seul est visible. */
-html[data-lang="fr"] [data-l="en"],
-html[data-lang="en"] [data-l="fr"] { display: none !important; }
-
 *, *::before, *::after { box-sizing: border-box; }
 html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
 body {
@@ -118,8 +114,24 @@ p { margin: 0 0 .9em; }
 @media (min-width: 980px) { .nav { display: flex; } }
 .head-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
 .seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; background: var(--surface); }
-.seg button { border: 0; background: transparent; color: var(--ink-2); font: 600 0.8125rem var(--font); padding: 6px 10px; cursor: pointer; }
-.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
+/* Langue : deux liens, un par page (index.html et en/index.html) ; aria-current marque la page affichée. */
+.seg a { color: var(--ink-2); font: 600 0.8125rem var(--font); padding: 6px 10px; text-decoration: none; }
+.seg a:hover { color: var(--ink); }
+.seg a[aria-current="true"], .seg a[aria-current="true"]:hover { background: var(--ink); color: var(--bg); }
+/* Bandeau créé par site.js quand la langue du navigateur n'est pas celle de la page. */
+.lang-hint { background: var(--accent-soft); border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--ink); font-size: 0.875rem; }
+.lang-hint-in { display: flex; align-items: center; gap: 10px; min-height: 46px; padding-top: 6px; padding-bottom: 6px; }
+.lang-hint-txt { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
+.lang-hint-go {
+  background: var(--ink); color: var(--bg); border-radius: 8px; padding: 5px 12px;
+  font-weight: 600; text-decoration: none; white-space: nowrap; flex: 0 0 auto;
+}
+.lang-hint-go:hover { color: var(--bg); background: color-mix(in srgb, var(--ink) 86%, var(--accent)); }
+.lang-hint-x {
+  border: 0; background: transparent; color: var(--ink-2); width: 32px; height: 32px; border-radius: 8px;
+  font: 400 1.375rem/1 var(--font); cursor: pointer; flex: 0 0 auto;
+}
+.lang-hint-x:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
 .icon-btn {
   display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px;
   border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); cursor: pointer; text-decoration: none;
@@ -174,8 +186,10 @@ p { margin: 0 0 .9em; }
   color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 6px;
 }
 .eyebrow .pill { background: var(--accent-soft); color: var(--accent-ink); border-radius: 999px; padding: 1px 8px; font-weight: 700; }
-.hero h1 { font-size: clamp(2.125rem, 6vw, 3.75rem); margin: 18px 0 14px; font-weight: 800; letter-spacing: -.035em; max-width: 16ch; }
+.hero h1 { font-size: clamp(2.125rem, 6vw, 3.75rem); margin: 18px 0 14px; font-weight: 800; letter-spacing: -.035em; }
 .hero h1 .four { color: var(--red); }
+/* Le titre dit aussi ce qu'est l'application : un moteur de recherche lit d'abord le h1. */
+.hero h1 .h1-sub { display: block; margin-top: 8px; font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
 .lead { font-size: clamp(1.0625rem, 2.1vw, 1.25rem); color: var(--ink-2); max-width: 62ch; }
 .cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 10px; }
 .hero-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--ink-3); font-size: 0.875rem; margin-top: 8px; }
 
@@ -61,8 +61,6 @@
     let savedY = 0;
     function syncFullLabel() {
       const t = isFull() ? L('Quitter le plein écran (Échap)', 'Leave full screen (Esc)') : L('Afficher la maquette en plein écran', 'Show the mockup full screen');
-      full.setAttribute('data-aria-fr', isFull() ? 'Quitter le plein écran (Échap)' : 'Afficher la maquette en plein écran');
-      full.setAttribute('data-aria-en', isFull() ? 'Leave full screen (Esc)' : 'Show the mockup full screen');
       full.setAttribute('aria-label', t); full.title = t;
       full.setAttribute('aria-pressed', isFull() ? 'true' : 'false');
       pin.title = pin.getAttribute('aria-label');
@@ -98,7 +96,6 @@
     document.addEventListener('fullscreenchange', onFsChange);
     document.addEventListener('webkitfullscreenchange', onFsChange);
     document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && isFull() && !fsEl()) setFull(false); });
-    document.querySelectorAll('[data-lang-btn]').forEach((b) => b.addEventListener('click', () => requestAnimationFrame(syncFullLabel)));
     syncFullLabel();
 
     // ── Firmware ───────────────────────────────────────────────────────────
@@ -219,9 +216,8 @@
       // Rien à proposer tant que la lecture n'a pas atteint la liste (introduction, maquette seule).
       if (!jumpTarget || !pinned() || !current) { jump.hidden = true; return; }
       const chip = bar.querySelector('[data-grp="' + jumpTarget.id + '"]');
-      // Libellé lu dans la langue affichée (innerText mêlerait les deux quand la barre est masquée).
       const lang = root.getAttribute('data-lang') === 'en' ? 'en' : 'fr';
-      const name = chip ? (chip.querySelector('[data-l="' + lang + '"]') || chip).textContent.trim() : '';
+      const name = chip ? chip.textContent.trim() : '';
       jump.textContent = '↓ ' + (lang === 'en' ? 'About this screen: ' : 'Explications de cet écran : ') + name;
       jump.hidden = false;
     }
@@ -230,7 +226,6 @@
       if (onlyNew() && !jumpTarget.classList.contains('has-new')) setOnlyNew(false);
       scrollToEl(jumpTarget);
     });
-    document.querySelectorAll('[data-lang-btn]').forEach((b) => b.addEventListener('click', () => requestAnimationFrame(updateJump)));
 
     // Après chaque rendu de la maquette : bouton de retour aux explications, et sur
     // mobile (maquette plus large que l'écran) on fait glisser vers l'élément surligné.
 
@@ -2474,7 +2474,7 @@
     el.innerHTML =
       '<button class="dock-pill" type="button" aria-expanded="false"><span class="dock-car" aria-hidden="true">🚗</span><span class="dock-sum"></span><span class="dock-chev" aria-hidden="true">▴</span></button>' +
       '<div class="dock-panel" hidden>' +
-      '<div class="dock-head"><strong data-l10n="dock-title"></strong><button type="button" class="dock-x" aria-label="Fermer">✕</button></div>' +
+      '<div class="dock-head"><strong data-l10n="dock-title"></strong><button type="button" class="dock-x" aria-label="' + L('Fermer', 'Close') + '">✕</button></div>' +
       '<div class="dock-grid">' +
       '<label class="dock-f"><span data-l10n="dock-fw"></span><select data-d="fw">' + FIRMWARES.map((f) => '<option value="' + f + '">' + f + '</option>').join('') + '</select></label>' +
       '<label class="dock-f"><span><span data-l10n="dock-speed"></span> <b data-o="speed"></b></span><input type="range" min="0" max="130" step="5" data-d="speed"></label>' +