Référence

Blocs pour les pages services

Les structures de mise en page prêtes à copier pour construire une page prestation : colonnes, images, tableaux, encarts et squelette complet.

Bibliothèque de composants Voir une page réelle

Cette page complète la bibliothèque de composants : celle-ci décrit les éléments isolés, celle-là les assemblages d'une page service. Chaque bloc est montré en rendu réel puis en code à copier. Toutes les classes viennent de assets/css/nefty-v2.css ; seules les hauteurs d'image et les largeurs de colonne particulières passent par un style en ligne.

Mise en page

Structures en colonnes

Deux colonnes égales

La structure de base d'une page service : le texte d'un côté, un encadré ou une image de l'autre. .split passe sur une colonne sous 980 px.

En quelques mots

Titre de la section

Premier paragraphe décrivant la prestation et le contexte dans lequel elle se justifie.

Second paragraphe : ce que nous vérifions avant de proposer une solution.

Ce que nous prenons en charge

Premier poste de la prestation
Deuxième poste de la prestation
Troisième poste de la prestation

Voir le code HTML

<div class="split">
  <div>
    <p class="eyebrow">En quelques mots</p>
    <h2>Titre de la section</h2>
    <p class="lead">Premier paragraphe décrivant la prestation et le contexte dans lequel elle se justifie.</p>
    <p>Second paragraphe : ce que nous vérifions avant de proposer une solution.</p>
  </div>
  <div class="side-card">
    <p class="eyebrow">Ce que nous prenons en charge</p>
    <ul class="check-list">
      <li>Premier poste de la prestation</li>
      <li>Deuxième poste de la prestation</li>
      <li>Troisième poste de la prestation</li>
    </ul>
  </div>
</div>

Colonnes inégales

.split-cols donne davantage de place au texte (1,15 / 0,85). C'est la structure des pages prestations du site.

Notre approche

Colonne principale

Elle porte le texte de fond. La colonne secondaire accueille un encadré, un chiffre clé ou une photo.

Bon à savoir

Rappel réglementaire, précision technique ou coordonnées.

Voir le code HTML

<div class="split-cols">
  <div>
    <p class="eyebrow">Notre approche</p>
    <h2>Colonne principale</h2>
    <p>Elle porte le texte de fond. La colonne secondaire accueille un encadré, un chiffre clé ou une photo.</p>
  </div>
  <div class="side-card">
    <p class="eyebrow">Bon à savoir</p>
    <p>Rappel réglementaire, précision technique ou coordonnées.</p>
  </div>
</div>

Trois colonnes

Pour les arguments ou les points de contact. .grid-2 et .grid-3 existent ; au-delà, utiliser .services-grid qui s'ajuste tout seul.

↗

Premier point

Une description courte, deux à trois lignes, qui reste concrète.

↗

Deuxième point

Une description courte, deux à trois lignes, qui reste concrète.

↗

Troisième point

Une description courte, deux à trois lignes, qui reste concrète.

Voir le code HTML

<div class="grid-3">
  <article class="step-card"><div class="step-num">↗</div><h3>Premier point</h3><p>Une description courte, deux à trois lignes, qui reste concrète.</p></article>
  <article class="step-card"><div class="step-num">↗</div><h3>Deuxième point</h3><p>Une description courte, deux à trois lignes, qui reste concrète.</p></article>
  <article class="step-card"><div class="step-num">↗</div><h3>Troisième point</h3><p>Une description courte, deux à trois lignes, qui reste concrète.</p></article>
</div>

Colonne latérale avec sommaire

.doc-layout fixe une colonne de 270 px à gauche. Le sommaire suit le défilement sur grand écran.

Contenu principal

Le corps de la page vient ici. Chaque section porte un id qui correspond à un lien du sommaire.

Voir le code HTML

<div class="doc-layout">
  <nav class="anchor-nav" style="position:static">
    <p class="eyebrow">Sur cette page</p>
    <a href="#colonnes">La prestation</a>
    <a href="#images">Le déroulé</a>
    <a href="#tableaux">Les tarifs</a>
  </nav>
  <div>
    <h2>Contenu principal</h2>
    <p>Le corps de la page vient ici. Chaque section porte un <code>id</code> qui correspond à un lien du sommaire.</p>
  </div>
</div>

Mise en page

Images et médias

Photo pleine largeur avec légende

Les photos se posent en background-image par un style en ligne : c'est la convention du site, les balises <img> ne servent que pour le logo.

Une légende courte, ou une citation de chantier.

Voir le code HTML

<div class="wide-photo" style="height:320px;background-image:url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1600&q=80')">
  <div class="caption">Une légende courte, ou une citation de chantier.</div>
</div>

Galerie de chantier

Trois à six visuels de même hauteur.

Voir le code HTML

<div class="grid-3">
  <div class="ratio-photo" style="height:200px;background-image:url('https://images.unsplash.com/photo-1621905251918-48416bd8575a?auto=format&fit=crop&w=1600&q=80')"></div>
  <div class="ratio-photo" style="height:200px;background-image:url('https://images.unsplash.com/photo-1621905251189-08b45d6a269e?auto=format&fit=crop&w=1600&q=80')"></div>
  <div class="ratio-photo" style="height:200px;background-image:url('https://images.unsplash.com/photo-1607472586893-edb57bdc0e39?auto=format&fit=crop&w=1600&q=80')"></div>
</div>

Avant / après

Deux visuels côte à côte avec leur étiquette. Le format le plus parlant sur une page rénovation.

Avant Installation d'origine, tableau saturé.

Après Coffret neuf, circuits repérés, réserve disponible.

Voir le code HTML

<div class="grid-2">
  <figure style="margin:0">
    <div class="ratio-photo" style="height:260px;background-image:url('https://images.unsplash.com/photo-1517420704952-d9f39e95b43e?auto=format&fit=crop&w=1600&q=80')"></div>
    <figcaption class="doc-note" style="margin-top:10px"><span class="chip plain">Avant</span> Installation d'origine, tableau saturé.</figcaption>
  </figure>
  <figure style="margin:0">
    <div class="ratio-photo" style="height:260px;background-image:url('https://images.unsplash.com/photo-1621905251189-08b45d6a269e?auto=format&fit=crop&w=1600&q=80')"></div>
    <figcaption class="doc-note" style="margin-top:10px"><span class="chip">Après</span> Coffret neuf, circuits repérés, réserve disponible.</figcaption>
  </figure>
</div>

Vignettes légendées

Quatre visuels courts avec une légende sous chacun : matériel posé, marques partenaires ou étapes rapides.

Tableau électrique
Coffret repéré, réserve disponible.

Réseau d'eau
Distribution par nourrices.

Chauffage
Émetteurs basse température.

Pilotage
Une seule application.

Voir le code HTML

<div class="grid-2" style="grid-template-columns:repeat(4,1fr)">
  <figure class="vignette" style="margin:0"><div class="photo" style="background-image:url('https://images.unsplash.com/photo-1621905251189-08b45d6a269e?auto=format&fit=crop&w=1600&q=80')"></div><figcaption><strong>Tableau électrique</strong><br>Coffret repéré, réserve disponible.</figcaption></figure>
  <figure class="vignette" style="margin:0"><div class="photo" style="background-image:url('https://images.unsplash.com/photo-1607472586893-edb57bdc0e39?auto=format&fit=crop&w=1600&q=80')"></div><figcaption><strong>Réseau d'eau</strong><br>Distribution par nourrices.</figcaption></figure>
  <figure class="vignette" style="margin:0"><div class="photo" style="background-image:url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1600&q=80')"></div><figcaption><strong>Chauffage</strong><br>Émetteurs basse température.</figcaption></figure>
  <figure class="vignette" style="margin:0"><div class="photo" style="background-image:url('https://images.unsplash.com/photo-1558002038-1055907df827?auto=format&fit=crop&w=1600&q=80')"></div><figcaption><strong>Pilotage</strong><br>Une seule application.</figcaption></figure>
</div>

Encart carte ou plan

Réservation visuelle en attendant l'iframe Google Maps ou OpenStreetMap.

Zone d'intervention

Emplacement réservé à la carte interactive.

Voir le code HTML

<div class="media-cover" style="min-height:240px;display:grid;place-items:center;border:1px dashed var(--line);background:var(--sand)">
  <div style="text-align:center;padding:20px">
    <p class="eyebrow" style="justify-content:center">Zone d'intervention</p>
    <p class="doc-note">Emplacement réservé à la carte interactive.</p>
  </div>
</div>

Mise en page

Combinaisons texte et photo

Photo à gauche, texte à droite

L'ordre des deux enfants du .split décide de tout. Sur mobile, la colonne écrite passe systématiquement sous la photo.

Notre méthode

Titre de la section

Deux à quatre lignes, le temps d'expliquer ce que montre la photo et pourquoi cela compte pour le lecteur.

Premier point vérifié
Second point vérifié

Voir le code HTML

<div class="split">
  <div class="ratio-photo" style="height:320px;background-image:url('https://images.unsplash.com/photo-1607472586893-edb57bdc0e39?auto=format&fit=crop&w=1600&q=80')"></div>
  <div>
    <p class="eyebrow">Notre méthode</p>
    <h2>Titre de la section</h2>
    <p>Deux à quatre lignes, le temps d'expliquer ce que montre la photo et pourquoi cela compte pour le lecteur.</p>
    <ul class="check-list"><li>Premier point vérifié</li><li>Second point vérifié</li></ul>
  </div>
</div>

Texte à gauche, photo à droite

Le miroir du bloc précédent : même code, les deux enfants inversés.

Notre méthode

Titre de la section

Deux à quatre lignes, le temps d'expliquer ce que montre la photo et pourquoi cela compte pour le lecteur.

Voir le code HTML

<div class="split">
  <div>
    <p class="eyebrow">Notre méthode</p>
    <h2>Titre de la section</h2>
    <p>Deux à quatre lignes, le temps d'expliquer ce que montre la photo et pourquoi cela compte pour le lecteur.</p>
    <a class="btn dark" href="#">En savoir plus</a>
  </div>
  <div class="ratio-photo" style="height:320px;background-image:url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1600&q=80')"></div>
</div>

Alternance sur plusieurs rangées

Le format le plus efficace pour dérouler une prestation en plusieurs temps : on alterne le côté de la photo à chaque rangée.

Étape 1

Le diagnostic

Ce que nous relevons sur place avant de chiffrer quoi que ce soit.

Étape 2

La réalisation

Comment le chantier s'organise, et ce que cela change pour vous au quotidien.

Voir le code HTML

<div class="split">
  <div class="ratio-photo" style="height:260px;background-image:url('https://images.unsplash.com/photo-1621905251918-48416bd8575a?auto=format&fit=crop&w=1600&q=80')"></div>
  <div>
    <span class="chip">Étape 1</span>
    <h3 style="font-size:26px;margin-top:12px">Le diagnostic</h3>
    <p>Ce que nous relevons sur place avant de chiffrer quoi que ce soit.</p>
  </div>
</div>
<div class="split" style="margin-top:34px">
  <div>
    <span class="chip">Étape 2</span>
    <h3 style="font-size:26px;margin-top:12px">La réalisation</h3>
    <p>Comment le chantier s'organise, et ce que cela change pour vous au quotidien.</p>
  </div>
  <div class="ratio-photo" style="height:260px;background-image:url('https://images.unsplash.com/photo-1621905251189-08b45d6a269e?auto=format&fit=crop&w=1600&q=80')"></div>
</div>

Panneau de texte accolé à la photo

Sans gouttière entre les colonnes : le texte occupe un panneau plein. Fort visuellement, à n'utiliser qu'une fois par page.

Pourquoi nous

Un seul interlocuteur

Électricité, plomberie et chauffage coordonnés par la même équipe, sur le même planning.

Demander un devis

Voir le code HTML

<div class="split-flush">
  <div class="pane dark-pane">
    <p class="eyebrow">Pourquoi nous</p>
    <h2>Un seul interlocuteur</h2>
    <p>Électricité, plomberie et chauffage coordonnés par la même équipe, sur le même planning.</p>
    <div style="margin-top:18px"><a class="btn" href="#">Demander un devis</a></div>
  </div>
  <div class="media" style="background-image:url('https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&w=1600&q=80')"></div>
</div>

Encadré débordant sur la photo

Un chiffre clé posé en angle bas de l'image. Sur mobile, l'encadré repasse sous la photo.

Résultat mesuré

−30 %

sur la facture de chauffage, après remplacement de la chaudière et équilibrage du réseau.

Voir le code HTML

<div class="media-overlay">
  <div class="photo" style="height:360px;background-image:url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1600&q=80')"></div>
  <div class="box dark-box">
    <p class="eyebrow">Résultat mesuré</p>
    <h3 style="font-size:32px">−30 %</h3>
    <p>sur la facture de chauffage, après remplacement de la chaudière et équilibrage du réseau.</p>
  </div>
</div>

Texte avec deux photos empilées

Quand une seule image ne suffit pas, sans passer à une galerie complète.

Sur le chantier

Deux visuels pour une idée

La première photo montre le contexte, la seconde le détail technique. C'est souvent plus parlant qu'un paragraphe supplémentaire.

Voir le code HTML

<div class="split">
  <div>
    <p class="eyebrow">Sur le chantier</p>
    <h2>Deux visuels pour une idée</h2>
    <p>La première photo montre le contexte, la seconde le détail technique. C'est souvent plus parlant qu'un paragraphe supplémentaire.</p>
  </div>
  <div class="media-stack">
    <div style="background-image:url('https://images.unsplash.com/photo-1556911220-e15b29be8c8f?auto=format&fit=crop&w=1600&q=80')"></div>
    <div style="background-image:url('https://images.unsplash.com/photo-1607472586893-edb57bdc0e39?auto=format&fit=crop&w=1600&q=80')"></div>
  </div>
</div>

Texte avec mosaïque

Une grande image et deux petites, pour une page réalisation. La mosaïque se déplie verticalement sur mobile.

Réalisation

Rénovation complète d'une longère

Description du chantier : périmètre, contraintes, durée et résultat obtenu.

ÉlectricitéPlomberie

Voir le code HTML

<div class="split">
  <div>
    <p class="eyebrow">Réalisation</p>
    <h2>Rénovation complète d'une longère</h2>
    <p>Description du chantier : périmètre, contraintes, durée et résultat obtenu.</p>
    <div class="child-links"><span class="chip">Électricité</span><span class="chip">Plomberie</span></div>
  </div>
  <div class="mosaic">
    <div style="background-image:url('https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=1600&q=80')"></div>
    <div style="background-image:url('https://images.unsplash.com/photo-1621905251189-08b45d6a269e?auto=format&fit=crop&w=1600&q=80')"></div>
    <div style="background-image:url('https://images.unsplash.com/photo-1621905251918-48416bd8575a?auto=format&fit=crop&w=1600&q=80')"></div>
  </div>
</div>

Photo verticale et texte long

Pour les sections denses : la photo en portrait tient la hauteur du texte sans être étirée.

En détail

Un texte qui a besoin de place

Ce format convient aux explications techniques qui demandent plusieurs blocs de texte sans casser la lecture.

Point de contrôle
Point de contrôle
Point de contrôle

Voir le code HTML

<div class="split" style="grid-template-columns:1fr 1.4fr;align-items:start">
  <div class="portrait" style="height:420px;background-image:url('https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&w=1600&q=80')"></div>
  <div>
    <p class="eyebrow">En détail</p>
    <h2>Un texte qui a besoin de place</h2>
    <p>Ce format convient aux explications techniques qui demandent plusieurs blocs de texte sans casser la lecture.</p>
    <ul class="check-list"><li>Point de contrôle</li><li>Point de contrôle</li><li>Point de contrôle</li></ul>
  </div>
</div>

Photo, texte, photo

Trois colonnes qui encadrent le texte. Sur mobile, tout s'empile dans l'ordre du HTML.

Domotique

Le texte au centre

Un paragraphe court, encadré par deux visuels de même hauteur.

Voir le code HTML

<div class="grid-3" style="align-items:center">
  <div class="ratio-photo" style="height:260px;background-image:url('https://images.unsplash.com/photo-1558002038-1055907df827?auto=format&fit=crop&w=1600&q=80')"></div>
  <div style="text-align:center">
    <p class="eyebrow" style="justify-content:center">Domotique</p>
    <h3 style="font-size:24px">Le texte au centre</h3>
    <p>Un paragraphe court, encadré par deux visuels de même hauteur.</p>
  </div>
  <div class="ratio-photo" style="height:260px;background-image:url('https://images.unsplash.com/photo-1556912172-45b7abe8b7e1?auto=format&fit=crop&w=1600&q=80')"></div>
</div>

Texte posé sur la photo

Bandeau pleine largeur avec le texte par-dessus l'image. Le dégradé garantit la lisibilité quelle que soit la photo.

Dépannage

Une panne ne prévient pas

Nous cherchons la cause avant de réparer, et nous sécurisons l'installation dès la première visite.

Nous appeler Voir la prestation

Voir le code HTML

<div class="media-hero" style="background-image:url('https://images.unsplash.com/photo-1517420704952-d9f39e95b43e?auto=format&fit=crop&w=1600&q=80')">
  <div class="copy">
    <p class="eyebrow">Dépannage</p>
    <h2>Une panne ne prévient pas</h2>
    <p>Nous cherchons la cause avant de réparer, et nous sécurisons l'installation dès la première visite.</p>
    <div style="margin-top:18px;display:flex;gap:12px;flex-wrap:wrap">
      <a class="btn" href="#">Nous appeler</a>
      <a class="btn outline" href="#">Voir la prestation</a>
    </div>
  </div>
</div>

Contenu

Tableaux

Tableau comparatif de solutions

Le format le plus utile sur une page service : aider à choisir entre deux ou trois technologies.

Valeurs indicatives, à confirmer par une étude sur site.
Critère	PAC air/eau	PAC air/air	Chaudière gaz
Chauffage central	Oui	Non	Oui
Eau chaude sanitaire	Oui, avec ballon	Non	Oui
Rafraîchissement	Selon modèle	Oui	Non
Réseau existant réutilisé	Oui	Non	Oui

Voir le code HTML

<div class="table-wrap">
  <table class="table">
    <caption class="doc-note" style="caption-side:bottom;text-align:left;padding:10px 18px">Valeurs indicatives, à confirmer par une étude sur site.</caption>
    <thead><tr><th>Critère</th><th>PAC air/eau</th><th>PAC air/air</th><th>Chaudière gaz</th></tr></thead>
    <tbody>
      <tr><td><strong>Chauffage central</strong></td><td>Oui</td><td>Non</td><td>Oui</td></tr>
      <tr><td><strong>Eau chaude sanitaire</strong></td><td>Oui, avec ballon</td><td>Non</td><td>Oui</td></tr>
      <tr><td><strong>Rafraîchissement</strong></td><td>Selon modèle</td><td>Oui</td><td>Non</td></tr>
      <tr><td><strong>Réseau existant réutilisé</strong></td><td>Oui</td><td>Non</td><td>Oui</td></tr>
    </tbody>
  </table>
</div>

Caractéristiques techniques

Deux colonnes, sans en-tête coloré : pour les données d'un équipement.

Puissance	6 à 16 kW selon les déperditions
Température de départ	35 °C en plancher chauffant, 45 à 55 °C en radiateurs
Niveau sonore	35 à 45 dB(A) à 3 mètres
Durée de vie moyenne	15 à 20 ans avec entretien régulier

Voir le code HTML

<div class="table-wrap">
  <table class="table">
    <tbody>
      <tr><td style="width:45%"><strong>Puissance</strong></td><td>6 à 16 kW selon les déperditions</td></tr>
      <tr><td><strong>Température de départ</strong></td><td>35 °C en plancher chauffant, 45 à 55 °C en radiateurs</td></tr>
      <tr><td><strong>Niveau sonore</strong></td><td>35 à 45 dB(A) à 3 mètres</td></tr>
      <tr><td><strong>Durée de vie moyenne</strong></td><td>15 à 20 ans avec entretien régulier</td></tr>
    </tbody>
  </table>
</div>

Tarifs indicatifs

Une colonne d'action en fin de ligne renvoie au formulaire. Toujours accompagner d'une mention précisant que seul le devis fait foi.

Prestation	À partir de	Durée
Remplacement de tableau électrique	À l'étude	1 journée	Demander un devis →
Mise en sécurité avant location	À l'étude	1 à 2 jours	Demander un devis →
Recherche de panne	Sur devis	2 à 3 heures	Demander un devis →

Montants indicatifs. Seul le devis établi après visite technique a valeur d'engagement.

Voir le code HTML

<div class="table-wrap">
  <table class="table">
    <thead><tr><th>Prestation</th><th>À partir de</th><th>Durée</th><th></th></tr></thead>
    <tbody>
      <tr><td>Remplacement de tableau électrique</td><td>À l'étude</td><td>1 journée</td><td><a class="child-more" href="#">Demander un devis →</a></td></tr>
      <tr><td>Mise en sécurité avant location</td><td>À l'étude</td><td>1 à 2 jours</td><td><a class="child-more" href="#">Demander un devis →</a></td></tr>
      <tr><td>Recherche de panne</td><td>Sur devis</td><td>2 à 3 heures</td><td><a class="child-more" href="#">Demander un devis →</a></td></tr>
    </tbody>
  </table>
</div>
<p class="form-note">Montants indicatifs. Seul le devis établi après visite technique a valeur d'engagement.</p>

Aides financières

Dispositif	Concerne	Éligibilité
MaPrimeRénov'	Pompe à chaleur, chauffe-eau thermodynamique	Sous conditions
Certificats d'économies d'énergie	Remplacement d'un chauffage ancien	Cumulable
TVA à taux réduit	Logement de plus de deux ans	Sous conditions

Voir le code HTML

<div class="table-wrap">
  <table class="table">
    <thead><tr><th>Dispositif</th><th>Concerne</th><th>Éligibilité</th></tr></thead>
    <tbody>
      <tr><td>MaPrimeRénov'</td><td>Pompe à chaleur, chauffe-eau thermodynamique</td><td><span class="chip plain">Sous conditions</span></td></tr>
      <tr><td>Certificats d'économies d'énergie</td><td>Remplacement d'un chauffage ancien</td><td><span class="chip">Cumulable</span></td></tr>
      <tr><td>TVA à taux réduit</td><td>Logement de plus de deux ans</td><td><span class="chip plain">Sous conditions</span></td></tr>
    </tbody>
  </table>
</div>

Contenu

Listes, encarts et chiffres

Prestations incluses

Ce que nous prenons en charge

Dépose et évacuation de l'ancien équipement
Fourniture et pose du matériel neuf
Raccordements hydrauliques et électriques
Mise en service, réglages et prise en main

Voir le code HTML

<div class="side-card">
  <p class="eyebrow">Ce que nous prenons en charge</p>
  <ul class="check-list">
    <li>Dépose et évacuation de l'ancien équipement</li>
    <li>Fourniture et pose du matériel neuf</li>
    <li>Raccordements hydrauliques et électriques</li>
    <li>Mise en service, réglages et prise en main</li>
  </ul>
</div>

Encadrés d'information

À placer près du paragraphe concerné, jamais en série de quatre.

Bon à savoir. L'entretien annuel conditionne le maintien de la garantie constructeur.

À vérifier avant travaux. La présence du neutre dans la boîte conditionne la pose d'un module connecté.

Voir le code HTML

<div class="alert alert-info"><strong>Bon à savoir.</strong> L'entretien annuel conditionne le maintien de la garantie constructeur.</div>
<div class="alert alert-warning"><strong>À vérifier avant travaux.</strong> La présence du neutre dans la boîte conditionne la pose d'un module connecté.</div>

Étapes numérotées

Visite technique

Relevé sur place et analyse de l'existant.

Devis détaillé

Poste par poste, avec les références du matériel.

Réalisation

Chantier organisé et daté à l'avance.

Mise en service

Essais, réglages et explication du fonctionnement.

Voir le code HTML

<div class="steps-grid" style="margin-top:0">
  <article class="step-card"><div class="step-num">1</div><h3>Visite technique</h3><p>Relevé sur place et analyse de l'existant.</p></article>
  <article class="step-card"><div class="step-num">2</div><h3>Devis détaillé</h3><p>Poste par poste, avec les références du matériel.</p></article>
  <article class="step-card"><div class="step-num">3</div><h3>Réalisation</h3><p>Chantier organisé et daté à l'avance.</p></article>
  <article class="step-card"><div class="step-num">4</div><h3>Mise en service</h3><p>Essais, réglages et explication du fonctionnement.</p></article>
</div>

Chiffres clés

0 à 4fois l'énergie consommée, restituée

0 ansdurée de vie moyenne

0 jourdurée d'installation courante

−0 %sur la facture de chauffage

Voir le code HTML

<div class="numbers">
  <div class="number-item"><strong data-count="3">0 à 4</strong><span>fois l'énergie consommée, restituée</span></div>
  <div class="number-item"><strong data-count="15">0 ans</strong><span>durée de vie moyenne</span></div>
  <div class="number-item"><strong data-count="1">0 jour</strong><span>durée d'installation courante</span></div>
  <div class="number-item"><strong data-count="30">−0 %</strong><span>sur la facture de chauffage</span></div>
</div>

FAQ de la prestation

Le premier item reste ouvert pour signaler que le bloc est dépliable.

Réponse en trois à quatre lignes, concrète, sans jargon inutile.

Voir le code HTML

<div class="accordion">
  <article class="faq-item is-open">
    <button class="faq-btn" type="button">Première question fréquente ? <span class="plus">+</span></button>
    <div class="faq-body"><div><p>Réponse en trois à quatre lignes, concrète, sans jargon inutile.</p></div></div>
  </article>
  <article class="faq-item">
    <button class="faq-btn" type="button">Deuxième question fréquente ? <span class="plus">+</span></button>
    <div class="faq-body"><div><p>Réponse en trois à quatre lignes, concrète, sans jargon inutile.</p></div></div>
  </article>
</div>

Liens vers les prestations voisines

À placer en bas de page : c'est ce maillage qui fait circuler le visiteur entre les pages d'un même métier.

Voir aussi en électricité

Voir le code HTML

<p class="eyebrow">Voir aussi en électricité</p>
<ul class="link-list">
  <li><a href="#"><span>Rénovation électrique</span><span>↗</span></a></li>
  <li><a href="#"><span>Mise aux normes</span><span>↗</span></a></li>
  <li><a href="#"><span>Dépannage électrique</span><span>↗</span></a></li>
</ul>

Gabarit

Squelette complet d'une page service

Structure recommandée

L'ordre des sections d'une page prestation. Chaque bloc est détaillé plus haut : il suffit de remplacer les commentaires par le code correspondant.

<!-- 1. En-tête : fil d'Ariane, surtitre, titre, accroche, boutons -->
<section class="page-hero" style="background-image:url('../assets/img/photo.jpg')">
  <div class="container">
    <nav aria-label="Fil d'Ariane">
      <ol class="breadcrumb">
        <li><a href="../index.html">Accueil</a></li>
        <li><a href="index.html">Métier</a></li>
        <li aria-current="page">Prestation</li>
      </ol>
    </nav>
    <p class="eyebrow">Métier</p>
    <h1>Titre de la prestation</h1>
    <p>Une phrase d'accroche qui dit à qui s'adresse la page.</p>
    <div class="page-actions">
      <a href="../contact/index.html" class="btn">Demander un devis</a>
      <a href="tel:+33299613151" class="btn dark">02 99 61 31 51</a>
    </div>
  </div>
</section>

<!-- 2. Introduction : texte à gauche, prestations incluses à droite -->
<section class="section">
  <div class="container split-cols">
    <div class="reveal">…</div>
    <div class="reveal"><div class="side-card">…</div></div>
  </div>
</section>

<!-- 3. Arguments sur fond sable, en cartes sombres -->
<section class="section sand">
  <div class="container"><div class="services-grid">…</div></div>
</section>

<!-- 4. Déroulé de l'intervention -->
<section class="section">
  <div class="container"><div class="steps-grid">…</div></div>
</section>

<!-- 5. Tableau comparatif ou caractéristiques (facultatif) -->
<section class="section">
  <div class="container"><div class="table-wrap">…</div></div>
</section>

<!-- 6. Questions fréquentes -->
<section class="section sand">
  <div class="container"><div class="faq-grid">…</div></div>
</section>

<!-- 7. Prestations voisines du même métier -->
<section class="section">
  <div class="container"><ul class="link-list">…</ul></div>
</section>

<!-- 8. Bandeau d'appel à l'action -->
<section class="cta">
  <div class="container">…</div>
</section>

En-tête du fichier

À reprendre tel quel en haut de toute nouvelle page. Adapter le nombre de ../ à la profondeur du dossier. La classe entete-flottant fait passer la barre de navigation par-dessus le visuel.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Titre de la page — NEFTY</title>
  <meta name="description" content="Description de 150 à 160 caractères." />
  <meta name="theme-color" content="#24353F" />
  <link rel="stylesheet" href="../assets/css/nefty-v2.css" />
</head>
<body class="entete-flottant">
  <!-- en-tête, contenu, pied de page -->
  <script src="../assets/js/nefty-v2.js"></script>
</body>
</html>

Apparition au défilement

Ajouter reveal sur un bloc le fait apparaître en fondu quand il entre dans l'écran. À réserver aux blocs de premier niveau d'une section — pas à chaque carte.

<div class="container split-cols">
  <div class="reveal">…</div>
  <div class="reveal">…</div>
</div>