125 lines
3.5 KiB
Markdown
125 lines
3.5 KiB
Markdown
# Organisation du formulaire simulateur en sections groupées
|
|
|
|
## 🎯 Objectif
|
|
|
|
Regrouper les champs du formulaire du simulateur dans des sous-cards thématiques pour améliorer l'organisation visuelle et l'expérience utilisateur.
|
|
|
|
## 📋 Structure avant
|
|
|
|
Tous les champs étaient affichés de manière linéaire sans regroupement visuel clair :
|
|
- Convention Collective
|
|
- Catégorie
|
|
- Statut
|
|
- Abattement (avec son propre style de card)
|
|
- Cachets (avec son propre style de card)
|
|
- Heures
|
|
- Dates
|
|
- Montant
|
|
- Type de rémunération
|
|
|
|
## ✅ Structure après
|
|
|
|
Les champs sont maintenant organisés en **4 sections thématiques** :
|
|
|
|
### Section 1 : CCN, Catégorie, Statut
|
|
```html
|
|
<div class="form-section">
|
|
- Convention Collective
|
|
- Catégorie (Artiste/Technicien)
|
|
- Statut (non-cadre/cadre)
|
|
</div>
|
|
```
|
|
**Logique** : Informations de base sur le type de contrat et le profil du salarié
|
|
|
|
### Section 2 : Abattement
|
|
```html
|
|
<div id="abattementSection" class="form-section">
|
|
- Question abattement (Oui/Non)
|
|
- Profession du salarié (si abattement choisi)
|
|
</div>
|
|
```
|
|
**Logique** : Options fiscales spécifiques aux artistes (displayed only for artists)
|
|
|
|
### Section 3 : Cachets, Heures, Dates
|
|
```html
|
|
<div class="form-section">
|
|
- Nombre de cachets
|
|
- Nombre d'heures
|
|
- Dates de travail
|
|
</div>
|
|
```
|
|
**Logique** : Volume de travail et période d'emploi
|
|
|
|
### Section 4 : Rémunération et Type
|
|
```html
|
|
<div class="form-section">
|
|
- Montant total (€)
|
|
- Type de rémunération (Brut/Net/Coût)
|
|
</div>
|
|
```
|
|
**Logique** : Informations financières et mode de calcul
|
|
|
|
## 🎨 Style CSS
|
|
|
|
### Nouvelle classe `.form-section`
|
|
```css
|
|
.form-section {
|
|
padding: 16px !important;
|
|
background: #f8fafc !important; /* Slate-50 */
|
|
border-radius: 8px !important;
|
|
margin-top: 16px !important;
|
|
border: 1px solid #e2e8f0 !important; /* Slate-200 */
|
|
}
|
|
|
|
.form-section:first-of-type {
|
|
margin-top: 0 !important; /* Pas de marge pour la première section */
|
|
}
|
|
```
|
|
|
|
### Ajustement des styles existants
|
|
Les anciens styles pour `#abattementSection`, `#cachetsGroup`, et `#professionBlock` ont été réinitialisés car ces éléments sont maintenant contenus dans des `.form-section` :
|
|
|
|
```css
|
|
#abattementSection,
|
|
#cachetsGroup,
|
|
#professionBlock {
|
|
padding: 0 !important;
|
|
background: transparent !important;
|
|
border-radius: 0 !important;
|
|
margin-top: 12px !important;
|
|
border: none !important;
|
|
}
|
|
```
|
|
|
|
## 📊 Avantages
|
|
|
|
1. **Meilleure lisibilité** : Les champs sont visuellement groupés par thématique
|
|
2. **Navigation facilitée** : L'utilisateur comprend mieux la structure du formulaire
|
|
3. **Hiérarchie claire** : Séparation visuelle entre les différentes étapes
|
|
4. **Cohérence** : Toutes les sections ont le même style (background clair + bordure)
|
|
5. **Compact** : Réduction de l'espace visuel tout en gardant de l'aération
|
|
|
|
## 🔧 Fichier modifié
|
|
|
|
- `/public/simulateur-embed.html`
|
|
- Restructuration HTML (lignes 15-160 environ)
|
|
- Ajout CSS `.form-section` (lignes 1497-1520 environ)
|
|
|
|
## ✅ Compatibilité
|
|
|
|
- ✅ Logique JavaScript inchangée (tous les IDs sont préservés)
|
|
- ✅ Fonctionnalités de show/hide préservées
|
|
- ✅ Popovers Bootstrap conservés
|
|
- ✅ Flatpickr fonctionnel
|
|
- ✅ Responsive design maintenu
|
|
|
|
## 🎯 Résultat visuel
|
|
|
|
Chaque section apparaît maintenant comme une "card" subtile avec :
|
|
- Background : `#f8fafc` (gris très clair)
|
|
- Border : `1px solid #e2e8f0` (gris clair)
|
|
- Border-radius : `8px`
|
|
- Padding : `16px`
|
|
- Espacement entre sections : `16px`
|
|
|
|
Les sections s'empilent verticalement avec un espacement cohérent, créant une hiérarchie visuelle claire et moderne.
|