Shortcodes énergie : référence des composants

x-sim-taxes

Vue d'ensemble des trois taxes énergie (accise + CTA + TVA) en une seule interface à onglets. Affiche le montant de chaque taxe selon la consommation saisie, avec répartition dans la facture. Idéal pour les pages hub taxes.

<x-sim-taxes />
<x-sim-taxes type="gaz" />

x-sim-accise

Calculatrice en 3 étapes storytelling pour l'accise énergie : profil de consommation → montant de l'accise avec détail → comparaison offres. Variante élec ou gaz.

<x-sim-accise />
<x-sim-accise type="gaz" />

Aperçu non affiché ici — même interface que sim-taxes Step 1/2 mais centré sur l'accise seule.

x-sim-cta

Calculatrice en 3 étapes pour la CTA (Contribution Tarifaire d'Acheminement) : option/puissance → montant CTA avec détail TURPE → offres alternatives. Step 3 appelle l'API énergie en direct.

<x-sim-cta />
<x-sim-cta type="gaz" />

x-sim-tva

Calculatrice en 3 étapes pour la TVA énergie : profil → montant TVA sur chaque composante de la facture → offres alternatives. Depuis le 1er août 2025, TVA unique à 20 % sur l'ensemble de la facture.

<x-sim-tva />
<x-sim-tva type="gaz" />

Même interface que sim-cta mais centrée sur la TVA. Aperçu non dupliqué ici.

x-top-offers

Classement 1–10 des meilleures offres électricité depuis l'Energy Core API, avec prix, économies vs TRV et Selectra Score. Données mises en cache 1 h côté serveur.

<x-top-offers />
<x-top-offers :power="9" :carBase="9000" insee="75056" :limit="5" />

x-tools.grille-tarifaire

Composant officiel d'affichage d'une grille tarifaire pour une offre énergie (électricité ou gaz). Fork local Selectra qui surclasse departments/france-energy/views/tools/grille-tarifaire.blade.php en ajoutant un bloc « Profil de référence » avec 3 métriques (abonnement, prix du kWh, facture estimée) au-dessus de la table, et un surlignage de la ligne correspondant à la puissance par défaut. Gère automatiquement Base, Heures Pleines/Heures Creuses, Tempo, Charge'Heures, EJP, Week-End et le mode gaz par zones.

<x-tools.grille-tarifaire :prices="json_encode($offer['presentPrices'])" />
<x-tools.grille-tarifaire
    :prices="json_encode($offer['presentPrices'])"
    :offerName="$offerName"
    :providerName="$providerName"
    :updatedAt="$certDate"
    :highlightPower="9"
    :highlightCar="9000" />

À noter : le bloc « Profil de référence » avec les 3 métriques ne s'affiche que pour les options simples (Base, Heures Pleines/Heures Creuses). Pour les options complexes (Tempo, Charge'Heures, EJP, gaz par zones), seule la table est affichée — les 3 métriques n'ont pas de sens éditorialement pour ces cas.

x-offer-badge

Badge pill pour qualifier une offre. À utiliser à l'intérieur d'une x-offer.card ou seul pour commenter un tarif dans du texte.

<x-offer-badge variant="green">Électricité verte</x-offer-badge>
<x-offer-badge variant="fixed">Prix fixe</x-offer-badge>
<x-offer-badge variant="indexed">Indexé marché</x-offer-badge>
<x-offer-badge variant="variable">Prix variable</x-offer-badge>
<x-offer-badge variant="trv">Tarif réglementé</x-offer-badge>
<x-offer-badge variant="energy">Énergie</x-offer-badge>

x-fournisseurs-directory

Annuaire à facettes triable et filtrable de tous les fournisseurs actifs sur le marché français — données en direct depuis l'Energy Core API, tri par économies/note/offres via Alpine.js. Utilisé sur la page /energie/fournisseurs. Mettre :fullBleed="false" pour l'imbriquer dans une section d'article (sans bande pleine largeur).

<x-fournisseurs-directory />
<x-fournisseurs-directory energy="gas" :fullBleed="false" />
<x-fournisseurs-directory energy="both" :power="9" :carBase="12000" :fullBleed="false" />

x-energie-fournisseur-avis

Template complet de page avis fournisseur national (réseau Enedis/GRDF). Inclut : note globale, notes par plateforme (Trustpilot, Google…), liste d'avis clients, meilleures offres API, données médiateur, note professionnelle CLEEE, top 3 alternatifs. Données depuis Energy Core + Selectra Reviews API. Cache 1 h.

<x-energie-fournisseur-avis />

Note : la page doit déjà définir $slug dans son bloc @php ou via une route parameter. Sinon le composant lit request()->segment(3).

x-eld-provider

Template page fournisseur pour les Entreprises Locales de Distribution (ELD) — distributeurs de réseau local (Strasbourg, Grenoble, etc.). Affiche zone de couverture, offres locales, avis clients et contacts. Requiert slug et area.

<x-eld-provider
    slug="es-strasbourg"
    area="Strasbourg et 378 communes du Bas-Rhin"
/>

x-outage-map

Carte interactive Leaflet des coupures d'électricité signalées en France, en temps réel. Trois filtres : incidents en cours, rétablis, tout. Les popups affichent le numéro d'urgence Enedis du département concerné. Données agrégées depuis les signalements utilisateurs Selectra.

<x-outage-map />

Aucune prop — la carte se configure par défaut sur le filtre « En cours » et le style popup « Enedis ». Pour adapter ce comportement, créer une variante de wrapper.

x-telephone-urgence

Outil de recherche du numéro d'urgence électricité par commune : autocomplétion sur la base des communes françaises, détection automatique du gestionnaire de réseau (Enedis ou ELD locale : Strasbourg Électricité Réseaux, Gérédis, SRD…), affichage du numéro à composer 24h/24.

<x-telephone-urgence />

Aucune prop. Endpoints utilisés : geo.api.gouv.fr/communes (autocomplete) et /france-energy/api/cities/{insee} (distributeur).

x-tools.signalement-coupure

Formulaire de signalement d'une coupure d'électricité : autocomplétion d'adresse Google Places, étendue de la panne (logement, immeuble, quartier), durée approximative, contact facultatif. Le signalement alimente la carte des incidents.

<x-tools.signalement-coupure />

Aucune prop. Requiert GOOGLE_MAPS_FRONTEND_KEY (ou fallback GOOGLE_MAPS_KEY) dans .env.

x-spot-day-cards

Trois cartes côte à côte affichant les prix spot moyens de la veille (D-1), du jour (D) et du lendemain (D+1) si publié. Bloc d'ouverture des articles d'actualité quotidiens. La carte « demain » reste vide jusqu'à la publication EPEX vers 13h00 CET.

<x-spot-day-cards />
<x-spot-day-cards day="2026-05-26" index="spot_fr" />

Aperçu non rendu sur cette page (composant coûteux côté serveur). À voir en action dans une actualité quotidienne du marché.

x-spot-chart

Histogramme Chart.js du prix horaire de l'électricité (24 barres). L'heure la moins chère est colorée en vert, la plus chère en rouge. Trois métriques au-dessus du graphique : minimum, moyenne, maximum. Powered by le helper Alpine lineChart.

<x-spot-chart />
<x-spot-chart day="tomorrow" />
<x-spot-chart day="2026-05-26" index="spot_fr" />

Aperçu non rendu sur cette page (composant coûteux côté serveur).

x-spot-tomorrow

Bloc dédié à la projection J+1 : tableau heure par heure des prix spot annoncés pour le lendemain, avec mise en évidence des créneaux les plus avantageux. Se rend uniquement si EPEX a publié les 24 heures (sinon : message d'attente). Permet d'organiser une consommation flexible la veille pour le lendemain.

<x-spot-tomorrow />
<x-spot-tomorrow day="2026-05-26" />

Aperçu non rendu sur cette page (composant coûteux côté serveur). À voir en action dans une actualité quotidienne du marché.

x-spot-30d

Graphique en ligne de l'évolution du prix spot moyen sur les 30 derniers jours. Sert à contextualiser le prix du jour : hausse, baisse, comparaison vs moyenne du mois. Powered by lineChart.

<x-spot-30d />
<x-spot-30d :days="14" />

Aperçu non rendu sur cette page (composant coûteux côté serveur).

x-spot-monthly

Vue mensuelle longue : moyenne du prix spot par mois sur tout l'historique disponible. Permet de mettre en perspective les tendances saisonnières et les pics liés aux crises (hiver 2022, hiver 2024…).

<x-spot-monthly />
<x-spot-monthly index="spot_de" />

Aperçu non rendu sur cette page (composant coûteux côté serveur).

x-spot-europe-map

Carte SVG de l'Europe colorée selon le prix spot du jour de chaque pays : vert = moins cher, rouge = plus cher. Chaque pays affiche un chip avec son code à 2 lettres ; un tableau de classement complète sous la carte. Mode zoom plein écran disponible.

<x-spot-europe-map />
<x-spot-europe-map index="spot_fr" />

Le SVG de fond est hébergé sur R2 : https://images.prix-elec.com/maps/europe-map.svg.

Aperçu non rendu sur cette page (composant coûteux côté serveur).

x-spot-calendar

Heatmap calendrier sur 12 mois glissants : chaque jour est une case colorée du vert (prix bas) au rouge (prix élevé). Wrapper autour de x-tools.spot-heatmap du département france-energy. Affiche les écarts hebdomadaires et saisonniers en un coup d'œil.

<x-spot-calendar />

Aperçu non rendu sur cette page (composant coûteux côté serveur).

x-google-discover

CTA "Ne ratez plus aucune actu" avec 2 boutons : Google Discover (suivre Selectra sur Google) et WhatsApp (canal Selectra). Conçu pour les articles d'actualité — remplace l'ancien token Drupal [template:google_discover]. Icônes SVG inlinées, aucune dépendance JS.

<x-google-discover />


<x-google-discover :mobile-only="true" />


<x-google-discover badge="À la une" title="Restez informé en temps réel !" />

x-news-channels

Carte "L'INFO QUI FAIT BAISSER VOTRE FACTURE" avec liste de bénéfices et 3 boutons d'inscription : Email (newsletter Selectra), WhatsApp (canal), Telegram (canal). Remplace l'ancien custom block Drupal [custom_block:Bloc Actu - Chaine Whatsapp Selectra]. Thème success (vert), bordure top épaisse pour signaler l'importance. Une seule par article max.

<x-news-channels />


<x-news-channels
    title="RESTEZ INFORMÉ DES DERNIÈRES AIDES"
    subtitle="Recevez nos alertes en exclusivité." />


<x-news-channels :bullets="[
    ['Nouvelles offres', 'dès leur sortie'],
    ['Comparatifs', 'mis à jour chaque mois'],
    ['Conseils experts', 'directement par message'],
]" />

x-generic-hero-card

Bloc CTA de monétisation pour les pages guides et prix (non fournisseur). Affiche le téléphone Selectra, un lien vers le comparateur Kelwatt et une estimation des économies. Variante stackButtons pour les layouts étroits.

<x-generic-hero-card />
<x-generic-hero-card :stackButtons="true" />

x-sticky-footer-cta

Barre sticky mobile en bas d'écran (visible sur mobile uniquement). Lit les économies et le titre depuis les attributs data- du #hero-card-mobile pour rester synchronisée avec la hero card. Sur les pages fournisseur, passer le slug pour adapter le lien leadsource.

<x-sticky-footer-cta />


<x-sticky-footer-cta :slug="$slug" />

Aperçu non affiché (barre mobile uniquement — visible en dessous de 768 px).

x-review-invite + x-depot-avis

Dépôt d'avis client DS unifié — la bande d'invitation x-review-invite (étoiles cliquables) ouvre le modal x-depot-avis via le store global $store.reviewModal. Soumission vers la Selectra Reviews API. Les deux composants doivent être montés ensemble sur les pages fournisseur. L'endpoint énergie est obligatoire (fail-loud).

<x-review-invite name="EDF" />
<x-depot-avis slug="edf" name="EDF" endpoint="/energie/fournisseurs/edf/reviews" />


<button @click="$store.reviewModal.initialRating = 5; $store.reviewModal.open = true">
    Laisser un avis 5 étoiles
</button>

x-internal-linking (variant cards, auto)

Section d'articles liés générée automatiquement depuis la configuration des clusters dans config/cms.php. Détecte le cluster de la page courante et affiche les autres pages du même groupe. Aucune prop requise — le composant se configure seul via request()->path(). Données mises en cache 24 h.

<x-internal-linking variant="cards" :auto />

x-tools.sim-chauffe-eau

Simulateur du coût annuel d'un chauffe-eau électrique selon volume, type et option tarifaire.

<x-tools.sim-chauffe-eau />

x-sim-facture-electricite

Simulateur de facture annuelle d'électricité selon profil de conso.

<x-sim-facture-electricite />

x-sim-consommation-energie

Estimation de la consommation annuelle d'un logement (élec + gaz).

<x-sim-consommation-energie />

x-tools.sim-estimation-conso

Estimation détaillée de la consommation par poste (chauffage, ECS, électroménager).

<x-tools.sim-estimation-conso />

x-sim-puissance

Détermination de la puissance kVA idéale selon équipements du logement.

<x-sim-puissance />

x-sim-kva

Variante du simulateur de puissance kVA, format compact.

<x-sim-kva />

x-sim-3kva

Simulateur dédié à la puissance 3 kVA (petits logements).

<x-sim-3kva />

x-tools.sim-potentiel-solaire

Estimation du potentiel solaire d'un toit selon ville et surface.

<x-tools.sim-potentiel-solaire />

x-diagnostic-ouverture

Diagnostic d'ouverture de contrat — emménagement, déménagement.

<x-diagnostic-ouverture />

Aperçu non rendu — requiert props de contexte. Voir tools/diagnostic-ouverture.blade.php.

x-calculette-offre

Calculette d'économies par offre, comparée au TRV.

<x-calculette-offre />

Aperçu non rendu — requiert un offer ID. Voir tools/calculette-offre.blade.php.

x-calculette-recharge-ve

Coût de recharge d'un véhicule électrique selon option tarifaire et kilométrage.

<x-calculette-recharge-ve />

Aperçu non rendu — requiert props. Voir tools/calculette-recharge-ve.blade.php.

x-tools.calendrier-options

Calendrier des options tarifaires (Tempo, EJP, Flexiwatt, Zen Flex…) sur une vue annuelle.

<x-tools.calendrier-options />

x-tools.heures-creuses-pdl

Recherche des plages d'heures creuses par PDL (point de livraison).

<x-tools.heures-creuses-pdl />

x-heures-creuses-regimes

Vue d'ensemble des régimes d'heures creuses appliqués par Enedis.

<x-heures-creuses-regimes />

Aperçu non rendu — requiert props. Voir tools/heures-creuses-regimes.blade.php.

x-tools.zone-tarifaire-gaz

Détermination de la zone tarifaire gaz d'une commune (1 à 6).

<x-tools.zone-tarifaire-gaz />

x-tools.maps.distributeurs-gaz

Carte interactive des distributeurs gaz en France (GRDF + ELD).

<x-tools.maps.distributeurs-gaz />

x-tools.spot-heatmap

Heatmap calendrier 12 mois des prix spot. Utilisé par x-spot-calendar.

<x-tools.spot-heatmap />

Aperçu coûteux côté serveur — non rendu ici.

x-tools.spot-pre

Bloc d'aperçu rapide spot — version condensée.

<x-tools.spot-pre />

Aperçu coûteux côté serveur — non rendu ici.

x-tools.tempo.tab-tempo-couleur-jour

Couleur Tempo du jour (rouge/blanc/bleu) avec mise à jour temps réel.

<x-tools.tempo.tab-tempo-couleur-jour />

x-tools.tempo.tab-tempo-predictions

Prévisions Tempo sur les 7 prochains jours.

<x-tools.tempo.tab-tempo-predictions />

x-tools.electricite.tempo-timeline

Timeline horizontale de l'historique Tempo (electricite.net).

<x-tools.electricite.tempo-timeline />

x-tools.electricite.tempo-heatmap

Heatmap annuelle des jours rouges/blancs/bleus Tempo.

<x-tools.electricite.tempo-heatmap />

x-tools.ejp.tab-ejp-jour-demain

Signal EJP du jour et du lendemain.

<x-tools.ejp.tab-ejp-jour-demain />

x-tools.electricite.ejp-heatmap

Heatmap annuelle des jours rouges EJP.

<x-tools.electricite.ejp-heatmap />

x-tools.flexiwatt.tab-flexiwatt-jour-demain

Signal Flexiwatt (Engie) jour + lendemain.

<x-tools.flexiwatt.tab-flexiwatt-jour-demain />

x-tools.zen-flex.tab-zen-flex-jour-demain

Signal Zen Flex (EDF) jour + lendemain.

<x-tools.zen-flex.tab-zen-flex-jour-demain />

x-tools.modulo.tab-modulo-jour-demain

Signal Modulo (Mint) jour + lendemain.

<x-tools.modulo.tab-modulo-jour-demain />

x-tools.heures-eco-plus.tab-heures-eco-plus-jour-demain

Signal Heures Éco+ (TotalEnergies) jour + lendemain.

<x-tools.heures-eco-plus.tab-heures-eco-plus-jour-demain />

x-tools.f-elec.tempo-couleur-jour

Variante f-elec de la couleur Tempo du jour.

<x-tools.f-elec.tempo-couleur-jour />

x-tools.f-elec.tempo-annonce

Annonce visuelle de la couleur Tempo (gros bandeau coloré).

<x-tools.f-elec.tempo-annonce />

x-tools.f-elec.tempo-calendrier

Calendrier Tempo (vue mensuelle ou annuelle).

<x-tools.f-elec.tempo-calendrier />

x-tools.f-elec.tempo-previsions

Prévisions Tempo (table 7 jours).

<x-tools.f-elec.tempo-previsions />

x-tools.f-elec.ejp-signal-jour

Signal EJP du jour version f-elec.

<x-tools.f-elec.ejp-signal-jour />

x-tools.f-elec.sim-tempo-rentabilite

Simulateur de rentabilité de l'option Tempo selon profil.

<x-tools.f-elec.sim-tempo-rentabilite />

x-tools.f-elec.sim-ejp-rentabilite

Simulateur de rentabilité de l'option EJP.

<x-tools.f-elec.sim-ejp-rentabilite />

x-tools.f-elec.chart-pdl-tempo-ejp

Graphique d'un PDL avec annotations Tempo et EJP.

<x-tools.f-elec.chart-pdl-tempo-ejp />

x-felec-sim-abonnement

Simulateur f-elec d'abonnement selon puissance.

<x-felec-sim-abonnement />

Aperçu non rendu — requiert props. Voir tools/felec-sim-abonnement.blade.php.

x-felec-sim-choix-puissance

Aide au choix de puissance kVA version f-elec.

<x-felec-sim-choix-puissance />

Aperçu non rendu — requiert props. Voir tools/felec-sim-choix-puissance.blade.php.

x-felec-sim-option-tarifaire

Choix d'option tarifaire (Base, HPHC, Tempo…) version f-elec.

<x-felec-sim-option-tarifaire />

Aperçu non rendu — requiert props. Voir tools/felec-sim-option-tarifaire.blade.php.

x-tools.observatoire.ejp-signal

Signal EJP au format observatoire.

<x-tools.observatoire.ejp-signal />

x-tools.observatoire.tempo-signal

Signal Tempo au format observatoire.

<x-tools.observatoire.tempo-signal />

x-tools.observatoire.tempo-couleur-jour

Couleur Tempo du jour au format observatoire.

<x-tools.observatoire.tempo-couleur-jour />

Aperçu : composant class-based — voir tools/observatoire/ côté département pour le markup.

x-charts.prix-electricite-evolution

Graphique d'évolution du prix de l'électricité sur plusieurs années.

<x-charts.prix-electricite-evolution />

x-legal._methodologie-energie

Bloc méthodologie / mention légale Selectra énergie (à insérer en bas de page).

@include('legal._methodologie-energie')