Fondations

Couleurs et variables

Palette de marque

Les deux couleurs NEFTY et leurs déclinaisons, disponibles en variables CSS dans assets/css/nefty-v2.css.

Bleu ardoise — #24353F, --dark

Orange NEFTY — #EE732C, --orange

#1A2830 — --dark-2

#D8621C — --orange-dark

#6B7A82 — --muted

Voir le code HTML

<div class="grid-2">
  <div><div class="swatch" style="background:#24353F"></div><p class="doc-note" style="margin-top:8px"><strong>Bleu ardoise</strong> — #24353F, <code>--dark</code></p></div>
  <div><div class="swatch" style="background:#EE732C"></div><p class="doc-note" style="margin-top:8px"><strong>Orange NEFTY</strong> — #EE732C, <code>--orange</code></p></div>
</div>
<div class="grid-3" style="margin-top:16px">
  <div><div class="swatch" style="background:#1A2830;height:56px"></div><p class="doc-note" style="margin-top:8px">#1A2830 — <code>--dark-2</code></p></div>
  <div><div class="swatch" style="background:#D8621C;height:56px"></div><p class="doc-note" style="margin-top:8px">#D8621C — <code>--orange-dark</code></p></div>
  <div><div class="swatch" style="background:#6B7A82;height:56px"></div><p class="doc-note" style="margin-top:8px">#6B7A82 — <code>--muted</code></p></div>
</div>

Fonds et filets

Le site alterne deux fonds : la couleur de page et les sections « sable », posées avec <section class="section sand">.

#F6F5F2 — --bg

#ECEAE5 — --sand

#FFFFFF — cartes

Voir le code HTML

<div class="grid-3">
  <div><div class="swatch" style="background:#F6F5F2;height:56px;border:1px solid #E4E2DC"></div><p class="doc-note" style="margin-top:8px">#F6F5F2 — <code>--bg</code></p></div>
  <div><div class="swatch" style="background:#ECEAE5;height:56px"></div><p class="doc-note" style="margin-top:8px">#ECEAE5 — <code>--sand</code></p></div>
  <div><div class="swatch" style="background:#fff;height:56px;border:1px solid #E4E2DC"></div><p class="doc-note" style="margin-top:8px">#FFFFFF — cartes</p></div>
</div>

Fondations

Typographie

Surtitre, titres et paragraphes

Le surtitre .eyebrow ouvre presque toutes les sections : il porte le trait orange qui précède le texte.

Surtitre de section

Titre de niveau 2

Chapeau d'introduction : une phrase qui pose le sujet de la section en restant lisible.

Titre de niveau 3

Paragraphe courant. Le corps de texte utilise la couleur secondaire pour rester confortable sur les longs blocs.

Voir le code HTML

<p class="eyebrow">Surtitre de section</p>
<h2>Titre de niveau 2</h2>
<p class="lead">Chapeau d'introduction : une phrase qui pose le sujet de la section en restant lisible.</p>
<h3>Titre de niveau 3</h3>
<p>Paragraphe courant. Le corps de texte utilise la couleur secondaire pour rester confortable sur les longs blocs.</p>

Titre de page

Le h1 est blanc par défaut : il n'apparaît que sur les visuels sombres des en-têtes de page.

Nos métiers

Titre de page sur visuel sombre

Voir le code HTML

<div style="background:#24353F;border-radius:12px;padding:34px">
  <p class="eyebrow">Nos métiers</p>
  <h1 style="font-size:52px">Titre de page sur visuel sombre</h1>
</div>

Composants

Boutons et pastilles

Variantes de bouton

.btn.outline est prévu pour les fonds sombres : il est présenté ici sur un aplat bleu ardoise.

Bouton principal Bouton foncé

Bouton contour

Voir le code HTML

<div style="display:flex;gap:12px;flex-wrap:wrap;align-items:center">
  <a class="btn" href="#">Bouton principal</a>
  <a class="btn dark" href="#">Bouton foncé</a>
</div>
<div style="background:#24353F;border-radius:12px;padding:22px;margin-top:16px">
  <a class="btn outline" href="#">Bouton contour</a>
</div>

Pastilles

.chip pour une étiquette orange, .chip.plain pour une information neutre, .tag pour l'étiquette posée sur une photo.

Électricité Pompe à chaleur 3 semaines Boisgervilly

Voir le code HTML

<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center">
  <span class="chip">Électricité</span>
  <span class="chip">Pompe à chaleur</span>
  <span class="chip plain">3 semaines</span>
  <span class="chip plain">Boisgervilly</span>
</div>

Composants

Cartes

Carte de prestation

Le format des sous-pages d'un métier : visuel, titre, description et lien. C'est .child-card.

Nom de la prestation

Une phrase de présentation qui donne le périmètre exact de l'intervention.

En savoir plus →

Nom de la prestation

Une phrase de présentation qui donne le périmètre exact de l'intervention.

Sous-page Sous-page

En savoir plus →

Nom de la prestation

Une phrase de présentation qui donne le périmètre exact de l'intervention.

En savoir plus →

Voir le code HTML

<div class="grid-3">
  <article class="child-card">
    <div class="child-media" style="background-image:url('https://images.unsplash.com/photo-1621905251189-08b45d6a269e?auto=format&fit=crop&w=1600&q=80')"></div>
    <div class="child-body">
      <h3><a href="#">Nom de la prestation</a></h3>
      <p>Une phrase de présentation qui donne le périmètre exact de l'intervention.</p>
      <a class="child-more" href="#">En savoir plus →</a>
    </div>
  </article>
  <article class="child-card">
    <div class="child-media" style="background-image:url('https://images.unsplash.com/photo-1607472586893-edb57bdc0e39?auto=format&fit=crop&w=1600&q=80')"></div>
    <div class="child-body">
      <h3><a href="#">Nom de la prestation</a></h3>
      <p>Une phrase de présentation qui donne le périmètre exact de l'intervention.</p>
      <div class="child-links"><a class="chip" href="#">Sous-page</a><a class="chip" href="#">Sous-page</a></div>
      <a class="child-more" href="#">En savoir plus →</a>
    </div>
  </article>
  <article class="child-card">
    <div class="child-media" style="background-image:url('https://images.unsplash.com/photo-1558002038-1055907df827?auto=format&fit=crop&w=1600&q=80')"></div>
    <div class="child-body">
      <h3><a href="#">Nom de la prestation</a></h3>
      <p>Une phrase de présentation qui donne le périmètre exact de l'intervention.</p>
      <a class="child-more" href="#">En savoir plus →</a>
    </div>
  </article>
</div>

Carte sombre à pictogramme

.service-card : utilisée pour les métiers et les arguments. Le pictogramme accepte un caractère, un chiffre ou une icône.

⚡

Électricité

Installation, rénovation, mise aux normes, tableau et dépannage.

💧

Plomberie

Création, rénovation, salle de bains, chauffe-eau et dépannage.

1

Argument numéroté

Le même composant sert aux engagements, avec un chiffre à la place du pictogramme.

Voir le code HTML

<div class="services-grid" style="margin-top:0">
  <article class="service-card"><div class="service-icon">⚡</div><h3>Électricité</h3><p>Installation, rénovation, mise aux normes, tableau et dépannage.</p></article>
  <article class="service-card"><div class="service-icon">💧</div><h3>Plomberie</h3><p>Création, rénovation, salle de bains, chauffe-eau et dépannage.</p></article>
  <article class="service-card"><div class="service-icon">1</div><h3>Argument numéroté</h3><p>Le même composant sert aux engagements, avec un chiffre à la place du pictogramme.</p></article>
</div>

Carte de réalisation

.project-card : une photo de fond, un dégradé et le texte posé en bas.

Rénovation électrique complète

Mise aux normes, tableau, appareillage et éclairage.

Salle de bains & plomberie

Création ou rénovation avec ballon d'eau chaude et finitions.

Voir le code HTML

<div class="portfolio-grid">
  <article class="project-card" style="background-image:url('https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=1600&q=80')"><div><h3>Rénovation électrique complète</h3><p>Mise aux normes, tableau, appareillage et éclairage.</p></div></article>
  <article class="project-card" style="background-image:url('https://images.unsplash.com/photo-1556911220-e15b29be8c8f?auto=format&fit=crop&w=1600&q=80')"><div><h3>Salle de bains &amp; plomberie</h3><p>Création ou rénovation avec ballon d'eau chaude et finitions.</p></div></article>
</div>

Carte article

.post-card avec son étiquette de rubrique posée sur le visuel.

Électricité

12 mars 20265 min

Quand faut-il remplacer un tableau électrique ?

Chauffage

2 mars 20264 min

Pompe à chaleur : choisir la bonne puissance

Voir le code HTML

<div class="blog-grid">
  <article class="post-card">
    <div class="post-img" style="background-image:url('https://images.unsplash.com/photo-1621905251189-08b45d6a269e?auto=format&fit=crop&w=1600&q=80')"><span class="tag">Électricité</span></div>
    <div class="post-body"><div class="post-meta"><span>12 mars 2026</span><span>5 min</span></div><h3>Quand faut-il remplacer un tableau électrique ?</h3></div>
  </article>
  <article class="post-card">
    <div class="post-img" style="background-image:url('https://images.unsplash.com/photo-1615874959474-d609969a20ed?auto=format&fit=crop&w=1600&q=80')"><span class="tag">Chauffage</span></div>
    <div class="post-body"><div class="post-meta"><span>2 mars 2026</span><span>4 min</span></div><h3>Pompe à chaleur : choisir la bonne puissance</h3></div>
  </article>
</div>

Encadré latéral

.side-card : le bloc clair posé en colonne de droite, pour une liste de prestations ou un rappel.

Ce que nous prenons en charge

Dépose et évacuation de l'ancien équipement
Fourniture et pose du matériel neuf
Mise en service et prise en main

Voir le code HTML

<div class="side-card" style="max-width:420px">
  <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>Mise en service et prise en main</li>
  </ul>
</div>

Composants

Navigation

Fil d'Ariane

Présenté ici sur fond sombre : c'est son seul contexte, en tête des pages internes.

Voir le code HTML

<div style="background:#24353F;border-radius:12px;padding:22px">
  <nav aria-label="Fil d'Ariane">
    <ol class="breadcrumb" style="margin:0">
      <li><a href="#">Accueil</a></li>
      <li><a href="#">Chauffage</a></li>
      <li><a href="#">Pompe à chaleur</a></li>
      <li aria-current="page">PAC air/eau</li>
    </ol>
  </nav>
</div>

Liste de liens

Le maillage de bas de page, vers les prestations voisines du 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>

Sommaire ancré

Colonne qui suit le défilement sur grand écran et se replie au-dessus du contenu sur mobile.

Voir le code HTML

<nav class="anchor-nav" style="max-width:280px;position:static">
  <p class="eyebrow">Sommaire</p>
  <a href="#couleurs">Couleurs</a>
  <a href="#boutons">Boutons</a>
  <a href="#formulaires">Formulaires</a>
</nav>

Composants

Accordéon FAQ

Accordéon

Piloté par assets/js/nefty-v2.js : un clic sur .faq-btn ouvre l'article et referme les autres. L'élément ouvert passe en orange.

Non. L'étude et le devis sont gratuits et sans engagement pour tout projet de travaux.

Sous 24 à 48 h ouvrées pour un dépannage. Pour des travaux, le délai figure sur le devis.

Voir le code HTML

<div class="accordion">
  <article class="faq-item is-open">
    <button class="faq-btn" type="button">Le devis est-il payant ? <span class="plus">+</span></button>
    <div class="faq-body"><div><p>Non. L'étude et le devis sont gratuits et sans engagement pour tout projet de travaux.</p></div></div>
  </article>
  <article class="faq-item">
    <button class="faq-btn" type="button">Sous quel délai intervenez-vous ? <span class="plus">+</span></button>
    <div class="faq-body"><div><p>Sous 24 à 48 h ouvrées pour un dépannage. Pour des travaux, le délai figure sur le devis.</p></div></div>
  </article>
</div>

Composants

Alertes et retours

Alertes

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

Information. Relevez le code défaut affiché avant d'appeler : cela fait souvent gagner une visite.

Envoyé. Votre demande a bien été prise en compte.

Attention. Coupez l'arrivée d'eau avant toute intervention sur un réseau sous pression.

Danger. En cas d'odeur de brûlé, coupez le disjoncteur général et ne rebranchez rien.

Voir le code HTML

<div class="alert alert-info"><strong>Information.</strong> Relevez le code défaut affiché avant d'appeler : cela fait souvent gagner une visite.</div>
<div class="alert alert-success"><strong>Envoyé.</strong> Votre demande a bien été prise en compte.</div>
<div class="alert alert-warning"><strong>Attention.</strong> Coupez l'arrivée d'eau avant toute intervention sur un réseau sous pression.</div>
<div class="alert alert-danger"><strong>Danger.</strong> En cas d'odeur de brûlé, coupez le disjoncteur général et ne rebranchez rien.</div>

Composants

Formulaires

Champs

L'attribut data-demo neutralise l'envoi et affiche le message de confirmation : à retirer une fois le traitement PHP branché.

Voir le code HTML

<form data-demo>
  <div class="form-grid">
    <div class="field"><label for="d-nom">Nom *</label><input id="d-nom" type="text" required /></div>
    <div class="field"><label for="d-mail">E-mail *</label><input id="d-mail" type="email" required /></div>
  </div>
  <div class="field" style="margin-top:16px">
    <label for="d-besoin">Nature du besoin</label>
    <select id="d-besoin"><option>Électricité</option><option>Plomberie</option><option>Chauffage</option></select>
  </div>
  <div class="field" style="margin-top:16px">
    <label for="d-msg">Votre projet *</label>
    <textarea id="d-msg" required placeholder="Type de logement, travaux envisagés, délai souhaité…"></textarea>
  </div>
  <p class="form-note">Vos données servent uniquement à traiter votre demande.</p>
  <button class="btn mt-3" type="submit">Envoyer ma demande</button>
  <div class="form-success" data-demo-message hidden>Formulaire de démonstration : aucune donnée n'a été envoyée.</div>
</form>

Inscription à la lettre d'information

Le champ groupé du pied de page, présenté ici sur fond sombre.

Voir le code HTML

<div style="background:#24353F;border-radius:12px;padding:26px;max-width:420px">
  <form class="newsletter">
    <input type="email" placeholder="Votre adresse e-mail" aria-label="Votre adresse e-mail">
    <button type="submit" aria-label="Envoyer">→</button>
  </form>
</div>

Composants

Tableaux

Tableau

Toujours enveloppé dans .table-wrap, qui gère le débordement horizontal sur mobile.

Commune	Code postal	Délai habituel
Boisgervilly	35360	Siège de l'entreprise
Montauban-de-Bretagne	35360	Intervention quotidienne
Plélan-le-Grand	35380	Sous 48 h

Voir le code HTML

<div class="table-wrap">
  <table class="table">
    <thead><tr><th>Commune</th><th>Code postal</th><th>Délai habituel</th></tr></thead>
    <tbody>
      <tr><td><strong>Boisgervilly</strong></td><td>35360</td><td>Siège de l'entreprise</td></tr>
      <tr><td><strong>Montauban-de-Bretagne</strong></td><td>35360</td><td>Intervention quotidienne</td></tr>
      <tr><td><strong>Plélan-le-Grand</strong></td><td>35380</td><td>Sous 48 h</td></tr>
    </tbody>
  </table>
</div>

Composants

Listes, étapes et chiffres

Liste à puces validées

Visite technique systématique avant chiffrage
Devis détaillé poste par poste, matériel référencé
Planning annoncé et tenu

Voir le code HTML

<ul class="check-list">
  <li>Visite technique systématique avant chiffrage</li>
  <li>Devis détaillé poste par poste, matériel référencé</li>
  <li>Planning annoncé et tenu</li>
</ul>

Étapes numérotées

Le déroulé d'intervention. Quatre étapes est le bon format : au-delà, le lecteur décroche.

1

Prise de contact

Vous décrivez votre besoin, nous fixons une visite.

2

Étude

Relevé sur place et analyse de l'existant.

3

Devis

Un document clair, poste par poste.

4

Réalisation

Chantier, essais et mise en service.

Voir le code HTML

<div class="steps-grid" style="margin-top:0">
  <article class="step-card"><div class="step-num">1</div><h3>Prise de contact</h3><p>Vous décrivez votre besoin, nous fixons une visite.</p></article>
  <article class="step-card"><div class="step-num">2</div><h3>Étude</h3><p>Relevé sur place et analyse de l'existant.</p></article>
  <article class="step-card"><div class="step-num">3</div><h3>Devis</h3><p>Un document clair, poste par poste.</p></article>
  <article class="step-card"><div class="step-num">4</div><h3>Réalisation</h3><p>Chantier, essais et mise en service.</p></article>
</div>

Chiffres clés

L'attribut data-count déclenche le comptage animé à l'apparition ; le contenu initial porte le suffixe éventuel.

0+années d'expérience

0métiers complémentaires

0 kmrayon d'intervention

0interlocuteur par chantier

Voir le code HTML

<div class="numbers">
  <div class="number-item"><strong data-count="10">0+</strong><span>années d'expérience</span></div>
  <div class="number-item"><strong data-count="5">0</strong><span>métiers complémentaires</span></div>
  <div class="number-item"><strong data-count="35">0 km</strong><span>rayon d'intervention</span></div>
  <div class="number-item"><strong data-count="1">0</strong><span>interlocuteur par chantier</span></div>
</div>

Sections

Blocs de page

Bandeau d'appel à l'action

.cta : pleine largeur, photo de fond assombrie, texte centré. Un seul par page, en fin de parcours.

Besoin d'un devis ?

Préparez votre projet avec un partenaire technique complet

Décrivez-nous votre besoin : nous vous rappelons pour convenir d'une visite.

Demander un devis

Voir le code HTML

<div class="cta" style="border-radius:12px">
  <div class="container">
    <p class="eyebrow">Besoin d'un devis ?</p>
    <h2>Préparez votre projet avec un partenaire technique complet</h2>
    <p>Décrivez-nous votre besoin : nous vous rappelons pour convenir d'une visite.</p>
    <a href="#" class="btn">Demander un devis</a>
  </div>
</div>

Témoignage

.testimonial-card : photo à gauche, propos et signature du client à droite.

Avis client

Un accompagnement technique clair

Un projet réussi repose sur une bonne préparation et une exécution propre.

« Rénovation complète pendant que nous vivions dans la maison. Le planning a été tenu au jour près. »

C

Céline M.Bédée

Voir le code HTML

<div class="testimonial-card">
  <div class="testimonial-photo"></div>
  <div class="testimonial-content">
    <p class="eyebrow">Avis client</p>
    <h2>Un accompagnement technique clair</h2>
    <p>Un projet réussi repose sur une bonne préparation et une exécution propre.</p>
    <div class="quote-box">
      <p>« Rénovation complète pendant que nous vivions dans la maison. Le planning a été tenu au jour près. »</p>
      <div class="client"><span class="client-avatar">C</span><div><strong>Céline M.</strong><span>Bédée</span></div></div>
    </div>
  </div>
</div>

Bandeau de qualifications

Marques et technologies maîtrisées

AtlanticDaikinSchneider LegrandRGEQualifelec

Voir le code HTML

<div class="logos" style="padding:0">
  <div class="container" style="width:auto">
    <p class="eyebrow">Marques et technologies maîtrisées</p>
    <div class="logo-row">
      <span class="mini-logo">Atlantic</span><span class="mini-logo">Daikin</span><span class="mini-logo">Schneider</span>
      <span class="mini-logo">Legrand</span><span class="mini-logo">RGE</span><span class="mini-logo">Qualifelec</span>
    </div>
  </div>
</div>

Fiche d'expertise

.expertise-card : le format long, avec la liste des spécialités et les qualifications associées.

Électricité

Une prise en charge complète des installations, de la rénovation du tableau à la recharge de véhicule électrique.

⚡

Électricité résidentielle
Tableau électrique
Neuf et rénovation
Borne IRVE

Qualifications

RGEQualifelec IRVE

Voir le code HTML

<div class="expertise-grid" style="grid-template-columns:1fr">
  <article class="expertise-card">
    <div class="expertise-head">
      <div>
        <h3>Électricité</h3>
        <p>Une prise en charge complète des installations, de la rénovation du tableau à la recharge de véhicule électrique.</p>
      </div>
      <span class="expertise-symbol">⚡</span>
    </div>
    <ul class="specialty-list">
      <li>Électricité résidentielle</li><li>Tableau électrique</li>
      <li>Neuf et rénovation</li><li>Borne IRVE</li>
    </ul>
    <strong class="qualification-title">Qualifications</strong>
    <div class="qualification-pills"><span>RGE</span><span>Qualifelec IRVE</span></div>
  </article>
</div>

Sections

En-têtes de page

En-tête de page interne

.page-hero démarre en haut de l'écran, la barre de navigation se superposant au visuel. La photo se pose en style en ligne.

Électricité

Titre de la prestation

Une phrase d'accroche qui dit à qui s'adresse la page.

Demander un devis 02 99 61 31 51

Voir le code HTML

<div class="page-hero" style="margin:0;padding:52px 0;border-radius:12px;background-image:url('https://images.unsplash.com/photo-1621905251189-08b45d6a269e?auto=format&fit=crop&w=1600&q=80')">
  <div class="container">
    <nav aria-label="Fil d'Ariane"><ol class="breadcrumb"><li><a href="#">Accueil</a></li><li aria-current="page">Tableau électrique</li></ol></nav>
    <p class="eyebrow">Électricité</p>
    <h1 style="font-size:44px">Titre de la prestation</h1>
    <p>Une phrase d'accroche qui dit à qui s'adresse la page.</p>
    <div class="page-actions">
      <a href="#" class="btn">Demander un devis</a>
      <a href="tel:+33299613151" class="btn dark">02 99 61 31 51</a>
    </div>
  </div>
</div>

Bibliothèque de composants

Couleurs et variables

Palette de marque

Fonds et filets

Typographie

Surtitre, titres et paragraphes

Titre de niveau 2

Titre de niveau 3

Titre de page

Titre de page sur visuel sombre

Boutons et pastilles

Variantes de bouton

Pastilles

Cartes

Carte de prestation

Nom de la prestation

Nom de la prestation

Nom de la prestation

Carte sombre à pictogramme

Électricité

Plomberie

Argument numéroté

Carte de réalisation

Rénovation électrique complète

Salle de bains & plomberie

Carte article

Quand faut-il remplacer un tableau électrique ?

Pompe à chaleur : choisir la bonne puissance

Encadré latéral

Navigation

Fil d'Ariane

Liste de liens

Sommaire ancré

Accordéon FAQ

Accordéon

Alertes et retours

Alertes

Formulaires

Champs

Inscription à la lettre d'information

Tableaux

Tableau

Listes, étapes et chiffres

Liste à puces validées

Étapes numérotées

Prise de contact

Étude

Devis

Réalisation

Chiffres clés

Blocs de page

Bandeau d'appel à l'action

Préparez votre projet avec un partenaire technique complet

Témoignage

Un accompagnement technique clair

Bandeau de qualifications

Fiche d'expertise

Électricité

En-têtes de page

En-tête de page interne

Titre de la prestation