Fiche Descriptive Complète : Budget Garde-Robe Couple

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template Budget_Garde_Robe_Couple_500_mois.html

Version 1.0.0

Date de création 19/03/2026

Auteur / Designer Refoia Jeremy Tech

Type de page Dashboard de Planification Budgétaire / Calculateur

Objectif principal Visualiser la répartition annuelle d’un budget mode de 500 €/mois.

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template propose une interface de type tableau de bord financier structurée pour aider un couple à gérer ses achats vestimentaires sur l’année. Il combine des indicateurs clés (KPIs) sous forme de cartes colorées et un tableau détaillé simulant les flux financiers, incluant la gestion des reports de budget pour les périodes de soldes.

📌 Public cible (Persona)

👤 Couples souhaitant optimiser leurs dépenses de prêt-à-porter.

👤 Utilisateurs soucieux de leur budget cherchant à concilier qualité et économies.

👤 Planificateurs utilisant des outils visuels pour anticiper les dépenses saisonnières.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5 (Sémantique simplifiée)

Framework CSS : CSS Pur (Internal Stylesheet)

Framework JS : Aucun (Statique)

Browsers ciblés : Chrome ✅ Firefox ✅ Safari ✅ Edge ✅

Responsive : Partiel (Utilisation de CSS Grid pour les cartes, tableau avec défilement naturel)

📦 Dépendances / Assets

Typographie : Segoe UI, Tahoma, Geneva, Verdana (Web Safe Fonts).

Icônes : Aucune (Utilisation de styles de couleurs pour la distinction visuelle).

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 budget_mensuel int ✅ Oui Montant alloué par mois (500 €).

2 items_table array ✅ Oui Données mensuelles (articles, prix, dépenses).

3 total_annuel_unites int ✅ Oui Somme totale des articles achetés par catégorie.

🧱 STRUCTURE DU FICHIER — DOM

Budget_Garde_Robe_Couple_500_mois.html

📌 : Styles internes définissant le look « Excel-like » (vert pour les headers, gris pour les bordures).

📌

🏗️ .container : Conteneur principal centré (max 1000px).

🏗️ .summary-cards : Grille de 3 colonnes affichant le Budget Mensuel, le Total Annuel et l’Objectif.

🏗️ .excel-table : Table HTML structurée :

: En-têtes avec fond vert sombre (#217346).

: Lignes de données avec alternance de couleurs (zebra-striping).

.total-row : Ligne de pied de tableau avec fond vert clair pour le bilan.

🎨 CHARTE GRAPHIQUE & DESIGN SYSTEM

🎨 Palette de Couleurs

Primaire (Excel Spirit) : #217346 (Vert Excel pour les entêtes).

Statuts / Cartes :

#3498db (Bleu) : Information neutre / Budget.

#27ae60 (Vert) : Succès / Totalité.

#e67e22 (Orange) : Focus / Objectif.

Fond : #f4f7f6 (Gris très clair pour le confort visuel).

♿ ACCESSIBILITÉ & SEO

Hiérarchie : Utilisation correcte d’un

unique.

Lisibilité : Contrastes élevés entre le texte noir/blanc et les fonds colorés.

Sémantique : Utilisation des balises

et

pour faciliter la lecture par les lecteurs d’écran sur les données tabulaires.

🧪 TESTS & VALIDATION

# Cas de test Action Résultat attendu

1 Cohérence des totaux Somme des colonnes Le total doit correspondre à 3 475 € de dépenses.

2 Affichage Mobile Réduire la largeur Les cartes passent en colonne via la grille adaptative.

3 Lisibilité Tableau Vérifier le contraste Le texte blanc sur fond vert #217346 doit être lisible.

📝 EXEMPLE D’EXTRAIT CSS (LOGIQUE DE STYLE)

CSS

/* Style Tableur Excel appliqué au template */

.excel-table th {

background-color: #217346;

color: white;

padding: 10px;

border: 1px solid #1a5c38;

}

.excel-table tr:nth-child(even) {

background-color: #f9f9f9;

}

📌 Fiche générée par — Agent IA Refoia Jeremy Tech

🔖 Usage : Documentation de projet / Suivi de budget personnel

Would you like me to generate a version of this template with a dynamic JavaScript calculator for these budgets?

Gemini est une IA et peut se tromper, y compris sur des personnes. Votre confidentialité et GeminiS’ouvre dans une nouvelle fenêtre

Copier la réponse