Couleurs

Tokens définis dans css/app.css et étendus dans eb-components.css. Toujours utiliser les variables, jamais les valeurs hexa en dur.

Palette de marque

primary

#007a7c

primary-dark

#004f50

primary-light

#e6f2f2

accent

#d97f18

accent-dark

#8d510e

accent-light

#fbf2e8

success

#0a8023

error

#d71a1f

Sémantique métier

électricité

var(--eb-elec) = accent

gaz

var(--eb-gas)

économies

var(--eb-saving)

warning

var(--eb-warning)

Règles d'usage

Boutons d'action principale (devis, contact) : --color-accent (orange).
Boutons secondaires (téléphone, navigation) : --color-primary (teal).
Bandes sombres (hero, CTA final) : gradient primary → primary-dark avec halo orange en bas-droite.
Cartes d'économies, indicateurs positifs : --eb-saving sur fond #dcfce7.
Texte blanc sur fond primaire : toujours forcer style="color:#fff" à cause de la cascade Tailwind v4.

Typographie

Famille body héritée du thème base. Pour les chiffres et prix : ajouter .eb-num (tabular-nums + tracking serré).

H1

Comparez l'électricité et le gaz

H2

Les meilleures offres pros

H3

Profil PME standard 15 kVA

Eyebrow

Comparateur live · électricité

Body

Selectra Entreprises interroge en continu les fournisseurs d'énergie pour les pros.

Chiffre clé (.eb-num)

−12,3 %

Monospace (prix kWh)

0,1452 €/kWh HTVA

Boutons & CTA

3 variantes canoniques + bouton callback. Le CTA orange est réservé à la demande de devis ; le teal est pour les actions de navigation, téléphone et secondaires.

09 70 73 32 15 Voir le comparateur


<button type="button"
        @click="window.dispatchEvent(new CustomEvent('open-callback-modal', { detail: { leadSource: 'fr-ei-co-entreprises', segment: 'energie-devis' } }))"
        class="eb-cta-devis">
    Obtenir mon devis gratuit
</button>


<a href="/energie/selection/fr-ei-co-entreprises" class="eb-cta-phone">09 70 73 32 15</a>


<a href="#comparateur" class="eb-cta-ghost">Voir le comparateur</a>

Tags & badges

Étiquettes courtes pour qualifier une offre. Classe de base .eb-tag + modificateur. Le score Selectra (A à D) utilise .eb-score.

100% vert Prix fixe Indexé marché Partenaire C5 (≤ 36 kVA)

A B C D Score Selectra (lettre fournie par l'API).

<span class="eb-tag tag-green">100% vert</span>
<span class="eb-tag tag-fixed">Prix fixe</span>
<span class="eb-tag tag-indexed">Indexé marché</span>
<span class="eb-tag tag-partner">Partenaire</span>
<span class="eb-score eb-score-a">A</span>

Cartes

Carte standard .eb-card. Ajouter .is-hover pour l'effet de levée au survol (cartes-liens uniquement).

Carte simple

Pour un contenu informatif sans action de clic.

Carte hover

Pour les liens de navigation interne (maillage). Soulève au survol.

Comparateur

Carte avec eyebrow

Variante pour grilles de ressources / maillage interne.

<a href="/energie/comparateur-electricite-professionnel" class="eb-card is-hover">
    <div class="eb-card-icon"><svg>…</svg></div>
    <h3 class="font-bold text-gray-900 mb-1">Comparateur électricité pro</h3>
    <p class="text-sm text-gray-600">Vue complète des offres élec C5.</p>
</a>

Bandeau KPI

4 chiffres clés calculés en direct via l'engine de comparaison. Toujours indiquer le profil de calcul en légende sous le chiffre — jamais nommer la source technique interne.

13

fournisseurs élec & gaz interrogés en direct

46

offres pros disponibles aujourd'hui

−12,3 %

meilleure offre vs Tarif Bleu Pro EDF (TRV)

−183 €

économie /an vs TRV · profil 15 kVA

<div class="eb-kpi-grid text-white">
    <div>
        <p class="eb-kpi-value" style="color:#fff">{{ $providersCount }}</p>
        <p class="eb-kpi-label">fournisseurs élec & gaz interrogés en direct</p>
    </div>
    
</div>

Hero

Pattern hero pour pages hub. Fond gradient teal avec halo orange en bas-droite + grille subtile. Toujours signaler le live avec .eb-live-dot.

Données comparateur en direct

Titre principal du hero

Une ligne de lede sous le H1 décrit la promesse et précise le profil de calcul affiché.

<section class="relative eb-hero-bg text-white overflow-hidden">
    <div class="absolute inset-0 eb-grid-pattern opacity-30 pointer-events-none"></div>
    <div class="relative max-w-content mx-auto px-4 sm:px-6 py-12 lg:py-20">
        <div class="inline-flex items-center gap-2 bg-white/15 …">
            <span class="eb-live-dot"></span> Énergie pro · live
        </div>
        <h1 style="color:#fff">…</h1>
    </div>
</section>

Formulaire devis (hero)

Formulaire compact à mettre dans le hero. Les champs s'adaptent à l'énergie sélectionnée (élec → kVA, gaz → tranche T1/T2/T3, dual → les deux). Le clic ouvre la modale callback du CMS.

Devis gratuit · réponse sous 24 h

Demandez votre devis énergie pro

Énergie

Puissance électrique souscrite

Consommation annuelle de gaz

Service gratuit, sans engagement. Segment courant :

Branchement backend

Le bouton dispatche l'évènement open-callback-modal avec un leadSource et un segment de tracking. La modale globale <x-callback-modal /> (incluse dans layouts/app.blade.php) collecte le téléphone et POST sur /api/callback — qui parle au CPO (blacklist) puis à Zoho CRM pour créer une interaction.

Tableau comparateur

Pattern canonique pour lister les offres d'un comparateur. 5 lignes visibles + collapse "Voir tout". Inclut filtres (vert/fixe/indexé), tab énergie, et ligne de référence TRV en bas. Données live via Alpine x-data.

Fournisseur · offre Prix HTVA du kWh Total annuel Économie vs TRV

FA

Fournisseur A — Offre exemple

Prix fixe Partenaire

0,1452 €

€/kWh HTVA

1 299 €/an

dont 17 €/mois abo.

−183 €

TRV

Tarif Bleu Pro EDF (référence)

Tarif réglementé · réservé aux microentreprises ≤ 10 salariés

0,1697 €

€/kWh HTVA

1 482 €/an

base de comparaison

Source : grilles tarifaires publiques des fournisseurs · profil 15 kVA · 7 531 kWh/an Personnaliser avec ma conso →

Règles dorées du comparateur

5 lignes visibles par défaut + Voir tout qui dépile le reste (Alpine showAll toggle).
Toujours afficher la ligne TRV (.is-ref) en bas comme référence visuelle.
Légende sous la table : profil de calcul exact (kVA, kWh, zone), jamais nommer l'API ou l'outil interne.
CTA "Devis" sur chaque ligne dispatche open-callback-modal avec segment = {tab}-{provider-slug}.
Prix toujours étiquetés HTVA (pas HT), parce que ces grilles publiques excluent la TVA mais incluent CSPE/CTA/accises.

Simulateur C5

Layout 2 colonnes : formulaire à gauche, panel résultat sombre à droite. Le résultat affiche : mensualité estimée, économie /an (avec référence explicite TRV), composition abo/conso, top 3 offres, CTA devis.

01Consommation annuelle

7 531 kWh

/ an

02Puissance souscrite

Légende ici : comment le calcul est fait, sur quoi se base l'économie. Jamais nommer la source interne.

Mensualité estimée

95 €/mois

soit 1 140 €/an HTVA (hors TVA)

Économie /an

−342 €

vs Tarif Bleu Pro EDF

Composition (HTVA)

Abonnement 205 € Consommation 935 €

Calculs côté front

Le serveur précharge plusieurs profils kVA (small / standard / big) avec leurs offres et leur TRV de référence.
Côté Alpine, on choisit le profil le plus proche de la puissance souscrite par l'utilisateur, puis on recalcule : bestTotal = sub_monthly × 12 + kwh_price × kWh.
L'économie est : trvTotal − bestTotal, recalculée sur la même conso utilisateur (apples-to-apples).
Pas de prix inventés. Si l'API ne renvoie pas le profil, ne pas afficher la mensualité — afficher un fallback CTA.

Simulateurs (outils interactifs)

Pattern d'outil wrappé pour tout mini-simulateur autonome : une carte blanche (bordure + ombre, overflow-hidden) avec un bandeau-titre (pastille icône + titre + sous-titre), puis un corps en 2 colonnes : panneau de saisie bg-gray-50 à gauche, panneau résultat en dégradé à droite. Les valeurs proviennent de l'autodata (jamais de prix en dur).

Titre du simulateur

Sous-titre court décrivant le calcul

Paramètre (curseur)

1 500 MWh

Paramètre (saisie)

Aide / mention de la source du barème.

Résultat estimé

38 000 €

par an, détail ci-dessous.

Composante A17 €

Composante B22 €

Estimation indicative. Source du barème (Selectra / Enedis / CRE).


<div class="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">
  <div class="flex items-center gap-3 px-5 sm:px-6 py-4 border-b border-gray-100" style="background:var(--color-primary-light)">
    <span class="w-10 h-10 rounded-xl bg-white flex items-center justify-center"><svg.../></span>
    <div><div class="font-bold text-gray-900">Titre</div><div class="text-xs text-gray-500">Sous-titre</div></div>
  </div>
  <div class="p-5 sm:p-6">
    <div class="grid lg:grid-cols-[1fr_1fr] gap-6" x-data="{ ... autodata ... }">
      <div class="bg-gray-50 rounded-xl p-5 space-y-6"> inputs </div>
      <div class="rounded-xl p-5 text-white" style="background:linear-gradient(...)">
        
        <div class="text-5xl md:text-6xl font-extrabold tabular-nums" style="color:#fff"><span x-text="fmt(total)"></span> €</div>
      </div>
    </div>
  </div>
</div>

Règles

Le gros chiffre de résultat doit être un <div> (pas <p>) : sous .article-body, la règle .article-body p { font-size } écrase l'utilitaire text-6xl.
Toutes les valeurs chiffrées viennent de l'autodata (ou API), jamais en dur. Mentionner la source du barème dans la légende.
Panneau inputs bg-gray-50 rounded-xl, panneau résultat en dégradé --color-primary → --color-primary-dark, texte blanc inline.

Simulateurs en production

Remboursement CSPE : conso (MWh) × (taux plein autodata − taux réduit) → montant remboursable.
Éligibilité aux tarifs réglementés : puissance + statut TPE/copropriété → Bleu / Jaune / Vert + verdict.
Calculateur TURPE C5 : gestion + comptage + part puissance + part énergie CU4/MU4 (coefficients autodata Enedis).

Stepper process

Suite d'étapes avec rail vertical (mobile-first). 3 à 5 étapes selon le process.

01

Analyse de vos factures

Une dernière facture suffit. Nous remontons votre consommation 12 mois, votre puissance et votre option tarifaire.
02

Comparaison live de la grille

Nos outils interrogent les fournisseurs pros et présélectionnent les offres compatibles avec votre profil.
03

Étude comparative chiffrée

Un expert B2B vous envoie 3 à 5 offres ciblées avec économies annuelles chiffrées.

Profils C1-C5

Cartes-liens pour la segmentation Enedis. Toujours sourcer le référentiel Enedis ou la CRE en légende.

C5 Basse tension

TPE, artisans, commerces

≤ 36 kVA

C4 Basse tension

PME, supermarchés

36 à 250 kVA

C3 HTA

Industrie légère

> 250 kVA

C1·C2 HTA pointe

Industrie lourde

> 250 kVA

Marquee logos

Bandeau défilant pour montrer les fournisseurs partenaires. Logos exclusivement R2 (jamais commités). Convention : images.selectra.info/fr-energy/logos/{slug}-md.png.

FAQ accordéon

4 à 6 questions max par page. Réponses : factuelles, sourcées (CRE, articles de loi, GRDF/Enedis). Pas de marketing.

Réponse factuelle, courte, citant la source légale si pertinent (ex : article L. 337-7 du Code de l'énergie).

Autre réponse, paragraphe court avec une référence vérifiable.

Légendes & sources

Règle d'or : ne jamais nommer la source technique interne (API Selectra, Energy Core, etc.). Toujours citer le profil de simulation ou un régulateur officiel (CRE, Médiateur, Enedis, GRDF).

✓ À faire

Source : grilles tarifaires publiques des fournisseurs · profil 15 kVA · 7 531 kWh/an

Source : CRE, prix repère de vente du gaz, juin 2026

Référentiel Enedis · classification des profils de soutirage

Source : Selectra · mai 2026

✗ À bannir

Source : API Selectra, mis à jour quotidiennement

Données Energy Core live

Via l'API publique Selectra

notre API engine/fr

Selectra Entreprises — composants partagés