Composants

Chaque spécimen ci-dessous est rendu avec la feuille de style réelle de l’application, copiée depuis la version en ligne : ce que vous voyez est ce que voient les utilisateurs. Ouvrez Code HTML pour la structure à reproduire.

Boutons

Lancer la recherche Tout relire Annuler Supprimer Petit ✕ Désactivé

Code HTML

<button class="btn btn--primary">Lancer la recherche</button>
<button class="btn btn--secondary">Tout relire</button>
<button class="btn btn--ghost">Annuler</button>
<button class="btn btn--danger">Supprimer</button>
<button class="btn btn--primary btn--sm">Petit</button>
<button class="btn btn--secondary btn--icon" aria-label="Fermer">✕</button>
<button class="btn btn--primary" disabled>Désactivé</button>

Classe	Usage
btn--primary	Une seule action principale par écran ou par carte
btn--secondary	Actions secondaires
btn--ghost	Actions tertiaires, annuler
btn--danger	Suppression, toujours après confirmation
btn--sm	Barres d’outils, lignes de tableau
btn--icon	Bouton icône seule — toujours avec aria-label
btn--block	Pleine largeur (mobile, feuilles)

Au clic, le bouton descend d’un pixel ; désactivé, il passe à 50 % d’opacité.

Badges

Analysé Envoyé En attente Échec Brouillon

Code HTML

<span class="badge">Analysé</span>
<span class="badge badge--success">Envoyé</span>
<span class="badge badge--warning">En attente</span>
<span class="badge badge--danger">Échec</span>
<span class="badge badge--neutral">Brouillon</span>

Fond teinté (12–22 %) et texte foncé de la même famille. badge (accent), badge--success, badge--warning, badge--danger, badge--neutral.

Étapes du pipeline

Collecté Analysé Scoré Maquette prête Email envoyé

Code HTML

<span class="badge" style="background:color-mix(in srgb, var(--stage-scraped) 16%, transparent);color:var(--stage-scraped)"><span class="dot" style="background:var(--stage-scraped)"></span> Collecté</span>
<span class="badge" style="background:color-mix(in srgb, var(--stage-analysed) 16%, transparent);color:var(--stage-analysed)"><span class="dot" style="background:var(--stage-analysed)"></span> Analysé</span>
<span class="badge" style="background:color-mix(in srgb, var(--stage-scored) 16%, transparent);color:var(--stage-scored)"><span class="dot" style="background:var(--stage-scored)"></span> Scoré</span>
<span class="badge" style="background:color-mix(in srgb, var(--stage-designed) 16%, transparent);color:var(--stage-designed)"><span class="dot" style="background:var(--stage-designed)"></span> Maquette prête</span>
<span class="badge" style="background:color-mix(in srgb, var(--stage-mailed) 16%, transparent);color:var(--stage-mailed)"><span class="dot" style="background:var(--stage-mailed)"></span> Email envoyé</span>

Champs

Secteur d’activité Un métier précis plutôt qu’une famille. Ville Indiquez une ville

Code HTML

<label class="field">
  <span class="field__label">Secteur d’activité</span>
  <input class="input" placeholder="ex. plombier" />
  <span class="field__hint">Un métier précis plutôt qu’une famille.</span>
</label>
<label class="field">
  <span class="field__label">Rayon</span>
  <select class="select"><option>10 km</option><option>25 km</option></select>
</label>
<label class="field">
  <span class="field__label">Ville</span>
  <input class="input" aria-invalid="true" value="" placeholder="Indiquez une ville" />
  <span class="field__hint">Indiquez une ville</span>
</label>

Structure field → field__label, input / select / textarea, field__hint. Une erreur s’indique par aria-invalid="true" (bordure rouge) et un message dans field__hint.

Cartes

Opportunité n°1 cette semaine

Boulangerie Martin

Commerce actif et très bien noté, mais son site lui fait perdre les clients qui le cherchent depuis leur téléphone.

Code HTML

<div class="card">
  <p class="overline">Opportunité n°1 cette semaine</p>
  <h3 class="section-title card__title">Boulangerie Martin</h3>
  <p>Commerce actif et très bien noté, mais son site lui fait perdre les clients qui le cherchent depuis leur téléphone.</p>
</div>

Indicateurs

Prospects notés

128

Score moyen

71

Emails envoyés

23

Code HTML

<div class="card"><p class="overline">Prospects notés</p><p class="kpi__value">128</p></div>
<div class="card"><p class="overline">Score moyen</p><p class="kpi__value">71</p></div>
<div class="card"><p class="overline">Emails envoyés</p><p class="kpi__value">23</p></div>

Valeur en kpi__value (32 px, chiffres tabulaires), libellé en overline.

Scores

87 64 32

Code HTML

<span class="score--high">87</span> <span class="score--mid">64</span> <span class="score--low">32</span>

score--high (vert), score--mid (ambre), score--low (rouge), chiffres tabulaires.

Tableaux

Entreprise	Ville	Score	Étape
Plomberie Carlier	Roubaix	78	Scoré
Garage Vandamme	Lille	61	Analysé
Optique Vanhoutte	Douai	34	Collecté

Code HTML

<div class="table-wrap"><table class="table">
  <thead><tr><th>Entreprise</th><th>Ville</th><th>Score</th><th>Étape</th></tr></thead>
  <tbody>
    <tr class="row--clickable"><td>Plomberie Carlier</td><td>Roubaix</td><td class="score--high">78</td><td><span class="badge">Scoré</span></td></tr>
    <tr class="row--clickable"><td>Garage Vandamme</td><td>Lille</td><td class="score--mid">61</td><td><span class="badge">Analysé</span></td></tr>
    <tr class="row--clickable"><td>Optique Vanhoutte</td><td>Douai</td><td class="score--low">34</td><td><span class="badge badge--neutral">Collecté</span></td></tr>
  </tbody>
</table></div>

Envelopper dans table-wrap (défilement horizontal sur petit écran) ; row--clickable pour une ligne qui ouvre un détail.

Progression et chargement

Code HTML

<div class="progress"><div class="progress__bar" style="width:62%"></div></div>
<span class="spinner" role="status" aria-label="Chargement"></span>

État vide

Rien à relire pour l’instant

Lancez une recherche : les maquettes et les emails prêts arriveront ici.

Lancer une recherche

Code HTML

<div class="empty-state">
  <p class="empty-state__title">Rien à relire pour l’instant</p>
  <p class="empty-state__text">Lancez une recherche : les maquettes et les emails prêts arriveront ici.</p>
  <button class="btn btn--primary">Lancer une recherche</button>
</div>

Un titre, une phrase qui dit quoi faire, une action.

Tenir à jour

La feuille de style des spécimens est recopiée depuis l’application par scripts/extraire_tokens.py, puis cantonnée par scripts/cantonner_css.mjs. Relancez-les après chaque déploiement de l’application.