Mention Selectra partenaire .pt-ic + libellé

Petit logo Selectra en 13 × 13 px, suivi de la phrase de partenariat. À placer sous chaque CTA partenaire (carte conseiller, mini-CTA in-context, CTA gradient). Existe en deux variantes : light (fond clair) et dark (fond sombre).

Quand l'utiliser ? Sur toute page /energie/fournisseurs/{slug}/* dès qu'on affiche le numéro Selectra partenaire (cf. partners.json). Wording strict : « Selectra partenaire d'EDF pour une sélection d'offres, hors tarifs réglementés. » pour EDF, « Selectra partenaire de {Name} pour une sélection d'offres. » pour les autres partenaires.

Variante light — fond clair

Selectra partenaire d'EDF pour une sélection d'offres, hors tarifs réglementés.

Variante dark — fond sombre

Selectra partenaire d'EDF pour une sélection d'offres, hors tarifs réglementés.

Code — variante light

<p class="tar-cta-partner-note">
    <img class="pt-ic" src="https://images.selectra.info/selectra.info/selectra-icon-primary.svg" alt="" width="13" height="13">
    <span></span>
</p>

Pièges : sans !important sur width/height, l'image SVG explose à sa taille native. Sur fond sombre, ajouter filter:brightness(0) invert(1) pour passer le logo en blanc.

Hero fournisseur .sl-hero-provider

Bande hero des pages fournisseur — gradient subtil bleu/orange en fond, tag pill, H1 jusqu'à 48 px, lead 17 px. Layout 2 colonnes (1.55fr / 1fr) au-dessus de 900 px pour accueillir une carte sticky à droite.

Quand l'utiliser ? Hero d'une page dédiée à un fournisseur (avis, tarifs, facture, téléphone, chèque énergie). Combiner avec .sl-sticky-panel dans la colonne droite et .sl-stats sous le lede.

Aperçu — hero EDF

E EDF · Fournisseur historique · Mis à jour avril 2026

Tarifs EDF : prix du kWh et offres 2026

Comparez les tarifs EDF en avril 2026 : prix du kWh, abonnement et offres électricité actives. Données certifiées chaque mois par Selectra.

Code

<section class="sl-hero-provider">
  <div class="max-w-content mx-auto px-4 sm:px-6">
    <div class="sl-hero-provider__grid">
      <div>
        <span class="sl-hero-provider__tag">
          <span class="dot">E</span> EDF · Mis à jour avril 2026
        </span>
        <h1 class="sl-hero-provider__h1">Tarifs EDF <i>2026</i></h1>
        <p class="sl-hero-provider__lede">Lead 17 px…</p>
      </div>
      
    </div>
  </div>
</section>

Modificateurs H1 : <i> = bleu accent, <em> = orange accent. Garde le H1 court (max 8 mots).

Carte sticky de droite .sl-sticky-panel

Carte sticky qui colle à 24 px du haut quand on scrolle. Sert à porter le score d'avis, un prix-clé, ou un bloc de contact. Logo 40 px, titre, badge "live" optionnel, lignes pointillées entre les rows, CTA en bas.

Quand l'utiliser ? Colonne droite du .sl-hero-provider. Une seule par page (sinon les deux se collent en haut au scroll).

Aperçu — carte tarif

Squelette HTML

<aside class="sl-sticky-panel">
  <div class="sl-sticky-panel__head">
    <img class="lg" src="...">
    <div class="t">Surtitre<b>Titre fort</b></div>
    <span class="live">Live</span>
  </div>
  <div class="sl-sticky-panel__row">
    <div class="lab">Label</div>
    <div class="val">0,2516 €</div>
    <div class="sub">Description</div>
  </div>
  <div class="sl-sticky-panel__cta"> ... </div>
</aside>

Sticky TOC horizontale .sl-subnav

Barre sticky qui colle à 64 px du haut (sous le header). Fond blanc semi-transparent + flou backdrop. Liens TOC à gauche avec soulignement bleu sur .active, liens externes à droite avec flèche ↗.

Quand l'utiliser ? Sur les pages longues (avis, tarifs, guides multi-sections) pour aider à la navigation interne. Section liens externes optionnelle (espace client, site fournisseur, médiateur).

Aperçu — TOC page tarifs EDF (non sticky ici)

Code

<nav class="sl-subnav">
  <div class="sl-subnav__inner">
    <div class="sl-subnav__toc">
      <a class="active" href="#verdict">Verdict</a>
      <a href="#offres">Offres</a>
    </div>
    <div class="sl-subnav__sep"></div>
    <div class="sl-subnav__ext">
      <a href="https://edf.fr" target="_blank">edf.fr</a>
    </div>
  </div>
</nav>

Note : la classe .active doit être mise à jour côté JS au scroll (logique d'IntersectionObserver) — non incluse dans le CSS de base.

Breadcrumb .sl-breadcrumb

Fil d'Ariane avec séparateurs › et liens hover. Le dernier élément (page courante) en gras .sl-breadcrumb__current. Variante .style-dark pour fond sombre.

Quand l'utiliser ? En haut de toute page interne (sous le header). Pour le SEO, dupliquer en JSON-LD BreadcrumbList (cf. skill structured-data).

Variante par défaut

Variante .style-dark

Code

<nav class="sl-breadcrumb" aria-label="Fil d'Ariane">
  <a href="/">Accueil</a>
  <span class="sl-breadcrumb__sep">›</span>
  <a href="/energie">Énergie</a>
  <span class="sl-breadcrumb__sep">›</span>
  <span class="sl-breadcrumb__current">Page courante</span>
</nav>

Section label .sl-section-label

Mini-label uppercase 11 px avec un trait noir de 24 px devant. À placer juste au-dessus d'un H2 pour numéroter ou catégoriser la section.

Quand l'utiliser ? Au-dessus d'un H2 de section principale (ex : « 01 — Par téléphone », « Étape 2 — Comparer »). Ne pas mettre dans un H3 imbriqué.

Aperçu — labels de sections

01 — Par téléphone

Appeler le service client EDF

Étape 2 — Comparer

Trouver l'offre la plus compétitive

Code

<span class="sl-section-label">01 — Par téléphone</span>
<h2>Appeler le service client EDF</h2>

Pills énergie / toggle .sl-pill-nav

Liste horizontale de pills. Modificateurs sur chaque pill : .active (bleu Selectra), .elec (bleu clair fond), .gas (orange clair fond). Compteur optionnel via <span class="count">.

Quand l'utiliser ? Toggle élec / gaz / dual sur une page fournisseur multi-énergie, ou filtres de tags rapides au-dessus d'une liste d'offres.

Aperçu — filtres offres

Tous 12 ⚡ Électricité 8 🔥 Gaz 3 Dual 1

Code

<div class="sl-pill-nav">
  <a class="sl-pill-nav__pill active" href="#">Tous <span class="count">12</span></a>
  <a class="sl-pill-nav__pill elec">⚡ Électricité</a>
  <a class="sl-pill-nav__pill gas">🔥 Gaz</a>
</div>

Variante .style-floating — pills sur fond sombre

Variante avec fond semi-transparent + texte blanc, à placer sur un fond gradient bleu (header de fournisseurs-list, intérieur d'un .sl-cta-gradient, etc.).

Aperçu — sur fond gradient azure

Tri par économies Tri par note Tri par nb offres

Code — variante .style-floating

<div class="sl-pill-nav style-floating">
  <a class="sl-pill-nav__pill active">Tri par économies</a>
</div>

Grille KPI hero .sl-stats

Suite horizontale de 2 à 4 grandes valeurs séparées par une ligne verticale. Le chiffre est en 30 px gras, le label en 11,5 px gris. Utiliser <b> autour d'un chiffre pour le mettre en bleu accent.

Quand l'utiliser ? Sous le lede d'un .sl-hero-provider, ou en sous-titre de section pour donner 3 chiffres clés (nb d'avis, économies moy., note Médiateur, etc.).

Aperçu — 3 KPI

4,4/5

Note moyenne
1 700 avis

12 %

vs tarif réglementé
sur l'offre Prudence

17

saisines
Médiateur 2025

Code

<div class="sl-stats">
  <div class="sl-stats__item">
    <div class="sl-stats__num"><b>4,4</b>/5</div>
    <div class="sl-stats__lab">Note moyenne</div>
  </div>
  
</div>

Variante .cols-4 — grille 4 col avec tints colorés

Variante en grille 4 colonnes (responsive 1 / 2 / 4) avec fond coloré sur chaque carte. Modificateurs par item : .tint-azure, .tint-meteor, .tint-green, .tint-red. Idéal pour un mini-dashboard de KPI fournisseur ou ELD.

Aperçu — ELD Strasbourg

Offres élec

12

Offres gaz

5

Note clients

4,5/5

Saisines médiateur

62

Code — variante .cols-4

<div class="sl-stats cols-4">
  <div class="sl-stats__item tint-azure"> ... </div>
  
</div>

Verdict 3 métriques .sl-price-compare

Trio de cartes centrées avec un gros chiffre (34 px) + label dessous. Modificateurs sur la carte : .good (vert), .bad (rouge). Modificateurs sur la valeur : .blue, .green, .red, .gas.

Quand l'utiliser ? Synthèse rapide d'une offre vs la référence (TRV) : prix kWh, abonnement, économies. Ou résultats d'un calcul facture.

Verdict positif — .good + valeurs .green / .blue

0,1708^€

Prix du kWh TTC

−12 % vs TRV

9,80^€

Abonnement mensuel

6 kVA · base

−151^€

Économies estimées

par an vs TRV

Verdict négatif — .bad + valeurs .red / .gas

0,2516^€

Prix du kWh TTC

Référence TRV

0,1124^€

Prix du kWh gaz

zone 3 · 11 200 kWh/an

+85^€

Surcoût annuel

vs meilleure offre

Code

<div class="sl-price-compare">
  <div class="sl-price-compare__item good">
    <div class="sl-price-compare__val green">0,1708<sup>€</sup></div>
    <div class="sl-price-compare__lab">Prix du kWh</div>
    <div class="sl-price-compare__sub">−12 % vs TRV</div>
  </div>
  
</div>

Tableau de données .sl-data-table

Tableau générique pour comparer données chiffrées (saisines Médiateur YoY, filiales, contacts régionaux, plages horaires…). Header gris doux, lignes alternées avec bordure haute. Modificateurs sur la <td> : .num (tabular-nums + right-aligned), .evo-up (rouge), .evo-down (vert). Modificateurs sur la table : .style-emergency (1ère col rouge), .style-bordered (toutes bordures visibles).

Quand l'utiliser ? Évolution annuelle, contacts régionaux, comparatif chiffré multi-entité. Pour un verdict 3 chiffres, préférer .sl-price-compare. Pour une grille tarifaire d'offre, préférer <x-tools.grille-tarifaire />.

Aperçu — saisines Médiateur YoY

Indicateur	2023	2024	Évolution
Saisines reçues	5 263	4 009	↓ −24 %
Dossiers irrecevables	412	498	↑ +21 %
Dossiers recevables	2 891	2 410	↓ −17 %
Délai moyen de traitement	82 j	56 j	↓ −32 %

Source : rapport annuel du Médiateur national de l'énergie (2024)

Légende source .sl-table-source

Petite ligne discrète, alignée à droite sous le tableau, pour indiquer la source des données. 11 px, gris doux, soulignement de lien désaturé. À placer juste après </table>, dans le même container.

Code

<table class="sl-data-table"> ... </table>
<p class="sl-table-source">Source : <a href="…">Médiateur national de l'énergie</a> (2024)</p>

Variante .style-emergency — contacts d'urgence

Première colonne sur fond rouge clair en gras : utile pour distinguer les situations d'urgence dans une matrice de contacts (coupure, panne, fuite de gaz, etc.).

Aperçu — contacts d'urgence électricité

Situation	Service	Numéro
Panne d'électricité générale	Enedis Info-Coupure	09 726 750 XX
Fuite de gaz	GRDF Urgence Sécurité Gaz	0 800 47 33 33
Coupure pour impayé	Service client EDF	09 69 32 15 15

Variante .style-bordered — toutes bordures visibles

Ajoute une bordure sur chaque cellule (au lieu des seules lignes horizontales). Idéal pour les comparatifs où la lecture verticale doit être facile (offres, formules, garanties).

Aperçu — comparatif offres EDF

Caractéristique	Tarif Bleu	Zen Online	Vert Électrique
Type de prix	Réglementé	Fixe 1 an	Indexé TRV
Prix du kWh TTC	0,2516 €	0,2238 €	0,2391 €
Économies vs TRV	—	−11 %	−5 %

Code

<table class="sl-data-table">
  <thead><tr><th>Indicateur</th><th>2024</th><th>Évolution</th></tr></thead>
  <tbody>
    <tr>
      <td><strong>Label</strong></td>
      <td class="num">4 009</td>
      <td class="evo-down">↓ −24 %</td>
    </tr>
  </tbody></table>

Score hero .sl-score-hero

Grosse carte gradient bleu Selectra avec la note moyenne en très grand (64 px), label uppercase en haut, sous-titre avec le nombre d'avis. Halos radial gradient orange + blanc en coins pour le côté Selectra. Hauteur min 200 px.

Quand l'utiliser ? En tête d'une section avis fournisseur, en colonne gauche avec .sl-platform-ratings.rows à droite (cf. capture page avis TotalEnergies). C'est le chiffre de confiance principal de la page.

Aperçu — note globale 4,5/5

Note moyenne

4,5/5

basée sur 234 728 avis

Code

<div class="sl-score-hero">
  <span class="sl-score-hero__label">Note moyenne</span>
  <div class="sl-score-hero__num">4,5<small>/5</small></div>
  <p class="sl-score-hero__sub">basée sur <b>234 728 avis</b></p>
</div>

Note : sur la page avis, à combiner avec .sl-platform-ratings.rows en colonne droite (grid 1fr 2fr) pour la décomposition par plateforme.

Badge Selectra Score .sl-score-badge

Image SVG hostée du Selectra Score (A → E). Trois tailles disponibles via modificateur : par défaut 64 px (carte offre), .sm 32 px (inline texte), .xs 16 px (badge mention).

Quand l'utiliser ? À côté du nom d'une offre dans une x-offer.card, ou dans une légende. Le score doit venir de l'API Energy Core (champ score), jamais hardcodé.

Aperçu — 3 tailles, 5 grades

Code

<img class="sl-score-badge" src="https://images.selectra.info/scores/B-score.svg" alt="Selectra Score B">
<img class="sl-score-badge sm" ...> // 32 px
<img class="sl-score-badge xs" ...> // 16 px

Étoiles + note + nb d'avis .sl-stars

5 étoiles SVG 14 px (remplies / vides selon la note), suivies de la note moyenne et du nombre d'avis. Les étoiles sont déterministes : round(note) pleines, le reste vides.

Quand l'utiliser ? Sous le nom d'un fournisseur ou d'une offre, dans une .sl-sticky-panel avis, ou dans un tableau de classement. Toujours préciser le nombre d'avis (jamais "vérifiés" — cf. mémoire).

Aperçu — 4,4/5 (1 700 avis)

4,4/5 · 1 700 avis

Code (5 étoiles, exemple 4 pleines)

<span class="sl-stars">
  <svg viewBox="0 0 24 24"><path class="star-on" d="M12 2l3 7…"/></svg>
  // répéter .star-on ou .star-off selon round(note)
  <span class="sl-stars__meta"><b>4,4/5</b> · 1 700 avis</span>
</span>

Notes par plateforme .sl-platform-ratings

Grille 2 colonnes en mobile, 4 colonnes en desktop. Chaque carte affiche le nom de la plateforme (Trustpilot, Google, Selectra…), la note en gros (32 px) et le nombre d'avis. Bandeau coloré 4 px en haut pour différencier les sources.

Quand l'utiliser ? Sur une page avis fournisseur, sous la note globale, pour montrer la transparence de la moyenne pondérée. Ne pas écrire « avis vérifiés » (cf. mémoire).

Aperçu — 4 plateformes

Trustpilot

4,5/5

12 480 avis

Google

4,3/5

8 102 avis

Selectra

4,4/5

1 735 avis

Avis vérifiés

4,1/5

3 044 avis

Code (une carte)

<div class="sl-platform-ratings__card">
  <div class="bar" style="background:#00b67a"></div>
  <div class="body">
    <div class="name">Trustpilot</div>
    <div class="num">4,5<small>/5</small></div>
    <div class="nb">12 480 avis</div>
  </div>
</div>

Variante .rows — layout horizontal

Ajouter .rows à la classe parent pour passer en rangées horizontales (logos plateformes alignés sur une seule colonne). Pratique en colonne droite ou sous une .sl-score-hero.

Aperçu — score hero + rangées (capture page avis)

Note moyenne

4,5/5

basée sur 234 728 avis

Avis Vérifiés

4,5/5

221 520 avis

Trustpilot

4,6/5

10 035 avis

Selectra

3,1/5

3 173 avis

Code — variante .rows

<div class="sl-platform-ratings rows">
  <div class="sl-platform-ratings__card">
    <div class="body">
      <div class="name">Trustpilot</div>
      <div class="num">4,6<small>/5</small></div>
      <div class="nb">10 035 avis</div>
    </div>
  </div>

</div>

Encart « à retenir » .sl-callout

Boîte avec gradient subtil, bordure légère et trait coloré de 3 px à gauche. 4 variantes : défaut (bleu), .warn (rouge), .success (vert), .tip (orange).

Quand l'utiliser ? Mettre en exergue une info importante (à retenir, attention, bon plan, alerte). Une callout par section max — sinon ça devient du bruit visuel.

Default — info

À retenir

Le changement de fournisseur est gratuit, sans coupure de courant et sans engagement. Vous gardez votre compteur Linky et Enedis reste votre distributeur.

Variante .warn

Attention

En cas de coupure d'urgence, contactez Enedis au 09 72 67 50 XX (et non votre fournisseur).

Variante .success

Bon à savoir

L'offre Prudence de la bellenergie permet une économie estimée de 151 €/an vs le TRV pour un foyer moyen.

Variante .tip

Le conseil Selectra

Avant de signer, vérifiez toujours le caractère fixe ou indexé du prix du kWh — c'est le critère qui détermine votre exposition au marché.

Code

<div class="sl-callout warn">
  <div class="sl-callout__label">Attention</div>
  <div class="sl-callout__body">
    <p>Texte… <strong>élément fort</strong></p>
  </div>
</div>

Bannière compacte .sl-callout.style-compact

Variante compacte de .sl-callout avec icône carrée 36 px à gauche, label gras 13 px + texte 13 px. Couleurs partagées avec la version standard : .info, .warn, .success, .tip.

Quand l'utiliser ? Mini-info contextuelle (app mobile dispo, mode démo, mise à jour récente). Plus discrète que .sl-callout standard.

Variante .info

i

Application mobile EDF & Moi

Disponible sur iOS et Android pour suivre votre conso, télécharger vos factures et déclarer votre relevé.

Variante .warn

!

Hausse du TRV au 1^er février 2026

Le tarif réglementé augmente de 1,5 % HT. Les offres indexées suivent l'évolution.

Variante .success

✓

Offre certifiée Selectra

Prix vérifiés le 22 avril 2026 sur la grille tarifaire publiée par le fournisseur.

Variante .tip

💡

Astuce Selectra

Cette page concerne uniquement les contrats résidentiels (puissance 3 à 36 kVA).

Code

<div class="sl-callout style-compact info">
  <div class="sl-callout__icon">i</div>
  <div class="sl-callout__body-wrap">
    <div class="sl-callout__label">Label fort</div>
    <p class="sl-callout__body">Texte descriptif…</p>
  </div>
</div>

Pros / cons .sl-pros-cons

2 cartes côte-à-côte (1 colonne en mobile). Icône carrée + titre + tags pills + prose. Modificateur .pos = vert, .neg = rouge sur la carte parent.

Quand l'utiliser ? Synthèse éditoriale d'un fournisseur ou d'une offre : « Ce qu'on aime / ce qu'on aime moins ». 3 à 5 tags max par colonne pour rester lisible.

Aperçu — EDF

✓

Ce qu'on aime

Service client Tarif réglementé sécurisant Maillage agences

Note Médiateur parmi les meilleures du marché : 17 saisines pour 100 000 contrats.

✕

Ce qu'on aime moins

Tarif Bleu non compétitif Hausse régulière

L'offre de référence (TRV) reste plus chère que la plupart des offres de marché concurrentes.

Code

<div class="sl-pros-cons">
  <div class="sl-pros-cons__col pos">
    <div class="sl-pros-cons__head">
      <div class="ic">✓</div>
      <h3>Ce qu'on aime</h3>
    </div>
    <div class="sl-pros-cons__tags">
      <span class="sl-pros-cons__tag">Tag 1</span>
    </div>
    <p>Prose explicative…</p>
  </div>
  
</div>

Variante .style-soft — gradient pastel

Ajouter .style-soft au parent .sl-pros-cons pour passer les cartes en gradient pastel (vert très clair → blanc, rouge très clair → blanc) au lieu du fond blanc plein. Plus doux visuellement pour les sections éditoriales.

Aperçu — variante soft

✓

Faite pour vous si…

Conso > 5 000 kWh Logement chauffé à l'élec

Vous cherchez à maximiser les économies sur le kWh, votre consommation est régulière toute l'année.

✕

À éviter si…

Studio Résidence secondaire

L'abonnement plus élevé annule les économies sur le kWh si votre conso reste faible.

Code — variante .style-soft

<div class="sl-pros-cons style-soft"> ... </div>

Lien hypertexte .sl-link

Lien stylé avec bordure inférieure bleue qui se renforce au hover. 5 variantes : défaut (interne), .style-external (avec ↗), .style-strong (gras), .style-dark (fond sombre), .style-subtle (gris discret pour sources / footnotes).

Quand l'utiliser ? Sur tout lien hypertexte dans le corps d'un article (prose, paragraphes, listes). Sur les liens externes (sources officielles), ajouter .style-external + target="_blank" rel="nofollow noopener". Pour les ancres pures de navigation (menu, breadcrumb), utiliser .sl-breadcrumb ou .sl-pill-nav.

Default — lien interne

Pour comparer les offres, consultez notre comparateur d'électricité Selectra. Le service est entièrement gratuit.

Variante .style-external — flèche ↗

Les données proviennent du Médiateur National de l'Énergie, service public indépendant.

Variante .style-strong — appel à l'action en prose

Comparez les meilleures offres d'électricité en moins de 5 minutes, sans engagement.

Variante .style-dark — sur fond sombre

Service Selectra · Gratuit. Voir les conditions complètes.

Variante .style-subtle — source / footnote

Source : CRE, rapport annuel 2025. Données vérifiées le 22 avril 2026.

Code — variante par défaut

<a href="/energie/..." class="sl-link">comparateur Selectra</a>

Convention SEO : les ancres doivent reprendre le mot-clé cible (cf. règle SEO anchor text). Éviter « cliquez ici » ou « En savoir plus ».

Bouton d'action .sl-button

Bouton inline éditorial pour pointer vers un calculateur, un guide, un comparateur ou une simulation depuis le corps d'un article. Inclut une flèche → animée au hover. 3 tailles (.size-sm, défaut, .size-lg) et 2 styles (plein azure par défaut, .style-outline pour les CTA secondaires).

Quand l'utiliser ? Au milieu d'un article, après un paragraphe qui décrit un service ou une action concrète. Pour les CTA téléphone partenaire utiliser .sl-phone-cta. Pour les gros blocs pleine largeur (conseil Selectra) utiliser .sl-cta-gradient.

Tailles

3 tailles disponibles — small / défaut / large

Calculer ma conso Calculer ma conso Calculer ma conso

Styles

Défaut — plein azure (primaire)

Calculer la consommation de ma clim

Variante .style-outline — CTA secondaire

Découvrir l'offre Fidélité de Primeo Energie

Combinaisons style + taille

Variantes outline aux 3 tailles

Calculer ma conso Calculer ma conso Calculer ma conso

Code

<a href="/energie/guides/conso/climatiseur" class="sl-button">Calculer ma conso</a>

Convention SEO : comme pour .sl-link, le texte du bouton doit reprendre le mot-clé cible et exprimer une action concrète (« Calculer », « Comparer », « Découvrir »). Éviter « Cliquez ici ».

Quelle taille choisir ? .size-sm pour un CTA discret dans une note de bas de tableau ou un encart compact. Défaut pour les CTA en prose. .size-lg pour les CTA de fin d'article ou de bloc d'incitation forte.

Listes à puces .sl-list

Liste stylée avec 6 variantes de puces : défaut (puce ronde azure), .style-check (✓ vert), .style-cross (✕ rouge), .style-arrow (→ bleu), .style-numbered (pastilles bleues avec compteur auto), .style-inside (puces classiques disc pour le mode « à la française »). Modificateur taille : .size-sm.

Quand l'utiliser ? Toute liste de plus de 2 items dans le corps d'un article. Respecter la convention typographique française : items intermédiaires terminés par ; (espace insécable avant), dernier item par . (cf. CLAUDE.md « list punctuation »). Pour « ce qu'on aime / moins aimé » dans un encart, préférer .sl-pros-cons.

Default — puce ronde azure

Le prix du kWh détermine la part variable de votre facture ;
L'abonnement est la charge fixe payée chaque mois ;
Le type de prix (fixe ou indexé) détermine votre exposition au marché.

Variante .style-check — ✓ vert

Service client noté 4,5/5 sur Trustpilot ;
Médiateur saisi 17 fois pour 100 000 contrats en 2025 ;
Application mobile dispo sur iOS et Android.

Variante .style-cross — ✕ rouge

Tarif Bleu non compétitif face aux offres de marché ;
Hausse régulière une à deux fois par an ;
Pas d'option Heures Creuses pour les petits compteurs.

Variante .style-arrow — → bleu

Choisissez votre nouvelle offre en comparant les prix ;
Le changement est automatique, sans coupure ;
Votre ancien contrat est résilié sans frais.

Variante .style-numbered — pastilles bleues

Munissez-vous d'une facture récente ;
Renseignez votre adresse pour identifier votre compteur ;
Comparez les offres adaptées à votre profil ;
Signez votre nouveau contrat en ligne ou par téléphone.

Variante .style-inside — disc classique

Vous gardez le même compteur Linky ;
Le réseau reste géré par Enedis ou GRDF ;
Aucun frais, aucune coupure.

Modificateur .size-sm — taille compacte

Cumulable avec n'importe quelle variante de style (.style-check, .style-numbered, etc.). Réduit la taille du texte à 13 px et resserre le padding. Idéal en colonne droite, dans une .sl-sticky-panel ou un bloc étroit.

Default + .size-sm

Tarif fixe pendant 1 an ;
Sans engagement, résiliable à tout moment ;
Service client français 7j/7.

.style-numbered + .size-sm

Renseignez votre code postal ;
Comparez les offres ;
Souscrivez en ligne.

Variante .style-mixed — mixer ✓ / ✕ / → / ⚠ par item

Au lieu d'un style global, ajouter une classe par <li> : .ok (✓ vert), .ko (✕ rouge), .info (→ bleu), .warn (⚠ orange). Idéal pour une checklist nuancée où chaque item a son verdict propre.

Aperçu — checklist nuancée Tarif Bleu

Service client réputé fiable, présence physique en agence ;
Tarif réglementé encadré par les pouvoirs publics ;
Hausses possibles 1 à 2 fois par an sur décision de l'État ;
Tarif rarement compétitif face aux offres de marché ;
Réversibilité totale : vous pouvez revenir au TRV quand vous voulez.

Code — variante .style-mixed

<ul class="sl-list style-mixed">
  <li class="ok">Item positif ;</li>
  <li class="ko">Item négatif ;</li>
  <li class="info">Item neutre ;</li>
  <li class="warn">Item à surveiller.</li>
</ul>

Code — variante par défaut

<ul class="sl-list">
  <li>Premier item <strong>mis en avant</strong> ;</li>
  <li>Deuxième item ;</li>
  <li>Dernier item.</li>
</ul>

FAQ accordéon .sl-faq

Accordéon natif HTML <details> stylé. Pas de JS. Quand ouvert, la bordure devient noire et l'icône (+) bascule en (−) avec rotation. Liens internes : soulignement azure léger qui se renforce au hover.

Quand l'utiliser ? En bas d'une page article ou fournisseur. 3 à 6 questions max. Pour générer le schema FAQ structuré, voir structured-data skill.

Aperçu — FAQ EDF

Changer de fournisseur d'électricité est-il payant ?

Non, c'est entièrement gratuit. Aucun fournisseur ne peut vous facturer de frais de dossier ou de mise en service pour votre résidence principale.

Vais-je subir une coupure de courant pendant le changement ?

Absolument pas. Le réseau Enedis distribue toujours votre électricité — le changement est purement administratif.

Puis-je revenir chez EDF si je ne suis pas satisfait ?

Oui, à tout moment et sans frais. Tous les contrats résidentiels sont sans engagement — vous pouvez revenir au tarif Bleu d'EDF quand vous le voulez.

Code

<div class="sl-faq">
  <details>
    <summary>Question ?</summary>
    <div class="sl-faq__answer">Réponse complète…</div>
  </details>
</div>

Variante .style-compact — paddings réduits

Variante de .sl-faq avec padding réduit pour les blocs Q/R courts en colonne droite, dans une carte étroite, ou pour de la documentation interne.

Aperçu — FAQ compact

Le service Selectra est-il gratuit ?

Oui, complètement gratuit pour vous. Selectra est rémunéré par les fournisseurs partenaires.

Y a-t-il une coupure pendant le changement ?

Non, aucune coupure. Le réseau reste géré par Enedis ou GRDF.

Code — variante .style-compact

<div class="sl-faq style-compact"> ... </div>

Étapes numérotées .sl-steps

Suite de 3 cartes avec une pastille bleue numérotée qui dépasse en haut à gauche. 1 colonne en mobile, 3 colonnes au-dessus de 768 px. Titre 15 px gras + texte 13,5 px.

Quand l'utiliser ? Pour expliquer un processus en plusieurs étapes (résiliation, médiation, déménagement, souscription). Idéal pour 3 à 4 étapes — au-delà, passer en <ol> classique ou en accordéon.

Aperçu — recours médiation TotalEnergies

1

Contacter le service client TotalEnergies

Par téléphone au 09 70 80 69 69, depuis votre espace client ou par courrier. Conservez systématiquement une trace écrite (e-mail, accusé de réception, capture d'écran).

2

Saisir le médiateur TotalEnergies

Si la réponse du service client est insatisfaisante ou absente au bout de 2 mois, saisir gratuitement le médiateur interne du groupe TotalEnergies.

3

Saisir le Médiateur National de l'Énergie

En dernier recours, le MNE est un service public indépendant, saisissable gratuitement sur sollen.fr. Conditions : avoir déjà écrit au fournisseur, et attendre entre 2 mois et 1 an.

Code

<div class="sl-steps">
  <div class="sl-steps__item">
    <div class="sl-steps__num">1</div>
    <h3 class="sl-steps__title">Titre étape</h3>
    <p class="sl-steps__text">Description…</p>
  </div>
  
</div>

Variante .style-vertical — timeline verticale

Ajouter .style-vertical au parent .sl-steps pour passer en timeline verticale : pastille ronde 44 px à gauche, ligne de connexion entre les étapes, contenu aligné à droite. Idéal sous 5 étapes ou pour les démarches longues.

Aperçu — démarche médiation verticale

01

Contacter le service client

Par téléphone ou depuis votre espace client. Conservez une trace écrite.

02

Attendre 2 mois

Délai légal avant de pouvoir saisir le médiateur interne ou national.

03

Saisir le médiateur

Le médiateur interne du fournisseur, puis le Médiateur National en dernier recours.

Code — variante .style-vertical

<div class="sl-steps style-vertical"> ... </div>

Bio expert complète .sl-author-card

Carte E-E-A-T complète avec en-tête « Auteur certifié Selectra », avatar 64 px, nom + titre + réseaux sociaux, bio prose, puis grille 2 col : pills d'expertise + checklist crédentials. À distinguer de .sl-author-opinion qui n'est qu'une citation courte.

Quand l'utiliser ? En fin de page article ou guide, ou sur la fiche auteur (/energie/equipe/{slug}). Renforce l'E-E-A-T (Experience, Expertise, Authoritativeness, Trust). Une seule par page.

Aperçu — fiche auteur Chloé Servigne

✓ Auteur certifié Selectra

CS

Chloé Servigne

Experte énergie — Selectra

in @

Spécialiste de la transition énergétique résidentielle, Chloé suit le marché de l'électricité et du gaz depuis 6 ans. Elle décortique chaque mois les grilles tarifaires des 30 fournisseurs actifs en France et rédige le baromètre Selectra.

Domaines d'expertise

Marché de l'électricité Tarifs réglementés Énergies renouvelables Service client

Certifications

Veille mensuelle des grilles tarifaires CRE
Auteure du baromètre Selectra depuis 2020
Master Économie de l'environnement

Squelette

<div class="sl-author-card">
  <div class="sl-author-card__head">✓ Auteur certifié Selectra</div>
  <div class="sl-author-card__body">
    <div class="sl-author-card__top">
      <img class="sl-author-card__avatar" src="…">
      <div class="sl-author-card__id">... </div>
    </div>
    <p class="sl-author-card__bio">Biographie…</p>
    <div class="sl-author-card__grid">
      
    </div>
  </div>
</div>

Avis d'expert (variante) .sl-author-card.style-quote

Variante allégée de .sl-author-card : photo (48 px) + nom + titre + citation 3-4 lignes. Pas de header « Auteur certifié », pas d'expertise/credentials, fond gradient azure léger. Renforce l'E-E-A-T sans prendre toute la place.

Quand l'utiliser ? Pages tarif détail, pages comparatives ou guides à forte valeur. Lier le nom à la fiche auteur (/energie/equipe/{slug}). Pour la fiche auteur complète, utiliser .sl-author-card sans modificateur.

Aperçu — avis sur Tarif Bleu

CS

Chloé Servigne

Experte énergie Selectra

Le tarif réglementé reste un choix sécurisant pour qui ne veut pas surveiller le marché, mais sur 12 mois, les offres indexées TRV avec remise restent plus compétitives dans 80 % des cas que nous avons étudiés.

Code

<div class="sl-author-card style-quote">
  <div class="sl-author-card__body">
    <div class="sl-author-card__top">
      <img class="sl-author-card__avatar" src="…">
      <div class="sl-author-card__id">
        <a class="sl-author-card__name">Chloé Servigne</a>
        <p class="sl-author-card__title">Experte énergie</p>
      </div>
    </div>
    <p class="sl-author-card__bio">Citation 3-4 lignes…</p>
  </div>
</div>

Grille cartes contact / action .sl-card-grid

Grille 2 colonnes en mobile, 2 ou 3 en desktop (modificateur .cols-3). Chaque carte peut avoir trois apparences : défaut (blanche), .feature (gradient bleu), .urg (rouge clair pour urgences).

Quand l'utiliser ? Liste de canaux de contact, étapes d'une démarche, sous-pages d'un fournisseur. Lien <a> recommandé (toute la carte cliquable).

Aperçu — canaux de contact EDF

☎

Standard

Par téléphone

Du lundi au samedi de 8h à 20h. Sans surtaxe depuis un poste fixe.

⚡

Conseil Selectra

Comparer les offres

Notre service gratuit vous trouve l'offre la moins chère en 5 minutes.

⚠

Urgence

Coupure d'électricité

Enedis 09 72 67 50 XX — disponible 24/7.

Code

<div class="sl-card-grid cols-3">
  <a class="sl-card-grid__card" href="#">
    <div class="sl-card-grid__top">
      <div class="sl-card-grid__ic">☎</div>
      <div>
        <div class="sl-card-grid__lab">Surtitre</div>
        <div class="sl-card-grid__title">Titre</div>
      </div>
    </div>
    <p class="sl-card-grid__text">Description…</p>
  </a>
  
</div>

Variante .recommended + __footer

Ajouter .recommended à la carte pour une bordure orange + badge « ★ RECOMMANDÉ » en coin (via .sl-card-grid__badge en premier enfant). Ajouter .sl-card-grid__footer en fin de carte pour une ligne meta (délai, validité, frais, etc.).

Aperçu — modes de paiement TotalEnergies

★ Recommandé

▤

Prélèvement automatique

Mensualisation ou paiement à la facture sur consommation réelle. Le mode le plus simple sur le long terme.

▣

Carte bancaire

Paiement ponctuel à la réception de la facture, via l'espace client ou l'application mobile.

✉

Chèque bancaire

À envoyer à l'adresse du service clients, accompagné du TIP non signé ou de la référence client.

Code — carte recommandée avec footer

<div class="sl-card-grid__card recommended">
  <span class="sl-card-grid__badge">★ Recommandé</span>
  <div class="sl-card-grid__top"> ... </div>
  <p class="sl-card-grid__text">Description</p>
  <div class="sl-card-grid__footer">
    <span>Délai prélèvement</span>
    <span><b>14 jours après émission</b></span>
  </div>
</div>

Note : pour la valeur du footer en vert (ex. « gratuit »), utiliser <span class="ok">...</span>.

Variante .style-compact — cartes serrées centrées

Variante avec auto-fill 180 px, padding réduit, icône en haut centrée. Idéale pour une grille de fournisseurs, de marques ou de tags rapides.

Aperçu — sélection rapide de fournisseurs

E

EDF

Tarif réglementé

T

TotalEnergies

Verte 100% française

O

Octopus

Smart & Green

A

Alterna

Verte locale

Code — variante .style-compact

<div class="sl-card-grid style-compact"> ... </div>

Discovery sous-pages fournisseur .sl-card-grid.style-nav

Variante .style-nav de .sl-card-grid : grille auto-fill 220 px avec une flèche → en coin droit qui glisse au hover. Pour le maillage interne (Avis, Tarifs, Espace client, Service client, Coupure…).

Quand l'utiliser ? Bas de toute page fournisseur (sous « Tout sur EDF »). Renforce le maillage interne SEO et réduit le pogo-sticking. 4 cartes recommandées.

Aperçu — Tout sur EDF

Comparer

Tarifs EDF

Toutes les offres et grilles tarifaires

Confiance

Avis clients EDF

Selectra Score et baromètre

Démarches

Service client

Téléphone, espace client, courrier

Urgence

Coupure d'électricité

Causes et rétablissement

Code

<div class="sl-card-grid style-nav">
  <a class="sl-card-grid__card" href="/energie/fournisseurs/edf/tarifs">
    <div class="sl-card-grid__top">
      <div class="sl-card-grid__lab">Comparer</div>
      <div class="sl-card-grid__title">Tarifs EDF</div>
    </div>
    <p class="sl-card-grid__text">Toutes les offres</p>
  </a>
  
</div>

SEO : les ancres doivent reprendre le mot-clé cible de la sous-page (cf. règle SEO anchor text) — éviter « En savoir plus ».

Articles liés .sl-related-articles

Grille 1 / 2 / 3 colonnes selon viewport. Chaque tuile : image hero 140 px (optionnelle), titre, meta « ⏱ N min ». Hover : lift + bordure azure + titre passe en bleu.

Quand l'utiliser ? En fin d'article éditorial. Pour la version auto-générée depuis les clusters config/cms.php, utiliser le composant <x-internal-linking variant="cards" :auto /> documenté sur la page shortcodes.

Aperçu — 3 articles liés

Sans image — version texte seul

Si tu n'as pas d'image hero pour un article, omets juste le __img. La carte se rétrécit naturellement : titre + meta seuls.

Aperçu — 3 articles sans image

Code — avec image

<div class="sl-related-articles">
  <a class="sl-related-articles__card" href="/energie/...">
    <img class="sl-related-articles__img" src="…">
    <div class="sl-related-articles__body">
      <h3 class="sl-related-articles__title">Titre</h3>
      <span class="sl-related-articles__meta">⏱ 4 min</span>
    </div>
  </a>
</div>

Code — sans image

<div class="sl-related-articles">
  <a class="sl-related-articles__card" href="/energie/...">
    <div class="sl-related-articles__body">
      <h3 class="sl-related-articles__title">Titre</h3>
      <span class="sl-related-articles__meta">⏱ 4 min</span>
    </div>
  </a>
</div>

Adresse postale + map .sl-address-card

Carte avec icône à gauche + nom + adresse en plusieurs lignes. Possibilité d'ajouter une map Google Maps en pied de carte via <iframe class="sl-address-card__map">.

Quand l'utiliser ? Pages « siège », « service client », « adresse courrier », ou pour afficher une adresse de paiement (TIP / chèque). Préférer <address> sémantique sur la balise __lines.

Variante par défaut

📍

Siège social

GROUPE EDF

22-30 Avenue de Wagram
75008 PARIS

Avec map embed

📍

Adresse paiement

TotalEnergies — TIP/chèque

TSA 21519
75901 PARIS CEDEX 15

🗺️ Aperçu carte Google Maps (iframe en prod)

Code

<div class="sl-address-card">
  <div class="sl-address-card__body">
    <div class="sl-address-card__icon">📍</div>
    <div class="sl-address-card__info">
      <div class="sl-address-card__label">Siège social</div>
      <h3 class="sl-address-card__name">GROUPE EDF</h3>
      <address class="sl-address-card__lines">22-30 Av. de Wagram<br>75008 PARIS</address>
    </div>
  </div>
  
  <iframe class="sl-address-card__map" src="https://www.google.com/maps/embed?…"></iframe>
</div>

Mini-carte offre .sl-offer-mini

Carte offre horizontale : logo + nom + score + badges à gauche, prix + économies + CTA à droite sur fond gris doux. Layout en colonne sous 640 px. Modificateurs sur les badges : .green, .fixed, .indexed, .variable, .trv.

Quand l'utiliser ? Mettre en avant une offre spécifique dans le corps d'un article ou d'une page guide. Pour une liste live d'offres avec données API (10 meilleures, top 5 vertes, etc.), préférer le composant <x-top-offers /> documenté sur la page shortcodes. Les prix affichés dans .sl-offer-mini doivent venir d'une variable Blade liée à l'API, jamais en dur.

Aperçu — offre verte la bellenergie

LB

Prudence

la bellenergie

Prix fixe 1 an Électricité verte

−12 % vs TRV

0,1708€/kWh

TTC · 6 kVA · Base

Voir cette offre →

Squelette HTML

<div class="sl-offer-mini">
  <div class="sl-offer-mini__left">
    <div class="sl-offer-mini__head">
      <img class="sl-offer-mini__logo" src="...">
      <div>
        <h3 class="sl-offer-mini__title">Prudence</h3>
        <p class="sl-offer-mini__provider">la bellenergie</p>
      </div>
      <img class="sl-offer-mini__score" src="...B-score.svg">
    </div>
    <div class="sl-offer-mini__badges">
      <span class="sl-offer-mini__badge fixed">Prix fixe</span>
      <span class="sl-offer-mini__badge green">Verte</span>
    </div>
  </div>
  <div class="sl-offer-mini__right">
    <span class="sl-offer-mini__savings">−12 % vs TRV</span>
    <div class="sl-offer-mini__price">0,1708<small>€/kWh</small></div>
    <p class="sl-offer-mini__sub">TTC · 6 kVA</p>
    <a class="sl-offer-mini__cta" href="#">Voir cette offre</a>
  </div>
</div>

Note : les prix et économies doivent toujours venir de l'API Energy Core (cf. règle offers and prices via API), jamais en dur. Pour une liste live, utilise <x-top-offers />.

Variante .style-alt — offre alternative avec raison

Ajouter .style-alt + .sl-offer-mini__alt-badge en premier enfant pour signaler un angle de sélection (le moins cher, le mieux noté, le plus vert) et .sl-offer-mini__reason pour la raison éditoriale en italique. Variantes badge : défaut (bleu), .green (vert), .cheap (orange).

Aperçu — 3 alternatives angulaires

Le moins cher

P

Confort+

Primeo

Prix du kWh 16,2 % moins cher que le tarif réglementé — champion du rapport prix/abonnement pour une conso supérieure à 5 000 kWh/an.

−165 €/an vs TRV

0,1625€/kWh

TTC · 6 kVA

Le plus vert

E

Basic Watt

Enercoop

Label VertVolt « très engagé » de l'ADEME — coopérative 100 % renouvelable, dont 25 % de projets citoyens.

+5 % vs TRV

0,2118€/kWh

TTC · 6 kVA

Le mieux noté

O

Eco-conso Fixe

Octopus Energy

Note 4,8/5 sur 42 528 avis clients — le plus fort taux de satisfaction toutes plateformes confondues.

−8 % vs TRV

0,1857€/kWh

TTC · 6 kVA

Code — variante .style-alt

<div class="sl-offer-mini style-alt">
  <span class="sl-offer-mini__alt-badge cheap">Le moins cher</span>
  
  <div class="sl-offer-mini__left"> ...
    <p class="sl-offer-mini__reason">Raison éditoriale…</p>
  </div>
</div>

Promo en cours .sl-callout.style-promo

Variante .style-promo de .sl-callout : barre orange à gauche (rouge en .warn, vert en .success), badge de statut (« En cours » / « Terminée » / « À venir »), titre, corps libre et footer optionnel. Variantes badge : défaut (orange), .ended (gris), .upcoming (bleu).

Quand l'utiliser ? Pages parrainage, offres promotionnelles ou actualités d'un fournisseur. Ne pas inventer de promo — sourcer depuis le site officiel du fournisseur (cf. règle no invented figures).

Promo en cours

Promo terminée

Promo à venir (badge .upcoming)

Variante .success (barre verte)

Code

<div class="sl-callout style-promo">
  <div class="sl-callout__head">
    <span class="sl-callout__badge">En cours</span>
    <span class="sl-callout__title">Titre promo</span>
  </div>
  <div class="sl-callout__body"><p>Détails…</p></div>
  <div class="sl-callout__footer">Source</div>
</div>

Code promo + bouton copier .sl-promo-code

Tuile avec fond gris pointillé, code en monospace dans une boîte blanche, libellé de réduction + date d'expiration à droite, bouton azure « Copier » (state .copied = vert quand cliqué).

Quand l'utiliser ? Pages parrainage, codes promo Selectra, ou réductions partenaire. Brancher le JS de copie côté template — le state .copied du bouton est géré côté JS.

Variante par défaut

State .copied (bouton vert)

Code

<div class="sl-promo-code">
  <span class="sl-promo-code__code">SELECTRA100</span>
  <div class="sl-promo-code__info">
    <p class="sl-promo-code__disc">100 € de réduction</p>
    <p class="sl-promo-code__expiry">Valable jusqu'au 31/12</p>
  </div>
  <button class="sl-promo-code__btn" type="button">Copier</button>
</div>

CTA téléphone .sl-phone-cta

Gros bouton orange Meteor 500 (#EF983F) avec le numéro en 20 px gras, sous-ligne 11 px pour les horaires ou la mention "Service gratuit". Hover : décollage de 1 px. Élément <a> ou <button>.

Quand l'utiliser ? CTA principal d'une .sl-sticky-panel, ou bouton fort en fin de section guide. Le numéro doit venir de partners.json + phone-tokens.json (jamais hardcodé). Coller la mention partenaire dessous (cf. section 0).

Variante standard

09 87 67 53 05 Service gratuit · Lun-Ven 8h-21h

Selectra partenaire d'EDF pour une sélection d'offres, hors tarifs réglementés.

Sans sous-titre

09 87 67 53 05

Code

<a href="tel:+33987675305" class="sl-phone-cta">
  09 87 67 53 05
  <span class="sub">Service gratuit · Lun-Ven 8h-21h</span>
</a>

Téléphone + horaires .sl-contact-hours

Mini-bloc inline pour afficher un numéro de téléphone avec ses horaires dessous. Plus discret que .sl-phone-cta. Variante .style-pill : tout sur une ligne dans une pill grise.

Quand l'utiliser ? Dans une liste de canaux de contact, en footer d'une .sl-sticky-panel, ou en dehors d'un contexte de conversion (sans CTA orange). Pour capter un appel, préférer .sl-phone-cta.

Variante par défaut

09 87 67 53 05

Lun-Ven 8h-21h · Sam 9h-19h

Variante .style-pill

09 87 67 53 05 Service gratuit

Code

<div class="sl-contact-hours">
  <div class="sl-contact-hours__num"><a href="tel:…">09 87 67 53 05</a></div>
  <div class="sl-contact-hours__meta"><b>Lun-Ven</b> 8h-21h</div>
</div>

CTA gradient bleu .sl-cta-gradient

Gros bloc CTA pleine largeur avec gradient azure 700 → 500, halos radial gradient en coins, icône carrée orange en avant, titre + sous-titre + bouton orange. Très visible — réserver pour la conversion principale.

Quand l'utiliser ? En milieu de page longue ou en fin d'article, comme bouton de conversion principal. Une seule par page. Mention partenaire en variante dark obligatoire dessous si fournisseur partenaire.

Aperçu — conseil Selectra

⚡

Conseil Selectra · Gratuit

Trouvez l'offre la moins chère en 5 minutes

Comparaison 100 % indépendante · Sans engagement · Lun-Ven 8h-21h.

Service gratuit 09 87 67 53 05 →

Code

<div class="sl-cta-gradient">
  <div class="sl-cta-gradient__icon">⚡</div>
  <div class="sl-cta-gradient__body">
    <span class="sl-cta-gradient__label">Surtitre</span>
    <h2 class="sl-cta-gradient__title">Titre <i>accent</i></h2>
    <p class="sl-cta-gradient__sub">Sous-titre…</p>
  </div>
  <div class="sl-cta-gradient__actions">
    <span class="sl-cta-gradient__free">Service gratuit</span>
    <a class="sl-cta-gradient__btn" href="#">09 87 67 53 05</a>
  </div>
</div>

Mention partenaire : ajouter dessous la variante dark de la section 0 (logo blanc + wording partenaire).

Partenariat & mention légale

Mention Selectra partenaire .pt-ic + libellé

Structure & navigation

Hero fournisseur .sl-hero-provider

Tarifs EDF : prix du kWh et offres 2026

Carte sticky de droite .sl-sticky-panel

Sticky TOC horizontale .sl-subnav

Breadcrumb .sl-breadcrumb

Section label .sl-section-label

Appeler le service client EDF

Trouver l'offre la plus compétitive

Pills énergie / toggle .sl-pill-nav

Variante .style-floating — pills sur fond sombre

Données & comparatifs

Grille KPI hero .sl-stats

Variante .cols-4 — grille 4 col avec tints colorés

Verdict 3 métriques .sl-price-compare

Tableau de données .sl-data-table

Légende source .sl-table-source

Variante .style-emergency — contacts d'urgence

Variante .style-bordered — toutes bordures visibles

Score hero .sl-score-hero

Badge Selectra Score .sl-score-badge

Étoiles + note + nb d'avis .sl-stars

Notes par plateforme .sl-platform-ratings

Variante .rows — layout horizontal

Blocs éditoriaux

Encart « à retenir » .sl-callout

Bannière compacte .sl-callout.style-compact

Pros / cons .sl-pros-cons

Ce qu'on aime

Ce qu'on aime moins

Variante .style-soft — gradient pastel

Faite pour vous si…

À éviter si…

Lien hypertexte .sl-link

À lire aussi — 1 lien .sl-single-link

À lire aussi — N liens .sl-multiple-link

Bouton d'action .sl-button

Tailles

Styles

Combinaisons style + taille

Listes à puces .sl-list

Modificateur .size-sm — taille compacte

Variante .style-mixed — mixer ✓ / ✕ / → / ⚠ par item

FAQ accordéon .sl-faq

Variante .style-compact — paddings réduits

Étapes numérotées .sl-steps

Contacter le service client TotalEnergies

Saisir le médiateur TotalEnergies

Saisir le Médiateur National de l'Énergie

Variante .style-vertical — timeline verticale

Contacter le service client

Attendre 2 mois

Saisir le médiateur

Bio expert complète .sl-author-card

Chloé Servigne

Avis d'expert (variante) .sl-author-card.style-quote

Cartes & grilles

Grille cartes contact / action .sl-card-grid

Variante .recommended + __footer

Variante .style-compact — cartes serrées centrées

EDF

TotalEnergies

Octopus

Alterna

Discovery sous-pages fournisseur .sl-card-grid.style-nav

Articles liés .sl-related-articles

Comment changer de fournisseur d'électricité en 5 minutes ?

Prix du kWh d'électricité : tendances et prévisions 2026

Quelles sont les meilleures offres d'électricité verte ?

Sans image — version texte seul

Comment changer de fournisseur d'électricité en 5 minutes ?

Prix du kWh d'électricité : tendances et prévisions 2026

Quelles sont les meilleures offres d'électricité verte ?

Adresse postale + map .sl-address-card

GROUPE EDF

TotalEnergies — TIP/chèque

Offres & promo

Mini-carte offre .sl-offer-mini