4. Moléculaires
Composants génériques d'affichage de données.
4.1 — Table sortable
Cliquez l'en-tête pour trier.
| 2026-001 | Dupont | D7 DPE | 2026-04-12 | Validé |
| 2026-002 | Martin | D1 CREP | 2026-04-18 | En cours |
| 2026-003 | Bernard | D5 Élec | 2026-04-22 | Planifié |
| 2026-004 | Lefèvre | D2 Amiante | 2026-04-25 | Rejeté |
| 2026-005 | Dubois | D8 Carrez | 2026-04-28 | Validé |
| 2026-006 | Moreau | D9 Assain. | 2026-05-01 | Brouillon |
.gd-table-wrap > .gd-table · entêtes : .gd-table-sort + .gd-table-sort-icon · états .gd-table-sort-asc / -desc
4.2 — Breadcrumb (fil d'Ariane)
.gd-breadcrumb > .gd-breadcrumb-item · liens .gd-breadcrumb-link · page courante .gd-breadcrumb-current
4.3 — Pagination
.gd-pagination > .gd-pagination-btn · état actif .gd-pagination-active · .gd-pagination-ellipsis pour …
4.4 — Progress (linéaire + circulaire)
Visite terrain
82 %
Saisie rapport
45 %
Quota mensuel ADEME
12 %
25%
Initial
60%
En cours
95%
Quasi prêt
linéaire : .gd-progress + variants -sm/-lg/-success/-warn/-danger · circulaire : .gd-progress-circle + style="--gd-progress-value: N"
4.5 — Stepper horizontal
✓
Mission
✓
Visite terrain
3
Rapport
4
Envoi client
5
Signature
.gd-stepper > .gd-stepper-step (.-done | .-active) > .gd-stepper-circle + .gd-stepper-label
6. Métier diag
Composants spécifiques au domaine diagnostic immobilier — codes module LICIEL D1→D9.
6.1 — Diag status pill
D1CREP / Plomb
D2Amiante
D3Termites
D4Gaz
D5Électrique
D7DPE
D8Carrez
D9Assainissement
Variante taille — sm
D1CREP
D4Gaz
D7DPE
D8Carrez
.gd-diag-pill · variants .gd-diag-pill-d1…d9 · taille .gd-diag-pill-sm
6.2 — Photo grid terrain (responsive 4 → 2 → 1 col)
.gd-photo-grid > .gd-photo-card > img + .gd-photo-caption (.gd-photo-tag + .gd-photo-desc)
6.3 — DPE label interactif (étiquette ADEME A→G)
Cliquez pour activer une classe.
Classe sélectionnée : D (181 – 250 kWh/m².an)
.gd-dpe-label > .gd-dpe-bar.gd-dpe-bar-{a..g} · état actif : .gd-dpe-bar-active