::Titre:Exemple d'article — toutes les fonctionnalités
::Date:01/01/2026
::Auteur:Votre Nom
::Categories:Blog
::Image:/images/cover.jpg

Ceci est un **article d'exemple** montrant toutes les fonctionnalités disponibles dans PageMark. Supprimez ce fichier quand vous n'en avez plus besoin.

## Métadonnées

Les métadonnées se placent en tête de fichier avec la syntaxe `::Clé:Valeur`. Elles définissent le titre, la date, l'auteur et la catégorie de l'article.

## Mise en forme du texte

Le texte supporte toute la syntaxe Markdown :

- **Gras** avec `**texte**`
- *Italique* avec `*texte*`
- ~~Barré~~ avec `~~texte~~`
- `Code inline` avec des backticks
- [Lien](https://example.com) avec `[texte](url)`

## Titres et ancres

Les titres `h1` à `h4` génèrent automatiquement une ancre cliquable `#` au survol, permettant de créer des liens directs vers une section :

```
https://monsite.com/exemple-article#images
```

### Niveau 3

#### Niveau 4

## Images

Placez vos images dans `md/images/` et insérez-les ainsi :

```markdown
![Description de l'image](/images/photo.jpg)
```

L'image de couverture (affichée dans les cards de la page d'accueil) se définit avec `::Image:/images/cover.jpg`.

## Blocs de code

Les blocs de code supportent la coloration syntaxique pour la plupart des langages :

```python
def saluer(nom: str) -> str:
    return f"Bonjour, {nom} !"

print(saluer("PageMark"))
```

```bash
# Générer le site
python3 build.py

# Test local
python3 -m http.server 3000
```

```javascript
document.addEventListener("DOMContentLoaded", () => {
  console.log("PageMark chargé !");
});
```

## Tableaux

| Fonctionnalité    | Syntaxe               | Résultat              |
|-------------------|-----------------------|-----------------------|
| Titre             | `::Titre:Mon titre`   | h1 avant l'article    |
| Date              | `::Date:dd/mm/YYYY`   | Tri chronologique     |
| Catégorie         | `::Categories:A-B`    | Dossier `a/b/`        |
| Image couverture  | `::Image:/img/x.jpg`  | Card sur l'accueil    |

## Citations

> Les blockquotes s'écrivent avec `>` en début de ligne.
> Elles peuvent s'étendre sur plusieurs lignes.

## HTML personnalisé

Vous pouvez insérer du HTML directement dans le Markdown — utile pour des mises en forme avancées, des iframes, des widgets, etc.

<div style="background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 1rem 1.4rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0;">
  <strong>Astuce :</strong> utilisez les variables CSS <code>var(--accent)</code>, <code>var(--bg)</code>, <code>var(--text)</code>, etc. pour que votre HTML s'adapte automatiquement au dark mode.
</div>

## Listes

Liste non ordonnée :

- Élément A
- Élément B
  - Sous-élément
  - Sous-élément

Liste ordonnée :

1. Première étape
2. Deuxième étape
3. Troisième étape

Liste de tâches :

- [x] Tâche terminée
- [ ] Tâche en cours
- [ ] Tâche à faire