# 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.