donnees_20260325_151206

Fiche Descriptive Complète : Planification Annuelle – Famille Nombreuse

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template sdhuzehduz41.html

Version 1.1.0 (Calculateur dynamique)

Date de création 25 Mars 2026

Auteur / Designer Refoia Jeremy Tech

Type de page Dashboard de Calcul / Simulateur de Budget

Objectif principal Estimer les dépenses d’achats groupés en temps réel

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template est un simulateur de budget interactif dédié à la gestion des achats annuels pour une famille. Il permet de :

Visualiser des promotions spécifiques sur des articles de sport et techniques.

Saisir des quantités pour calculer instantanément le total des dépenses.

Suivre le reste à charge sur un budget initial de 800€ via une barre de progression dynamique dont la couleur change selon l’état du portefeuille (Vert → Orange → Rouge → Noir en cas de dépassement).

📌 Public cible (Persona)

👤 Parents de familles nombreuses cherchant à optimiser leur budget de rentrée ou annuel.

👤 Gestionnaires de foyer souhaitant une interface simple pour simuler des scénarios d’achat.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5

Framework CSS : Bootstrap 5.3.0

Framework JS : Vanilla JS (Logique de calcul mathématique)

Responsive : ✅ Oui (Grille Bootstrap row-cols)

📦 Dépendances / Assets

HTML

📥 ENTRÉES — CONTENU DYNAMIQUE

# Variable (data-attribute) Type Obligatoire Description

1 data-price float ✅ Oui Prix unitaire après promotion utilisé par le script JS

2 INITIAL_BUDGET int ✅ Oui Constante JS fixée à 800€ pour le calcul du restant

3 qty (input value) int ✅ Oui Quantité saisie par l’utilisateur

📤 INTERACTIONS & SORTIES

🖱️ Événements Utilisateur

Input (Saisie clavier/flèches) : Déclenche le recalcul immédiat du total et de la barre de progression.

Hover sur Card : Effet de zoom (scale(1.02)) grâce à la classe .promo-card.

📂 Logique de Sortie (Feedback Visuel)

Calcul du reste : Budgetrestant​=800−∑(Prix×Quantiteˊ)

Changement de couleur :

> 300€ restant : Vert (Succès)

100€ – 300€ restant : Orange (Attention)

< 100€ restant : Rouge (Critique) < 0€ : Noir + Souligné (Dépassement) 🧱 STRUCTURE DU FICHIER — DOM sdhuzehduz41.html 📌 : Configuration Meta et Styles personnalisés (Variables CSS pour le Rouge Promo et Vert Économie).

📌 :

🏗️

: Titre principal et rappel du budget global.

🏗️

(Row) :

Col-lg-8 (Gauche) :

Grille de cards produits (Baskets, Parka, Legging).

Tableau récapitulatif des gains par unité.

Col-lg-4 (Droite) :

Sticky-top Card : Le simulateur de budget qui reste visible au scroll.

Barre de progression Bootstrap.

📌 : Logique de calcul itérative sur tous les inputs .qty.

🎨 CHARTE GRAPHIQUE

Couleurs spécifiques :

–promo-red: #d90429 (Alertes et prix promo)

–saving-green: #2b9348 (Indicateurs d’économie)

Bordures : Style « Dashed » (pointillé) sur les cartes produits pour rappeler les coupons de réduction.

🧪 TESTS & VALIDATION

# Cas de test Action Résultat attendu

1 Calcul Saisir 2 Baskets (39€) Total affiche 78,00€, Reste 722,00€

2 Limite Atteindre 801€ de dépenses Barre devient noire, texte souligné en rouge

3 Sécurité Saisir une valeur négative Le script utilise Math.max(0) pour forcer 0

4 Responsive Réduire la fenêtre La sidebar de budget passe sous les produits

📌 INSTRUCTIONS SPÉCIALES

JS : La manipulation du DOM se fait via textContent pour éviter les failles XSS.

CSS : Utilisation de position: sticky sur le simulateur pour garantir une UX fluide lors de longues listes de produits.

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

Usage : Documentation de l’outil de planification familiale.