# Plan de preparation des changements - Energy Check

Ce document prepare les evolutions suivantes, sans implementation immediate :
- ajouter une jauge de progression pendant le questionnaire
- permettre le changement de langue en cours de questionnaire
- adapter polices, couleurs et textes

## Portee
- Front utilisateur quiz (Vue)
- Traductions (Laravel `lang/*`)
- Styles globaux et composants quiz (Sass)
- Verification du parcours admin si necessaire pour les contenus

## 1) Jauge de progression

### Objectif
Afficher clairement l'avancement :
- progression dans l'etape courante
- progression globale du quiz

### Fichiers a modifier
- `resources/js/views/quizz/show.vue`
- `resources/sass/app.scss`

### Strategie technique
1. Ajouter un bloc UI de progression dans le template du quiz.
2. Ajouter des `computed` pour calculer :
   - `% etape` = nombre de reponses renseignees / nombre de questions de l'etape
   - `% global` = etape courante / nombre total d'etapes
3. Reutiliser les classes Bootstrap si possible, sinon ajouter une classe CSS dediee.
4. Garder la logique existante `nextDisabled` pour ne pas changer le comportement fonctionnel.

### Points d'attention
- La progression ne doit pas casser quand on change d'etape (retour/avance).
- Gestion mobile : la jauge doit rester lisible sur petit ecran.

## 2) Changement de langue pendant les questions

### Objectif
Permettre a l'utilisateur de basculer de langue a tout moment pendant le quiz, sans perte de reponses.

### Etat actuel
La base est deja presente dans `show.vue` avec :
- `currentLocale`
- boutons de langue (`.button-langs`)
- `translation` et `steps` calcules selon la locale

### Fichiers a verifier / ajuster
- `resources/js/views/quizz/show.vue`
- `app/Http/Controllers/QuizzController.php`
- `config/app.php`
- `lang/en/app.php`, `lang/fr/app.php`, `lang/it/app.php`, `lang/es/app.php`

### Strategie technique
1. Conserver `currentLocale` comme source de verite pour les labels et textes.
2. Verifier que les donnees de reponses restent independantes de la langue (index etapes/questions).
3. S'assurer que les traductions existent pour toutes les cles utilisees dans le front.
4. Uniformiser l'encodage des fichiers de traduction en UTF-8 (important pour FR).

### Points d'attention
- Aucun reset de `responses` lors du switch de langue.
- Garder les memes index de questions entre langues pour eviter les decalages.

## 3) Adaptation polices, couleurs, textes

### Objectif
Avoir un theme visuel coherent et des contenus editoriaux ajustes au contexte.

### Fichiers a modifier
- Styles globaux : `resources/sass/_variables.scss`
- Styles quiz : `resources/sass/app.scss`
- Textes d'interface : `lang/*/app.php`
- Eventuels visuels d'en-tete : `public/img/header-*.png`

### Strategie technique
1. Definir une palette cible (variables Sass) et harmoniser les couleurs des etapes.
2. Choisir une police principale et ajuster tailles/poids lisibilite.
3. Mettre a jour les textes UI (intro, boutons, description, outro, formulaires).
4. Verifier la coherence multilingue (meme structure de cles dans chaque langue).

### Points d'attention
- Compatibilite contraste/couleur (accessibilite de base).
- Eviter les regressions sur les tables colorees du quiz.

## Zones du code les plus impactees

### Impact fort
- `resources/js/views/quizz/show.vue`
- `resources/sass/app.scss`
- `lang/*/app.php`

### Impact moyen
- `resources/sass/_variables.scss`
- `config/app.php`
- `app/Http/Controllers/QuizzController.php`

### Impact faible
- `resources/views/quizz/show.blade.php` (si props front a etendre)

## Plan d'implementation recommande
1. Stabiliser les traductions (cles manquantes + encodage UTF-8).
2. Implementer la jauge (UI + computed + CSS).
3. Finaliser le switch de langue dynamique (tests de non-regression reponses).
4. Appliquer le rafraichissement visuel (polices/couleurs).
5. Faire une passe QA manuelle desktop/mobile + multilingue.

## Tests manuels a prevoir
- Parcours complet en EN/FR/IT/ES.
- Changement de langue a chaque etape.
- Validation du blocage `suivant` tant que les reponses ne sont pas completes.
- Verifier rendu mobile de la jauge.
- Verifier accents/caracteres speciaux dans toutes les langues.

## Commandes utiles (quand implementation)
```powershell
npm run dev
php artisan serve
```

## Notes
- Ce document est volontairement preparatoire.
- Aucune modification fonctionnelle n'est effectuee ici.