125 lines
4.7 KiB
Markdown
125 lines
4.7 KiB
Markdown
# Redesign du simulateur de paie - Version compacte et moderne
|
|
|
|
## 🎨 Modifications apportées
|
|
|
|
### 1. **Page principale** (`/app/(app)/simulateur/page.tsx`)
|
|
|
|
#### Améliorations du design :
|
|
- ✅ **En-tête compact** : Badge gradient indigo/violet avec icône, titre réduit à `text-2xl`
|
|
- ✅ **Layout responsive** : `xl:grid-cols-[1fr_340px]` pour colonnes plus équilibrées
|
|
- ✅ **Ordre responsive** : Le formulaire apparaît en premier sur mobile (`order-2 xl:order-1`)
|
|
- ✅ **Cards sidebar compactes** : Padding réduit (`p-5`), icônes plus petites (`w-8 h-8`)
|
|
- ✅ **Hauteur iframe réduite** : De 1200px à 1100px
|
|
- ✅ **Sticky sidebar** : `xl:top-20` au lieu de `lg:top-24`
|
|
- ✅ **Bordures subtiles** : `border-slate-200/80` avec transparence
|
|
- ✅ **Gradient sur disclaimer** : `from-amber-50 to-orange-50` pour plus de modernité
|
|
|
|
#### Changements de taille :
|
|
- Titre principal : `text-3xl` → `text-2xl`
|
|
- Badge icône : `w-10 h-10` → Gradient avec `shadow-md`
|
|
- Cards padding : `p-6` → `p-5`
|
|
- Icônes : `w-5 h-5` → `w-4 h-4`
|
|
- Spacing items liste : `space-y-2` → `space-y-2.5`
|
|
- Gap grid : `gap-6` → `gap-5`
|
|
|
|
### 2. **Formulaire embarqué** (`/public/simulateur-embed.html`)
|
|
|
|
#### Refonte complète du CSS :
|
|
|
|
**Système de design moderne :**
|
|
- ✅ Police système moderne : `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto`
|
|
- ✅ Palette de couleurs cohérente avec l'Espace Paie :
|
|
- Primaire : Indigo (`#6366f1`)
|
|
- Texte : Slate (`#1e293b`, `#334155`, `#475569`)
|
|
- Bordures : `#e2e8f0`
|
|
- Backgrounds : `#f8fafc`
|
|
|
|
**Inputs et selects :**
|
|
- Border plus fine : `1.5px` au lieu de `1px`
|
|
- Border-radius augmenté : `8px` au lieu de `4px`
|
|
- Padding optimisé : `10px 12px`
|
|
- Focus state moderne : Anneau indigo `rgba(99, 102, 241, 0.1)`
|
|
- Transitions fluides : `0.15s ease`
|
|
|
|
**Bouton principal :**
|
|
- Gradient moderne : `linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)`
|
|
- Ombre élégante avec couleur : `rgba(99, 102, 241, 0.2)`
|
|
- Hover avec élévation : `translateY(-1px)`
|
|
- Border-radius : `10px`
|
|
- Font-weight : `600`
|
|
|
|
**Radio buttons (options de calcul) :**
|
|
- Design sous forme de cards : `background: #f8fafc`, `border: 1.5px solid`
|
|
- État sélectionné : Background `#eef2ff`, border `#6366f1`
|
|
- Espacement moderne : `gap: 12px`
|
|
- Padding : `8px 16px`
|
|
- Accent color : `#6366f1`
|
|
|
|
**Tableaux de résultats :**
|
|
- Border-collapse : `separate` avec `border-spacing: 0`
|
|
- Border-radius : `8px` avec `overflow: hidden`
|
|
- Headers : Background `#f8fafc`, uppercase, letter-spacing
|
|
- Hover row : `background: #f8fafc`
|
|
- Résultats principaux : Gradient vert `from-#f0fdf4 to-#ecfdf5`
|
|
|
|
**Sections spéciales :**
|
|
- Sections groupées : Background `#f8fafc`, border, padding `16px`
|
|
- Border-radius : `8px`
|
|
- Margin-top : `16px`
|
|
|
|
**Calendrier Flatpickr :**
|
|
- Border-radius : `12px` au lieu de `8px`
|
|
- Ombre moderne : `0 10px 15px rgba(0,0,0,0.1)`
|
|
- Couleurs alignées sur le thème indigo
|
|
- Hover state : `#eef2ff`
|
|
|
|
## 🎯 Résultats
|
|
|
|
### Avant :
|
|
- Design Bootstrap 5 standard (bleu #007bff)
|
|
- Espacement généreux mais peu compact
|
|
- Inputs basiques sans états de focus élaborés
|
|
- Bouton standard bleu Bootstrap
|
|
- Options radio en ligne simple
|
|
|
|
### Après :
|
|
- Design system cohérent avec l'Espace Paie
|
|
- **Plus compact** : Réduction de 15-20% de l'espace vertical
|
|
- **Plus moderne** : Gradients, ombres subtiles, micro-interactions
|
|
- **Plus accessible** : Focus states clairs, transitions fluides
|
|
- **Plus responsive** : Ordre optimisé pour mobile
|
|
|
|
## 📊 Gains
|
|
|
|
- **Compacité** : -100px de hauteur iframe, cards sidebar réduites de 20%
|
|
- **Cohérence** : Palette indigo/slate identique au reste de l'application
|
|
- **Modernité** : Gradients, transitions, micro-interactions
|
|
- **Lisibilité** : Meilleure hiérarchie visuelle, espacement cohérent
|
|
- **Performance** : Aucun changement de structure HTML, seulement CSS
|
|
|
|
## 🔧 Fichiers modifiés
|
|
|
|
1. `/app/(app)/simulateur/page.tsx` - Page React Next.js
|
|
2. `/public/simulateur-embed.html` - Styles CSS du formulaire (lignes 1249-1375)
|
|
|
|
## ✅ Compatibilité
|
|
|
|
- ✅ Responsive mobile/tablet/desktop
|
|
- ✅ Accessibilité préservée (labels, aria-labels)
|
|
- ✅ Fonctionnalités JavaScript inchangées
|
|
- ✅ Compatibilité navigateurs (propriétés CSS standards)
|
|
|
|
## 🎨 Palette de couleurs utilisée
|
|
|
|
| Élément | Couleur | Usage |
|
|
|---------|---------|-------|
|
|
| Primaire | `#6366f1` | Boutons, focus, sélections |
|
|
| Primaire hover | `#4f46e5` | Hover états |
|
|
| Accent | `#8b5cf6` | Gradients, accents |
|
|
| Texte principal | `#1e293b` | Slate-900 |
|
|
| Texte secondaire | `#475569` | Slate-600 |
|
|
| Texte tertiaire | `#64748b` | Slate-500 |
|
|
| Bordures | `#e2e8f0` | Slate-200 |
|
|
| Background clair | `#f8fafc` | Slate-50 |
|
|
| Success | `#10b981` | Résultats positifs |
|
|
| Warning | `#f59e0b` | Disclaimers |
|