Simulateur Base ou Heures Creuses

Introduction

Simulateur Heures Creuses est un outil interactif et gratuit qui répond à une question simple que presque personne ne calcule : l'option Heures Pleines / Heures Creuses est-elle réellement plus avantageuse que l'option Base ?

Le calcul se fait entièrement dans le navigateur, y compris la lecture d'un fichier CSV Enedis/Linky : aucune donnée de consommation n'est envoyée au serveur.

Le simulateur est pré-rempli avec les tarifs réglementés d'EDF de juillet 2026 pour un compteur 6 kVA (Base environ 0,1940 €/kWh, HP environ 0,2065 €/kWh, HC environ 0,1579 €/kWh, abonnement environ 187,80 €/an), toutes les valeurs restant modifiables.

Retrouver ici le simulateur de coût heures pleines heures creuses.

Fonctionnalités clés

1. Seuil de rentabilité

Calcul du seuil : à partir des tarifs (abonnements et prix du kWh des deux options), calcule le pourcentage minimal de consommation en heures creuses au-delà duquel l'offre HP/HC devient rentable.
Résultat visualisé sur une jauge 0–100 %.

2. Ma situation

Comparaison réelle : compare le coût d'une période donnée (consommation HP et HC connues) avec ce qu'aurait coûté la même consommation en option Base.
Économie ou perte affichée en mensuel et en annualisé.

3. Import CSV Enedis / Linky

Analyse d'un export réel de consommation, avec détection automatique du séparateur et du format (date + kWh, ou Début/Fin + puissance kW avec conversion en énergie).
Sélection des colonnes et définition des plages heures creuses via un cadran 24 h interactif en SVG, ou en saisie texte.
Prorata de l'abonnement sur la période couverte par l'export.
Rapport détaillé : lignes ignorées expliquées, hypothèses de calcul affichées.

4. Confidentialité

Calcul intégral côté navigateur, y compris la lecture du CSV : aucune donnée de consommation n'est transmise au serveur.

Architecture

Le contrôleur Symfony rend côté serveur le contenu indexable en Twig (hero, contexte tarifaire, FAQ). Le simulateur lui-même est un composant Vue (Composition API), monté dans cette page via Symfony UX Vue. Tout le calcul, y compris le parsing du CSV, s'exécute côté client : le backend se limite à servir la coquille de la page et son contenu SEO.

Stack technique

Frontend

Vue monté via Symfony UX Vue
CSS scopé, palette dédiée jour/nuit (heures pleines ambre, heures creuses turquoise)
SVG généré dynamiquement pour le cadran horaire, la jauge de seuil et les barres de comparaison

Backend

Symfony
Rendu Twig serveur pour le contenu indexable (hero, contexte tarifaire, FAQ)

SEO & outillage

JSON-LD (WebApplication, BreadcrumbList, FAQPage)
Meta description dédiée, entrée sitemap
Maillage interne bidirectionnel avec l'article « Base ou heures creuses : le calcul que presque personne ne fait »

Défis techniques relevés

Parsing CSV robuste : détecter automatiquement le délimiteur (; ou ,), scorer les colonnes pour identifier date et nombre, gérer les dates françaises (DD/MM/YYYY) et ISO, les décimales à virgule française, et le changement d'heure été/hiver (lignes à durée négative ignorées et expliquées plutôt que de fausser le calcul).
Cadran horaire accessible : le sélecteur de plages heures creuses en SVG reste utilisable au clavier (role="button", aria-label sur chaque wedge), en plus du clic et de la saisie texte.
Calcul 100 % client : faire tenir la détection de format, le parsing et les calculs de coût entièrement dans le navigateur, sans jamais transmettre la consommation au serveur.
Maillage interne pensé pour le SEO : lien du simulateur vers l'article associé déjà en place (contexte tarifaire + bouton en bas de page) ; lien retour de l'article vers le simulateur, avec ancre descriptive du type « Faites le calcul avec vos propres chiffres grâce au simulateur Base ou Heures Creuses », pour renforcer les deux pages mutuellement.

Conclusion

Simulateur Heures Creuses répond à une question de tarification concrète avec trois angles de calcul complémentaires, du seuil théorique à l'analyse d'un export de consommation réel, sans jamais faire transiter les données de l'utilisateur par un serveur. Le contenu reste indexable grâce au rendu Twig et aux données structurées, pendant que l'interaction se passe entièrement côté client en Vue 3.