# Interface

L'interface de Pena se compose de deux vues principales — l'**accueil** et le **lecteur** —
surmontées d'une **barre de titre personnalisée** toujours visible.

## Barre de titre personnalisée

La décoration native de la fenêtre est désactivée ; Pena fournit sa propre barre de titre
en haut de la fenêtre (hauteur 36 px, fond sombre).

| Élément | Comportement |
|---|---|
| Titre | Affiche « Pena — Markdown Viewer » sur l'accueil, ou le titre du document ouvert dans le lecteur. |
| Zone de titre | Glisser-déposer pour déplacer la fenêtre. |
| Bouton **─** | Réduit la fenêtre. |
| Bouton **▢** | Agrandit la fenêtre, ou la restaure si elle est déjà agrandie. |
| Bouton **✕** | Ferme l'application (devient rouge au survol). |

## Vue d'accueil

C'est l'écran affiché au démarrage et quand on revient via « ← Accueil ».

Elle contient :

- Le **titre « Pena »** en grand.
- Deux boutons d'action :
  - **« Ouvrir un fichier Markdown »**
  - **« Ouvrir un dossier wiki »**
- Une section **« Récents »** (visible uniquement s'il y a des documents récents) listant les
  derniers fichiers et dossiers ouverts, cliquables pour les rouvrir.

## Vue lecteur

Affichée dès qu'un document est ouvert. Elle est composée de deux zones :

### Barre latérale (gauche)
- Largeur fixe (264 px), fond sombre.
- En haut : le **nom du dossier** ouvert.
- Au centre : l'**arborescence des fichiers** `.md` (voir
  [Navigation](1.2-Fonctionnalites.md#3-navigation-dans-la-documentation)).
- En bas (pied de barre) : deux boutons —
  - **« Personnaliser CSS »** (ouvre la modale de thèmes / CSS) ;
  - **« ← Accueil »** (revient à l'écran d'accueil).

### Zone de contenu (droite)
- Affiche le document Markdown rendu en HTML.
- Fond clair, typographie soignée, largeur de lecture limitée pour le confort.
- Chaque bloc de code possède un bouton **« Copier »**.

### Comportement responsive
- Sur les fenêtres larges, la barre latérale est visible en permanence à gauche.
- Sous ~1020 px de large, la barre latérale se rétracte et le contenu occupe toute la largeur.
- Sous ~540 px, les marges du contenu sont réduites.

## Modale de personnalisation CSS

Ouverte via le bouton « Personnaliser CSS » de la barre latérale. Voir la page dédiée
[Thèmes et personnalisation](1.4-Themes-et-personnalisation.md) pour le détail.

Elle se ferme via la croix, le bouton « Fermer », ou un clic en dehors de la modale.

## Palette visuelle

| Rôle | Usage |
|---|---|
| Fond sombre | Barre de titre, barre latérale |
| Fond clair | Zone de contenu |
| Accent rose/corail | Boutons, survols, liens d'action, bordures de tableaux |
| Accent indigo | Élément actif dans la barre latérale |

> L'ensemble de ces couleurs peut être surchargé par l'utilisateur via les thèmes rapides ou
> le CSS personnalisé.

## Voir aussi

- [Fonctionnalités](1.2-Fonctionnalites.md)
- [Thèmes et personnalisation](1.4-Themes-et-personnalisation.md)