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

<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

<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

<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

<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`

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

#abattementSection,
#cachetsGroup,
#professionBlock {
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin-top: 12px !important;
  border: none !important;
}

📊 Avantages

Meilleure lisibilité : Les champs sont visuellement groupés par thématique
Navigation facilitée : L'utilisateur comprend mieux la structure du formulaire
Hiérarchie claire : Séparation visuelle entre les différentes étapes
Cohérence : Toutes les sections ont le même style (background clair + bordure)
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.

3.5 KiB Raw Blame History