diff --git a/.gemini/skills/frontend-creator/SKILL.md b/.gemini/skills/frontend-creator/SKILL.md
new file mode 100644
index 0000000..4d267e2
--- /dev/null
+++ b/.gemini/skills/frontend-creator/SKILL.md
@@ -0,0 +1,41 @@
+---
+name: frontend-creator
+description: Spécialisé dans la création et l'amélioration du frontend (HTML/CSS/JS Vanilla) de Linux BenchTools. Utilisez ce skill pour ajouter des fonctionnalités UI, améliorer le design (Monokai), corriger des bugs JS ou intégrer des endpoints API dans l'interface.
+---
+
+# Frontend Creator - Linux BenchTools
+
+Ce skill guide la modification et l'évolution de l'interface utilisateur de Linux BenchTools.
+
+## Principes de Développement
+
+1. **Vanilla JS uniquement** : Ne pas introduire de frameworks lourds (React, Vue, etc.). Utiliser les API standard du navigateur.
+2. **Rendu par template strings** : Le HTML est généré dynamiquement en JS via des template strings.
+3. **Thème Monokai** : Respecter les variables de couleur et le style "Dark Mode" établi.
+4. **Modularité** : Utiliser les classes globales partagées (`window.BenchAPI`, `window.BenchUtils`, `window.IconManager`).
+
+## Ressources de Référence
+
+Consultez ces fichiers pour des détails spécifiques :
+
+- **Design & Styles** : Voir [css_variables.md](references/css_variables.md) pour les couleurs et variables de layout.
+- **Communication API** : Voir [api_usage.md](references/api_usage.md) pour savoir comment appeler le backend.
+- **Patterns UI** : Voir [ui_patterns.md](references/ui_patterns.md) pour les fonctions de rendu et la gestion des icônes.
+
+## Workflows Typiques
+
+### Ajouter un bouton d'action
+1. Localiser la fonction `render...` appropriée dans le fichier JS (ex: `devices.js`).
+2. Ajouter le HTML du bouton dans le template string (utiliser les classes `.icon-btn` ou `.btn`).
+3. Ajouter un `addEventListener` dans la fonction d'initialisation (souvent `bindDetailActions` ou similaire).
+
+### Créer une nouvelle page
+1. Créer le fichier HTML dans `frontend/`.
+2. Inclure les CSS de base (`main.css`, `monokai.css`, `variables.css`).
+3. Inclure les JS globaux (`js/api.js`, `js/utils.js`, `js/icon-manager.js`).
+4. Créer un fichier JS dédié pour la logique de la page.
+
+## Vérifications Post-Modification
+- Vérifier que les icônes s'affichent (appel à `IconManager.inlineSvgIcons`).
+- Vérifier la compatibilité mobile (responsive).
+- Tester les cas d'erreur API (affichage de toast ou message d'erreur).
\ No newline at end of file
diff --git a/.gemini/skills/frontend-creator/references/api_usage.md b/.gemini/skills/frontend-creator/references/api_usage.md
new file mode 100644
index 0000000..5677f00
--- /dev/null
+++ b/.gemini/skills/frontend-creator/references/api_usage.md
@@ -0,0 +1,29 @@
+# Utilisation de l'API (Client JS)
+
+Le frontend utilise une classe globale `BenchAPI` (instanciée sous `window.BenchAPI` ou `apiClient`).
+
+## Client API Global
+Le client est défini dans `js/api.js`.
+
+### Méthodes Communes
+- `getDevices(params)` : Liste les appareils.
+- `getDevice(deviceId)` : Détails d'un appareil.
+- `updateDevice(deviceId, data)` : Met à jour un appareil.
+- `getDeviceBenchmarks(deviceId, params)` : Historique des benchmarks.
+- `uploadDocument(deviceId, file, docType)` : Upload d'image ou PDF.
+
+### Exemple d'appel
+```javascript
+const apiClient = window.BenchAPI;
+
+try {
+ const devices = await apiClient.getDevices();
+ // Traiter les données
+} catch (error) {
+ console.error("Erreur API:", error);
+}
+```
+
+## Gestion des Erreurs
+L'API renvoie des erreurs détaillées. Utilisez `error.message` pour l'affichage à l'utilisateur.
+Le module `utils.js` (sous `window.BenchUtils`) propose des méthodes comme `showToast` ou `showError`.
diff --git a/.gemini/skills/frontend-creator/references/css_variables.md b/.gemini/skills/frontend-creator/references/css_variables.md
new file mode 100644
index 0000000..9a3be53
--- /dev/null
+++ b/.gemini/skills/frontend-creator/references/css_variables.md
@@ -0,0 +1,46 @@
+# Variables CSS (Thème)
+
+Le projet utilise des variables CSS pour maintenir une cohérence visuelle.
+
+## Variables de Layout
+```css
+:root {
+ /* Spacing */
+ --spacing-xs: 0.25rem;
+ --spacing-sm: 0.5rem;
+ --spacing-md: 1rem;
+ --spacing-lg: 1.5rem;
+ --spacing-xl: 2rem;
+
+ /* Border Radius */
+ --radius-sm: 4px;
+ --radius-md: 8px;
+ --radius-lg: 12px;
+
+ /* Transitions */
+ --transition-fast: 0.15s ease;
+ --transition-normal: 0.2s ease;
+ --transition-slow: 0.3s ease;
+
+ /* Font */
+ --font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+ --font-mono: 'Courier New', Courier, monospace;
+
+ /* Icon sizing */
+ --section-icon-size: 32px;
+ --button-icon-size: 24px;
+ --icon-btn-size: 42px;
+ --icon-btn-icon-size: 26px;
+}
+```
+
+## Thème Monokai (exemple de couleurs courantes)
+Les couleurs du thème sont définies dans `monokai.css` et `themes/`.
+Généralement :
+- `--bg-primary` : Fond principal.
+- `--bg-secondary` : Fond des cartes/sections.
+- `--text-primary` : Texte principal.
+- `--color-primary` : Couleur d'accentuation (souvent jaune/orange Monokai).
+- `--border-color` : Couleur des bordures.
+- `--color-danger` : Rouge pour les erreurs/suppression.
+- `--color-success` : Vert pour les succès.
diff --git a/.gemini/skills/frontend-creator/references/ui_patterns.md b/.gemini/skills/frontend-creator/references/ui_patterns.md
new file mode 100644
index 0000000..73077d6
--- /dev/null
+++ b/.gemini/skills/frontend-creator/references/ui_patterns.md
@@ -0,0 +1,38 @@
+# Patterns UI et Rendu
+
+Le projet utilise du JavaScript Vanilla avec des gabarits de chaînes de caractères (template strings) pour le rendu du DOM.
+
+## Rendu de Section
+La fonction `createSection` est souvent utilisée pour générer le HTML d'une section de détail.
+
+```javascript
+function createSection(id, icon, title, content, options = {}) {
+ // icon est souvent un span avec data-icon pour IconManager
+ return `
+
+ `;
+}
+```
+
+## Gestion des Icônes
+Le système utilise `IconManager` pour injecter des SVG à partir d'attributs `data-icon`.
+Après avoir injecté du HTML contenant des `data-icon`, il faut appeler :
+```javascript
+if (window.IconManager) {
+ window.IconManager.inlineSvgIcons(containerElement);
+}
+```
+
+## Échappement HTML
+Utilisez toujours `window.BenchUtils.escapeHtml()` pour les données venant de l'API afin d'éviter les failles XSS.
+
+## Interaction et État
+Les pages utilisent souvent des variables d'état globales simples (ex: `isEditing`, `currentDevice`) et re-rendent la section entière lors d'un changement d'état.
diff --git a/GEMINI.md b/GEMINI.md
new file mode 100644
index 0000000..34ea11a
--- /dev/null
+++ b/GEMINI.md
@@ -0,0 +1,96 @@
+# Linux BenchTools - Contexte du Projet
+
+## Aperçu du Projet
+
+**Linux BenchTools** est une application auto-hébergée de benchmarking et de gestion d'inventaire matériel pour les machines Linux (physiques, VM, SBC comme Raspberry Pi). Elle permet aux utilisateurs de :
+* Collecter les spécifications matérielles (CPU, RAM, Stockage, Réseau, GPU).
+* Exécuter des benchmarks standardisés.
+* Calculer des scores comparables et afficher des classements.
+* Gérer l'inventaire matériel (machines et périphériques comme les clés USB, câbles, etc.).
+* Générer des QR codes pour le suivi physique des actifs.
+* Stocker la documentation associée (PDF, factures).
+
+## Stack Technique
+
+* **Backend :** Python 3.11+, FastAPI, SQLAlchemy, Pydantic.
+* **Frontend :** HTML5, CSS3, JavaScript Vanilla (servi via Nginx).
+* **Base de données :** SQLite (Bases de données séparées pour les Benchmarks et les Périphériques).
+* **Script Client :** Bash (`bench.sh`) pour la collecte de données sur les machines cibles.
+* **Infrastructure :** Docker & Docker Compose.
+* **Autre :** Go (placeholder dans `bench_go`, potentiellement pour un futur client).
+
+## Structure des Répertoires
+
+* `backend/` : Code source de l'application FastAPI.
+ * `app/` : Paquet principal de l'application.
+ * `api/` : Points d'entrée (endpoints) de l'API.
+ * `core/` : Paramètres de configuration et de sécurité.
+ * `models/` : Modèles de base de données SQLAlchemy.
+ * `schemas/` : Schémas de données Pydantic.
+ * `utils/` : Fonctions utilitaires (ex: logique de calcul des scores).
+ * `data/` : Stockage des bases de données SQLite (`data.db`, `peripherals.db`).
+ * `uploads/` : Stockage des documents et images téléchargés.
+* `frontend/` : Actifs statiques du frontend (HTML, CSS, JS).
+* `bench_go/` : Implémentation Go du client de benchmark (en cours de développement).
+* `config/` : Fichiers de configuration YAML pour divers modules (types de périphériques, emplacements).
+* `docs/` : Documentation complète du projet.
+* `scripts/` : Scripts utilitaires.
+* `docker-compose.yml` : Définition des services (backend, frontend/nginx).
+* `.env.example` : Modèle pour les variables d'environnement.
+
+## Composants Clés
+
+### Backend (FastAPI)
+Le backend expose une API REST pour :
+* Recevoir les données de benchmark via un payload JSON.
+* Servir les données au tableau de bord frontend.
+* Gérer l'inventaire des périphériques.
+* Gérer les téléchargements de fichiers (images, docs).
+
+Il utilise **deux bases de données SQLite** :
+1. `data.db` : Pour les benchmarks, les appareils et les documents associés.
+2. `peripherals.db` : Spécifiquement pour le module d'inventaire des périphériques.
+
+### Frontend (JS Vanilla)
+Un tableau de bord léger stylisé avec le thème **Monokai Dark**. Il interagit avec l'API backend pour afficher des tableaux, des détails et des formulaires. Aucun build n'est requis ; il est servi directement par Nginx.
+
+### Client de Bench (Bash)
+Le script `bench.sh` est exécuté sur la machine cible. Il lance des outils comme `sysbench`, `fio`, `iperf3` et `glmark2`, puis envoie les résultats à l'API backend.
+
+### Module Périphériques
+Un ensemble de fonctionnalités distinctes pour la gestion des articles en inventaire. Il comprend :
+* Gestion hiérarchique des emplacements.
+* Génération de QR codes (librairie `qrcode`).
+* Traitement d'images (librairie `Pillow`) pour les vignettes (thumbnails).
+* Importation automatisée depuis `lsusb`.
+
+## Développement & Utilisation
+
+### Installation
+1. **Cloner :** `git clone ...`
+2. **Installer :** Lancer `./install.sh` (automatise la création du `.env` et la configuration) OU configuration manuelle via Docker Compose.
+3. **Lancer :** `docker compose up -d`
+
+### Variables d'Environnement
+Variables clés dans le `.env` :
+* `API_TOKEN` : Jeton secret pour authentifier les clients de benchmark.
+* `DATABASE_URL` : Chemin vers la base de données SQLite principale.
+* `PERIPHERALS_DB_URL` : Chemin vers la base de données SQLite des périphériques.
+* `UPLOAD_DIR` : Chemin pour le stockage des fichiers.
+
+### Exécuter un Benchmark
+Exécuter sur la machine cible :
+```bash
+curl -s /scripts/bench.sh | bash -s -- --server /api/benchmark --token --device
+```
+
+### Documentation
+Une documentation exhaustive est disponible dans `docs/`, notamment :
+* `06_backend_architecture.md` : Détails sur l'architecture backend.
+* `README_PERIPHERALS.md` : Guide pour le module périphériques.
+* `02_model_donnees.md` : Schéma de la base de données.
+
+## Conventions de Codage
+* **Python :** Les "type hints" sont largement utilisés (modèles Pydantic).
+* **Style :** Respecte le standard PEP 8.
+* **Commits :** Messages descriptifs.
\ No newline at end of file
diff --git a/frontend-creator.skill b/frontend-creator.skill
new file mode 100644
index 0000000..026a5fa
Binary files /dev/null and b/frontend-creator.skill differ