📋 Fiche Descriptive : Rentrée Malin

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template rentree_malin_budget_famille.html

Version 1.0.0

Date de création 25 Mars 2026

Auteur / Designer Gemini (Inspiré par Refoia Jeremy Tech)

Type de page Dashboard de gestion budgétaire / E-commerce

Objectif principal Aider les familles à visualiser leur « reste à vivre » tout en proposant des articles scolaires en promotion.

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template est un outil d’aide à la décision pour la rentrée scolaire. Il permet de :

Simuler un budget : Affiche un budget initial versus un « reste à vivre » calculé dynamiquement (visuel statique ici).

Présenter des essentiels : Une grille de produits (chaussettes, ceintures, gants) avec bouton d’ajout au panier.

Comparer les prix : Un tableau comparatif montrant les économies réalisées grâce aux soldes (Impact Soldes).

📌 Public cible (Persona)

👤 Parents cherchant à optimiser les dépenses de rentrée pour plusieurs enfants.

👤 Gestionnaires de budget familial sensibles aux remises et aux pourcentages d’économie.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5 sémantique.

Framework CSS : Aucun (CSS Pur / Vanilla CSS).

Responsive : ✅ Oui (Utilisation de grid-template-columns: repeat(auto-fit, …)).

Browsers ciblés : Chrome, Firefox, Safari, Edge.

📦 Dépendances / Assets

Typographie : ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif (Polices système).

Icônes : Aucune dépendance externe (allègement du temps de chargement).

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 budget_initial float ✅ Oui Montant total alloué (ex: 450€).

2 reste_a_vivre float ✅ Oui Montant après déduction des simulations.

3 liste_accessoires array ✅ Oui Liste des produits dans la grille « Essentiels ».

4 tableau_soldes array ✅ Oui Données pour le comparateur (Ancien prix, Nouveau, %).

🧱 STRUCTURE DU FICHIER — DOM

Plaintext

index.html

│

├── 📌(Meta, Styles internes :root)

│

└── 📌

│

├── 🏗️

│ └──

« Rentrée Scolaire 2026 » +

│

├── 🏗️

(Conteneur principal)

│ │

│ ├── 🧱

│ │ ├── Info Budget Initial

│ │ └── Valeur « Reste à vivre » (.budget-value)

│ │

│ ├── 🧱

« Accessoires Essentiels »

│ ├── 🧱

│ │ └──

(x3 : Chaussettes, Ceintures, Gants)

│ │

│ ├── 🧱

« Comparateur : Impact Soldes »

│ └── 🧱

│ ├── Header Row (Article, Avant, Maintenant, Économie)

│ └── Data Rows (.old-price, .new-price, .save-tag)

│

└── 📌 (Aucun script JS externe détecté)

🎨 CHARTE GRAPHIQUE & DESIGN SYSTEM

🎨 Palette de Couleurs

CSS

:root {

–primary: #2c3e50; /* Bleu nuit (Confiance, Professionnalisme) */

–accent: #27ae60; /* Vert émeraude (Économie, Validation) */

–warning: #e74c3c; /* Rouge corail (Prix barrés, Alertes) */

–bg: #f8f9fa; /* Gris très clair (Fond neutre) */

–white: #ffffff; /* Blanc (Surfaces des cartes) */

}

📐 Mise en Page — Layout

Largeur Max : 900px centré.

Grille Accessoires : Responsive auto-adaptative (min 250px par carte).

Tableau : Utilisation de display: contents sur les lignes pour maintenir l’alignement Grid.

♿ ACCESSIBILITÉ & SEO

Hiérarchie : Utilisation correcte de h1 pour le titre unique et h2 pour les sections.

Contrastes : Le texte blanc sur fond –primary (#2c3e50) offre une excellente lisibilité.

Sémantique : Utilisation de

,

, et pour les étiquettes de prix.🧪 TESTS & VALIDATION (Checklist)

[ ] Responsive : Vérifier que le tableau de comparaison ne déborde pas sur mobile (utilisation de overflow: hidden).

[ ] Calculs : Vérifier que le -30% correspond bien à la différence entre 60€ et 42€.

[ ] Interactivité : Tester l’état :hover des boutons « Ajouter au panier ».