diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..faa9dce
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,190 @@
+# Moddy Docs — CLAUDE.md
+
+## Vue d'ensemble
+
+Site de documentation pour le bot Discord **Moddy**, construit avec **Eleventy (11ty)** + **Lit.js** + **Material Web Components**.
+
+Repo racine : `/home/user/docs/`
+Projet Eleventy : `/home/user/docs/site/`
+
+---
+
+## Structure du projet
+
+```
+/
+├── content/                  # Contenu éditorial (articles, auteurs, labels)
+│   ├── articles/
+│   │   └── {article-id}/
+│   │       ├── meta.json     # Métadonnées de l'article
+│   │       ├── fr.md         # Contenu français
+│   │       ├── en.md         # Contenu anglais
+│   │       └── assets/       # Images et ressources
+│   ├── authors/
+│   │   └── {discord-id}.json # Profil auteur
+│   └── labels/
+│       └── {label-id}.json   # Label/catégorie
+│
+├── docs/                     # Documentation legacy (pages /about/)
+│   ├── quick-start.md
+│   ├── intro.md
+│   └── Legal/
+│
+├── site/                     # Projet Eleventy
+│   ├── src/                  # TypeScript source (composants Lit)
+│   ├── site/                 # Input Eleventy (templates Nunjucks)
+│   │   ├── _includes/        # Layouts HTML
+│   │   ├── _data/            # Data files (articles.js, authors.js, labels.js, i18n.js)
+│   │   ├── articles/         # Template pagination articles → /articles/{id}/
+│   │   ├── collections/      # Template pagination labels → /collections/{id}/
+│   │   ├── authors/          # Template pagination auteurs → /authors/{id}/
+│   │   ├── about/            # Pages docs legacy
+│   │   └── css/              # Feuilles de style
+│   ├── eleventy-helpers/     # Plugins/filtres Eleventy custom
+│   ├── scripts/              # Scripts de build
+│   └── eleventy.config.cjs   # Config Eleventy
+│
+└── vercel.json               # Config déploiement Vercel
+```
+
+---
+
+## Architecture du contenu
+
+### Articles (`/content/articles/{id}/`)
+
+**`meta.json`** — Métadonnées :
+```json
+{
+  "title": "Titre de l'article",
+  "id": "slug-article",
+  "authors": ["discord-id-1"],
+  "date": "2024-01-15",
+  "chapeau": { "fr": "Résumé FR", "en": "Summary EN" },
+  "banner": null,
+  "seo_level": 1,
+  "labels": ["label-id"]
+}
+```
+
+**Niveaux SEO :**
+- `1` = Référencement normal
+- `2` = Accessible via recherche ou lien label/auteur uniquement (`noindex`)
+- `3` = Accessible uniquement via lien direct (`noindex, nofollow`)
+
+**`fr.md` / `en.md`** — Contenu Markdown par langue.
+
+**`assets/`** — Ressources (images, SVG…). Accessibles à `/articles/{id}/assets/`.
+
+---
+
+### Auteurs (`/content/authors/{discord-id}.json`)
+
+```json
+{
+  "id": "123456789012345678",
+  "username": "DISCORD",
+  "avatar": "DISCORD",
+  "avatar_decoration": "DISCORD",
+  "post": "Product Manager",
+  "bio": "…",
+  "banner_color": "#5793f2",
+  "links": [
+    { "name": "Twitter", "icon": "<svg>…</svg>", "url": "https://…" }
+  ]
+}
+```
+
+La valeur `"DISCORD"` dans `username`, `avatar`, ou `avatar_decoration` déclenche un fetch automatique vers `https://api.moddy.app/users/{id}` au **build time**.
+
+**API Moddy** : `GET https://api.moddy.app/users/{user_id}`
+- Retourne `avatar_url`, `global_name`, `avatar_decoration_data.asset_url`, etc.
+- Cache 5 minutes côté API.
+
+---
+
+### Labels (`/content/labels/{id}.json`)
+
+```json
+{
+  "id": "change-logs",
+  "name": { "fr": "Changelogs", "en": "Changelogs" },
+  "color": "#4caf50"
+}
+```
+
+---
+
+## URLs
+
+| Type | URL | Redirect depuis |
+|------|-----|-----------------|
+| Article | `/articles/{article-id}/` | `/{article-id}/` |
+| Collection | `/collections/{label-id}/` | `/{label-id}/` |
+| Auteur | `/authors/{discord-id}/` | `/{discord-id}/` |
+
+Les redirects courts sont générés statiquement via des templates Eleventy pagination (`redirect-articles.njk`, `redirect-labels.njk`, `redirect-authors.njk`).
+
+---
+
+## Internationalisation (i18n)
+
+- Langues supportées : **fr** (défaut), **en**
+- Détection automatique via `navigator.language` + `localStorage` (`moddy-lang`)
+- Appliqué immédiatement au `<html data-lang="fr|en">` via `src/inline/apply-lang.ts` (inliné dans le HTML)
+- Switcher dans la top app bar (boutons FR / EN)
+
+### Affichage du contenu multilingue
+
+Tout contenu conditionnel utilise l'attribut `data-lang-content` :
+```html
+<span data-lang-content="fr">Bonjour</span>
+<span data-lang-content="en">Hello</span>
+```
+
+CSS dans `/css/article.css` :
+```css
+[data-lang-content] { display: none; }
+:root[data-lang="fr"] [data-lang-content="fr"] { display: revert; }
+:root[data-lang="en"] [data-lang-content="en"] { display: revert; }
+```
+
+---
+
+## Build
+
+```bash
+cd site
+npm install --legacy-peer-deps
+
+# Développement (watch)
+npm run serve:dev
+
+# Production
+npm run build:prod
+```
+
+**Pipeline Wireit :**
+1. `build:copy-docs` — Copie `/docs/*.md` → `site/about/`
+2. `build:dev:ts` — TypeScript → `/lib` (ou `/build` en prod)
+3. `build:dev:eleventy` — Eleventy lit `site/site/` + `../content/` → `/_dev`
+
+---
+
+## Data files Eleventy
+
+Situés dans `site/site/_data/` :
+- `articles.js` — Lit `/content/articles/`, parse les markdown, retourne le tableau trié par date
+- `authors.js` — Lit `/content/authors/`, fetch Discord API si `"DISCORD"` présent
+- `labels.js` — Lit `/content/labels/`
+- `i18n.js` — Traductions UI (fr/en)
+
+---
+
+## Conventions
+
+- Les IDs d'articles et labels sont des slugs kebab-case (ex: `v1-changelog`, `change-logs`)
+- Les IDs d'auteurs sont les IDs Discord (entiers 64-bit en string)
+- Les bannières peuvent être `null`, une URL, ou un chemin relatif aux assets
+- Ne jamais modifier les fichiers dans `_dev/` ou `_prod/` (générés au build)
+- Ne pas modifier les fichiers copiés dans `site/site/about/` (générés depuis `/docs/`)
diff --git a/site/site/about/size.md b/content/articles/bundle-sizes/en.md
similarity index 94%
rename from site/site/about/size.md
rename to content/articles/bundle-sizes/en.md
index ba5d7f8..cfc90a3 100644
--- a/site/site/about/size.md
+++ b/content/articles/bundle-sizes/en.md
@@ -1,21 +1,5 @@
-<!-- catalog-only-start --><!-- ---
-name: Bundle Sizes
-title: Bundle Sizes
-order: 5
-hasToc: false
------><!-- catalog-only-end -->
-
 # Sizes
 
-<!-- go/mwc-size -->
-
-<!--*
-# Document freshness: For more information, see go/fresh-source.
-freshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }
-*-->
-
-<!-- [TOC] -->
-
 This doc tracks important size metrics for Material Web Components.
 
 Sizes are tracked in bundles. A bundle is a single `.js` file for one or more
diff --git a/content/articles/bundle-sizes/meta.json b/content/articles/bundle-sizes/meta.json
new file mode 100644
index 0000000..a2f6a2b
--- /dev/null
+++ b/content/articles/bundle-sizes/meta.json
@@ -0,0 +1,13 @@
+{
+  "title": "Bundle Sizes",
+  "id": "bundle-sizes",
+  "authors": ["1164597199594852395"],
+  "date": "2024-01-01",
+  "chapeau": { "fr": "Analyse des tailles de bundle du projet.", "en": "Project bundle size analysis." },
+  "banner": null,
+  "banner_gradient": "linear-gradient(135deg, #4a148c 0%, #ab47bc 50%, #e1bee7 100%)",
+  "banner_focus": { "x": 50, "y": 50 },
+  "seo_level": 1,
+  "labels": ["about"],
+  "nav_order": 5
+}
diff --git a/site/site/about/intro.md b/content/articles/introduction/en.md
similarity index 51%
rename from site/site/about/intro.md
rename to content/articles/introduction/en.md
index 210425a..98e6a6e 100644
--- a/site/site/about/intro.md
+++ b/content/articles/introduction/en.md
@@ -1,40 +1,23 @@
-<!-- catalog-only-start --><!-- ---
-name: Introduction
-title: Introduction
-order: 1
------><!-- catalog-only-end -->
-
 # Intro to Material Web Components
 
-<!-- go/mwc-intro -->
-
-<!--*
-# Document freshness: For more information, see go/fresh-source.
-freshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }
-*-->
-
 Material web, also known as Material Web Components or MWC, is a library of
-[web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)<!-- {.external} -->
-that follows Google's [Material Design](https://material.io/)<!-- {.external} -->
+[web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
+that follows Google's [Material Design](https://material.io/)
 guidelines.
 
-<!-- [TOC] -->
-
 ## What is Material?
 
 Material Design is a design system built and supported by Google designers and
 developers. Guidelines for building Material apps and components are published
-on [material.io](https://material.io)<!-- {.external} -->.
+on [material.io](https://material.io).
 
 The latest version, Material 3, enables personal, adaptive, and expressive
 experiences – from dynamic color and enhanced accessibility, to foundations for
 large screen layouts and design tokens.
 
-![An example of a Material Design application.](images/what-is-material.webp "What is Material?")
-
 ## What are web components?
 
-[Web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)<!-- {.external} -->
+[Web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
 are custom HTML elements with encapsulated styles and behavior. They work across
 many different frameworks (such as Lit, React, Vue, and Svelte) as well as web
 environments (such as Eleventy, Wordpress, and Ruby on Rails).
@@ -42,39 +25,9 @@ environments (such as Eleventy, Wordpress, and Ruby on Rails).
 Many components in
 this library are drop-in replacements for browser elements like `<button>` and `<input>`.
 
-```html
-<!-- Browser elements -->
-<form>
-  <label>
-    Email
-    <input type="email" name="email" required>
-  </label>
-  <label>
-    Subscribe
-    <input type="checkbox" name="subscribe">
-  </label>
-
-  <button type="reset">Reset</button>
-  <button>Submit</button>
-</form>
-
-<!-- Material elements -->
-<form>
-  <md-outlined-text-field label="Email" type="email"
-      name="email" required></md-outlined-text-field>
-  <label>
-    Subscribe
-    <md-checkbox name="subscribe"></md-checkbox>
-  </label>
-
-  <md-text-button type="reset">Reset</md-text-button>
-  <md-outlined-button>Submit</md-outlined-button>
-</form>
-```
-
 ## What are tokens?
 
-[Design tokens](https://m3.material.io/foundations/design-tokens/overview)<!-- {.external} -->
+[Design tokens](https://m3.material.io/foundations/design-tokens/overview)
 are the building blocks of all UI elements. In MWC, tokens are
 [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)
 that can be used to style components.
@@ -87,5 +40,3 @@ that can be used to style components.
   --md-ref-typeface-plain: system-ui;
 }
 ```
-
-<!--#include file="../googlers/intro-who-should-use-mwc.md" -->
diff --git a/content/articles/introduction/meta.json b/content/articles/introduction/meta.json
new file mode 100644
index 0000000..b806ca5
--- /dev/null
+++ b/content/articles/introduction/meta.json
@@ -0,0 +1,13 @@
+{
+  "title": "Introduction",
+  "id": "introduction",
+  "authors": ["1164597199594852395"],
+  "date": "2024-01-01",
+  "chapeau": { "fr": "Découvrez Moddy, le bot Discord tout-en-un.", "en": "Discover Moddy, the all-in-one Discord bot." },
+  "banner": null,
+  "banner_gradient": "linear-gradient(135deg, #6750a4 0%, #9c8cd4 50%, #d4c8f0 100%)",
+  "banner_focus": { "x": 50, "y": 50 },
+  "seo_level": 1,
+  "labels": ["about"],
+  "nav_order": 1
+}
diff --git a/content/articles/license/en.md b/content/articles/license/en.md
new file mode 100644
index 0000000..dacbf18
--- /dev/null
+++ b/content/articles/license/en.md
@@ -0,0 +1,73 @@
+# Moddy Community License (MCL)
+
+**Version 1.0 — 2026**
+
+© 2026 Moddy. All rights reserved.
+
+---
+
+## Definitions
+
+- **"Software"** refers to the Moddy project, including all source code, documentation, assets, and associated files.
+- **"Author"** refers to the Moddy project and its contributors.
+
+---
+
+## Permissions
+
+You are granted the right to:
+
+* **Use** the Software for personal or non-commercial projects.
+* **Modify** the Software and create derivative works for personal or non-commercial purposes.
+* **Redistribute** the Software or derivative works, provided that the conditions below are met.
+
+---
+
+## Conditions
+
+Any use, modification, or redistribution must comply with the following:
+
+* **Attribution required** — You must give appropriate credit to Moddy, include a link to the original repository, and indicate if changes were made. This credit must appear both in the source code and in a location accessible to end users (for example: an "About" page, a credits section, a README, a bot command, or any other visible area of the project). This applies to any use of the Software, whether in whole or in part.
+* **Non-association** — Credit to Moddy does not imply any form of endorsement, partnership, or affiliation with your project, product, or practices. You may not use the Moddy name, branding, or identity in any way that suggests association, sponsorship, or approval by Moddy. The required credit must be limited to a simple mention of Moddy as the original source of the code.
+* **Non-commercial** — You may not use the Software or any derivative work for commercial purposes without prior written permission from the Author.
+* **License notice** — A copy of this license must be included in any redistribution of the Software or derivative works.
+
+---
+
+## Restrictions
+
+You are **not** permitted to:
+
+* **Sell** the Software, in whole or in part, or any derivative work based on it.
+* **Use commercially** the Software or any derivative work without explicit written authorization from the Author.
+* **Redistribute without credit** — Any redistribution that does not properly credit Moddy is prohibited.
+* **Claim ownership** of the original Software or misrepresent its origin.
+
+---
+
+## No Warranty
+
+The Software is provided "as is", without warranty of any kind, express or implied. The Author is not liable for any damages arising from the use of the Software.
+
+> Warning: This Software comes with absolutely no warranty. Use it at your own risk.
+
+---
+
+## Termination
+
+Any violation of this license automatically terminates your rights under it. Upon termination, you must cease all use, distribution, and modification of the Software.
+
+> Important: Violating any of the above conditions will result in the immediate and automatic revocation of all rights granted by this license.
+
+---
+
+## Contact
+
+For commercial use requests or any questions regarding this license, please contact the Moddy team at **hello@moddy.app** or through the official repository.
+
+> Tip: If you're unsure whether your use case falls under commercial use, reach out to us before proceeding!
+
+---
+
+**License:** Moddy Community License (MCL) v1.0
+**Last updated:** 2026
diff --git a/content/articles/license/fr.md b/content/articles/license/fr.md
new file mode 100644
index 0000000..21616bf
--- /dev/null
+++ b/content/articles/license/fr.md
@@ -0,0 +1,73 @@
+# Moddy Community License (MCL)
+
+**Version 1.0 — 2026**
+
+© 2026 Moddy. Tous droits réservés.
+
+---
+
+## Définitions
+
+- **« Logiciel »** désigne le projet Moddy, y compris l'ensemble du code source, de la documentation, des ressources et des fichiers associés.
+- **« Auteur »** désigne le projet Moddy et ses contributeurs.
+
+---
+
+## Autorisations
+
+Vous êtes autorisé à :
+
+* **Utiliser** le Logiciel à des fins personnelles ou dans le cadre de projets non commerciaux.
+* **Modifier** le Logiciel et créer des œuvres dérivées à des fins personnelles ou non commerciales.
+* **Redistribuer** le Logiciel ou des œuvres dérivées, sous réserve du respect des conditions énoncées ci-dessous.
+
+---
+
+## Conditions
+
+Toute utilisation, modification ou redistribution doit respecter les conditions suivantes :
+
+* **Attribution obligatoire** — Vous devez créditer Moddy de manière appropriée, inclure un lien vers le dépôt d'origine et indiquer si des modifications ont été apportées. Ce crédit doit figurer à la fois dans le code source et dans un emplacement accessible aux utilisateurs finaux (par exemple : une page « À propos », une section crédits, un README, une commande de bot, ou tout autre espace visible du projet). Cela s'applique à toute utilisation du Logiciel, en tout ou en partie.
+* **Non-association** — Le crédit accordé à Moddy n'implique aucune forme d'approbation, de partenariat ou d'affiliation avec votre projet, produit ou pratiques. Vous ne pouvez pas utiliser le nom, l'image de marque ou l'identité de Moddy d'une manière qui suggère une association, un parrainage ou une approbation de la part de Moddy. Le crédit requis doit se limiter à une simple mention de Moddy en tant que source originale du code.
+* **Non-commercial** — Vous ne pouvez pas utiliser le Logiciel ou toute œuvre dérivée à des fins commerciales sans autorisation écrite préalable de l'Auteur.
+* **Notice de licence** — Une copie de cette licence doit être incluse dans toute redistribution du Logiciel ou des œuvres dérivées.
+
+---
+
+## Restrictions
+
+Il vous est **interdit** de :
+
+* **Vendre** le Logiciel, en tout ou en partie, ou toute œuvre dérivée basée sur celui-ci.
+* **Utiliser commercialement** le Logiciel ou toute œuvre dérivée sans autorisation écrite explicite de l'Auteur.
+* **Redistribuer sans crédit** — Toute redistribution ne créditant pas Moddy de manière appropriée est interdite.
+* **Revendiquer la propriété** du Logiciel original ou en dénaturer l'origine.
+
+---
+
+## Absence de garantie
+
+Le Logiciel est fourni « tel quel », sans garantie d'aucune sorte, expresse ou implicite. L'Auteur ne saurait être tenu responsable des dommages résultant de l'utilisation du Logiciel.
+
+> Avertissement : Ce Logiciel est fourni sans aucune garantie. Vous l'utilisez à vos propres risques.
+
+---
+
+## Résiliation
+
+Toute violation de cette licence entraîne automatiquement la résiliation de vos droits en vertu de celle-ci. En cas de résiliation, vous devez cesser toute utilisation, distribution et modification du Logiciel.
+
+> Important : La violation de l'une quelconque des conditions ci-dessus entraînera la révocation immédiate et automatique de tous les droits accordés par cette licence.
+
+---
+
+## Contact
+
+Pour toute demande d'utilisation commerciale ou toute question relative à cette licence, veuillez contacter l'équipe Moddy à l'adresse **hello@moddy.app** ou via le dépôt officiel.
+
+> Conseil : Si vous n'êtes pas certain que votre cas d'usage relève d'une utilisation commerciale, contactez-nous avant de procéder !
+
+---
+
+**Licence :** Moddy Community License (MCL) v1.0
+**Dernière mise à jour :** 2026
diff --git a/content/articles/license/meta.json b/content/articles/license/meta.json
new file mode 100644
index 0000000..bdcf722
--- /dev/null
+++ b/content/articles/license/meta.json
@@ -0,0 +1,16 @@
+{
+  "title": "Moddy Community License (MCL)",
+  "id": "license",
+  "authors": ["1164597199594852395"],
+  "date": "2026-01-01",
+  "chapeau": {
+    "fr": "La licence open source du projet Moddy.",
+    "en": "The open source license of the Moddy project."
+  },
+  "banner": null,
+  "banner_gradient": "linear-gradient(135deg, #37474f 0%, #78909c 50%, #cfd8dc 100%)",
+  "banner_focus": { "x": 50, "y": 50 },
+  "seo_level": 1,
+  "labels": ["legal"],
+  "nav_order": 3
+}
diff --git a/content/articles/markdown-test/en.md b/content/articles/markdown-test/en.md
new file mode 100644
index 0000000..1e93fd1
--- /dev/null
+++ b/content/articles/markdown-test/en.md
@@ -0,0 +1,248 @@
+# 🧪 Test complet de syntaxe Markdown
+
+Ce fichier sert à vérifier que toutes les syntaxes supportées par la documentation Moddy s'affichent correctement.
+
+---
+
+## 📋 Table des matières
+
+* [En-têtes](#en-têtes)
+* [Texte](#texte)
+* [Listes](#listes)
+* [Liens](#liens)
+* [Code](#code)
+* [Tableaux](#tableaux)
+* [Citations](#citations)
+* [Images](#images)
+* [HTML & composants](#html--composants)
+* [Commentaires conditionnels](#commentaires-conditionnels)
+
+---
+
+## En-têtes
+
+# H1 (titre principal)
+
+## H2 (section)
+
+### H3 (sous-section)
+
+#### H4 (détails)
+
+---
+
+## Texte
+
+Texte normal avec **gras**, *italique*, ***gras italique***, ~~barré~~ et `inline code`.
+
+Combinaison : **gras et *italique imbriqué***.
+
+---
+
+## Listes
+
+### Puces
+
+* A
+* B
+
+  * B1
+  * B2
+
+    * B2a
+* C
+
+### Numérotée
+
+1. Étape 1
+2. Étape 2
+
+   1. Sous-étape
+   2. Sous-étape
+3. Étape 3
+
+### Checklist
+
+* [x] Fait
+* [ ] À faire
+* [ ] En cours
+
+---
+
+## Liens
+
+* [https://example.com](https://example.com)
+* [Lien texte](https://example.com)
+* [Lien externe](https://example.com)<!-- {.external} -->
+* [Lien interne](#texte)
+
+---
+
+## Code
+
+### Inline
+
+Utiliser `const x = 10`.
+
+### JavaScript
+
+```js id="js_test"
+const sum = (a, b) => a + b;
+console.log(sum(2, 3));
+```
+
+### Python
+
+```py id="py_test"
+def add(a, b):
+    return a + b
+
+print(add(2, 3))
+```
+
+### Bash
+
+```bash id="bash_test"
+echo "Hello world"
+ls -la
+```
+
+### JSON
+
+```json id="json_test"
+{
+  "name": "Moddy",
+  "active": true,
+  "value": 123
+}
+```
+
+---
+
+## Tableaux
+
+| Propriété | Type   | Description      |
+| --------- | ------ | ---------------- |
+| name      | string | Nom affiché      |
+| order     | number | Ordre navigation |
+| dirname   | string | Dossier exemple  |
+
+---
+
+## Citations
+
+> Note: Ceci est une note.
+
+> Warning: Ceci est un avertissement.
+
+> Tip: Ceci est un conseil.
+
+> Important: Ceci est une information importante.
+
+---
+
+## Images
+
+![Image exemple](../images/test/hero.webp)
+
+---
+
+## HTML & composants
+
+<catalog-component-header>
+<catalog-component-header-title slot="title">
+
+# Test Markdown
+
+Test de rendu complet de la documentation Moddy.
+
+</catalog-component-header-title>
+
+<img class="hero" alt="Test image" src="../images/test/hero.webp">
+
+</catalog-component-header>
+
+---
+
+<details>
+<summary>Section cachée</summary>
+
+* élément 1
+* élément 2
+
+</details>
+
+---
+
+## Shortcode
+
+{% playgroundexample dirname=dirname %}
+
+---
+
+## Séparateurs
+
+---
+
+---
+
+---
+
+---
+
+## Liens de référence
+
+[Google][1]
+[GitHub][2]
+
+[1]: https://google.com
+[2]: https://github.com
+
+---
+
+## Footnotes
+
+Texte avec note[^1]
+
+[^1]: Ceci est une note de bas de page
+
+---
+
+## Échappement
+
+* pas italique *
+# pas titre
+` pas code `
+
+---
+
+## Emojis
+
+🔥 🚀 ✔️ ❌ 🧠 ⚡
+
+---
+
+## Commentaires conditionnels
+
+<!-- catalog-only-start -->
+
+Visible uniquement sur le site de documentation Moddy.
+
+<!-- catalog-only-end -->
+
+---
+
+## Math (si supporté)
+
+Inline: $a^2 + b^2 = c^2$
+
+Block:
+$$
+E = mc^2
+$$
+
+---
+
+## Fin du test
+
+✔️ Test complet conforme au guide de syntaxe Moddy
diff --git a/content/articles/markdown-test/meta.json b/content/articles/markdown-test/meta.json
new file mode 100644
index 0000000..73d7303
--- /dev/null
+++ b/content/articles/markdown-test/meta.json
@@ -0,0 +1,14 @@
+{
+  "title": "Markdown Test",
+  "id": "markdown-test",
+  "authors": ["1164597199594852395"],
+  "date": "2024-01-01",
+  "chapeau": { "fr": "Page de test du rendu Markdown.", "en": "Markdown rendering test page." },
+  "banner": null,
+  "banner_gradient": "linear-gradient(135deg, #004d40 0%, #26a69a 50%, #b2dfdb 100%)",
+  "banner_focus": { "x": 50, "y": 50 },
+  "theme_color": "#00796b",
+  "seo_level": 1,
+  "labels": ["about"],
+  "nav_order": 99
+}
diff --git a/site/site/legal/privacy.md b/content/articles/privacy-policy/en.md
similarity index 94%
rename from site/site/legal/privacy.md
rename to content/articles/privacy-policy/en.md
index 9ebb769..b850860 100644
--- a/site/site/legal/privacy.md
+++ b/content/articles/privacy-policy/en.md
@@ -1,9 +1,3 @@
----
-name: Privacy Policy
-title: Privacy Policy - Moddy
-order: 2
----
-
 # Privacy Policy
 
 **Last updated: December 29, 2025**
@@ -99,7 +93,7 @@ Discord identifiers may be anonymized during transmission, but **the textual con
 
 **Some data sent to the OpenAI API may be used by OpenAI to train and improve its models**, in accordance with their terms of use.
 
-**Recommendation**: Never include personal, confidential, or sensitive information in your queries to translation, AI, or content processing services. This includes, but is not limited to: passwords, banking information, medical information, confidential professional or personal documents.
+> **Important:** Never include personal, confidential, or sensitive information in your queries to translation, AI, or content processing services. This includes, but is not limited to: passwords, banking information, medical information, confidential professional or personal documents.
 
 ## Data Retention Period
 
@@ -216,6 +210,6 @@ Website: [www.cnil.fr](https://www.cnil.fr)
 
 ---
 
-**By using Moddy services (Discord bot, website, and associated services), you acknowledge that you have read, understood, and accepted the terms of this Privacy Policy.**
+> **By using Moddy services (Discord bot, website, and associated services), you acknowledge that you have read, understood, and accepted the terms of this Privacy Policy.**
 
-**Effective date: December 29, 2025**
\ No newline at end of file
+**Effective date: December 29, 2025**
diff --git a/content/articles/privacy-policy/fr.md b/content/articles/privacy-policy/fr.md
new file mode 100644
index 0000000..f2fdd61
--- /dev/null
+++ b/content/articles/privacy-policy/fr.md
@@ -0,0 +1,215 @@
+# Politique de Confidentialité
+
+**Dernière mise à jour : 29 décembre 2025**
+
+Cette Politique de Confidentialité décrit les pratiques de Moddy concernant la collecte, l'utilisation, le stockage et la protection des données personnelles, en conformité avec le Règlement Général sur la Protection des Données (RGPD) et les lois applicables en matière de protection des données.
+
+## Responsable du traitement
+
+**Moddy**
+
+Pour toute demande ou question, veuillez vous référer à la section 12 « Contact » en fin de document.
+
+## Données personnelles collectées
+
+### Données collectées automatiquement
+
+Lors de l'utilisation de nos services, nous collectons automatiquement :
+
+- **Identifiants Discord** : identifiant utilisateur, identifiant serveur, identifiant salon
+- **Informations de profil Discord** : nom d'utilisateur, nom du serveur, avatars
+- **Adresses e-mail** : lorsqu'elles sont fournies pour la création d'un compte ou des communications
+- **Données de journalisation** : journaux d'erreurs, informations techniques, contexte d'exécution des commandes
+- **Données d'utilisation** : interactions avec le bot, commandes exécutées, événements système
+
+### Données collectées à l'action de l'utilisateur
+
+Certaines fonctionnalités collectent des données uniquement lorsque vous les utilisez activement :
+
+- **Messages sauvegardés** : contenu des messages, métadonnées, pièces jointes (URLs)
+- **Rappels personnalisés** : contenu, date, heure et identifiants associés (maximum 10 par utilisateur)
+- **Messages inter-serveurs** : contenu, auteur, serveur d'origine, statut de diffusion
+- **Rôles Discord sauvegardés** : liste des identifiants de rôles (si le module est activé)
+- **Dossiers de modération** : sanctions, preuves, raisons, notes, historique complet
+- **Transcriptions de tickets** : enregistrements des conversations du service client
+
+### Données de configuration et de préférences
+
+- **Attributs utilisateur** : statut BETA, PREMIUM, DEVELOPER, BLACKLISTED
+- **Configuration personnalisée** : préférences d'utilisation, paramètres du bot
+- **Configuration du serveur** : modules activés, salons configurés, préfixes personnalisés
+
+### Données de paiement
+
+Par l'intermédiaire de notre prestataire de paiement Stripe, nous traitons :
+
+- **Informations de paiement** : numéro de carte (tokenisé), nom du titulaire, adresse de facturation
+- **Historique des transactions** : montants, dates, statuts des paiements
+- **Identifiants Stripe** : références client et références de transaction
+
+**Important** : Les informations de paiement sensibles (numéros de carte complets, CVV) ne sont jamais stockées dans notre infrastructure. Elles sont directement traitées et sécurisées par Stripe.
+
+### Cookies et données de navigation (site web)
+
+Notre site web peut utiliser :
+
+- **Cookies techniques** : nécessaires au fonctionnement du site web
+- **Cookies analytiques** : Google Analytics pour mesurer l'audience et améliorer nos services
+- **Cookies de préférences** : mémorisation de vos choix
+
+Vous pouvez configurer vos préférences en matière de cookies via les paramètres de votre navigateur.
+
+## Finalités du traitement des données
+
+Vos données personnelles sont traitées aux fins suivantes :
+
+- **Fourniture du service** : exécution des commandes, gestion des fonctionnalités, modération
+- **Gestion des comptes** : authentification, préférences utilisateur, abonnements
+- **Traitement des paiements** : gestion des transactions, facturation, prévention de la fraude
+- **Support client** : assistance technique, résolution de problèmes, traitement des demandes
+- **Amélioration du service** : analyse des performances, correction d'erreurs, développement de nouvelles fonctionnalités
+- **Sécurité** : prévention des abus, détection des activités suspectes, application des règles
+- **Obligations légales** : réponse aux demandes des autorités, conformité réglementaire
+- **Communications** : notifications essentielles, mises à jour du service
+
+## Partage des données avec des prestataires tiers
+
+Nous collaborons avec des prestataires de services tiers pour fournir et améliorer nos services. Ces prestataires traitent vos données selon nos instructions et sont soumis à des obligations strictes de confidentialité :
+
+- **Railway** : hébergement d'infrastructure, base de données PostgreSQL et services backend
+- **Vercel** : hébergement du site web
+- **Discord** : plateforme d'exploitation du bot (collecte automatique des identifiants et métadonnées)
+- **Sentry** : surveillance des erreurs et des performances (reçoit les journaux d'erreurs avec le contexte technique)
+- **Stripe** : traitement des paiements, gestion des abonnements
+- **DeepL** : service de traduction linguistique
+- **OpenAI** : services d'intelligence artificielle et de traitement du langage naturel
+- **Google Analytics** (si activé) : analyse de l'audience et statistiques de navigation sur notre site web
+
+### Avertissement important concernant les services externes
+
+**Les données transmises aux services tiers suivants ne sont pas anonymisées** : DeepL, OpenAI, et tout autre service de traitement de contenu.
+
+Les identifiants Discord peuvent être anonymisés lors de la transmission, mais **le contenu textuel que vous soumettez (requêtes, messages, traductions) est transmis tel quel** à ces services.
+
+**Certaines données envoyées à l'API OpenAI peuvent être utilisées par OpenAI pour entraîner et améliorer ses modèles**, conformément à leurs conditions d'utilisation.
+
+> **Important :** N'incluez jamais d'informations personnelles, confidentielles ou sensibles dans vos requêtes adressées aux services de traduction, d'IA ou de traitement de contenu. Cela inclut, sans s'y limiter : les mots de passe, les informations bancaires, les informations médicales, les documents professionnels ou personnels confidentiels.
+
+## Durée de conservation des données
+
+**Toutes les données personnelles collectées sont conservées de manière permanente** jusqu'à :
+
+- Une suppression manuelle effectuée par notre équipe technique, ou
+- Une demande de suppression explicite de votre part dans le cadre de l'exercice de votre droit à l'effacement
+
+## Sécurité et confidentialité des données
+
+### Mesures de sécurité techniques
+
+Nous mettons en œuvre des mesures de sécurité appropriées pour protéger vos données personnelles :
+
+- **Chiffrement en transit** : toutes les communications entre nos services utilisent le protocole HTTPS/TLS
+- **Chiffrement au repos** : données chiffrées dans nos bases de données selon les standards de Railway
+- **Absence de stockage local de fichiers** : les fichiers ne sont jamais stockés sur nos serveurs ; seules les URLs hébergées par le CDN de Discord sont conservées
+
+### Contrôle des accès
+
+L'accès à vos données personnelles est strictement contrôlé :
+
+- **Accès à la base de données** : réservé exclusivement aux développeurs et responsables de Moddy
+- **Équipe support** : n'a pas d'accès direct à la base de données mais peut consulter certaines informations dans le cadre du support client
+- **Données Stripe** : notre équipe n'a pas accès aux informations de paiement complètes stockées par Stripe
+
+### Engagement de non-commercialisation
+
+**Moddy ne vend jamais vos données personnelles à des tiers.** Vos informations ne sont partagées qu'avec les prestataires de services nécessaires au fonctionnement de notre plateforme, conformément à la section 4 de cette politique.
+
+### Notification des incidents de sécurité
+
+En cas de violation de données personnelles susceptible de présenter un risque pour vos droits et libertés, nous nous engageons à :
+
+- Notifier l'autorité de contrôle compétente (CNIL en France) dans un délai de 72 heures suivant la découverte de l'incident
+- Vous informer dans les meilleurs délais par e-mail ou via notre serveur Discord
+- Communiquer la nature de la violation, les mesures prises et les recommandations pour atténuer les risques
+
+## Données non collectées
+
+Moddy ne collecte **jamais** les catégories de données suivantes :
+
+- Mots de passe personnels (à l'exception de l'authentification Discord)
+- Adresses IP individuelles
+- Données de géolocalisation GPS précises
+- Messages privés Discord (sauf sauvegarde explicite via une commande dédiée)
+- Historique de navigation sur le web
+- Carnets d'adresses ou contacts personnels
+- Données biométriques
+
+## Vos droits (RGPD)
+
+Conformément au Règlement Général sur la Protection des Données (RGPD), vous disposez des droits suivants concernant vos données personnelles :
+
+- **Droit d'accès** : obtenir la confirmation que vos données sont traitées et en recevoir une copie
+- **Droit de rectification** : demander la correction de données inexactes ou incomplètes
+- **Droit à l'effacement** (droit à l'oubli) : obtenir la suppression de vos données personnelles
+- **Droit à la limitation du traitement** : demander la limitation du traitement dans certaines circonstances
+- **Droit à la portabilité des données** : recevoir vos données dans un format structuré, couramment utilisé et lisible par machine
+- **Droit d'opposition** : vous opposer au traitement de vos données pour des raisons tenant à votre situation particulière
+- **Droit de retrait du consentement** : lorsque le traitement est fondé sur votre consentement
+- **Droit d'introduire une réclamation** : déposer une plainte auprès de l'autorité de contrôle compétente (CNIL en France)
+
+Nous nous engageons à répondre à toute demande dans un délai maximum d'un mois à compter de sa réception. Ce délai peut être prolongé de deux mois supplémentaires en cas de demande complexe, auquel cas vous serez informé de cette prolongation.
+
+## Transferts internationaux de données
+
+Dans le cadre de la fourniture de nos services, vos données personnelles peuvent être transférées et traitées dans des pays situés en dehors de l'Espace Économique Européen (EEE), notamment aux États-Unis.
+
+Ces transferts sont effectués vers les prestataires suivants : Railway, Vercel, Discord, Sentry, Stripe, DeepL, OpenAI et Google (si Analytics activé).
+
+Nous veillons à ce que ces transferts soient effectués conformément aux mécanismes juridiques appropriés prévus par le RGPD, notamment :
+
+- Les Clauses Contractuelles Types (CCT) approuvées par la Commission européenne
+- Les décisions d'adéquation pour certains pays
+- Les certifications Privacy Shield ou équivalents
+- Les garanties appropriées propres à chaque prestataire
+
+## Modifications de la Politique de Confidentialité
+
+Moddy se réserve le droit de modifier cette Politique de Confidentialité à tout moment pour refléter les évolutions de nos pratiques, services ou obligations légales.
+
+Toute modification substantielle sera :
+
+- Publiée sur cette page avec une date de mise à jour
+- Notifiée aux utilisateurs via notre serveur Discord officiel et/ou par e-mail
+- Applicable immédiatement pour les nouveaux utilisateurs, et après un délai de préavis raisonnable pour les utilisateurs existants
+
+Nous vous encourageons à consulter régulièrement cette politique afin de rester informé de la manière dont nous protégeons vos données.
+
+## Base juridique du traitement
+
+Le traitement de vos données personnelles repose sur les fondements juridiques suivants :
+
+- **Exécution du contrat** : fourniture des services demandés (article 6.1.b du RGPD)
+- **Consentement** : lorsque vous acceptez explicitement certains traitements (article 6.1.a du RGPD)
+- **Intérêt légitime** : amélioration du service, sécurité, prévention de la fraude (article 6.1.f du RGPD)
+- **Obligation légale** : conformité réglementaire, réponses aux autorités (article 6.1.c du RGPD)
+
+## Contact
+
+**Pour toute question, demande relative à vos données personnelles ou à cette Politique de Confidentialité :**
+
+- **E-mail** : hello@moddy.app
+- **Support** (recommandé) : [moddy.app/support](https://moddy.app/support)
+
+Cela inclut : l'exercice de vos droits RGPD, les demandes d'informations, les demandes légales et judiciaires, les questions générales relatives à la confidentialité.
+
+**Autorité de contrôle (France) :**  
+Commission Nationale de l'Informatique et des Libertés (CNIL)  
+3 Place de Fontenoy - TSA 80715 - 75334 PARIS CEDEX 07  
+Téléphone : +33 1 53 73 22 22  
+Site web : [www.cnil.fr](https://www.cnil.fr)
+
+---
+
+> **En utilisant les services de Moddy (bot Discord, site web et services associés), vous reconnaissez avoir lu, compris et accepté les termes de cette Politique de Confidentialité.**
+
+**Date d'entrée en vigueur : 29 décembre 2025**
diff --git a/content/articles/privacy-policy/meta.json b/content/articles/privacy-policy/meta.json
new file mode 100644
index 0000000..229ecd5
--- /dev/null
+++ b/content/articles/privacy-policy/meta.json
@@ -0,0 +1,16 @@
+{
+  "title": "Privacy Policy",
+  "id": "privacy-policy",
+  "authors": ["1164597199594852395"],
+  "date": "2025-12-29",
+  "chapeau": {
+    "fr": "Notre politique de confidentialité et de protection des données.",
+    "en": "Our privacy policy and data protection practices."
+  },
+  "banner": null,
+  "banner_gradient": "linear-gradient(135deg, #1a237e 0%, #5c6bc0 50%, #c5cae9 100%)",
+  "banner_focus": { "x": 50, "y": 50 },
+  "seo_level": 1,
+  "labels": ["legal"],
+  "nav_order": 2
+}
diff --git a/content/articles/quick-start/en.md b/content/articles/quick-start/en.md
new file mode 100644
index 0000000..2d87f0e
--- /dev/null
+++ b/content/articles/quick-start/en.md
@@ -0,0 +1,5 @@
+# Quick Start
+
+> This page is under construction.
+
+If you have any questions, open a ticket on the [support server](https://moddy.app/support/) or contact us at [hello@moddy.app](mailto:hello@moddy.app).
diff --git a/content/articles/quick-start/fr.md b/content/articles/quick-start/fr.md
new file mode 100644
index 0000000..02dbb00
--- /dev/null
+++ b/content/articles/quick-start/fr.md
@@ -0,0 +1,5 @@
+# Quick Start
+
+> Cette page est en cours de rédaction.
+
+Pour toute question, ouvrez un ticket sur le [serveur support](https://moddy.app/support/) ou contactez-nous à [hello@moddy.app](mailto:hello@moddy.app).
diff --git a/content/articles/quick-start/meta.json b/content/articles/quick-start/meta.json
new file mode 100644
index 0000000..c3ba98a
--- /dev/null
+++ b/content/articles/quick-start/meta.json
@@ -0,0 +1,16 @@
+{
+  "title": "Quick Start",
+  "id": "quick-start",
+  "authors": ["1164597199594852395"],
+  "date": "2024-01-01",
+  "chapeau": {
+    "fr": "Tout ce qu'il faut savoir pour démarrer avec Moddy.",
+    "en": "Everything you need to know to get started with Moddy."
+  },
+  "banner": null,
+  "banner_gradient": "linear-gradient(135deg, #0d47a1 0%, #42a5f5 50%, #bbdefb 100%)",
+  "banner_focus": { "x": 50, "y": 50 },
+  "seo_level": 1,
+  "labels": ["about"],
+  "nav_order": 2
+}
diff --git a/site/site/about/roadmap.md b/content/articles/roadmap/en.md
similarity index 91%
rename from site/site/about/roadmap.md
rename to content/articles/roadmap/en.md
index 5369be9..f11eddb 100644
--- a/site/site/about/roadmap.md
+++ b/content/articles/roadmap/en.md
@@ -1,25 +1,8 @@
-<!-- catalog-only-start --><!-- ---
-name: Roadmap
-title: Roadmap
-order: 3
------><!-- catalog-only-end -->
-
 # Roadmap
 
-<!-- go/mwc-roadmap -->
-
-<!--*
-# Document freshness: For more information, see go/fresh-source.
-freshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }
-*-->
-
-<!-- [TOC] -->
-
 This roadmap describes current, future, and past goals for Material Web
 Components.
 
-<!--#include file="../googlers/roadmap.md" -->
-
 ## Current
 
 **MWC is currently in maintenance mode,
diff --git a/content/articles/roadmap/meta.json b/content/articles/roadmap/meta.json
new file mode 100644
index 0000000..df70596
--- /dev/null
+++ b/content/articles/roadmap/meta.json
@@ -0,0 +1,13 @@
+{
+  "title": "Roadmap",
+  "id": "roadmap",
+  "authors": ["1164597199594852395"],
+  "date": "2024-01-01",
+  "chapeau": { "fr": "La feuille de route du projet Moddy.", "en": "The Moddy project roadmap." },
+  "banner": null,
+  "banner_gradient": "linear-gradient(135deg, #1b5e20 0%, #66bb6a 50%, #c8e6c9 100%)",
+  "banner_focus": { "x": 50, "y": 50 },
+  "seo_level": 1,
+  "labels": ["about"],
+  "nav_order": 3
+}
diff --git a/site/site/about/support.md b/content/articles/support/en.md
similarity index 84%
rename from site/site/about/support.md
rename to content/articles/support/en.md
index 636ab02..ff89c38 100644
--- a/site/site/about/support.md
+++ b/content/articles/support/en.md
@@ -1,26 +1,7 @@
-<!-- catalog-only-start --><!-- ---
-name: Support
-title: Support
-order: 4
------><!-- catalog-only-end -->
-
 # Support
 
-<!-- go/mwc-support -->
-
-<!--*
-# Document freshness: For more information, see go/fresh-source.
-freshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }
-*-->
-
-<!-- [TOC] -->
-
-<!--#include file="../googlers/support.md" -->
-
 ## Browsers
 
-<!-- go/mwc-browsers -->
-
 MWC aims to support the latest two major versions of browsers at the time of
 each release.
 
@@ -38,8 +19,6 @@ Safari* | 16.4 +
 
 ## FAQ
 
-<!-- go/mwc-faq -->
-
 *If you have a question that isn't listed here, consider asking it so we can
 include it!*
 
@@ -115,11 +94,11 @@ for more info on how to generate a set of dark theme tokens.
     ```
 
 -   Use the
-    [Material theme builder Figma plugin](https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder)<!-- {.external} -->
+    [Material theme builder Figma plugin](https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder)
     to generate a color scheme.
 
 -   Use the
-    [`material-color-utilities` library](https://www.npmjs.com/package/@material/material-color-utilities)<!-- {.external} -->
+    [`material-color-utilities` library](https://www.npmjs.com/package/@material/material-color-utilities)
     to generate color schemes at runtime.
 
 ### How do I customize an `<md-*>` element that is inside another component?
diff --git a/content/articles/support/meta.json b/content/articles/support/meta.json
new file mode 100644
index 0000000..2b25109
--- /dev/null
+++ b/content/articles/support/meta.json
@@ -0,0 +1,13 @@
+{
+  "title": "Support",
+  "id": "support",
+  "authors": ["1164597199594852395"],
+  "date": "2024-01-01",
+  "chapeau": { "fr": "Besoin d'aide ? Contactez notre équipe.", "en": "Need help? Contact our team." },
+  "banner": null,
+  "banner_gradient": "linear-gradient(135deg, #e65100 0%, #ff9800 50%, #ffe0b2 100%)",
+  "banner_focus": { "x": 50, "y": 50 },
+  "seo_level": 1,
+  "labels": ["about"],
+  "nav_order": 4
+}
diff --git a/content/articles/terms-of-service/en.md b/content/articles/terms-of-service/en.md
new file mode 100644
index 0000000..9fa48cb
--- /dev/null
+++ b/content/articles/terms-of-service/en.md
@@ -0,0 +1,522 @@
+# Terms of Service
+
+**Last updated: December 31, 2025**
+
+These Terms of Service (hereinafter "ToS") govern the use of Moddy services, including the Discord bot, website, and all associated services.
+
+## Service Presentation
+
+**Moddy** is a Discord bot offering moderation, server management, customer support, and automation features.
+
+**Service publisher:**  
+Moddy  
+Contact: hello@moddy.app  
+Support: [moddy.app/support](https://moddy.app/support)
+
+**Open Source Project:**  
+Moddy is an open source project distributed under the **Creative Commons Attribution-NonCommercial-ShareAlike (CC BY-NC-SA)** license. The source code is publicly accessible and can be viewed, modified, and redistributed in accordance with the terms of this license and these ToS.
+
+## Acceptance of Terms
+
+### Scope of acceptance
+
+By using Moddy services (Discord bot, website, API, or any other associated service), you unconditionally accept these ToS as well as our Privacy Policy.
+
+The use of Moddy's source code, whether for consultation, modification, or redistribution, also implies acceptance of these ToS in addition to the CC BY-NC-SA license.
+
+### Legal capacity
+
+Use of our services is reserved for:
+
+- Persons aged at least 13 years (in accordance with Discord's terms)
+- Persons with legal capacity to contract
+- Minors with parental or legal guardian authorization
+
+By using Moddy, you declare and guarantee that you meet these conditions.
+
+### Implied acceptance
+
+Continued use of our services after any modification of the ToS constitutes acceptance of the new terms.
+
+## Service Description
+
+### Services offered
+
+Moddy offers the following features:
+
+- **Automatic moderation**: detection and sanctioning of inappropriate behavior
+- **Ticket system**: customer support and user request management
+- **Role management**: automatic role assignment and saving
+- **Reminder system**: scheduled personalized notifications
+- **Cross-server messages**: message broadcasting across multiple Discord servers
+- **Utility commands**: various tools for server management and animation
+- **Artificial intelligence**: translation, content generation via OpenAI
+- **Moderation history**: complete tracking of sanctions and moderation cases
+- **Transcripts**: ticket conversation backups
+
+### Service availability
+
+We strive to keep our services accessible 24/7, but cannot guarantee uninterrupted availability.
+
+Services may be temporarily suspended for:
+
+- Scheduled or emergency maintenance
+- Updates and improvements
+- Technical issues beyond our control
+- Force majeure
+
+We reserve the right to modify, suspend, or discontinue all or part of the services at any time, with or without notice.
+
+### Service evolution
+
+Moddy reserves the right to:
+
+- Add new features
+- Modify or remove existing features
+- Evolve the interface and user experience
+
+Users will be informed of major changes via our official Discord server and/or by email.
+
+### Technical intervention in servers
+
+Our team reserves the right to intervene in users' Discord servers without prior notice, but with appropriate justification, particularly for:
+
+- Critical bug fixes
+- Technical problem resolution
+- Emergency intervention in case of major malfunction
+- Compliance verification with ToS
+- Investigation of reports
+
+These interventions are carried out with respect for user privacy and only to the extent necessary to resolve the identified problem.
+
+## Terms of Use
+
+### User obligations
+
+By using Moddy, you agree to:
+
+- Provide accurate and up-to-date information
+- Comply with applicable laws and regulations
+- Comply with Discord's terms of use
+- Not infringe on third-party rights
+- Use the services reasonably and fairly
+- Not attempt to circumvent security measures
+- Report any malfunction or security vulnerability
+
+### Source code usage
+
+Use of Moddy's source code is subject to the following conditions:
+
+- Compliance with the CC BY-NC-SA license (Attribution, Non-Commercial, ShareAlike)
+- Compliance with these ToS in any use, modification, or redistribution of the code
+- Appropriate attribution of the original project
+- Prohibition of commercial use without prior written authorization
+- Sharing of modifications under the same license
+
+### Prohibited uses
+
+It is strictly forbidden to use Moddy for:
+
+- **Illegal content**: distribution of illegal, violent, pornographic content involving minors, discriminatory, defamatory, or privacy-infringing content
+- **Harassment**: harassing, threatening, intimidating other users
+- **Spam and abuse**: mass sending of unsolicited messages, abusive use of commands
+- **Fraud**: identity theft, fraud attempts, phishing
+- **Hacking**: unauthorized access attempts, security vulnerability exploitation, DDoS attacks
+- **Circumvention**: circumventing sanctions, creating multiple accounts to avoid a ban
+- **Resale**: unauthorized resale of Moddy services
+- **Abusive automation**: using scripts or bots to automate Moddy usage abusively
+
+### Moderation and sanctions
+
+In case of non-compliance with these ToS, Moddy reserves the right, **with or without notice, without having to justify itself, and without compensation**, to:
+
+- Temporarily suspend access to services
+- Permanently ban the user (BLACKLISTED status)
+- Remove inappropriate content
+- Report illegal behavior to competent authorities
+- Terminate Premium subscriptions without refund
+- Cut off access to all or part of the services
+
+Sanctions applied depend on the severity of the violation and may be applied at Moddy team's sole discretion.
+
+### Reporting to authorities
+
+In case of serious violation of the law (child pornography, terrorism, death threats, illegal trafficking, etc.), Moddy reserves the right to use collected data to report to competent authorities, in accordance with our legal obligations.
+
+These reports may be made without prior notice or information to the user concerned, in compliance with applicable legislation.
+
+### User content responsibility
+
+You are solely responsible for the content you create, share, or distribute via Moddy, including:
+
+- Saved messages
+- Personalized reminders
+- Cross-server messages
+- Tickets and transcripts
+- Any other data generated by your use
+
+Moddy is not responsible for user-created content and acts as a technical host.
+
+## Premium Services and Payments
+
+### Premium subscriptions
+
+Moddy offers Premium subscriptions with advanced features:
+
+- Increased limits (reminders, saved messages, etc.)
+- Exclusive features
+- Priority support
+- Advanced customization
+
+Details of Premium offers are available on our website and may evolve.
+
+### Pricing
+
+Prices are displayed in euros (EUR) including all taxes (VAT included) on our website and via Stripe.
+
+Moddy reserves the right to modify its prices at any time. Price changes:
+
+- Apply immediately to new subscriptions
+- Apply at next renewal for existing subscriptions
+- Are communicated at least 30 days before their application
+
+### Payment methods
+
+Payments are processed securely by **Stripe**, our PCI-DSS certified payment provider.
+
+Accepted payment methods:
+
+- Bank cards (Visa, Mastercard, American Express)
+- Other means offered by Stripe depending on your region
+
+Payments are made:
+
+- Upon initial subscription
+- Automatically at each renewal period (monthly or annual)
+
+### Renewal and cancellation
+
+**Automatic renewal:**  
+Premium subscriptions are automatically renewed at the end of each period, unless previously cancelled.
+
+**Cancellation:**  
+You can cancel your subscription at any time via your customer area on our website or by contacting our support.
+
+Cancellation takes effect at the end of the current period. No refund is made for the current period, except for legal exceptions.
+
+### Right of withdrawal
+
+In accordance with European regulations, you have a period of **14 days** from the subscription to exercise your right of withdrawal, without having to justify a reason.
+
+To exercise this right, contact our support.
+
+The refund will be made within 14 days following the withdrawal request.
+
+**Exception:** If you have expressly requested immediate execution of the service during the withdrawal period, you will not be able to exercise this right or the refund will be proportional to the use.
+
+### Refund policy
+
+**No refund** is granted in the following cases:
+
+- Voluntary cancellation during subscription (outside withdrawal period)
+- Ban for ToS violation
+- Non-use of services
+- Dissatisfaction after the withdrawal period
+
+**Exceptional refunds:**  
+Refunds may be granted on a case-by-case basis in case of:
+
+- Prolonged and proven service malfunction
+- Billing error
+- Exceptional circumstances at Moddy's discretion
+
+## Intellectual Property
+
+### Open Source License
+
+Moddy's source code is distributed under the **Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)** license.
+
+This license allows you to:
+
+- **Share**: copy and redistribute the code in any format
+- **Adapt**: remix, transform, and build upon the code
+
+Under the following conditions:
+
+- **Attribution**: you must credit the original work, provide a link to the license, and indicate if modifications were made
+- **Non-Commercial**: you may not use the code for commercial purposes without prior written authorization
+- **ShareAlike**: if you modify or transform the code, you must distribute your contributions under the same CC BY-NC-SA license
+
+For more details on this license: [https://creativecommons.org/licenses/by-nc-sa/4.0/](https://creativecommons.org/licenses/by-nc-sa/4.0/)
+
+### Elements excluded from Open Source license
+
+The following are excluded from the Open Source license and remain Moddy's exclusive property:
+
+- The name "Moddy", logos, trademarks, and visual identity graphic elements
+- Databases and their content
+- API keys and configuration secrets
+- Commercial and marketing documentation
+- Website-specific editorial content
+
+### Moddy property
+
+All elements not covered by the Open Source license are and remain Moddy's exclusive property.
+
+### Service usage license
+
+Using Moddy services (Discord bot, website) grants you a non-exclusive, non-transferable, revocable, and limited license to:
+
+- Use the services in accordance with these ToS
+- Access features for your personal use or for your Discord server
+
+This license does not grant you any ownership rights over the services or their content.
+
+### Restrictions
+
+It is forbidden to:
+
+- Use the name "Moddy" or logos without prior written authorization
+- Use the source code for commercial purposes without authorization
+- Not comply with the CC BY-NC-SA license attribution conditions
+- Extract or reuse a substantial part of the databases
+
+### User content
+
+Regarding content you create via Moddy:
+
+- You retain all your intellectual property rights
+- You grant Moddy a worldwide, free, non-exclusive license to host, store, process, and display this content as part of providing the services
+- This license ends when you delete the content or terminate your account
+
+## Personal Data Protection
+
+The processing of your personal data is governed by our **Privacy Policy**, accessible at: [moddy.app/privacy](https://moddy.app/privacy)
+
+By using Moddy, you acknowledge having read and accepted this policy.
+
+**Key points:**
+
+- Data collected: Discord identifiers, usage data, payment information (via Stripe)
+- Purposes: service provision, improvement, customer support, reporting to authorities in case of serious violation
+- GDPR rights: access, rectification, erasure, portability
+- Use for reporting: in case of serious violation of the law, your data may be transmitted to competent authorities
+
+For more details, please consult the complete Privacy Policy.
+
+## Limitation of Liability
+
+### Moddy's liability
+
+Moddy undertakes to provide its services with diligence and according to the rules of the art.
+
+However, **Moddy cannot be held liable** for:
+
+- Indirect, incidental, or consequential damages
+- Loss of profits, data, revenue, or business opportunities
+- Temporary or prolonged service interruption
+- Bugs, errors, or technical malfunctions
+- Actions of third parties (hackers, DDoS attacks)
+- Inappropriate use of services by users
+- Content created or shared by users
+- Data deletion following legitimate ban
+- Consequences of technical intervention in users' servers
+
+### Force majeure
+
+Moddy cannot be held liable for non-performance of its obligations in case of force majeure, including:
+
+- Natural disasters
+- Wars, attacks, riots
+- General strikes
+- Telecommunications network failure
+- Legislative or regulatory changes
+- Large-scale cyberattacks
+
+### Third-party services
+
+Moddy uses third-party services (Discord, Railway, Stripe, OpenAI, etc.). We are not responsible for:
+
+- Malfunctions of these services
+- Their privacy policies or terms of use
+- Modifications or interruptions of these services
+
+You are invited to consult the terms of use of these third-party platforms.
+
+### Legal limitation
+
+To the extent permitted by applicable law, Moddy's total liability to you may not exceed the total amount of sums actually paid by you over the 12 months preceding the event giving rise to liability.
+
+## Warranties and Representations
+
+### Services provided 'as is'
+
+Moddy services are provided "as is" and "as available", without warranty of any kind, express or implied, including:
+
+- Absence of interruption or errors
+- Accuracy or reliability of results
+- Correction of defects
+- Compatibility with your equipment
+
+### No guarantee of results
+
+Moddy is a tool facilitating Discord server management, but does not guarantee:
+
+- 100% effective automatic moderation
+- Total absence of spam or inappropriate behavior
+- Compliance with specific requirements of each server
+
+The server administrator remains responsible for moderation and compliance with Discord rules.
+
+## Data and Backups
+
+### Data backup
+
+Moddy performs regular backups of its databases to ensure service continuity.
+
+However, **you are responsible for backing up your own important data**.
+
+### Data loss
+
+Moddy cannot be held liable for data loss following:
+
+- Voluntary or accidental deletion by the user
+- Technical malfunction
+- Ban for ToS violation
+- Service closure
+
+It is recommended to regularly export your important data (transcripts, role lists, etc.).
+
+### Data retention
+
+Data is retained indefinitely until:
+
+- Manual deletion by our technical team
+- Explicit deletion request on your part (GDPR right to erasure)
+
+See the Privacy Policy for more details.
+
+## ToS Modifications
+
+### Right to modify
+
+Moddy reserves the right to modify these ToS at any time to reflect:
+
+- Evolution of our services
+- Legislative or regulatory changes
+- Improvement of our practices
+
+### Notification of modifications
+
+Any substantial modification will be:
+
+- Published on this page with an updated date
+- Notified to users via our official Discord server and/or by email
+- Effective immediately for new users
+- Effective after a reasonable notice period (generally 30 days) for existing users
+
+### Acceptance of modifications
+
+By continuing to use Moddy after the modifications take effect, you accept the new ToS.
+
+If you refuse the modifications, you must stop using the services.
+
+## Termination
+
+### Termination by user
+
+You can stop using Moddy at any time by:
+
+- Removing the bot from your Discord server
+- Deactivating your account on our website
+- Canceling your Premium subscription
+
+### Termination by Moddy
+
+Moddy reserves the right to suspend or terminate your access to services, **with or without notice, without having to justify itself**, in case of:
+
+- Violation of these ToS
+- Fraudulent or abusive behavior
+- Non-payment of a Premium subscription
+- Prolonged inactivity (at our discretion)
+- Definitive service closure
+- Any other reason deemed legitimate by Moddy
+
+### Consequences of termination
+
+In case of termination:
+
+- Your access to Premium services is immediately interrupted
+- Your data may be deleted in accordance with our retention policy
+- No refund is made (except legal obligations)
+- ToS clauses that, by nature, must survive (intellectual property, limitation of liability) remain in effect
+
+## General Provisions
+
+### Entire agreement
+
+These ToS, together with the Privacy Policy, constitute the entire agreement between you and Moddy regarding the use of the services.
+
+### Partial invalidity
+
+If a provision of these ToS is deemed invalid or unenforceable by a competent court, the other provisions will remain fully in effect.
+
+The invalid provision will be replaced by a valid provision as close as possible to the original intent.
+
+### No waiver
+
+Moddy's failure to exercise a right or provision of these ToS does not constitute a waiver of that right or provision.
+
+### Assignment
+
+You may not assign or transfer your rights or obligations under these ToS without Moddy's prior written consent.
+
+Moddy may freely assign or transfer its rights and obligations, particularly in case of merger, acquisition, or asset sale.
+
+### Language
+
+These ToS are written in English. In case of translation, only the English version is authoritative.
+
+## Applicable Law and Jurisdiction
+
+### Applicable law
+
+These ToS are governed and interpreted in accordance with **French law**, with the exception of its conflict of laws rules.
+
+For consumer users residing in the European Union, nothing in these ToS affects your rights as a consumer under the legislation of your country of residence.
+
+### Dispute resolution
+
+**Prior mediation:**  
+In case of a dispute relating to the interpretation or execution of these ToS, we encourage you to contact us first to try to find an amicable solution via our support.
+
+**Consumer mediation (for EU consumers):**  
+In accordance with articles L.612-1 et seq. of the Consumer Code, you have the right to use a consumer mediator free of charge in case of a dispute.
+
+The contact details of the competent mediator will be provided upon request.
+
+**Competent jurisdiction:**  
+Failing an amicable solution, any dispute will be submitted to the competent French courts, according to applicable territorial jurisdiction rules.
+
+For consumers residing in the European Union, you may also seize the courts of your place of residence.
+
+**Online Dispute Resolution (ODR) platform:**  
+The European Commission provides an online dispute resolution platform accessible at: [https://ec.europa.eu/consumers/odr](https://ec.europa.eu/consumers/odr)
+
+## Contact
+
+**For any questions regarding these ToS, Moddy services, legal requests, or exercising your rights:**
+
+- **Email**: hello@moddy.app
+- **Support** (recommended): [moddy.app/support](https://moddy.app/support)
+
+Our support can handle all your requests, including legal requests.
+
+**Official Discord server:**  
+Join our server for announcements, community support, and news.
+
+---
+
+> **By using Moddy services (Discord bot, website, and associated services) or by using Moddy's source code, you acknowledge having read, understood, and accepted all of these Terms of Service as well as the CC BY-NC-SA license.**
+
+**Effective date: December 31, 2025**
diff --git a/content/articles/terms-of-service/fr.md b/content/articles/terms-of-service/fr.md
new file mode 100644
index 0000000..1bed4d9
--- /dev/null
+++ b/content/articles/terms-of-service/fr.md
@@ -0,0 +1,522 @@
+# Conditions Générales d'Utilisation
+
+**Dernière mise à jour : December 31, 2025**
+
+Les présentes Conditions Générales d'Utilisation (ci-après « CGU ») régissent l'utilisation des services Moddy, incluant le bot Discord, le site web et tous les services associés.
+
+## Présentation du service
+
+**Moddy** est un bot Discord proposant des fonctionnalités de modération, de gestion de serveur, de support client et d'automatisation.
+
+**Éditeur du service :**  
+Moddy  
+Contact : hello@moddy.app  
+Support : [moddy.app/support](https://moddy.app/support)
+
+**Projet Open Source :**  
+Moddy est un projet open source distribué sous la licence **Creative Commons Attribution-NonCommercial-ShareAlike (CC BY-NC-SA)**. Le code source est accessible publiquement et peut être consulté, modifié et redistribué conformément aux termes de cette licence et des présentes CGU.
+
+## Acceptation des conditions
+
+### Champ d'application de l'acceptation
+
+En utilisant les services Moddy (bot Discord, site web, API ou tout autre service associé), vous acceptez sans réserve les présentes CGU ainsi que notre Politique de Confidentialité.
+
+L'utilisation du code source de Moddy, que ce soit à des fins de consultation, de modification ou de redistribution, implique également l'acceptation des présentes CGU en complément de la licence CC BY-NC-SA.
+
+### Capacité juridique
+
+L'utilisation de nos services est réservée aux :
+
+- Personnes âgées d'au moins 13 ans (conformément aux conditions d'utilisation de Discord)
+- Personnes disposant de la capacité juridique de contracter
+- Mineurs disposant d'une autorisation parentale ou de leur tuteur légal
+
+En utilisant Moddy, vous déclarez et garantissez remplir ces conditions.
+
+### Acceptation tacite
+
+La poursuite de l'utilisation de nos services après toute modification des CGU vaut acceptation des nouvelles conditions.
+
+## Description des services
+
+### Services proposés
+
+Moddy propose les fonctionnalités suivantes :
+
+- **Modération automatique** : détection et sanction des comportements inappropriés
+- **Système de tickets** : support client et gestion des demandes des utilisateurs
+- **Gestion des rôles** : attribution automatique et sauvegarde des rôles
+- **Système de rappels** : notifications personnalisées programmées
+- **Messages cross-serveurs** : diffusion de messages sur plusieurs serveurs Discord
+- **Commandes utilitaires** : divers outils pour la gestion et l'animation des serveurs
+- **Intelligence artificielle** : traduction, génération de contenu via OpenAI
+- **Historique de modération** : suivi complet des sanctions et des dossiers de modération
+- **Transcripts** : sauvegardes des conversations de tickets
+
+### Disponibilité des services
+
+Nous nous efforçons de maintenir nos services accessibles 24h/24 et 7j/7, mais ne pouvons garantir une disponibilité ininterrompue.
+
+Les services peuvent être temporairement suspendus pour :
+
+- Maintenance planifiée ou d'urgence
+- Mises à jour et améliorations
+- Problèmes techniques indépendants de notre volonté
+- Cas de force majeure
+
+Nous nous réservons le droit de modifier, suspendre ou interrompre tout ou partie des services à tout moment, avec ou sans préavis.
+
+### Évolution du service
+
+Moddy se réserve le droit de :
+
+- Ajouter de nouvelles fonctionnalités
+- Modifier ou supprimer des fonctionnalités existantes
+- Faire évoluer l'interface et l'expérience utilisateur
+
+Les utilisateurs seront informés des modifications majeures via notre serveur Discord officiel et/ou par e-mail.
+
+### Intervention technique sur les serveurs
+
+Notre équipe se réserve le droit d'intervenir sur les serveurs Discord des utilisateurs sans préavis, mais avec justification appropriée, notamment pour :
+
+- Correction de bugs critiques
+- Résolution de problèmes techniques
+- Intervention d'urgence en cas de dysfonctionnement majeur
+- Vérification de la conformité aux CGU
+- Enquête suite à des signalements
+
+Ces interventions sont réalisées dans le respect de la vie privée des utilisateurs et uniquement dans la mesure nécessaire à la résolution du problème identifié.
+
+## Conditions d'utilisation
+
+### Obligations de l'utilisateur
+
+En utilisant Moddy, vous vous engagez à :
+
+- Fournir des informations exactes et à jour
+- Respecter les lois et réglementations applicables
+- Respecter les conditions d'utilisation de Discord
+- Ne pas porter atteinte aux droits des tiers
+- Utiliser les services de manière raisonnable et loyale
+- Ne pas tenter de contourner les mesures de sécurité
+- Signaler tout dysfonctionnement ou toute vulnérabilité de sécurité
+
+### Utilisation du code source
+
+L'utilisation du code source de Moddy est soumise aux conditions suivantes :
+
+- Respect de la licence CC BY-NC-SA (Attribution, Non-Commercial, ShareAlike)
+- Respect des présentes CGU pour toute utilisation, modification ou redistribution du code
+- Attribution appropriée au projet original
+- Interdiction d'utilisation commerciale sans autorisation écrite préalable
+- Partage des modifications sous la même licence
+
+### Utilisations interdites
+
+Il est strictement interdit d'utiliser Moddy pour :
+
+- **Contenu illégal** : diffusion de contenus illicites, violents, pornographiques impliquant des mineurs, discriminatoires, diffamatoires ou portant atteinte à la vie privée
+- **Harcèlement** : harceler, menacer, intimider d'autres utilisateurs
+- **Spam et abus** : envoi massif de messages non sollicités, utilisation abusive des commandes
+- **Fraude** : usurpation d'identité, tentatives d'escroquerie, hameçonnage (phishing)
+- **Piratage** : tentatives d'accès non autorisé, exploitation de failles de sécurité, attaques DDoS
+- **Contournement** : contournement de sanctions, création de comptes multiples pour éviter un bannissement
+- **Revente** : revente non autorisée des services Moddy
+- **Automatisation abusive** : utilisation de scripts ou de bots pour automatiser l'utilisation de Moddy de manière abusive
+
+### Modération et sanctions
+
+En cas de non-respect des présentes CGU, Moddy se réserve le droit, **avec ou sans préavis, sans avoir à se justifier et sans indemnité**, de :
+
+- Suspendre temporairement l'accès aux services
+- Bannir définitivement l'utilisateur (statut BLACKLISTED)
+- Supprimer les contenus inappropriés
+- Signaler les comportements illégaux aux autorités compétentes
+- Résilier les abonnements Premium sans remboursement
+- Couper l'accès à tout ou partie des services
+
+Les sanctions appliquées dépendent de la gravité de la violation et peuvent être décidées à la seule discrétion de l'équipe Moddy.
+
+### Signalement aux autorités
+
+En cas de violation grave de la loi (pédopornographie, terrorisme, menaces de mort, trafics illicites, etc.), Moddy se réserve le droit d'utiliser les données collectées pour effectuer un signalement auprès des autorités compétentes, conformément à nos obligations légales.
+
+Ces signalements peuvent être effectués sans préavis ni information préalable de l'utilisateur concerné, dans le respect de la législation applicable.
+
+### Responsabilité relative aux contenus des utilisateurs
+
+Vous êtes seul responsable des contenus que vous créez, partagez ou diffusez via Moddy, notamment :
+
+- Les messages sauvegardés
+- Les rappels personnalisés
+- Les messages cross-serveurs
+- Les tickets et transcripts
+- Toute autre donnée générée par votre utilisation
+
+Moddy n'est pas responsable des contenus créés par les utilisateurs et agit en qualité d'hébergeur technique.
+
+## Services Premium et paiements
+
+### Abonnements Premium
+
+Moddy propose des abonnements Premium offrant des fonctionnalités avancées :
+
+- Limites augmentées (rappels, messages sauvegardés, etc.)
+- Fonctionnalités exclusives
+- Support prioritaire
+- Personnalisation avancée
+
+Le détail des offres Premium est disponible sur notre site web et peut évoluer.
+
+### Tarification
+
+Les prix sont affichés en euros (EUR) toutes taxes comprises (TVA incluse) sur notre site web et via Stripe.
+
+Moddy se réserve le droit de modifier ses tarifs à tout moment. Les modifications de prix :
+
+- S'appliquent immédiatement aux nouveaux abonnements
+- S'appliquent au prochain renouvellement pour les abonnements existants
+- Sont communiquées au moins 30 jours avant leur entrée en vigueur
+
+### Moyens de paiement
+
+Les paiements sont traités de manière sécurisée par **Stripe**, notre prestataire de paiement certifié PCI-DSS.
+
+Moyens de paiement acceptés :
+
+- Cartes bancaires (Visa, Mastercard, American Express)
+- Autres moyens proposés par Stripe selon votre région
+
+Les paiements sont effectués :
+
+- Lors de la souscription initiale
+- Automatiquement à chaque échéance de renouvellement (mensuelle ou annuelle)
+
+### Renouvellement et résiliation
+
+**Renouvellement automatique :**  
+Les abonnements Premium sont automatiquement renouvelés à la fin de chaque période, sauf résiliation préalable.
+
+**Résiliation :**  
+Vous pouvez résilier votre abonnement à tout moment via votre espace client sur notre site web ou en contactant notre support.
+
+La résiliation prend effet à la fin de la période en cours. Aucun remboursement n'est effectué pour la période en cours, sauf exceptions légales.
+
+### Droit de rétractation
+
+Conformément à la réglementation européenne, vous disposez d'un délai de **14 jours** à compter de la souscription pour exercer votre droit de rétractation, sans avoir à justifier de motif.
+
+Pour exercer ce droit, contactez notre support.
+
+Le remboursement sera effectué dans un délai de 14 jours suivant la demande de rétractation.
+
+**Exception :** Si vous avez expressément demandé l'exécution immédiate du service pendant le délai de rétractation, vous ne pourrez pas exercer ce droit ou le remboursement sera proportionnel à l'utilisation effectuée.
+
+### Politique de remboursement
+
+**Aucun remboursement** n'est accordé dans les cas suivants :
+
+- Résiliation volontaire en cours d'abonnement (hors délai de rétractation)
+- Bannissement pour violation des CGU
+- Non-utilisation des services
+- Insatisfaction après expiration du délai de rétractation
+
+**Remboursements exceptionnels :**  
+Des remboursements peuvent être accordés au cas par cas en cas de :
+
+- Dysfonctionnement prolongé et avéré du service
+- Erreur de facturation
+- Circonstances exceptionnelles à la discrétion de Moddy
+
+## Propriété intellectuelle
+
+### Licence Open Source
+
+Le code source de Moddy est distribué sous la licence **Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)**.
+
+Cette licence vous autorise à :
+
+- **Partager** : copier et redistribuer le code dans tout format
+- **Adapter** : remixer, transformer et créer à partir du code
+
+Sous les conditions suivantes :
+
+- **Attribution** : vous devez créditer l'œuvre originale, fournir un lien vers la licence et indiquer si des modifications ont été apportées
+- **Non-Commercial** : vous ne pouvez pas utiliser le code à des fins commerciales sans autorisation écrite préalable
+- **ShareAlike** : si vous modifiez ou transformez le code, vous devez distribuer vos contributions sous la même licence CC BY-NC-SA
+
+Pour plus de détails sur cette licence : [https://creativecommons.org/licenses/by-nc-sa/4.0/](https://creativecommons.org/licenses/by-nc-sa/4.0/)
+
+### Éléments exclus de la licence Open Source
+
+Sont exclus de la licence Open Source et demeurent la propriété exclusive de Moddy :
+
+- Le nom « Moddy », les logos, marques et éléments graphiques de l'identité visuelle
+- Les bases de données et leur contenu
+- Les clés d'API et secrets de configuration
+- La documentation commerciale et marketing
+- Le contenu éditorial spécifique au site web
+
+### Propriété de Moddy
+
+Tous les éléments non couverts par la licence Open Source sont et restent la propriété exclusive de Moddy.
+
+### Licence d'utilisation des services
+
+L'utilisation des services Moddy (bot Discord, site web) vous confère une licence non exclusive, non transférable, révocable et limitée pour :
+
+- Utiliser les services conformément aux présentes CGU
+- Accéder aux fonctionnalités pour votre usage personnel ou pour votre serveur Discord
+
+Cette licence ne vous confère aucun droit de propriété sur les services ou leur contenu.
+
+### Restrictions
+
+Il est interdit de :
+
+- Utiliser le nom « Moddy » ou les logos sans autorisation écrite préalable
+- Utiliser le code source à des fins commerciales sans autorisation
+- Ne pas respecter les conditions d'attribution de la licence CC BY-NC-SA
+- Extraire ou réutiliser une partie substantielle des bases de données
+
+### Contenu des utilisateurs
+
+Concernant les contenus que vous créez via Moddy :
+
+- Vous conservez l'intégralité de vos droits de propriété intellectuelle
+- Vous accordez à Moddy une licence mondiale, gratuite et non exclusive pour héberger, stocker, traiter et afficher ce contenu dans le cadre de la fourniture des services
+- Cette licence prend fin lorsque vous supprimez le contenu ou résiliez votre compte
+
+## Protection des données personnelles
+
+Le traitement de vos données personnelles est régi par notre **Politique de Confidentialité**, accessible à l'adresse : [moddy.app/privacy](https://moddy.app/privacy)
+
+En utilisant Moddy, vous reconnaissez avoir pris connaissance et accepté cette politique.
+
+**Points clés :**
+
+- Données collectées : identifiants Discord, données d'utilisation, informations de paiement (via Stripe)
+- Finalités : fourniture du service, amélioration, support client, signalement aux autorités en cas de violation grave
+- Droits RGPD : accès, rectification, effacement, portabilité
+- Utilisation à des fins de signalement : en cas de violation grave de la loi, vos données peuvent être transmises aux autorités compétentes
+
+Pour plus de détails, veuillez consulter la Politique de Confidentialité complète.
+
+## Limitation de responsabilité
+
+### Responsabilité de Moddy
+
+Moddy s'engage à fournir ses services avec diligence et selon les règles de l'art.
+
+Toutefois, **Moddy ne saurait être tenu responsable** de :
+
+- Dommages indirects, accessoires ou consécutifs
+- Pertes de bénéfices, de données, de revenus ou d'opportunités commerciales
+- Interruption temporaire ou prolongée du service
+- Bugs, erreurs ou dysfonctionnements techniques
+- Actes de tiers (pirates informatiques, attaques DDoS)
+- Utilisation inappropriée des services par les utilisateurs
+- Contenus créés ou partagés par les utilisateurs
+- Suppression de données suite à un bannissement légitime
+- Conséquences d'une intervention technique sur les serveurs des utilisateurs
+
+### Force majeure
+
+Moddy ne peut être tenu responsable de l'inexécution de ses obligations en cas de force majeure, notamment :
+
+- Catastrophes naturelles
+- Guerres, attentats, émeutes
+- Grèves générales
+- Défaillance des réseaux de télécommunications
+- Modifications législatives ou réglementaires
+- Cyberattaques de grande envergure
+
+### Services tiers
+
+Moddy utilise des services tiers (Discord, Railway, Stripe, OpenAI, etc.). Nous ne sommes pas responsables de :
+
+- Dysfonctionnements de ces services
+- Leurs politiques de confidentialité ou conditions d'utilisation
+- Modifications ou interruptions de ces services
+
+Nous vous invitons à consulter les conditions d'utilisation de ces plateformes tierces.
+
+### Limitation légale
+
+Dans les limites permises par la loi applicable, la responsabilité totale de Moddy à votre égard ne pourra excéder le montant total des sommes effectivement réglées par vous au cours des 12 mois précédant l'événement à l'origine de la responsabilité.
+
+## Garanties et déclarations
+
+### Services fournis « en l'état »
+
+Les services Moddy sont fournis « en l'état » et « selon disponibilité », sans garantie d'aucune sorte, expresse ou implicite, notamment concernant :
+
+- L'absence d'interruption ou d'erreurs
+- L'exactitude ou la fiabilité des résultats
+- La correction des défauts
+- La compatibilité avec votre équipement
+
+### Absence de garantie de résultat
+
+Moddy est un outil facilitant la gestion des serveurs Discord, mais ne garantit pas :
+
+- Une modération automatique efficace à 100 %
+- Une absence totale de spam ou de comportements inappropriés
+- La conformité avec les exigences spécifiques de chaque serveur
+
+L'administrateur du serveur demeure responsable de la modération et du respect des règles Discord.
+
+## Données et sauvegardes
+
+### Sauvegarde des données
+
+Moddy effectue des sauvegardes régulières de ses bases de données afin d'assurer la continuité du service.
+
+Toutefois, **vous êtes responsable de la sauvegarde de vos propres données importantes**.
+
+### Perte de données
+
+Moddy ne peut être tenu responsable de la perte de données faisant suite à :
+
+- Une suppression volontaire ou accidentelle de la part de l'utilisateur
+- Un dysfonctionnement technique
+- Un bannissement pour violation des CGU
+- Une fermeture du service
+
+Il est recommandé d'exporter régulièrement vos données importantes (transcripts, listes de rôles, etc.).
+
+### Conservation des données
+
+Les données sont conservées indéfiniment jusqu'à :
+
+- Suppression manuelle par notre équipe technique
+- Demande de suppression explicite de votre part (droit à l'effacement RGPD)
+
+Consultez la Politique de Confidentialité pour plus de détails.
+
+## Modification des CGU
+
+### Droit de modification
+
+Moddy se réserve le droit de modifier les présentes CGU à tout moment afin de refléter :
+
+- L'évolution de nos services
+- Les modifications législatives ou réglementaires
+- L'amélioration de nos pratiques
+
+### Notification des modifications
+
+Toute modification substantielle sera :
+
+- Publiée sur cette page avec une date de mise à jour
+- Notifiée aux utilisateurs via notre serveur Discord officiel et/ou par e-mail
+- Applicable immédiatement aux nouveaux utilisateurs
+- Applicable après un délai de préavis raisonnable (généralement 30 jours) pour les utilisateurs existants
+
+### Acceptation des modifications
+
+En continuant à utiliser Moddy après l'entrée en vigueur des modifications, vous acceptez les nouvelles CGU.
+
+Si vous refusez les modifications, vous devez cesser d'utiliser les services.
+
+## Résiliation
+
+### Résiliation par l'utilisateur
+
+Vous pouvez cesser d'utiliser Moddy à tout moment en :
+
+- Retirant le bot de votre serveur Discord
+- Désactivant votre compte sur notre site web
+- Annulant votre abonnement Premium
+
+### Résiliation par Moddy
+
+Moddy se réserve le droit de suspendre ou de résilier votre accès aux services, **avec ou sans préavis, sans avoir à se justifier**, en cas de :
+
+- Violation des présentes CGU
+- Comportement frauduleux ou abusif
+- Non-paiement d'un abonnement Premium
+- Inactivité prolongée (à notre discrétion)
+- Fermeture définitive du service
+- Tout autre motif jugé légitime par Moddy
+
+### Conséquences de la résiliation
+
+En cas de résiliation :
+
+- Votre accès aux services Premium est immédiatement interrompu
+- Vos données peuvent être supprimées conformément à notre politique de conservation
+- Aucun remboursement n'est effectué (sauf obligations légales)
+- Les clauses des CGU qui, par leur nature, doivent survivre (propriété intellectuelle, limitation de responsabilité) restent en vigueur
+
+## Dispositions générales
+
+### Intégralité de l'accord
+
+Les présentes CGU, ainsi que la Politique de Confidentialité, constituent l'intégralité de l'accord entre vous et Moddy concernant l'utilisation des services.
+
+### Nullité partielle
+
+Si une disposition des présentes CGU est jugée invalide ou inapplicable par un tribunal compétent, les autres dispositions resteront pleinement en vigueur.
+
+La disposition invalide sera remplacée par une disposition valide aussi proche que possible de l'intention initiale.
+
+### Non-renonciation
+
+Le fait pour Moddy de ne pas exercer un droit ou une disposition des présentes CGU ne constitue pas une renonciation à ce droit ou à cette disposition.
+
+### Cession
+
+Vous ne pouvez pas céder ou transférer vos droits ou obligations au titre des présentes CGU sans le consentement écrit préalable de Moddy.
+
+Moddy peut librement céder ou transférer ses droits et obligations, notamment en cas de fusion, d'acquisition ou de cession d'actifs.
+
+### Langue
+
+Les présentes CGU sont rédigées en anglais. En cas de traduction, seule la version anglaise fait foi.
+
+## Droit applicable et juridiction compétente
+
+### Droit applicable
+
+Les présentes CGU sont régies et interprétées conformément au **droit français**, à l'exclusion de ses règles de conflit de lois.
+
+Pour les utilisateurs consommateurs résidant dans l'Union européenne, aucune disposition des présentes CGU n'affecte vos droits en tant que consommateur au titre de la législation de votre pays de résidence.
+
+### Règlement des litiges
+
+**Médiation préalable :**  
+En cas de litige relatif à l'interprétation ou à l'exécution des présentes CGU, nous vous encourageons à nous contacter en premier lieu afin de tenter de trouver une solution amiable via notre support.
+
+**Médiation de la consommation (pour les consommateurs de l'UE) :**  
+Conformément aux articles L.612-1 et suivants du Code de la consommation, vous avez le droit de recourir gratuitement à un médiateur de la consommation en cas de litige.
+
+Les coordonnées du médiateur compétent vous seront communiquées sur demande.
+
+**Juridiction compétente :**  
+À défaut de solution amiable, tout litige sera soumis aux tribunaux français compétents, selon les règles de compétence territoriale applicables.
+
+Pour les consommateurs résidant dans l'Union européenne, vous pouvez également saisir les tribunaux de votre lieu de résidence.
+
+**Plateforme de Règlement en Ligne des Litiges (RLL) :**  
+La Commission européenne met à disposition une plateforme de règlement en ligne des litiges accessible à l'adresse : [https://ec.europa.eu/consumers/odr](https://ec.europa.eu/consumers/odr)
+
+## Contact
+
+**Pour toute question relative aux présentes CGU, aux services Moddy, aux demandes légales ou à l'exercice de vos droits :**
+
+- **E-mail** : hello@moddy.app
+- **Support** (recommandé) : [moddy.app/support](https://moddy.app/support)
+
+Notre support peut traiter toutes vos demandes, y compris les demandes à caractère juridique.
+
+**Serveur Discord officiel :**  
+Rejoignez notre serveur pour les annonces, le support communautaire et les actualités.
+
+---
+
+> **En utilisant les services Moddy (bot Discord, site web et services associés) ou en utilisant le code source de Moddy, vous reconnaissez avoir lu, compris et accepté l'intégralité des présentes Conditions Générales d'Utilisation ainsi que la licence CC BY-NC-SA.**
+
+**Date d'entrée en vigueur : December 31, 2025**
diff --git a/content/articles/terms-of-service/meta.json b/content/articles/terms-of-service/meta.json
new file mode 100644
index 0000000..3dafd3b
--- /dev/null
+++ b/content/articles/terms-of-service/meta.json
@@ -0,0 +1,16 @@
+{
+  "title": "Terms of Service",
+  "id": "terms-of-service",
+  "authors": ["1164597199594852395"],
+  "date": "2025-12-31",
+  "chapeau": {
+    "fr": "Les conditions d'utilisation des services Moddy.",
+    "en": "The terms governing the use of Moddy services."
+  },
+  "banner": null,
+  "banner_gradient": "linear-gradient(135deg, #b71c1c 0%, #e57373 50%, #ffcdd2 100%)",
+  "banner_focus": { "x": 50, "y": 50 },
+  "seo_level": 1,
+  "labels": ["legal"],
+  "nav_order": 1
+}
diff --git a/content/articles/v1-changelog/en.md b/content/articles/v1-changelog/en.md
new file mode 100644
index 0000000..99c482f
--- /dev/null
+++ b/content/articles/v1-changelog/en.md
@@ -0,0 +1,24 @@
+# v1.0 Moddy Changelog
+
+Welcome to the first official Moddy changelog! Here are the new features in version 1.0.
+
+## New Features
+
+### Slash Commands
+- `/setup` — Configure Moddy on your server in a few steps.
+- `/help` — Displays the list of available commands.
+- `/info` — Information about the bot and the server.
+
+### Moderation
+- Automatic log system for member joins and leaves.
+- Moderation commands: `/kick`, `/ban`, `/mute`.
+
+## Improvements
+
+- Response time reduced by 40%.
+- Better handling of Discord API errors.
+
+## Bug Fixes
+
+- Fixed a crash when using `/setup` on servers without roles.
+- Fixed embed display on mobile.
diff --git a/content/articles/v1-changelog/fr.md b/content/articles/v1-changelog/fr.md
new file mode 100644
index 0000000..e11d890
--- /dev/null
+++ b/content/articles/v1-changelog/fr.md
@@ -0,0 +1,24 @@
+# v1.0 Moddy Changelog
+
+Bienvenue dans le premier changelog officiel de Moddy ! Voici les nouveautés de la version 1.0.
+
+## Nouvelles fonctionnalités
+
+### Commandes slash
+- `/setup` — Configure Moddy sur votre serveur en quelques étapes.
+- `/help` — Affiche la liste des commandes disponibles.
+- `/info` — Informations sur le bot et le serveur.
+
+### Modération
+- Système de logs automatiques pour les entrées et sorties de membres.
+- Commandes de modération : `/kick`, `/ban`, `/mute`.
+
+## Améliorations
+
+- Temps de réponse réduit de 40%.
+- Meilleure gestion des erreurs API Discord.
+
+## Corrections de bugs
+
+- Correction d'un crash lors de l'utilisation de `/setup` sur des serveurs sans rôles.
+- Correction de l'affichage des embeds sur mobile.
diff --git a/content/articles/v1-changelog/meta.json b/content/articles/v1-changelog/meta.json
new file mode 100644
index 0000000..c734b31
--- /dev/null
+++ b/content/articles/v1-changelog/meta.json
@@ -0,0 +1,16 @@
+{
+  "title": "v1.0 Moddy Changelog",
+  "id": "v1-changelog",
+  "authors": ["1164597199594852395"],
+  "date": "2024-01-15",
+  "chapeau": {
+    "fr": "Voici le changelog de la v1.0 de Moddy.",
+    "en": "Here is the changelog for Moddy v1.0."
+  },
+  "banner": null,
+  "banner_gradient": "linear-gradient(135deg, #2e7d32 0%, #4caf50 50%, #a5d6a7 100%)",
+  "banner_focus": { "x": 50, "y": 50 },
+  "theme_color": "#2e7d32",
+  "seo_level": 3,
+  "labels": ["change-logs"]
+}
diff --git a/content/authors/112233445566778899.json b/content/authors/112233445566778899.json
new file mode 100644
index 0000000..c2a4970
--- /dev/null
+++ b/content/authors/112233445566778899.json
@@ -0,0 +1,10 @@
+{
+  "id": "112233445566778899",
+  "username": "Alex Dubois",
+  "avatar": null,
+  "avatar_decoration": null,
+  "post": null,
+  "bio": "Contributeur Moddy.",
+  "banner_color": "#ff9800",
+  "links": []
+}
diff --git a/content/authors/1164597199594852395.json b/content/authors/1164597199594852395.json
new file mode 100644
index 0000000..058b924
--- /dev/null
+++ b/content/authors/1164597199594852395.json
@@ -0,0 +1,10 @@
+{
+  "id": "1164597199594852395",
+  "username": "Jules",
+  "avatar": "DISCORD",
+  "avatar_decoration": "DISCORD",
+  "post": "Fondateur",
+  "bio": "Fondateur de Moddy.",
+  "banner_color": "#5793f2",
+  "links": []
+}
diff --git a/content/authors/123456789012345678.json b/content/authors/123456789012345678.json
new file mode 100644
index 0000000..0247f8b
--- /dev/null
+++ b/content/authors/123456789012345678.json
@@ -0,0 +1,10 @@
+{
+  "id": "123456789012345678",
+  "username": "DISCORD",
+  "avatar": "DISCORD",
+  "avatar_decoration": "DISCORD",
+  "post": "Product Manager",
+  "bio": "Bonjour ! Je suis le product manager de Moddy.",
+  "banner_color": "#5793f2",
+  "links": []
+}
diff --git a/content/authors/987654321098765432.json b/content/authors/987654321098765432.json
new file mode 100644
index 0000000..61230fc
--- /dev/null
+++ b/content/authors/987654321098765432.json
@@ -0,0 +1,10 @@
+{
+  "id": "987654321098765432",
+  "username": "Léa Martin",
+  "avatar": null,
+  "avatar_decoration": null,
+  "post": "Lead Developer",
+  "bio": "Développeuse passionnée, je travaille sur Moddy depuis le début.",
+  "banner_color": "#e91e63",
+  "links": []
+}
diff --git a/content/labels/about.json b/content/labels/about.json
new file mode 100644
index 0000000..2c92f22
--- /dev/null
+++ b/content/labels/about.json
@@ -0,0 +1,9 @@
+{
+  "id": "about",
+  "name": {
+    "fr": "About",
+    "en": "About"
+  },
+  "color": "#6750a4",
+  "nav_order": 1
+}
diff --git a/content/labels/change-logs.json b/content/labels/change-logs.json
new file mode 100644
index 0000000..94ce21e
--- /dev/null
+++ b/content/labels/change-logs.json
@@ -0,0 +1,9 @@
+{
+  "id": "change-logs",
+  "name": {
+    "fr": "Changelogs",
+    "en": "Changelogs"
+  },
+  "color": "#4caf50",
+  "nav_order": 3
+}
diff --git a/content/labels/legal.json b/content/labels/legal.json
new file mode 100644
index 0000000..68be127
--- /dev/null
+++ b/content/labels/legal.json
@@ -0,0 +1,9 @@
+{
+  "id": "legal",
+  "name": {
+    "fr": "Legal",
+    "en": "Legal"
+  },
+  "color": "#9e9e9e",
+  "nav_order": 2
+}
diff --git a/docs/architecture.md b/docs/architecture.md
new file mode 100644
index 0000000..6813091
--- /dev/null
+++ b/docs/architecture.md
@@ -0,0 +1,40 @@
+<!-- catalog-only-start --><!-- ---
+name: Architecture
+title: Architecture du système de contenu
+order: 10
+-----><!-- catalog-only-end -->
+
+# Architecture du système de contenu
+
+## Vue d'ensemble
+
+Le site Moddy Docs utilise un système de contenu structuré basé sur des fichiers JSON et Markdown dans `/content/`.
+
+## Dossier `/content/`
+
+```
+content/
+├── articles/           # Articles du blog / documentation
+│   └── {article-id}/
+│       ├── meta.json   # Métadonnées
+│       ├── fr.md       # Contenu français
+│       ├── en.md       # Contenu anglais
+│       └── assets/     # Ressources statiques
+├── authors/            # Profils auteurs
+│   └── {discord-id}.json
+└── labels/             # Labels/catégories
+    └── {label-id}.json
+```
+
+## Flux de données au build
+
+1. Les data files Eleventy (`_data/*.js`) lisent `/content/` au démarrage du build.
+2. Les fichiers Markdown sont transformés en HTML via `markdown-it`.
+3. Les auteurs avec `"DISCORD"` déclenchent un fetch vers `api.moddy.app`.
+4. Eleventy génère les pages via pagination depuis ces données.
+
+## Internationalisation
+
+La langue active est stockée dans `localStorage` et appliquée comme attribut `data-lang` sur `<html>`. Le CSS affiche/masque le bon contenu en conséquence.
+
+Voir `CLAUDE.md` pour les détails complets.
diff --git a/site/eleventy.config.cjs b/site/eleventy.config.cjs
index 193cbe3..83f341f 100644
--- a/site/eleventy.config.cjs
+++ b/site/eleventy.config.cjs
@@ -32,9 +32,7 @@ module.exports = function (eleventyConfig) {
     .addPassthroughCopy({ [`${jsDir}/`]: 'js/' })
     .addPassthroughCopy('site/css')
     .addPassthroughCopy('site/fonts')
-    .addPassthroughCopy('site/images')
-    // These images are generated by the docs copy step in wireit
-    .addPassthroughCopy('site/about/images');
+    .addPassthroughCopy('site/images');
 
   // add the lit-ssr plugin (disabled due to SSR compatibility issues with Material Web components)
   // The site works fine without SSR as the components are hydrated on the client side
@@ -47,6 +45,22 @@ module.exports = function (eleventyConfig) {
 
   // Add this for 11ty's --watch flag
   eleventyConfig.addWatchTarget(`./${jsDir}/**/*.js`);
+  // Watch content directory for articles, authors, labels
+  eleventyConfig.addWatchTarget('../content/**/*');
+
+  // Pass through article assets (only the assets/ subdirectories)
+  const contentDir = require('path').resolve(__dirname, '../content/articles');
+  const fsSync = require('fs');
+  if (fsSync.existsSync(contentDir)) {
+    fsSync.readdirSync(contentDir).forEach((articleId) => {
+      const assetsPath = require('path').join(contentDir, articleId, 'assets');
+      if (fsSync.existsSync(assetsPath)) {
+        eleventyConfig.addPassthroughCopy({
+          [assetsPath]: `articles/${articleId}/assets`,
+        });
+      }
+    });
+  }
 
   // install shortcodes
   inlineCss(eleventyConfig, DEV);
@@ -79,6 +93,12 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.setLibrary('md', md);
 
+  // Filter to render raw markdown using the same md instance (with all plugins)
+  eleventyConfig.addFilter('renderMarkdown', (content) => {
+    if (!content) return '';
+    return md.render(content);
+  });
+
   // Add a TOC plugin (implementation is wip for now)
   eleventyConfig.addPlugin(pluginTOC, {
     tags: ['h2', 'h3', 'h4'],
diff --git a/site/package-lock.json b/site/package-lock.json
index 877e1fa..7929520 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "material-web-catalog",
+  "name": "moddy-docs",
   "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "material-web-catalog",
+      "name": "moddy-docs",
       "version": "0.0.1",
       "license": "Apache-2.0",
       "dependencies": {
@@ -43,7 +43,7 @@
         "wireit": "^0.13.0"
       },
       "engines": {
-        "node": "20.x.x"
+        "node": ">=20.0.0"
       }
     },
     "node_modules/@11ty/dependency-tree": {
diff --git a/site/package.json b/site/package.json
index a3463e7..9edecca 100644
--- a/site/package.json
+++ b/site/package.json
@@ -34,14 +34,14 @@
         "site",
         "lib",
         "eleventy-helpers",
-        "eleventy.config.cjs"
+        "eleventy.config.cjs",
+        "../content/**/*"
       ],
       "output": [
         "_dev"
       ],
       "dependencies": [
-        "build:dev:ts",
-        "build:copy-docs"
+        "build:dev:ts"
       ]
     },
     "build:dev:ts": {
@@ -79,14 +79,14 @@
         "site",
         "build",
         "eleventy-helpers",
-        "eleventy.config.cjs"
+        "eleventy.config.cjs",
+        "../content/**/*"
       ],
       "output": [
         "_prod/"
       ],
       "dependencies": [
-        "build:prod:ts",
-        "build:copy-docs"
+        "build:prod:ts"
       ]
     },
     "build:prod:ts": {
diff --git a/site/site/_data/articles.js b/site/site/_data/articles.js
new file mode 100644
index 0000000..f5b0fea
--- /dev/null
+++ b/site/site/_data/articles.js
@@ -0,0 +1,42 @@
+const fs = require('fs');
+const path = require('path');
+
+const CONTENT_DIR = path.resolve(__dirname, '../../../content/articles');
+
+module.exports = async function () {
+  if (!fs.existsSync(CONTENT_DIR)) return [];
+
+  const articles = [];
+
+  for (const articleId of fs.readdirSync(CONTENT_DIR)) {
+    const articleDir = path.join(CONTENT_DIR, articleId);
+    if (!fs.statSync(articleDir).isDirectory()) continue;
+
+    const metaPath = path.join(articleDir, 'meta.json');
+    if (!fs.existsSync(metaPath)) continue;
+
+    const meta = JSON.parse(fs.readFileSync(metaPath, 'utf8'));
+    const rawContent = {};
+
+    for (const lang of ['fr', 'en']) {
+      const langPath = path.join(articleDir, `${lang}.md`);
+      if (fs.existsSync(langPath)) {
+        rawContent[lang] = fs.readFileSync(langPath, 'utf8');
+      }
+    }
+
+    const assetsDir = path.join(articleDir, 'assets');
+    const hasAssets = fs.existsSync(assetsDir);
+
+    articles.push({
+      ...meta,
+      rawContent,
+      hasAssets,
+      assetsPath: hasAssets ? `/articles/${meta.id}/assets/` : null,
+    });
+  }
+
+  articles.sort((a, b) => new Date(b.date) - new Date(a.date));
+
+  return articles;
+};
diff --git a/site/site/_data/authors.js b/site/site/_data/authors.js
new file mode 100644
index 0000000..1beb521
--- /dev/null
+++ b/site/site/_data/authors.js
@@ -0,0 +1,68 @@
+const fs = require('fs');
+const path = require('path');
+
+const CONTENT_DIR = path.resolve(__dirname, '../../../content/authors');
+const API_BASE = 'https://api.moddy.app/users';
+const DISCORD_PLACEHOLDER = 'DISCORD';
+
+async function fetchDiscordUser(userId) {
+  try {
+    const res = await fetch(`${API_BASE}/${userId}`);
+    if (!res.ok) return null;
+    return await res.json();
+  } catch {
+    return null;
+  }
+}
+
+function needsDiscordFetch(author) {
+  return (
+    author.username === DISCORD_PLACEHOLDER ||
+    author.avatar === DISCORD_PLACEHOLDER ||
+    author.avatar_decoration === DISCORD_PLACEHOLDER
+  );
+}
+
+module.exports = async function () {
+  if (!fs.existsSync(CONTENT_DIR)) return [];
+
+  const authors = [];
+
+  for (const file of fs.readdirSync(CONTENT_DIR)) {
+    if (!file.endsWith('.json')) continue;
+
+    const filePath = path.join(CONTENT_DIR, file);
+    const author = JSON.parse(fs.readFileSync(filePath, 'utf8'));
+
+    if (needsDiscordFetch(author)) {
+      const discordData = await fetchDiscordUser(author.id);
+      if (discordData) {
+        if (author.username === DISCORD_PLACEHOLDER) {
+          author.username = discordData.global_name || discordData.username;
+        }
+        if (author.avatar === DISCORD_PLACEHOLDER) {
+          author.avatar = discordData.avatar_url || null;
+        }
+        if (author.avatar_decoration === DISCORD_PLACEHOLDER) {
+          author.avatar_decoration =
+            discordData.avatar_decoration_data?.asset_url || null;
+        }
+        // Store extra Discord data
+        author._discord = {
+          badges: discordData.badges || [],
+          accent_color: discordData.accent_color,
+        };
+      } else {
+        // Fallback: clear DISCORD placeholders
+        if (author.username === DISCORD_PLACEHOLDER) author.username = author.id;
+        if (author.avatar === DISCORD_PLACEHOLDER) author.avatar = null;
+        if (author.avatar_decoration === DISCORD_PLACEHOLDER)
+          author.avatar_decoration = null;
+      }
+    }
+
+    authors.push(author);
+  }
+
+  return authors;
+};
diff --git a/site/site/_data/i18n.js b/site/site/_data/i18n.js
new file mode 100644
index 0000000..be53982
--- /dev/null
+++ b/site/site/_data/i18n.js
@@ -0,0 +1,37 @@
+module.exports = {
+  supportedLangs: ['fr', 'en'],
+  defaultLang: 'fr',
+
+  ui: {
+    fr: {
+      siteTitle: 'Moddy Docs',
+      home: 'Accueil',
+      articles: 'Articles',
+      collections: 'Collections',
+      authors: 'Auteurs',
+      searchPlaceholder: 'Rechercher…',
+      langSwitchLabel: 'Langue',
+      readMore: 'Lire la suite',
+      by: 'Par',
+      publishedOn: 'Publié le',
+      labels: 'Labels',
+      backToArticles: '← Retour aux articles',
+      noContent: 'Contenu non disponible dans cette langue.',
+    },
+    en: {
+      siteTitle: 'Moddy Docs',
+      home: 'Home',
+      articles: 'Articles',
+      collections: 'Collections',
+      authors: 'Authors',
+      searchPlaceholder: 'Search…',
+      langSwitchLabel: 'Language',
+      readMore: 'Read more',
+      by: 'By',
+      publishedOn: 'Published on',
+      labels: 'Labels',
+      backToArticles: '← Back to articles',
+      noContent: 'Content not available in this language.',
+    },
+  },
+};
diff --git a/site/site/_data/labels.js b/site/site/_data/labels.js
new file mode 100644
index 0000000..bb87679
--- /dev/null
+++ b/site/site/_data/labels.js
@@ -0,0 +1,13 @@
+const fs = require('fs');
+const path = require('path');
+
+const CONTENT_DIR = path.resolve(__dirname, '../../../content/labels');
+
+module.exports = function () {
+  if (!fs.existsSync(CONTENT_DIR)) return [];
+
+  return fs
+    .readdirSync(CONTENT_DIR)
+    .filter((f) => f.endsWith('.json'))
+    .map((f) => JSON.parse(fs.readFileSync(path.join(CONTENT_DIR, f), 'utf8')));
+};
diff --git a/site/site/_includes/default.html b/site/site/_includes/default.html
index 276595b..ef45967 100644
--- a/site/site/_includes/default.html
+++ b/site/site/_includes/default.html
@@ -16,7 +16,7 @@
     <title>Moddy Docs{% if pageTitle %} - {{ pageTitle }}{% endif %}</title>
     <!-- Set the color of the url bar on mobile to match theme -->
     <meta name="theme-color" content="#251f16" />
-    <link href="/images/favicon.svg" rel="icon" sizes="any" type="image/svg+xml">
+    <link id="favicon" href="/images/favicon.svg" rel="icon" sizes="any" type="image/svg+xml">
     <!-- Inlines the global css in site/css/global.css -->
     {% inlinecss "global.css" %}
     <!-- MUST be loaded before any lit bundle. allows hydration of SSRd components -->
@@ -25,6 +25,19 @@
     <script type="module" src="/js/ssr-utils/lit-island.js"></script>
     <!-- Inlines the material theming logic since we want to prevent FOUC -->
     {% inlinejs "inline/apply-saved-theme.js" %}
+    <script>
+    (function(){
+      function updateFavicon(){
+        var c=getComputedStyle(document.documentElement).getPropertyValue('--md-sys-color-primary').trim();
+        if(!c)return;
+        var svg='<svg xmlns="http://www.w3.org/2000/svg" width="190" height="190" viewBox="0 0 190 190"><path d="M142.39 0H94.9335L47.4565 47.4564H0V94.9129H94.9335L142.39 47.4564V0Z" fill="'+c+'"/><path d="M94.9335 94.9129L47.4568 142.39V189.846H94.9339L142.39 142.39H189.847V94.9128L94.9335 94.9129Z" fill="'+c+'"/></svg>';
+        var el=document.getElementById('favicon');
+        if(el)el.href='data:image/svg+xml,'+encodeURIComponent(svg);
+      }
+      updateFavicon();
+      window.addEventListener('theme-changed',updateFavicon);
+    })();
+    </script>
     <script type="module" src="/js/pages/global.js"></script>
     <noscript>
       <link rel="stylesheet" href="/css/no-js.css" />
@@ -53,7 +66,6 @@
   <body dsd-pending>
     <!-- Inlines the declarative shadow dom polyfill for FF since it's performance sensitive -->
     {% inlinejs "ssr-utils/dsd-polyfill.js" %}
-    <!-- Changed from on:idle to on:visible for instant navigation load and prevent FOUC -->
     <lit-island on:visible import="/js/hydration-entrypoints/navigation.js">
       <nav-drawer page-title="{{name}}" {% if hasToc %}has-toc{% endif %}>
         <top-app-bar slot="top-app-bar" baseURI="/">
@@ -65,34 +77,8 @@
         {% endif %}
 
         <main id="main-content" slot="app-content" tabindex="0">
-          <!-- this is the content of the page -->
-          <!-- unrelated change to components -->
           {% block content %}{{ content | mdMarkdown | safe }}{% endblock %}
         </main>
-        <md-list
-            aria-label="List of pages"
-            role="menubar"
-            class="nav">
-          <!-- Dynamically generate sections from all collections -->
-          {% for tag, items in collections %}
-            {% if tag != 'all' and items.length > 0 %}
-              {% set sectionName = tag | capitalize %}
-              <md-item><div slot="headline">{{ sectionName }}</div></md-item>
-              {% for file in items|filtersort('data.order') %}
-                <md-list-item
-                  href="{{ file.url }}"
-                  role="menuitem"
-                  {% if file.url == page.url %}selected{% endif %}
-                  type="link"
-                  tabindex="{% if file.url == page.url %}0{% else %}-1{% endif %}"
-                >{{ file.data.name }}</md-list-item>
-              {% endfor %}
-              {% if not loop.last %}
-                <md-divider role="separator"></md-divider>
-              {% endif %}
-            {% endif %}
-          {% endfor %}
-        </md-list>
       </nav-drawer>
     </lit-island>
   </body>
diff --git a/site/site/about/quick-start.md b/site/site/about/quick-start.md
deleted file mode 100644
index d68de4e..0000000
--- a/site/site/about/quick-start.md
+++ /dev/null
@@ -1,149 +0,0 @@
-<!-- catalog-only-start --><!-- ---
-name: Quick Start
-title: Quick Start
-order: 2
------><!-- catalog-only-end -->
-
-# Quick start
-
-<!--*
-# Document freshness: For more information, see go/fresh-source.
-freshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }
-tag: 'docType:gettingStarted'
-*-->
-
-<!-- go/mwc-quick-start -->
-
-<!-- [TOC] -->
-
-## CDN
-
-For fast prototyping, we recommend using [esm.run](https://esm.run/)<!-- {.external} -->,
-a CDN that allows you to use `@material/web` without installing and building
-from NPM.
-
-<!-- LINT.IfChange -->
-
-```html
-<head>
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
-  <script type="importmap">
-    {
-      "imports": {
-        "@material/web/": "https://esm.run/@material/web/"
-      }
-    }
-  </script>
-  <script type="module">
-    import '@material/web/all.js';
-    import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
-
-    document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
-  </script>
-</head>
-<body>
-  <h1 class="md-typescale-display-medium">Hello Material!</h1>
-  <form>
-    <p class="md-typescale-body-medium">Check out these controls in a form!</p>
-    <md-checkbox></md-checkbox>
-    <div>
-      <md-radio name="group"></md-radio>
-      <md-radio name="group"></md-radio>
-      <md-radio name="group"></md-radio>
-    </div>
-    <md-outlined-text-field label="Favorite color" value="Purple"></md-outlined-text-field>
-    <md-outlined-button type="reset">Reset</md-outlined-button>
-  </form>
-  <style>
-    form {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 16px;
-    }
-  </style>
-</body>
-```
-
-<!-- LINT.ThenChange(../../README.md) -->
-
-For production, follow the [install](#install) and [build](#building) steps
-below.
-
-## Install
-
-<!--#include file="../googlers/quick-start-install.md" -->
-
-Install Material web components using
-[npm and node](https://nodejs.org)<!-- {.external} -->.
-
-```shell
-npm install @material/web
-```
-
-## Import
-
-Import element definitions from
-`@material/web/<component>/<component-variant>.js`.
-
-```js
-// index.js
-import '@material/web/button/filled-button.js';
-import '@material/web/button/outlined-button.js';
-import '@material/web/checkbox/checkbox.js';
-```
-
-<!--#include file="../googlers/quick-start-import.md" -->
-
-## Usage
-
-Use the `<component-name>` tag in HTML markup. Refer to the
-[component docs](components/) for more guidance on using each component.
-
-[Playground](https://lit.dev/playground/#gist=37d28012c5ec6de30809bdf4a6e26cb6)<!-- {.external} -->
-
-```html
-<script type="module" src="./index.js"></script>
-
-<label>
-  Material 3
-  <md-checkbox checked></md-checkbox>
-</label>
-
-<md-outlined-button>Back</md-outlined-button>
-<md-filled-button>Next</md-filled-button>
-```
-
-## Building
-
-<!--#include file="../googlers/quick-start-build.md" -->
-
-Material web components uses bare module specifiers that must be resolved with
-tools until [import maps](https://github.com/WICG/import-maps)<!-- {.external} --> are
-adopted.
-
-We recommend following
-[lit.dev's modern build for production](https://lit.dev/docs/tools/production/#modern-only-build)<!-- {.external} -->
-for a more in-depth build guide.
-
-### Rollup quick start
-
-For a quick start, we recommend using [Rollup](https://rollupjs.org/)<!-- {.external} -->
-to resolve bare module specifiers into a bundled file.
-
-Install Rollup and a plugin to resolve bare module specifiers.
-
-```shell
-npm install rollup @rollup/plugin-node-resolve
-```
-
-Create a bundle from an entrypoint `index.js` file and use it in a `<script>`
-`"src"` attribute.
-
-```shell
-npx rollup -p @rollup/plugin-node-resolve index.js -o bundle.js
-```
-
-```html
-<script src="./bundle.js"></script>
-```
diff --git a/site/site/articles/article.njk b/site/site/articles/article.njk
new file mode 100644
index 0000000..168bcc6
--- /dev/null
+++ b/site/site/articles/article.njk
@@ -0,0 +1,116 @@
+---
+pagination:
+  data: articles
+  size: 1
+  alias: article
+permalink: "/articles/{{ article.id }}/"
+hasToc: true
+---
+{% extends 'default.html' %}
+
+{% set pageTitle = article.title %}
+{% set name = article.title %}
+
+{% block head %}
+  <link rel="stylesheet" href="/css/article.css" />
+  <link rel="stylesheet" href="/css/md-layout.css" />
+  <link rel="stylesheet" href="/css/syntax-highlight.css" />
+  <style>
+    /* Tell nav-drawer's content pane to use the expanded top radius on load.
+       r_ext = r_banner + banner_margin = 52 + 40 = 92px */
+    nav-drawer { --expanded-top-radius: 92px; }
+  </style>
+  {% if article.seo_level >= 2 %}
+    <meta name="robots" content="noindex{% if article.seo_level == 3 %}, nofollow{% endif %}" />
+  {% endif %}
+  {% if article.theme_color %}
+    <meta name="page-theme-color" content="{{ article.theme_color }}" />
+  {% endif %}
+{% endblock %}
+
+{%- set renderedContent = article.rawContent.en | renderMarkdown -%}
+
+{% block toc %}
+{{ renderedContent | toc | filterToc | safe }}
+{% endblock %}
+
+{% block content %}
+<div class="article-page">
+  {# ── Banner ── #}
+  <div class="article-banner"
+    {% if article.banner %}
+      style="--banner-focus-x: {{ article.banner_focus.x if article.banner_focus else 50 }}%; --banner-focus-y: {{ article.banner_focus.y if article.banner_focus else 50 }}%;"
+    {% elif article.banner_gradient %}
+      style="background: {{ article.banner_gradient }};"
+    {% endif %}
+  >
+    {% if article.banner %}
+      <img src="{{ article.banner }}" alt="{{ article.title }}" />
+    {% endif %}
+  </div>
+
+  {# ── Title ── #}
+  <h1 class="article-title">{{ article.title }}</h1>
+
+  {# ── Date | Chapeau ── #}
+  <div class="article-dateline">
+    <time class="article-date-text" datetime="{{ article.date }}">{{ article.date }}</time>
+    {% if article.chapeau and (article.chapeau.fr or article.chapeau.en) %}
+      <span class="article-dateline-sep">|</span>
+      <span data-lang-content="fr">{{ article.chapeau.fr }}</span>
+      <span data-lang-content="en">{{ article.chapeau.en }}</span>
+    {% endif %}
+  </div>
+
+  {# ── Author ── #}
+  {% if article.authors | length %}
+    {% for authorId in article.authors %}
+      {% for author in authors %}
+        {% if author.id == authorId %}
+          <div class="article-author-block">
+            <a href="/authors/{{ author.id }}/" class="article-author-link">
+              <div class="article-author-avatar-wrapper">
+                {% if author.avatar %}
+                  <img class="article-author-avatar" src="{{ author.avatar }}" alt="{{ author.username }}" />
+                {% else %}
+                  <div class="article-author-avatar article-author-avatar--placeholder" style="background: {{ author.banner_color or '#6750a4' }};">
+                    {{ author.username | first | upper }}
+                  </div>
+                {% endif %}
+                {% if author.avatar_decoration %}
+                  <img src="{{ author.avatar_decoration }}" alt="" role="presentation" class="article-author-decoration" />
+                {% endif %}
+              </div>
+              <div class="article-author-info">
+                <span class="article-author-name">{{ author.username }}</span>
+                {% if author.post %}
+                  <span class="article-author-role">{{ author.post }}</span>
+                {% endif %}
+              </div>
+            </a>
+          </div>
+        {% endif %}
+      {% endfor %}
+    {% endfor %}
+  {% endif %}
+
+  {# ── Article body ── #}
+  <div class="article-body">
+    {{ renderedContent | mdMarkdown | safe }}
+  </div>
+
+  {# Date formatting script lives inside .article-page so it keeps the UA
+     `script { display: none }` (md-layout's `main > *` would force it visible). #}
+  <script>
+  (function() {
+    var el = document.querySelector('.article-date-text[datetime]');
+    if (!el) return;
+    var lang = document.documentElement.getAttribute('data-lang') || 'fr';
+    var d = new Date(el.getAttribute('datetime') + 'T00:00:00');
+    el.textContent = d.toLocaleDateString(lang === 'en' ? 'en-GB' : 'fr-FR', {
+      day: 'numeric', month: 'long', year: 'numeric'
+    });
+  })();
+  </script>
+</div>
+{% endblock %}
diff --git a/site/site/authors/author.njk b/site/site/authors/author.njk
new file mode 100644
index 0000000..d40f13e
--- /dev/null
+++ b/site/site/authors/author.njk
@@ -0,0 +1,97 @@
+---
+pagination:
+  data: authors
+  size: 1
+  alias: author
+permalink: "/authors/{{ author.id }}/"
+---
+{% extends 'default.html' %}
+
+{% set pageTitle = author.username %}
+
+{% block head %}
+  <link rel="stylesheet" href="/css/md-layout.css" />
+  <link rel="stylesheet" href="/css/article.css" />
+{% endblock %}
+
+{% block content %}
+<div class="author-page">
+
+  <header class="author-header" style="{% if author.banner_color %}--author-banner-color: {{ author.banner_color }};{% endif %}">
+    <div class="author-banner-bg"></div>
+    <div class="author-profile">
+      {% if author.avatar %}
+        <div class="author-avatar-wrapper">
+          <img src="{{ author.avatar }}" alt="{{ author.username }}" class="author-avatar" />
+          {% if author.avatar_decoration %}
+            <img src="{{ author.avatar_decoration }}" alt="" role="presentation" class="author-avatar-decoration" />
+          {% endif %}
+        </div>
+      {% else %}
+        <div class="author-avatar author-avatar--placeholder">
+          {{ author.username | truncate(1, true, '') }}
+        </div>
+      {% endif %}
+      <div class="author-info">
+        <h1 class="author-name">{{ author.username }}</h1>
+        {% if author.post %}
+          <p class="author-post">{{ author.post }}</p>
+        {% endif %}
+      </div>
+    </div>
+
+    {% if author.bio %}
+      <p class="author-bio">{{ author.bio }}</p>
+    {% endif %}
+
+    {% if author.links and author.links.length > 0 %}
+      <div class="author-links">
+        {% for link in author.links %}
+          <a href="{{ link.url }}" class="author-link" target="_blank" rel="noopener">
+            {% if link.icon %}
+              <span class="author-link-icon">{{ link.icon | safe }}</span>
+            {% endif %}
+            <span>{{ link.name }}</span>
+          </a>
+        {% endfor %}
+      </div>
+    {% endif %}
+  </header>
+
+  <section class="author-articles">
+    <h2>
+      <span data-lang-content="fr">Articles</span>
+      <span data-lang-content="en">Articles</span>
+    </h2>
+    <div class="article-list">
+      {% set hasArticles = false %}
+      {% for article in articles %}
+        {% if author.id in article.authors %}
+          {% set hasArticles = true %}
+          {% if article.seo_level != 3 %}
+            <a href="/articles/{{ article.id }}/" class="article-card">
+              <div class="article-card-body">
+                <h3 class="article-card-title">{{ article.title }}</h3>
+                {% if article.chapeau %}
+                  <p class="article-card-chapeau">
+                    <span data-lang-content="fr">{% if article.chapeau.fr %}{{ article.chapeau.fr }}{% endif %}</span>
+                    <span data-lang-content="en">{% if article.chapeau.en %}{{ article.chapeau.en }}{% endif %}</span>
+                  </p>
+                {% endif %}
+                <time datetime="{{ article.date }}">{{ article.date }}</time>
+              </div>
+            </a>
+          {% endif %}
+        {% endif %}
+      {% endfor %}
+      {% if not hasArticles %}
+        <p class="empty-state">
+          <span data-lang-content="fr">Aucun article publié.</span>
+          <span data-lang-content="en">No articles published.</span>
+        </p>
+      {% endif %}
+    </div>
+  </section>
+
+</div>
+{% endblock %}
diff --git a/site/site/collections/collection.njk b/site/site/collections/collection.njk
new file mode 100644
index 0000000..671f99a
--- /dev/null
+++ b/site/site/collections/collection.njk
@@ -0,0 +1,67 @@
+---
+pagination:
+  data: labels
+  size: 1
+  alias: label
+permalink: "/collections/{{ label.id }}/"
+---
+{% extends 'default.html' %}
+
+{% set pageTitle = label.name.fr %}
+
+{% block head %}
+  <link rel="stylesheet" href="/css/md-layout.css" />
+  <link rel="stylesheet" href="/css/article.css" />
+{% endblock %}
+
+{% block content %}
+<div class="collection-page">
+
+  <header class="collection-header">
+    <div class="collection-badge" style="--label-color: {{ label.color }};">
+      {{ label.name.fr }}
+    </div>
+    <h1 class="collection-title">
+      <span data-lang-content="fr">{{ label.name.fr }}</span>
+      <span data-lang-content="en">{{ label.name.en }}</span>
+    </h1>
+  </header>
+
+  <div class="article-list">
+    {% set hasArticles = false %}
+    {% for article in articles %}
+      {% if label.id in article.labels %}
+        {% set hasArticles = true %}
+        {% if article.seo_level != 3 %}
+          <a href="/articles/{{ article.id }}/" class="article-card">
+            {% if article.banner %}
+              <div class="article-card-banner">
+                <img src="{{ article.banner }}" alt="" role="presentation" />
+              </div>
+            {% endif %}
+            <div class="article-card-body">
+              <h2 class="article-card-title">{{ article.title }}</h2>
+              {% if article.chapeau %}
+                <p class="article-card-chapeau">
+                  <span data-lang-content="fr">{% if article.chapeau.fr %}{{ article.chapeau.fr }}{% endif %}</span>
+                  <span data-lang-content="en">{% if article.chapeau.en %}{{ article.chapeau.en }}{% endif %}</span>
+                </p>
+              {% endif %}
+              <div class="article-card-meta">
+                <time datetime="{{ article.date }}">{{ article.date }}</time>
+              </div>
+            </div>
+          </a>
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+    {% if not hasArticles %}
+      <p class="empty-state">
+        <span data-lang-content="fr">Aucun article dans cette collection.</span>
+        <span data-lang-content="en">No articles in this collection.</span>
+      </p>
+    {% endif %}
+  </div>
+
+</div>
+{% endblock %}
diff --git a/site/site/css/article.css b/site/site/css/article.css
new file mode 100644
index 0000000..aff5a08
--- /dev/null
+++ b/site/site/css/article.css
@@ -0,0 +1,646 @@
+/* ─── Language switching ─────────────────────────────────────────────────── */
+
+[data-lang-content] {
+  display: none;
+}
+
+:root[data-lang="fr"] [data-lang-content="fr"],
+:root:not([data-lang]) [data-lang-content="fr"] {
+  display: revert;
+}
+
+:root[data-lang="en"] [data-lang-content="en"] {
+  display: revert;
+}
+
+/* Inline spans use inline display */
+span[data-lang-content] {
+  display: none;
+}
+
+:root[data-lang="fr"] span[data-lang-content="fr"],
+:root:not([data-lang]) span[data-lang-content="fr"] {
+  display: inline;
+}
+
+:root[data-lang="en"] span[data-lang-content="en"] {
+  display: inline;
+}
+
+/* ─── Language switcher ──────────────────────────────────────────────────── */
+
+.lang-switcher {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-inline-start: auto;
+  padding: 4px 8px;
+}
+
+.lang-switcher__btn {
+  background: none;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 2px 6px;
+  color: var(--md-sys-color-on-surface-variant, #49454f);
+  transition: background 0.15s;
+}
+
+.lang-switcher__btn:hover {
+  background: var(--md-sys-color-surface-variant, #e7e0ec);
+}
+
+.lang-switcher__btn[aria-pressed="true"] {
+  background: var(--md-sys-color-primary-container, #eaddff);
+  color: var(--md-sys-color-on-primary-container, #21005d);
+}
+
+/* ─── Article page ────────────────────────────────────────────────────────── */
+
+.article-page {
+  width: 100%;
+  /* override md-layout.css `main > * { max-width: min(100%, 980px) }` so the
+     banner can span the full pane content width */
+  max-width: none;
+  /* md-layout.css also sets `main > * { overflow-x: auto }`, which clips the
+     banner's negative-margin overflow into a square corner. Keep it visible. */
+  overflow: visible;
+  margin: 0;
+  padding: 0;
+}
+
+/* ── Banner ──
+   The banner is centered inside the article container (the rounded pane) with
+   an equal margin on the top, left and right. That margin is the distance
+   between the pane edge and the banner. Per the requested formula:
+       r_banner = r_container - margin
+   The pane has 28px of padding around its content and a 28px corner radius, so
+   to leave an equal `--_banner-margin` gap on all three sides the banner pulls
+   itself outward into that padding with negative margins. */
+.article-banner {
+  --_container-radius: var(--catalog-shape-xl, 28px);
+  --_pad: var(--catalog-spacing-xl, 28px);
+  /* the pane reserves 8px of the right padding for the scrollbar, so the right
+     padding is 8px smaller than the left — compensate so the banner keeps an
+     equal gap on both sides */
+  --_pad-right: calc(var(--catalog-spacing-xl, 28px) - 8px);
+  --_banner-margin: 40px;
+  aspect-ratio: 1300 / 445;
+  /* very rounded corners, decoupled from the margin */
+  border-radius: 52px;
+  overflow: hidden;
+  margin-top: calc(-1 * (var(--_pad) - var(--_banner-margin)));
+  margin-left: calc(-1 * (var(--_pad) - var(--_banner-margin)));
+  margin-right: calc(-1 * (var(--_pad-right) - var(--_banner-margin)));
+  margin-bottom: 20px;
+}
+
+.article-banner img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  object-position: var(--banner-focus-x, 50%) var(--banner-focus-y, 50%);
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .article-banner {
+    aspect-ratio: 16 / 9;
+  }
+}
+
+/* Mobile: portrait crop with smaller margin and softer corners.
+   Same concentric-radius system as desktop, just scaled down. */
+@media (max-width: 768px) {
+  nav-drawer {
+    --expanded-top-radius: 52px;
+  }
+
+  .article-banner {
+    --_banner-margin: 16px;
+    --_pad-right: var(--_pad);
+    aspect-ratio: 455 / 520;
+    border-radius: 36px;
+    margin-top: calc(-1 * (var(--_pad) - var(--_banner-margin)));
+    margin-left: calc(-1 * (var(--_pad) - var(--_banner-margin)));
+    margin-right: calc(-1 * (var(--_pad) - var(--_banner-margin)));
+  }
+}
+
+/* ── Title ── */
+
+.article-title {
+  max-width: 1200px;
+  margin: 0 auto 18px;
+  padding: 0 24px;
+  font-size: 2.9rem;
+  font-weight: 700;
+  line-height: 1.15;
+  color: var(--md-sys-color-on-surface, #1c1b1f);
+}
+
+/* ── Dateline (date | chapeau) ── */
+
+.article-dateline {
+  max-width: 1200px;
+  margin: 0 auto 20px;
+  padding: 0 24px;
+  font-size: 1rem;
+  line-height: 1.4;
+  color: var(--md-sys-color-on-surface-variant, #49454f);
+}
+
+.article-date-text {
+  font-weight: 700;
+}
+
+/* the page summary (chapeau) reads as an italic standfirst */
+.article-dateline [data-lang-content] {
+  font-style: italic;
+}
+
+.article-dateline-sep {
+  margin: 0 8px;
+  opacity: 0.5;
+}
+
+/* ── Author block ── */
+
+.article-author-block {
+  max-width: 1200px;
+  margin: 0 auto 24px;
+  padding: 0 24px;
+}
+
+/* light separator under the author, aligned with the text content */
+.article-author-block::after {
+  content: "";
+  display: block;
+  margin-top: 16px;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
+}
+
+.article-author-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  text-decoration: none;
+  color: inherit;
+}
+
+/* the global a:hover underline would underline the whole link (name + role);
+   keep the link itself undecorated and underline only the name */
+.article-author-link:hover,
+.article-author-link:focus-visible {
+  text-decoration: none;
+}
+
+.article-author-role {
+  text-decoration: none;
+}
+
+.article-author-link:hover .article-author-name {
+  text-decoration: underline;
+  color: var(--md-sys-color-primary, #6750a4);
+}
+
+.article-author-avatar-wrapper {
+  position: relative;
+  width: 48px;
+  min-width: 48px;
+  height: 48px;
+  min-height: 48px;
+  flex-shrink: 0;
+  overflow: visible;
+}
+
+.article-author-avatar {
+  display: block;
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+  min-height: 48px;
+  aspect-ratio: 1 / 1;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.article-author-decoration {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 120%;
+  height: 120%;
+  pointer-events: none;
+  object-fit: contain;
+  /* md-layout.css rounds every img (border-radius: 22px); that rounded
+     corner was clipping the straw. Keep the decoration unclipped. */
+  border-radius: 0;
+  min-height: 0;
+  overflow: visible;
+}
+
+.article-author-avatar--placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.1rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.article-author-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.article-author-name {
+  font-weight: 700;
+  font-size: 0.95rem;
+  line-height: 1.3;
+  color: var(--md-sys-color-on-surface, #1c1b1f);
+  transition: color 0.15s;
+}
+
+.article-author-role {
+  font-size: 0.85rem;
+  line-height: 1.3;
+  color: var(--md-sys-color-on-surface-variant, #49454f);
+}
+
+/* ── Article body ── */
+
+/* `display: block` is required: md-layout.css has
+   `div:has(> table) { display: flex }` to center table-wrapper divs, and since
+   .article-body is a div that directly contains a table, it wrongly matched
+   and laid all content out horizontally. */
+.article-body {
+  display: block;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+  font-size: 1.075rem;
+  line-height: 1.7;
+}
+
+.article-body > :first-child {
+  margin-block-start: 0;
+}
+
+.article-body h1:first-of-type {
+  display: none;
+}
+
+/* Keep wide elements (tables, code, images) from overflowing the body. */
+.article-body > * {
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow-x: auto;
+}
+
+.article-body img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* ── Callouts / blockquotes ──
+   md-layout.css styles these with `main > blockquote` selectors, which only
+   match the doc pages where the markdown elements are direct children of
+   <main>. Here the blockquotes are nested inside `.article-body`, so those
+   rules never match. Mirror the exact same rules, scoped to `.article-body`. */
+
+.article-body hr {
+  border: none;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
+  margin-block: var(--catalog-spacing-l, 16px);
+}
+.article-body blockquote {
+  /* left-aligned with the body text, full width */
+  margin-block: var(--catalog-spacing-l, 16px);
+  margin-inline: 0;
+}
+
+.article-body > blockquote {
+  padding: var(--catalog-spacing-l, 16px);
+  border-radius: var(--catalog-shape-l, 16px);
+  background-color: var(--md-sys-color-secondary-container);
+  display: flex;
+  gap: var(--catalog-spacing-s, 8px);
+}
+
+.article-body > blockquote .content {
+  flex-grow: 1;
+}
+
+.article-body blockquote .content > *:first-child,
+.article-body blockquote > *:first-child {
+  margin-block-start: 0;
+}
+
+.article-body blockquote .content > *:last-child,
+.article-body blockquote > *:last-child {
+  margin-block-end: 0;
+}
+
+.article-body blockquote,
+.article-body blockquote a {
+  color: var(--md-sys-color-on-secondary-container);
+}
+
+.article-body blockquote a {
+  text-decoration: underline;
+  font-weight: 700;
+}
+
+.article-body blockquote.important {
+  background-color: var(--md-sys-color-primary-container);
+}
+
+.article-body blockquote.important,
+.article-body blockquote.important a {
+  color: var(--md-sys-color-on-primary-container);
+}
+
+.article-body blockquote.warning {
+  background-color: var(--md-sys-color-error-container);
+}
+
+.article-body blockquote.warning,
+.article-body blockquote.warning a {
+  color: var(--md-sys-color-on-error-container);
+}
+
+/* ── Responsive tweaks ── */
+
+@media (max-width: 768px) {
+  .article-title {
+    font-size: 1.9rem;
+    padding: 0 16px;
+  }
+
+  .article-dateline {
+    padding: 0 16px;
+    font-size: 0.9rem;
+  }
+
+  .article-author-block {
+    padding: 0 16px;
+  }
+
+  .article-body {
+    padding: 0 16px;
+  }
+}
+
+/* ─── Article labels (used in various contexts) ──────────────────────────── */
+
+.article-labels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.article-label {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-decoration: none;
+  background: color-mix(in srgb, var(--label-color, #4caf50) 15%, transparent);
+  color: var(--label-color, #4caf50);
+  border: 1px solid color-mix(in srgb, var(--label-color, #4caf50) 40%, transparent);
+  transition: background 0.15s;
+}
+
+.article-label:hover {
+  background: color-mix(in srgb, var(--label-color, #4caf50) 25%, transparent);
+}
+
+/* ─── Collection page ────────────────────────────────────────────────────── */
+
+.collection-page,
+.author-page {
+  max-width: 800px;
+  padding: 24px;
+  /* md-layout's `main > * { overflow-x: auto }` would clip the avatar
+     decoration that overflows upward (the straw). Keep it visible. */
+  overflow: visible;
+}
+
+.collection-header {
+  margin-bottom: 32px;
+}
+
+.collection-badge {
+  display: inline-block;
+  padding: 4px 14px;
+  border-radius: 999px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  background: color-mix(in srgb, var(--label-color, #4caf50) 15%, transparent);
+  color: var(--label-color, #4caf50);
+  border: 1px solid color-mix(in srgb, var(--label-color, #4caf50) 40%, transparent);
+  margin-bottom: 12px;
+}
+
+.collection-title {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 0;
+}
+
+/* ─── Article list / cards ───────────────────────────────────────────────── */
+
+.article-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.article-card {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
+  border-radius: 12px;
+  overflow: hidden;
+  transition: box-shadow 0.2s, border-color 0.2s;
+}
+
+.article-card:hover {
+  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
+  border-color: var(--md-sys-color-primary, #6750a4);
+}
+
+.article-card-banner img {
+  width: 100%;
+  height: 160px;
+  object-fit: cover;
+  display: block;
+}
+
+.article-card-body {
+  padding: 16px 20px;
+}
+
+.article-card-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 0 0 8px;
+}
+
+.article-card-chapeau {
+  font-size: 0.9rem;
+  color: var(--md-sys-color-on-surface-variant, #49454f);
+  margin: 0 0 8px;
+}
+
+.article-card-meta {
+  font-size: 0.8rem;
+  color: var(--md-sys-color-on-surface-variant, #49454f);
+}
+
+.empty-state {
+  color: var(--md-sys-color-on-surface-variant, #49454f);
+  font-style: italic;
+  padding: 24px 0;
+}
+
+/* ─── Author page ────────────────────────────────────────────────────────── */
+
+.author-header {
+  position: relative;
+  margin-bottom: 32px;
+}
+
+.author-banner-bg {
+  height: 120px;
+  border-radius: 12px;
+  background: var(--author-banner-color, var(--md-sys-color-primary-container, #eaddff));
+  margin-bottom: -40px;
+}
+
+.author-profile {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  padding: 0 16px;
+  margin-bottom: 12px;
+}
+
+.author-avatar-wrapper {
+  position: relative;
+  width: 100px;
+  min-width: 100px;
+  height: 100px;
+  min-height: 100px;
+  flex-shrink: 0;
+  overflow: visible;
+}
+
+.author-avatar {
+  display: block;
+  width: 100px;
+  height: 100px;
+  min-width: 100px;
+  min-height: 100px;
+  aspect-ratio: 1 / 1;
+  border-radius: 50%;
+  object-fit: cover;
+  box-shadow: 0 0 0 4px var(--md-sys-color-surface, #fffbfe);
+}
+
+.author-avatar--placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 100px;
+  min-width: 100px;
+  min-height: 100px;
+  aspect-ratio: 1 / 1;
+  border-radius: 50%;
+  background: var(--md-sys-color-primary-container, #eaddff);
+  color: var(--md-sys-color-on-primary-container, #21005d);
+  font-size: 2rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  box-shadow: 0 0 0 4px var(--md-sys-color-surface, #fffbfe);
+}
+
+.author-avatar-decoration {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 120%;
+  height: 120%;
+  pointer-events: none;
+  object-fit: contain;
+  /* md-layout.css rounds every img (border-radius: 22px); keep the
+     decoration unclipped so the straw isn't cut. */
+  border-radius: 0;
+  min-height: 0;
+  overflow: visible;
+}
+
+.author-info {
+  padding-bottom: 4px;
+}
+
+.author-name {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 0 0 4px;
+}
+
+.author-post {
+  font-size: 0.875rem;
+  color: var(--md-sys-color-on-surface-variant, #49454f);
+  margin: 0;
+}
+
+.author-bio {
+  margin: 0 0 12px;
+  color: var(--md-sys-color-on-surface-variant, #49454f);
+}
+
+.author-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.author-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border-radius: 999px;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--md-sys-color-on-surface-variant, #49454f);
+  border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
+  transition: background 0.15s;
+}
+
+.author-link:hover {
+  background: var(--md-sys-color-surface-variant, #e7e0ec);
+}
+
+.author-link-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.author-articles h2 {
+  font-size: 1.25rem;
+  margin: 0 0 16px;
+}
diff --git a/site/site/css/global.css b/site/site/css/global.css
index 8f2af54..328f6ef 100644
--- a/site/site/css/global.css
+++ b/site/site/css/global.css
@@ -80,6 +80,13 @@ body {
   font-size: var(--catalog-body-l-font-size);
 }
 
+/* The TOC overlay is tucked off the right edge until hovered; clip horizontal
+   overflow so its off-screen part never produces a horizontal scrollbar. The
+   page itself never scrolls horizontally (panes scroll internally). */
+html {
+  overflow-x: clip;
+}
+
 /* Prevent FOUC by hiding undefined custom elements */
 nav-drawer:not(:defined),
 top-app-bar:not(:defined),
@@ -96,6 +103,24 @@ catalog-component-header-title:defined {
   visibility: visible;
 }
 
+/* Text selection uses the active theme's primary color */
+::selection {
+  background-color: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-primary);
+}
+
+/* When the theme/colour changes (per-page theme or the colour picker), the
+   `theme-transition` class is briefly added to <html> so colours cross-fade
+   instead of snapping. It's removed right after so it never slows down hover
+   states. */
+:root.theme-transition,
+:root.theme-transition *,
+:root.theme-transition *::before,
+:root.theme-transition *::after {
+  transition: background-color 0.4s ease, color 0.4s ease,
+    border-color 0.4s ease, fill 0.4s ease, outline-color 0.4s ease !important;
+}
+
 a {
   color: var(--md-sys-color-primary);
   text-decoration: none;
@@ -106,6 +131,20 @@ a:focus-visible {
   text-decoration: underline;
 }
 
+nav-drawer {
+  --catalog-drawer-width: 0px;
+}
+
+/* The sidebar is empty, so its width is 0 and it no longer provides the left
+   margin the layout assumes. Force the start margin to equal the end margin
+   (spacing-l) on every screen above mobile so the page sits symmetrically.
+   Below 600px the drawer collapses both margins to 0, so leave it alone. */
+@media (min-width: 601px) {
+  nav-drawer {
+    --_pane-margin-inline-start: var(--catalog-spacing-l);
+  }
+}
+
 nav-drawer md-list.nav md-list-item[href][selected] {
   background-color: var(--md-sys-color-surface-container-highest);
 }
diff --git a/site/site/css/home-page.css b/site/site/css/home-page.css
index 4c5cf2b..a21a8a6 100644
--- a/site/site/css/home-page.css
+++ b/site/site/css/home-page.css
@@ -4,8 +4,53 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
- h1,
-.subtitle {
-  text-align: left;
-  margin-block-start: 0;
+.home-page {
+  padding: 24px;
+  max-width: none;
+  overflow: visible;
+}
+
+.home-header {
+  margin-bottom: 32px;
+}
+
+.home-title {
+  font-size: clamp(2rem, 5vw, 3rem);
+  font-weight: 700;
+  margin: 0 0 12px;
+  line-height: 1.15;
+}
+
+.home-subtitle {
+  font-size: 1rem;
+  color: var(--md-sys-color-on-surface-variant, #49454f);
+  margin: 0;
+  max-width: 560px;
+}
+
+.home-articles-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+}
+
+.article-card-labels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.article-card-banner--gradient {
+  height: 160px;
+}
+
+@media (max-width: 600px) {
+  .home-page {
+    padding: 16px;
+  }
+
+  .home-articles-grid {
+    grid-template-columns: 1fr;
+  }
 }
diff --git a/site/site/images/favicon.svg b/site/site/images/favicon.svg
index f7ab06b..de98822 100644
--- a/site/site/images/favicon.svg
+++ b/site/site/images/favicon.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="none"><rect width="70" height="70" rx="21" fill="#00639B"/><path d="M35 59c-3.309 0-6.436-.618-9.382-1.854-2.909-1.273-5.454-2.982-7.636-5.128-2.146-2.181-3.855-4.727-5.127-7.636C11.617 41.436 11 38.309 11 35c0-3.345.618-6.473 1.854-9.382 1.273-2.909 2.982-5.436 5.128-7.582 2.182-2.181 4.727-3.89 7.636-5.127C28.564 11.636 31.691 11 35 11c3.346 0 6.473.636 9.382 1.91 2.909 1.236 5.436 2.945 7.582 5.126 2.182 2.146 3.89 4.673 5.127 7.582 1.273 2.91 1.91 6.037 1.91 9.382 0 3.31-.637 6.436-1.91 9.382-1.236 2.909-2.945 5.455-5.127 7.636-2.146 2.146-4.673 3.855-7.582 5.128C41.472 58.382 38.346 59 35 59ZM19.727 47.273V22.727A18.969 18.969 0 0 0 16.51 28.4c-.764 2.073-1.145 4.273-1.145 6.6s.381 4.545 1.145 6.655a19.143 19.143 0 0 0 3.218 5.618Zm3-27.546h24.6a18.97 18.97 0 0 0-5.672-3.218c-2.11-.764-4.328-1.145-6.655-1.145s-4.545.381-6.654 1.145a19.143 19.143 0 0 0-5.619 3.218ZM35 40.455l8.236-16.364H26.818L35 40.455Zm2.182 5.454h8.727V28.455l-8.727 17.454Zm-13.091 0h8.727l-8.727-17.454v17.454ZM35 54.636c2.326 0 4.544-.381 6.654-1.145 2.109-.764 4-1.836 5.672-3.218h-24.6a19.143 19.143 0 0 0 5.619 3.218c2.109.764 4.327 1.145 6.654 1.145Zm15.272-7.363a19.143 19.143 0 0 0 3.218-5.618c.764-2.11 1.145-4.328 1.145-6.655s-.381-4.527-1.145-6.6c-.764-2.11-1.836-4-3.218-5.673v24.546Z" fill="#FBF7FF"/></svg>
\ No newline at end of file
+<svg width="190" height="190" viewBox="0 0 190 190" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M142.39 0H94.9335L47.4565 47.4564H0V94.9129H94.9335L142.39 47.4564V0Z" fill="#6750a4"/>
+<path d="M94.9335 94.9129L47.4568 142.39V189.846H94.9339L142.39 142.39H189.847V94.9128L94.9335 94.9129Z" fill="#6750a4"/>
+</svg>
diff --git a/site/site/index.html b/site/site/index.html
index 762a832..c8f35ac 100644
--- a/site/site/index.html
+++ b/site/site/index.html
@@ -2,20 +2,65 @@
 
 {% block head %}
   <script type="module" src="/js/pages/home-page.js"></script>
+  <link rel="stylesheet" href="/css/article.css">
   <link rel="stylesheet" href="/css/home-page.css">
 {% endblock %}
 
 {% block content %}
+<div class="home-page">
 
-<h2>Welcome to the Moddy documentation !</h2>
-<div class="subtitle">
-  <p>
-    Here you'll find everything you need to learn how to use <strong>Moddy</strong>, install it, configure it, and contribute to the open-source project.
-  </p>
+  <header class="home-header">
+    <h1 class="home-title">
+      <span data-lang-content="fr">Documentation</span>
+      <span data-lang-content="en">Documentation</span>
+    </h1>
+    <p class="home-subtitle">
+      <span data-lang-content="fr">Tout ce qu'il faut savoir pour utiliser, installer et configurer <strong>Moddy</strong>.</span>
+      <span data-lang-content="en">Everything you need to know to use, install, and configure <strong>Moddy</strong>.</span>
+    </p>
+  </header>
 
-  <p>
-    If you have any questions or requests, you can open a ticket on the <a href="https://moddy.app/support/" target="_blank"><strong>support server</strong></a> or contact us by email at <strong><a href="mailto:hello@moddy.app">hello@moddy.app</a></strong>.
-  </p>
-</div>
+  <div class="home-articles-grid">
+    {% for article in articles %}
+      {% if article.seo_level < 3 %}
+        <a href="/articles/{{ article.id }}/" class="article-card">
+          {% if article.banner %}
+            <div class="article-card-banner">
+              <img src="{{ article.banner }}" alt="" role="presentation" />
+            </div>
+          {% elif article.banner_gradient %}
+            <div class="article-card-banner article-card-banner--gradient" style="background: {{ article.banner_gradient }};"></div>
+          {% endif %}
+          <div class="article-card-body">
+            {% if article.labels and article.labels.length > 0 %}
+              <div class="article-card-labels">
+                {% for labelId in article.labels %}
+                  {% for label in labels %}
+                    {% if label.id == labelId %}
+                      <span class="article-label" style="--label-color: {{ label.color }};">
+                        <span data-lang-content="fr">{{ label.name.fr }}</span>
+                        <span data-lang-content="en">{{ label.name.en }}</span>
+                      </span>
+                    {% endif %}
+                  {% endfor %}
+                {% endfor %}
+              </div>
+            {% endif %}
+            <h2 class="article-card-title">{{ article.title }}</h2>
+            {% if article.chapeau and (article.chapeau.fr or article.chapeau.en) %}
+              <p class="article-card-chapeau">
+                <span data-lang-content="fr">{{ article.chapeau.fr }}</span>
+                <span data-lang-content="en">{{ article.chapeau.en }}</span>
+              </p>
+            {% endif %}
+            <div class="article-card-meta">
+              <time datetime="{{ article.date }}">{{ article.date }}</time>
+            </div>
+          </div>
+        </a>
+      {% endif %}
+    {% endfor %}
+  </div>
 
+</div>
 {% endblock %}
diff --git a/site/site/redirect-articles.njk b/site/site/redirect-articles.njk
new file mode 100644
index 0000000..7cd2848
--- /dev/null
+++ b/site/site/redirect-articles.njk
@@ -0,0 +1,19 @@
+---
+pagination:
+  data: articles
+  size: 1
+  alias: article
+permalink: "/{{ article.id }}/"
+---
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="refresh" content="0; url=/articles/{{ article.id }}/" />
+  <link rel="canonical" href="/articles/{{ article.id }}/" />
+  <title>Redirecting…</title>
+</head>
+<body>
+  <p>Redirecting to <a href="/articles/{{ article.id }}/">/articles/{{ article.id }}/</a>…</p>
+</body>
+</html>
diff --git a/site/site/redirect-authors.njk b/site/site/redirect-authors.njk
new file mode 100644
index 0000000..f80ee27
--- /dev/null
+++ b/site/site/redirect-authors.njk
@@ -0,0 +1,19 @@
+---
+pagination:
+  data: authors
+  size: 1
+  alias: author
+permalink: "/{{ author.id }}/"
+---
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="refresh" content="0; url=/authors/{{ author.id }}/" />
+  <link rel="canonical" href="/authors/{{ author.id }}/" />
+  <title>Redirecting…</title>
+</head>
+<body>
+  <p>Redirecting to <a href="/authors/{{ author.id }}/">/authors/{{ author.id }}/</a>…</p>
+</body>
+</html>
diff --git a/site/site/redirect-labels.njk b/site/site/redirect-labels.njk
new file mode 100644
index 0000000..678b4ab
--- /dev/null
+++ b/site/site/redirect-labels.njk
@@ -0,0 +1,19 @@
+---
+pagination:
+  data: labels
+  size: 1
+  alias: label
+permalink: "/{{ label.id }}/"
+---
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="refresh" content="0; url=/collections/{{ label.id }}/" />
+  <link rel="canonical" href="/collections/{{ label.id }}/" />
+  <title>Redirecting…</title>
+</head>
+<body>
+  <p>Redirecting to <a href="/collections/{{ label.id }}/">/collections/{{ label.id }}/</a>…</p>
+</body>
+</html>
diff --git a/site/site/redirect-legacy-legal.njk b/site/site/redirect-legacy-legal.njk
new file mode 100644
index 0000000..c2652bd
--- /dev/null
+++ b/site/site/redirect-legacy-legal.njk
@@ -0,0 +1,4 @@
+---
+permalink: "/legal/tos/"
+---
+<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="refresh" content="0; url=/articles/terms-of-service/" /><link rel="canonical" href="/articles/terms-of-service/" /><title>Redirecting…</title></head><body><a href="/articles/terms-of-service/">/articles/terms-of-service/</a></body></html>
diff --git a/site/site/redirect-legacy-license.njk b/site/site/redirect-legacy-license.njk
new file mode 100644
index 0000000..a883447
--- /dev/null
+++ b/site/site/redirect-legacy-license.njk
@@ -0,0 +1,4 @@
+---
+permalink: "/legal/license/"
+---
+<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="refresh" content="0; url=/articles/license/" /><link rel="canonical" href="/articles/license/" /><title>Redirecting…</title></head><body><a href="/articles/license/">/articles/license/</a></body></html>
diff --git a/site/site/redirect-legacy-privacy.njk b/site/site/redirect-legacy-privacy.njk
new file mode 100644
index 0000000..d05b27e
--- /dev/null
+++ b/site/site/redirect-legacy-privacy.njk
@@ -0,0 +1,4 @@
+---
+permalink: "/legal/privacy/"
+---
+<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="refresh" content="0; url=/articles/privacy-policy/" /><link rel="canonical" href="/articles/privacy-policy/" /><title>Redirecting…</title></head><body><a href="/articles/privacy-policy/">/articles/privacy-policy/</a></body></html>
diff --git a/site/site/redirect-legacy.njk b/site/site/redirect-legacy.njk
new file mode 100644
index 0000000..2012c60
--- /dev/null
+++ b/site/site/redirect-legacy.njk
@@ -0,0 +1,4 @@
+---
+permalink: "/about/quick-start/"
+---
+<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="refresh" content="0; url=/articles/quick-start/" /><link rel="canonical" href="/articles/quick-start/" /><title>Redirecting…</title></head><body><a href="/articles/quick-start/">/articles/quick-start/</a></body></html>
diff --git a/site/src/components/nav-drawer.ts b/site/src/components/nav-drawer.ts
index a8e133c..d86581e 100644
--- a/site/src/components/nav-drawer.ts
+++ b/site/src/components/nav-drawer.ts
@@ -114,15 +114,15 @@ export class NavDrawer extends SignalElement(LitElement) {
       return nothing;
     }
 
-    return html` <div
-      class="pane toc"
-      ?inert=${showModal || inertContentSignal.value}>
-      <div class="scroll-wrapper">
-        <p>On this page:</p>
-        <h2>${this.pageTitle}</h2>
-        <slot name="toc"></slot>
-      </div>
-    </div>`;
+    return html`
+      <div class="toc-edge" aria-hidden="true"></div>
+      <div class="pane toc" ?inert=${showModal || inertContentSignal.value}>
+        <div class="scroll-wrapper">
+          <p>On this page:</p>
+          <h2>${this.pageTitle}</h2>
+          <slot name="toc"></slot>
+        </div>
+      </div>`;
   }
 
   /**
@@ -140,6 +140,41 @@ export class NavDrawer extends SignalElement(LitElement) {
     queryResult.addEventListener('change', (e) => {
       this.isCollapsible = e.matches;
     });
+
+    this.setupBannerRadiusScroll();
+  }
+
+  private setupBannerRadiusScroll() {
+    const expandedStr = getComputedStyle(this).getPropertyValue(
+      '--expanded-top-radius'
+    );
+    if (!expandedStr || !expandedStr.trim()) return;
+
+    const expanded = parseFloat(expandedStr);
+    const normal = 28; // --catalog-shape-xl fallback
+    const scrollRange = 100;
+
+    const contentPane = this.shadowRoot?.querySelector(
+      '.pane.content-pane'
+    ) as HTMLElement | null;
+    const scrollWrapper = contentPane?.querySelector(
+      '.scroll-wrapper'
+    ) as HTMLElement | null;
+    if (!contentPane || !scrollWrapper) return;
+
+    contentPane.style.setProperty('--_pane-top-radius', `${expanded}px`);
+
+    let ticking = false;
+    scrollWrapper.addEventListener('scroll', () => {
+      if (ticking) return;
+      ticking = true;
+      requestAnimationFrame(() => {
+        const t = Math.min(scrollWrapper.scrollTop / scrollRange, 1);
+        const r = expanded + (normal - expanded) * t;
+        contentPane.style.setProperty('--_pane-top-radius', `${r}px`);
+        ticking = false;
+      });
+    });
   }
 
   updated(changed: PropertyValues<this>) {
@@ -165,6 +200,8 @@ export class NavDrawer extends SignalElement(LitElement) {
       --_pane-margin-inline-end: var(--catalog-spacing-l);
       --_pane-margin-block-end: var(--catalog-spacing-l);
       --_toc-pane-width: 250px;
+      /* transparent gap kept between the revealed TOC and the page edge */
+      --_toc-gap: 5mm;
       min-height: 100dvh;
       display: flex;
       flex-direction: column;
@@ -192,7 +229,10 @@ export class NavDrawer extends SignalElement(LitElement) {
 
     .pane {
       box-sizing: border-box;
-      overflow: auto;
+      /* The pane clips (rounded). The inner .scroll-wrapper is what scrolls,
+         so its scrollbar is clipped by this rounded overflow at the corners
+         — works with overlay scrollbars too, unlike webkit track margins. */
+      overflow: hidden;
       width: 100%;
       /* Explicit height to make overflow work */
       height: calc(
@@ -201,6 +241,8 @@ export class NavDrawer extends SignalElement(LitElement) {
       );
       background-color: var(--md-sys-color-surface);
       border-radius: var(--catalog-shape-xl);
+      /* cross-fade the surface colour on theme changes */
+      transition: background-color 0.4s ease;
     }
 
     .pane,
@@ -224,12 +266,74 @@ export class NavDrawer extends SignalElement(LitElement) {
 
     .pane.content-pane {
       flex-grow: 1;
+      border-top-left-radius: var(--_pane-top-radius, var(--catalog-shape-xl));
+      border-top-right-radius: var(--_pane-top-radius, var(--catalog-shape-xl));
     }
 
+    /* The TOC is fully tucked off the right edge (no permanent sliver) so the
+       content pane takes the full width. An invisible hover strip pinned to the
+       right edge (.toc-edge) reveals it: hovering the edge — or the panel, or
+       focusing into it — slides the whole panel in as a single unit. The
+       revealed panel sits flush against the right edge, covering the edge strip,
+       so the cursor stays over it the whole time — no open/close flicker. The
+       document clips horizontal overflow (see global.css) so the off-screen
+       panel never produces a scrollbar. */
     .pane.toc {
-      width: auto;
       box-sizing: border-box;
       width: var(--_toc-pane-width);
+      position: fixed;
+      z-index: 13;
+      top: var(--catalog-top-app-bar-height);
+      right: 0;
+      height: calc(
+        100dvh - var(--catalog-top-app-bar-height) -
+          var(--_pane-margin-block-end)
+      );
+      transform: translateX(100%);
+      transition: transform 0.34s cubic-bezier(0.2, 0, 0, 1),
+        box-shadow 0.34s ease;
+      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06);
+      /* one-time hint on load: after a short pause the panel glides out then
+         eases back, so the user notices it's there. */
+      animation: toc-peek 1.1s cubic-bezier(0.32, 0.72, 0, 1) 1.2s 1;
+    }
+
+    /* invisible hover trigger pinned to the right edge of the viewport. It is
+       wide enough to bridge the revealed panel's gap so the hover is never lost
+       between the edge and the panel. */
+    .toc-edge {
+      position: fixed;
+      z-index: 10;
+      top: var(--catalog-top-app-bar-height);
+      right: 0;
+      width: calc(var(--_toc-gap) + 14px);
+      height: calc(
+        100dvh - var(--catalog-top-app-bar-height) -
+          var(--_pane-margin-block-end)
+      );
+    }
+
+    @keyframes toc-peek {
+      0%,
+      100% {
+        transform: translateX(100%);
+      }
+      55% {
+        transform: translateX(calc(100% - 16mm));
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .pane.toc {
+        animation: none;
+      }
+    }
+
+    .panes:has(.toc-edge:hover) .pane.toc,
+    .pane.toc:hover,
+    .pane.toc:focus-within {
+      transform: translateX(calc(-1 * var(--_toc-gap)));
+      box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
     }
 
     .toc .scroll-wrapper {
@@ -269,16 +373,21 @@ export class NavDrawer extends SignalElement(LitElement) {
       z-index: 12;
       background-color: var(--md-sys-color-surface-container);
       overflow: hidden;
+      transition: background-color 0.4s ease;
     }
 
     .scroll-wrapper {
+      box-sizing: border-box;
+    }
+
+    aside .scroll-wrapper {
       overflow-y: auto;
       max-height: 100%;
-      border-radius: inherit;
-      box-sizing: border-box;
     }
 
     .pane .scroll-wrapper {
+      overflow-y: auto;
+      height: 100%;
       padding-block: var(--catalog-spacing-xl);
     }
 
@@ -291,7 +400,8 @@ export class NavDrawer extends SignalElement(LitElement) {
     }
 
     @media (max-width: 900px) {
-      .pane.toc {
+      .pane.toc,
+      .toc-edge {
         display: none;
       }
     }
@@ -359,29 +469,22 @@ export class NavDrawer extends SignalElement(LitElement) {
       }
     }
 
-    /* On desktop, make the scrollbars less blocky so you can see the border
-     * radius of the pane. On most mobile platforms, these scrollbars are hidden
-     * by default. It'll still unfortunately render on top of the border radius.
-     */
     @media (pointer: fine) {
       :host {
         --_scrollbar-width: 8px;
       }
 
       .scroll-wrapper {
-        /* firefox */
         scrollbar-color: var(--md-sys-color-primary) transparent;
         scrollbar-width: thin;
       }
 
       .content {
-        /* adjust for the scrollbar width */
         padding-inline-end: calc(
           var(--catalog-spacing-xl) - var(--_scrollbar-width)
         );
       }
 
-      /* Chromium + Safari */
       .scroll-wrapper::-webkit-scrollbar {
         background-color: transparent;
         width: var(--_scrollbar-width);
@@ -411,12 +514,10 @@ export class NavDrawer extends SignalElement(LitElement) {
 
       @media (pointer: fine) {
         .scroll-wrapper {
-          /* firefox */
           scrollbar-color: CanvasText transparent;
         }
 
         .scroll-wrapper::-webkit-scrollbar-thumb {
-          /* Chromium + Safari */
           background-color: CanvasText;
         }
       }
diff --git a/site/src/components/top-app-bar.ts b/site/src/components/top-app-bar.ts
index c4bd080..b917ff6 100644
--- a/site/src/components/top-app-bar.ts
+++ b/site/src/components/top-app-bar.ts
@@ -50,18 +50,15 @@ export class TopAppBar extends SignalElement(LitElement) {
             </md-icon-button>
             <a
               href="/"
+              id="home-link"
               class="logo-link"
               title="Home"
               aria-label="Home">
               ${moddyLogo}
+              <md-focus-ring for="home-link"></md-focus-ring>
             </a>
           </section>
 
-          <a href="/" id="home-link">
-            Moddy Docs
-            <md-focus-ring for="home-link"></md-focus-ring>
-          </a>
-
           <a id="skip-to-main" href="#main-content" tabindex="0">
             Skip to main content
           </a>
@@ -170,12 +167,14 @@ export class TopAppBar extends SignalElement(LitElement) {
       background-color: var(--md-sys-color-surface-container);
       color: var(--md-sys-color-on-surface);
       z-index: 12;
+      transition: background-color 0.4s ease, color 0.4s ease;
     }
 
     .default-content {
       width: 100%;
       display: flex;
       align-items: center;
+      gap: 8px;
     }
 
     md-icon-button:not(:defined) {
@@ -204,13 +203,12 @@ export class TopAppBar extends SignalElement(LitElement) {
       display: flex;
       align-items: center;
       padding: 0;
-      margin-top: -3px;
-      height: 32px;
+      margin-inline-start: 6px;
     }
 
     .logo-link svg {
-      width: 32px;
-      height: 32px;
+      height: 1.35em;
+      width: auto;
       color: var(--md-sys-color-primary);
     }
 
@@ -242,16 +240,6 @@ export class TopAppBar extends SignalElement(LitElement) {
       opacity: 1;
       pointer-events: auto;
     }
-
-    @media (max-width: 1500px) {
-      .start .logo-link {
-        display: none;
-      }
-
-      .start .menu-button {
-        display: flex;
-      }
-    }
   `;
 }
 
diff --git a/site/src/inline/apply-lang.ts b/site/src/inline/apply-lang.ts
new file mode 100644
index 0000000..7fc575a
--- /dev/null
+++ b/site/src/inline/apply-lang.ts
@@ -0,0 +1,8 @@
+// Runs inline in <head> to apply saved language before first paint (prevents flash)
+(function () {
+  const saved = localStorage.getItem('moddy-lang');
+  const browserLang = (navigator.language || 'fr').split('-')[0];
+  const supported = ['fr', 'en'];
+  const lang = supported.includes(saved ?? '') ? saved! : supported.includes(browserLang) ? browserLang : 'fr';
+  document.documentElement.dataset.lang = lang;
+})();
diff --git a/site/src/pages/global.ts b/site/src/pages/global.ts
index 9c4fd13..50f759e 100644
--- a/site/src/pages/global.ts
+++ b/site/src/pages/global.ts
@@ -12,10 +12,15 @@
  * and global scroll listeners.
  */
 
+import {
+  applyMaterialTheme,
+  themeFromSourceColor,
+} from '../utils/material-color-helpers.js';
 import {
   changeColor,
   changeColorAndMode,
   changeColorMode,
+  enableThemeTransition,
   getCurrentMode,
   getCurrentSeedColor,
   getCurrentThemeString,
@@ -131,7 +136,36 @@ function applySmoothScrolling() {
   });
 }
 
+/**
+ * Applies a per-page color theme when the page declares one via
+ * `<meta name="page-theme-color" content="#rrggbb">` (set from an article's
+ * `theme_color` metadata). This is applied as a separate, non-persisted
+ * override layer on top of the user's saved theme: the base theme is applied
+ * first (inline, before paint), then this swaps in the page's color, so the
+ * change cross-fades. Pages without the meta keep the user's theme, so
+ * navigating to them fades back to it.
+ */
+function applyPageThemeColor() {
+  const color = document
+    .querySelector('meta[name="page-theme-color"]')
+    ?.getAttribute('content')
+    ?.trim();
+
+  if (!color) {
+    return;
+  }
+
+  const isDark = isModeDark(getCurrentMode() ?? 'auto', false);
+  enableThemeTransition();
+  const theme = themeFromSourceColor(color, isDark);
+  // Use a distinct stylesheet name so it layers over (and never overwrites)
+  // the user's persisted 'material-theme'.
+  applyMaterialTheme(document, theme, 'page-theme');
+  window.dispatchEvent(new Event('theme-changed'));
+}
+
 applyColorThemeListeners();
 initializeTheme();
 determinePageNavigationAutoMode();
+applyPageThemeColor();
 applySmoothScrolling();
diff --git a/site/src/svg/moddy-logo.ts b/site/src/svg/moddy-logo.ts
index 36abb85..964a615 100644
--- a/site/src/svg/moddy-logo.ts
+++ b/site/src/svg/moddy-logo.ts
@@ -5,14 +5,11 @@
 
 import {html} from 'lit';
 
-/**
- * The Moddy logo.
- */
-export const moddyLogo = html` <svg
-  width="188"
-  height="188"
-  viewBox="0 0 188 188"
-  fill="currentColor">
-  <path d="M132.028 38.702C142.376 35.2531 152.22 45.0974 148.771 55.4452L114.446 158.421C110.824 169.287 96.0442 170.735 90.3818 160.778L69.9043 124.765L90.1416 104.528C92.1294 102.54 92.1297 99.3171 90.1416 97.329C88.1535 95.3409 84.9306 95.3411 82.9424 97.329L62.7041 117.566L26.6953 97.0917C16.7379 91.4294 18.1859 76.6499 29.0527 73.0272L132.028 38.702Z" fill="currentColor"/>
+export const moddyLogo = html`<svg
+  viewBox="0 0 1422 253"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M170.21 27.7626H122.754L75.2768 75.219H27.8203V122.675H122.754L170.21 75.219V27.7626Z"/>
+  <path d="M122.754 122.675L75.2771 170.152V217.609H122.754L170.211 170.152H217.667V122.675L122.754 122.675Z"/>
+  <path d="M287.972 195V50.2897H322.836L364.874 154.174L406.812 50.2897H440.969V195H413.987V101.726L414.088 97.179L374.98 195H353.961L315.56 98.1896L315.661 102.636V195H287.972ZM498.681 197.021C483.523 197.021 470.925 191.935 460.887 181.762C450.916 171.522 445.931 158.991 445.931 144.169V139.319C445.931 124.565 450.916 112.101 460.887 101.929C470.925 91.6884 483.523 86.5683 498.681 86.5683C513.772 86.5683 526.336 91.6884 536.375 101.929C546.48 112.101 551.533 124.565 551.533 139.319V144.169C551.533 158.991 546.48 171.522 536.375 181.762C526.336 191.935 513.772 197.021 498.681 197.021ZM498.681 172.566C506.159 172.566 512.593 169.938 517.983 164.684C523.44 159.361 526.168 152.725 526.168 144.776V138.915C526.168 130.898 523.44 124.262 517.983 119.007C512.593 113.685 506.159 111.024 498.681 111.024C491.136 111.024 484.668 113.685 479.279 119.007C473.956 124.262 471.295 130.864 471.295 138.814V144.776C471.295 152.725 473.956 159.361 479.279 164.684C484.668 169.938 491.136 172.566 498.681 172.566ZM606.713 197.021C593.374 197.021 582.157 192.137 573.062 182.368C563.967 172.6 559.42 160.035 559.42 144.675V139.319C559.42 123.891 564.035 111.259 573.264 101.423C582.494 91.52 593.947 86.5683 607.623 86.5683C614.629 86.5683 621.164 87.9831 627.227 90.8126C633.358 93.6421 638.074 97.5833 641.375 102.636L640.365 101.828V50.2897H666.538V195H641.88V177.113L643.699 177.619L642.891 179.235C639.657 184.76 634.807 189.105 628.339 192.272C621.939 195.438 614.73 197.021 606.713 197.021ZM613.282 173.981C621.501 173.981 628.204 171.218 633.392 165.694C638.647 160.102 641.274 153.163 641.274 144.877V139.319C641.274 130.696 638.613 123.689 633.291 118.299C627.968 112.91 621.299 110.215 613.282 110.215C604.995 110.215 598.157 112.876 592.768 118.198C587.446 123.453 584.784 130.493 584.784 139.319V144.877C584.784 153.77 587.479 160.844 592.869 166.098C598.258 171.353 605.063 173.981 613.282 173.981ZM727.9 197.021C714.561 197.021 703.344 192.137 694.249 182.368C685.154 172.6 680.606 160.035 680.606 144.675V139.319C680.606 123.891 685.221 111.259 694.451 101.423C703.681 91.52 715.133 86.5683 728.81 86.5683C735.816 86.5683 742.351 87.9831 748.414 90.8126C754.545 93.6421 759.261 97.5833 762.562 102.636L761.551 101.828V50.2897H787.724V195H763.067V177.113L764.886 177.619L764.078 179.235C760.844 184.76 755.993 189.105 749.526 192.272C743.126 195.438 735.917 197.021 727.9 197.021ZM734.469 173.981C742.688 173.981 749.391 171.218 754.578 165.694C759.833 160.102 762.461 153.163 762.461 144.877V139.319C762.461 130.696 759.8 123.689 754.477 118.299C749.155 112.91 742.486 110.215 734.469 110.215C726.182 110.215 719.344 112.876 713.954 118.198C708.632 123.453 705.971 130.493 705.971 139.319V144.877C705.971 153.77 708.666 160.844 714.056 166.098C719.445 171.353 726.249 173.981 734.469 173.981ZM817.659 233.401C817.659 233.401 817.558 233.401 817.356 233.401C817.153 233.401 817.254 233.401 817.659 233.401L837.061 188.836L836.455 197.931L795.831 88.5894H822.914C822.981 88.5894 822.981 88.5894 822.914 88.5894L847.268 157.509L848.784 162.764L850.299 157.61L874.553 88.5894C874.485 88.5894 874.451 88.5894 874.451 88.5894C874.519 88.5894 874.553 88.5894 874.553 88.5894H901.534L845.348 233.401C845.482 233.401 845.516 233.401 845.449 233.401C845.381 233.401 845.348 233.401 845.348 233.401H817.659ZM954.157 195V50.2897H1004.99C1025.87 50.2897 1042.65 56.5214 1055.31 68.9848C1067.98 81.4482 1074.31 98.0885 1074.31 118.906V125.676C1074.31 146.696 1067.91 163.505 1055.11 176.103C1042.38 188.701 1025.57 195 1004.68 195H954.157ZM983.261 169.534H1003.98C1016.24 169.534 1025.97 165.728 1033.18 158.115C1040.46 150.502 1044.1 140.161 1044.1 127.091V118.906C1044.1 105.903 1040.56 95.5285 1033.48 87.7809C1026.48 79.966 1016.68 76.0586 1004.08 76.0586H983.261V169.534ZM1136.19 197.021C1121.04 197.021 1108.44 191.935 1098.4 181.762C1088.43 171.522 1083.44 158.991 1083.44 144.169V139.319C1083.44 124.565 1088.43 112.101 1098.4 101.929C1108.44 91.6884 1121.04 86.5683 1136.19 86.5683C1151.29 86.5683 1163.85 91.6884 1173.89 101.929C1183.99 112.101 1189.05 124.565 1189.05 139.319V144.169C1189.05 158.991 1183.99 171.522 1173.89 181.762C1163.85 191.935 1151.29 197.021 1136.19 197.021ZM1136.19 172.566C1143.67 172.566 1150.11 169.938 1155.5 164.684C1160.95 159.361 1163.68 152.725 1163.68 144.776V138.915C1163.68 130.898 1160.95 124.262 1155.5 119.007C1150.11 113.685 1143.67 111.024 1136.19 111.024C1128.65 111.024 1122.18 113.685 1116.79 119.007C1111.47 124.262 1108.81 130.864 1108.81 138.814V144.776C1108.81 152.725 1111.47 159.361 1116.79 164.684C1122.18 169.938 1128.65 172.566 1136.19 172.566ZM1249.38 197.021C1234.09 197.021 1221.52 192.069 1211.69 182.166C1201.85 172.195 1196.93 159.496 1196.93 144.068V139.319C1196.93 123.959 1201.88 111.327 1211.79 101.423C1221.76 91.52 1234.36 86.5683 1249.58 86.5683C1257.2 86.5683 1263.83 87.7136 1269.49 90.0042C1275.15 92.2947 1280.07 95.4948 1284.24 99.6043C1288.49 103.647 1292.6 110.08 1296.57 118.906L1274.34 127.495C1271.85 122.712 1269.56 119.243 1267.47 117.087C1265.38 114.931 1262.92 113.213 1260.09 111.933C1257.26 110.653 1253.93 110.013 1250.09 110.013C1242.41 110.013 1235.84 112.741 1230.38 118.198C1224.99 123.588 1222.3 130.493 1222.3 138.915V144.675C1222.3 153.096 1224.99 160.001 1230.38 165.391C1235.84 170.781 1242.41 173.475 1250.09 173.475C1253.73 173.475 1256.89 172.869 1259.59 171.656C1262.28 170.444 1264.81 168.557 1267.17 165.997C1269.59 163.437 1271.88 159.833 1274.04 155.184L1296.37 163.875C1293.2 171.892 1289.43 178.158 1285.05 182.671C1280.67 187.118 1275.65 190.621 1270 193.181C1264.34 195.741 1257.46 197.021 1249.38 197.021ZM1344.87 197.021C1337.26 197.021 1330.86 196.145 1325.67 194.394C1320.48 192.642 1316.03 190.116 1312.33 186.815C1308.62 183.513 1305.69 179.875 1303.54 175.901C1301.38 171.858 1300.3 169.837 1300.3 169.837L1318.9 160.742C1318.9 160.742 1319.71 162.157 1321.32 164.987C1323.01 167.749 1324.83 170.073 1326.78 171.96C1328.8 173.779 1331.19 175.227 1333.96 176.305C1336.72 177.383 1340.12 177.922 1344.16 177.922C1348.88 177.922 1352.75 176.945 1355.78 174.991C1358.88 172.97 1360.43 170.174 1360.43 166.604V166.3C1360.43 162.326 1359.02 159.361 1356.19 157.408C1353.36 155.387 1347.9 153.163 1339.82 150.738C1326.75 147.1 1317.62 142.721 1312.43 137.601C1307.24 132.481 1304.65 125.879 1304.65 117.794V117.289C1304.65 107.655 1308.35 100.143 1315.77 94.7537C1323.24 89.2968 1332.84 86.5683 1344.57 86.5683C1350.63 86.5683 1355.75 87.242 1359.93 88.5894C1364.17 89.9368 1367.88 91.9579 1371.04 94.6527C1374.28 97.2801 1377.04 100.312 1379.33 103.748C1381.69 107.183 1382.87 108.901 1382.87 108.901L1365.48 119.411C1365.48 119.411 1364.74 118.367 1363.26 116.278C1361.85 114.123 1360.16 112.203 1358.21 110.518C1356.25 108.834 1354.17 107.621 1351.94 106.88C1349.72 106.072 1347.16 105.668 1344.26 105.668C1339.48 105.668 1335.74 106.644 1333.05 108.598C1330.42 110.485 1329.1 112.977 1329.1 116.076V116.379C1329.1 120.152 1330.69 122.982 1333.85 124.868C1337.02 126.687 1342.75 128.809 1351.03 131.234C1363.43 134.401 1372.22 138.477 1377.41 143.462C1382.6 148.38 1385.19 155.555 1385.19 164.987V165.088C1385.19 175.463 1381.45 183.379 1373.97 188.836C1366.49 194.293 1356.79 197.021 1344.87 197.021Z"/>
 </svg>`;
-
diff --git a/site/src/utils/theme.ts b/site/src/utils/theme.ts
index 239a56c..6e97bfe 100644
--- a/site/src/utils/theme.ts
+++ b/site/src/utils/theme.ts
@@ -21,6 +21,7 @@ export type ColorMode = 'light' | 'dark' | 'auto';
  * @param isDark Whether or not the theme should be in dark mode.
  */
 function applyThemeFromColor(color: string, isDark: boolean) {
+  enableThemeTransition();
   const theme = themeFromSourceColor(color, isDark);
   applyMaterialTheme(document, theme);
   // Dispatches event to communicate with components pages' JS to update the
@@ -28,6 +29,22 @@ function applyThemeFromColor(color: string, isDark: boolean) {
   window.dispatchEvent(new Event('theme-changed'));
 }
 
+let themeTransitionTimer = 0;
+
+/**
+ * Briefly enables a global color transition so that theme/colour changes
+ * cross-fade rather than snapping. The `theme-transition` class is removed
+ * shortly after so it doesn't interfere with normal hover transitions.
+ */
+export function enableThemeTransition() {
+  const el = document.documentElement;
+  el.classList.add('theme-transition');
+  window.clearTimeout(themeTransitionTimer);
+  themeTransitionTimer = window.setTimeout(() => {
+    el.classList.remove('theme-transition');
+  }, 450);
+}
+
 /**
  * Determines whether or not the mode should be Dark. This also means
  * calculating whether it should be dark if the current mode is 'auto'.
diff --git a/vercel.json b/vercel.json
index 18bfaf5..db4bed6 100644
--- a/vercel.json
+++ b/vercel.json
@@ -2,5 +2,28 @@
   "buildCommand": "cd site && npm run build:prod",
   "outputDirectory": "site/_prod",
   "installCommand": "cd site && npm install --legacy-peer-deps",
-  "framework": null
+  "framework": null,
+  "redirects": [
+    {
+      "source": "/articles",
+      "destination": "/articles/",
+      "permanent": true
+    },
+    {
+      "source": "/collections",
+      "destination": "/collections/",
+      "permanent": true
+    },
+    {
+      "source": "/authors",
+      "destination": "/authors/",
+      "permanent": true
+    }
+  ],
+  "rewrites": [
+    {
+      "source": "/:id((?!articles|collections|authors|about|legal|css|js|fonts|images)[^/]+)",
+      "destination": "/_redirects/:id"
+    }
+  ]
 }