Aller au contenu
Bibliotheque UIJABS

Templates CRM 52 variantes

Des ecrans entiers, pas des composants. Un seul squelette HTML, huit peaux, six ecrans : l'attribut data-crm change la palette, la typographie, la densite, les rayons et la maniere de separer les blocs. Les quatre peaux ont ete dessinees pour ne pas se ressembler, et pour eviter l'apparence generique qu'on reconnait au premier coup d'oeil (fond gris pale, cartes blanches arrondies, meme ombre partout, bleu vif) : chacune tranche sur au moins quatre points. Les 48 apercus sont generes par croisement : le gabarit d'un ecran est ecrit une seule fois et decline dans chaque peau, si bien que le balisage est rigoureusement identique partout.

A. Graphite

Outil de production interne, ouvert toute la journee par les memes personnes. Neutres chauds, ocre brule, bordure de 1 px, rayon de 2 px, lignes de 34 px. Se fait oublier : c'est le contraire d'une interface de demonstration.

Dossiers / Tous
Rechercher
ReferenceClientCommuneOperationEtatMontantPose
2026-103Krissi JulienNeuilly-sur-MarnePAC air/eau 11 kWSigne4 280,0024 sept.
2026-118Martin SophieColombesChauffe-eau 200 LEnvoye1 890,00—
2026-121Durand PaulLe RaincyIsolation comblesBrouillon12 400,00—
2026-097Bernard AliceGagnyPAC air/air 3 splitsSans reponse6 750,00—
2026-092Lefevre MarcChellesChaudiere gaz THPESigne3 950,002 oct.
2026-088Nguyen ThiBondyBallon thermodynamiqueEnvoye2 340,00—
1 a 6 sur 24 — 31 610,00 EUR au total
Liste

L'ecran d'entree : filtres rapides en haut, tableau dense, pied qui rappelle le compte et le total. Les references sont en chiffres tabulaires pour que les montants se comparent d'un coup d'oeil.

Voir le codeMasquer le code 
<div class="crm" data-crm="graphite">
  <aside class="crm__cote">
    <div class="crm__marque">ATELIER<i>.</i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__groupe">Reglages</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg> Parametres</a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Dossiers <span>/</span> <b>Tous</b></div>
      <div class="crm__espace"></div>
      <div class="crm-recherche"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg> Rechercher</div>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Nouveau dossier</button>
    </header>
    <main class="crm__contenu">
      <div class="crm__outils">
        <button class="crm-b">Tous <b>24</b></button>
        <button class="crm-b">En cours <b>12</b></button>
        <button class="crm-b">A relancer <b>5</b></button>
        <div class="crm__espace"></div>
        <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4h18l-7 8v6l-4 2v-8Z"/></svg> Filtres</button>
        <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Exporter</button>
      </div>
      <div class="crm-cadre">
        <table class="crm-t">
          <thead><tr><th>Reference</th><th>Client</th><th>Commune</th><th>Operation</th><th>Etat</th><th style="text-align:right">Montant</th><th>Pose</th></tr></thead>
          <tbody>
            <tr><td class="crm-t__ref">2026-103</td><td class="crm-t__nom">Krissi Julien</td><td>Neuilly-sur-Marne</td><td>PAC air/eau 11 kW</td><td><span class="crm-e crm-e--ok">Signe</span></td><td class="crm-t__num">4 280,00</td><td>24 sept.</td></tr>
            <tr><td class="crm-t__ref">2026-118</td><td class="crm-t__nom">Martin Sophie</td><td>Colombes</td><td>Chauffe-eau 200 L</td><td><span class="crm-e crm-e--attente">Envoye</span></td><td class="crm-t__num">1 890,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">2026-121</td><td class="crm-t__nom">Durand Paul</td><td>Le Raincy</td><td>Isolation combles</td><td><span class="crm-e crm-e--neutre">Brouillon</span></td><td class="crm-t__num">12 400,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">2026-097</td><td class="crm-t__nom">Bernard Alice</td><td>Gagny</td><td>PAC air/air 3 splits</td><td><span class="crm-e crm-e--ko">Sans reponse</span></td><td class="crm-t__num">6 750,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">2026-092</td><td class="crm-t__nom">Lefevre Marc</td><td>Chelles</td><td>Chaudiere gaz THPE</td><td><span class="crm-e crm-e--ok">Signe</span></td><td class="crm-t__num">3 950,00</td><td>2 oct.</td></tr>
            <tr><td class="crm-t__ref">2026-088</td><td class="crm-t__nom">Nguyen Thi</td><td>Bondy</td><td>Ballon thermodynamique</td><td><span class="crm-e crm-e--attente">Envoye</span></td><td class="crm-t__num">2 340,00</td><td>&mdash;</td></tr>
          </tbody>
        </table>
        <div class="crm-pied"><span>1 a 6 sur 24 &mdash; 31 610,00 EUR au total</span><nav><span>&lsaquo;</span><span class="c">1</span><span>2</span><span>3</span><span>&rsaquo;</span></nav></div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="graphite"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="graphite"> &mdash; le balisage est le meme dans toutes les peaux
Dossiers / 2026-103 Signe
ContactVisiteDevisSignaturePoseFacture

Client et chantier

Client
Krissi Julien
Telephone
06 12 34 56 78
Chantier
12 rue des Lilas, 93330 Neuilly-sur-Marne
Logement
Maison individuelle, 112 m2, 1978
Existant
Chaudiere fioul de 1998, 2 400 L par an

Operations

3 lignes
Pompe a chaleur air/eau 11 kWPAC-11-M3 200,00
Depose et evacuation cuve fioulDEP-CUV560,00
Main d'oeuvre, 2 journeesMO-J800,00
Reste a charge
1 880,00 EUR
Total TTC
4 280,00
MaPrimeRenov
2 000,00
CEE
400,00

Pieces

4 / 6

  • Devis signe

    12 aout

  • Avis d'imposition

    9 aout

  • RIB a fournir

    Requis pour le versement

Activite

  • Devis signe par le client

    12 aout a 14:32

  • Devis envoye par courriel

    9 aout a 17:05
Fiche

L'ecran le plus consulte. Le parcours reste visible en haut, les informations a gauche, l'argent et les pieces a droite. Ce qui bloque le dossier doit se voir sans defiler.

Voir le codeMasquer le code 
<div class="crm" data-crm="graphite">
  <aside class="crm__cote">
    <div class="crm__marque">ATELIER<i>.</i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Dossiers <span>/</span> <b>2026-103</b> <span class="crm-e crm-e--ok">Signe</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Dupliquer</button>
      <button class="crm-b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> PDF</button>
      <button class="crm-b crm-b--fort">Planifier la pose</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-etapes">
        <span class="f">Contact</span><span class="f">Visite</span><span class="f">Devis</span><span class="c">Signature</span><span>Pose</span><span>Facture</span>
      </div>
      <div class="crm-fiche" style="margin-top:12px">
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Client et chantier</h4><button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg> Modifier</button></div>
            <div class="crm-p__corps"><dl class="crm-def">
              <dt>Client</dt><dd>Krissi Julien</dd>
              <dt>Telephone</dt><dd>06 12 34 56 78</dd>
              <dt>Chantier</dt><dd>12 rue des Lilas, 93330 Neuilly-sur-Marne</dd>
              <dt>Logement</dt><dd>Maison individuelle, 112 m2, 1978</dd>
              <dt>Existant</dt><dd>Chaudiere fioul de 1998, 2 400 L par an</dd>
            </dl></div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Operations</h4><span style="font-size:11px;color:var(--k-encre-3)">3 lignes</span></div>
            <table class="crm-t">
              <tbody>
                <tr><td class="crm-t__nom">Pompe a chaleur air/eau 11 kW</td><td class="crm-t__ref">PAC-11-M</td><td class="crm-t__num">3 200,00</td></tr>
                <tr><td class="crm-t__nom">Depose et evacuation cuve fioul</td><td class="crm-t__ref">DEP-CUV</td><td class="crm-t__num">560,00</td></tr>
                <tr><td class="crm-t__nom">Main d'oeuvre, 2 journees</td><td class="crm-t__ref">MO-J</td><td class="crm-t__num">800,00</td></tr>
              </tbody>
            </table>
          </div>
        </div>
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p"><div class="crm-p__corps">
            <span style="font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--k-caps);color:var(--k-encre-3)">Reste a charge</span>
            <div style="font-family:var(--k-titre);font-size:27px;font-weight:800;letter-spacing:-.02em;margin:4px 0 10px">1 880,00 EUR</div>
            <dl class="crm-def" style="font-size:12px">
              <dt>Total TTC</dt><dd>4 280,00</dd>
              <dt>MaPrimeRenov</dt><dd>2 000,00</dd>
              <dt>CEE</dt><dd>400,00</dd>
            </dl>
          </div></div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Pieces</h4><span style="font-size:11px;color:var(--k-encre-3)">4 / 6</span></div>
            <div class="crm-p__corps">
              <div class="crm-jauge"><i style="--p:66%"></i></div>
              <ul class="crm-fil-actu" style="margin-top:10px">
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg></i><div><p>Devis signe</p><small>12 aout</small></div></li>
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg></i><div><p>Avis d'imposition</p><small>9 aout</small></div></li>
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></i><div><p><b>RIB</b> a fournir</p><small>Requis pour le versement</small></div></li>
              </ul>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Activite</h4></div>
            <div class="crm-p__corps"><ul class="crm-fil-actu">
              <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg></i><div><p><b>Devis signe</b> par le client</p><small>12 aout a 14:32</small></div></li>
              <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg></i><div><p>Devis envoye par courriel</p><small>9 aout a 17:05</small></div></li>
            </ul></div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="graphite"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="graphite"> &mdash; le balisage est le meme dans toutes les peaux
Septembre 2026 — a jour a 09:14
Chiffre d'affaires48 250+12,4 % vs aout
En attente17-3 sur 7 jours
Taux de signature62 %stable sur 3 mois
Delai moyen4,2 j-0,6 j vs aout

Chiffre d'affaires mensuel

en milliers d'euros
avr
mai
juin
juil
aout
sept

A traiter aujourd'hui

5

  • 2026-097 sans reponse

    Envoye il y a 14 jours

  • Facture 2026-118 a emettre

    Chantier termine le 2 septembre

  • 2026-121 incomplet

    RIB et justificatif manquants

  • Visite chez Bernard Alice

    Demain 10:00 — Gagny
Tableau de bord

L'ecran d'accueil. Il ne montre pas tout ce qui existe, seulement ce qui appelle une decision aujourd'hui : les chiffres du mois, la tendance, et la liste de ce qui attend une action.

Voir le codeMasquer le code 
<div class="crm" data-crm="graphite">
  <aside class="crm__cote">
    <div class="crm__marque">ATELIER<i>.</i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg> Alertes <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil"><b>Septembre 2026</b> <span>&mdash; a jour a 09:14</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b">30 jours</button>
      <button class="crm-b crm-b--nu">Trimestre</button>
      <button class="crm-b crm-b--fort">Exporter</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-kpis">
        <div class="crm-kpi"><span>Chiffre d'affaires</span><strong>48 250</strong><em><b class="h">+12,4 %</b> vs aout</em></div>
        <div class="crm-kpi"><span>En attente</span><strong>17</strong><em><b class="b">-3</b> sur 7 jours</em></div>
        <div class="crm-kpi"><span>Taux de signature</span><strong>62 %</strong><em>stable sur 3 mois</em></div>
        <div class="crm-kpi"><span>Delai moyen</span><strong>4,2 j</strong><em><b class="h">-0,6 j</b> vs aout</em></div>
      </div>
      <div style="display:grid;grid-template-columns:1fr 320px;gap:10px">
        <div class="crm-p">
          <div class="crm-p__tete"><h4>Chiffre d'affaires mensuel</h4><span style="font-size:11px;color:var(--k-encre-3)">en milliers d'euros</span></div>
          <div class="crm-p__corps"><div class="crm-barres">
            <div><i style="--h:42%"></i><small>avr</small></div><div><i style="--h:58%"></i><small>mai</small></div>
            <div><i style="--h:51%"></i><small>juin</small></div><div><i style="--h:74%"></i><small>juil</small></div>
            <div><i style="--h:63%"></i><small>aout</small></div><div class="c"><i style="--h:88%"></i><small>sept</small></div>
          </div></div>
        </div>
        <div class="crm-p">
          <div class="crm-p__tete"><h4>A traiter aujourd'hui</h4><span class="crm-e crm-e--attente">5</span></div>
          <div class="crm-p__corps"><ul class="crm-fil-actu">
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg></i><div><p><b>2026-097</b> sans reponse</p><small>Envoye il y a 14 jours</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg></i><div><p>Facture <b>2026-118</b> a emettre</p><small>Chantier termine le 2 septembre</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg></i><div><p><b>2026-121</b> incomplet</p><small>RIB et justificatif manquants</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></i><div><p>Visite chez <b>Bernard Alice</b></p><small>Demain 10:00 &mdash; Gagny</small></div></li>
          </ul></div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="graphite"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="graphite"> &mdash; le balisage est le meme dans toutes les peaux
Dossiers / Nouveau

Client

Chantier

Operation

PAC air/eauPAC air/airChauffe-eauIsolationChaudiere

Recapitulatif

Reference
2026-124
Client
Krissi Julien
Commune
Neuilly-sur-Marne
Operation
PAC air/eau 11 kW
Aides estimees
2 400 EUR

MaPrimeRenov et CEE, sous reserve des revenus du foyer.

Saisie

Creation d'un {{objet}}. Les champs sont groupes par sujet, la colonne de droite recapitule au fur et a mesure, et la reference est attribuee avant l'enregistrement pour qu'on puisse en parler au telephone.

Voir le codeMasquer le code 
<div class="crm" data-crm="graphite">
  <aside class="crm__cote">
    <div class="crm__marque">ATELIER<i>.</i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Dossiers <span>/</span> <b>Nouveau</b></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu">Annuler</button>
      <button class="crm-b crm-b--fort">Creer le dossier</button>
    </header>
    <main class="crm__contenu">
      <div style="display:grid;grid-template-columns:1fr 290px;gap:12px;align-items:start">
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Client</h4></div>
            <div class="crm-p__corps crm-form">
              <label><span>Nom ou raison sociale</span><input value="Krissi Julien"></label>
              <div class="crm-form__deux">
                <label><span>Telephone</span><input value="06 12 34 56 78"></label>
                <label><span>Courriel</span><input value="julien@exemple.fr"></label>
              </div>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Chantier</h4></div>
            <div class="crm-p__corps crm-form">
              <label><span>Adresse</span><input value="12 rue des Lilas"></label>
              <div class="crm-form__deux">
                <label><span>Code postal</span><input value="93330"></label>
                <label><span>Commune</span><input value="Neuilly-sur-Marne"></label>
              </div>
              <div class="crm-form__deux">
                <label><span>Surface</span><input value="112 m2"></label>
                <label><span>Annee de construction</span><input value="1978"></label>
              </div>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Operation</h4></div>
            <div class="crm-p__corps crm-form">
              <div class="crm-choix"><span class="c">PAC air/eau</span><span>PAC air/air</span><span>Chauffe-eau</span><span>Isolation</span><span>Chaudiere</span></div>
              <div class="crm-form__deux">
                <label><span>Puissance estimee</span><input value="11 kW"></label>
                <label><span>Pose souhaitee</span><input value="Septembre 2026"></label>
              </div>
            </div>
          </div>
        </div>
        <div class="crm-p">
          <div class="crm-p__tete"><h4>Recapitulatif</h4></div>
          <div class="crm-p__corps">
            <dl class="crm-def" style="font-size:12px">
              <dt>Reference</dt><dd style="font-family:var(--font-mono)">2026-124</dd>
              <dt>Client</dt><dd>Krissi Julien</dd>
              <dt>Commune</dt><dd>Neuilly-sur-Marne</dd>
              <dt>Operation</dt><dd>PAC air/eau 11 kW</dd>
            </dl>
            <div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--k-trait)">
              <span style="font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--k-caps);color:var(--k-encre-3)">Aides estimees</span>
              <div style="font-family:var(--k-titre);font-size:22px;font-weight:800;margin-top:4px">2 400 EUR</div>
              <p style="margin:4px 0 0;font-size:11px;color:var(--k-encre-3);line-height:1.4">MaPrimeRenov et CEE, sous reserve des revenus du foyer.</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="graphite"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="graphite"> &mdash; le balisage est le meme dans toutes les peaux
Semaine 37 — du 7 au 11 septembre
Lun 7
Mar 8
Mer 9
Jeu 10
Ven 11
08:00
Pose PACKrissi — Neuilly
EntretienMartin — Colombes
Pose ballonNguyen — Bondy
10:00
Pose PACsuite
Visite techniqueDurand — Le Raincy
Pose ballonsuite
DepannageBernard — Gagny
14:00
MetreLefevre — Chelles
Depannageurgence — Bondy
Mise en serviceKrissi — Neuilly
16:00
Livraisondepot
Reunion equipebureau
Planning

La semaine des equipes. Chaque intervention porte son heure, son client et sa commune : sans la commune, impossible d'evaluer un trajet. Les couleurs distinguent le type, pas l'equipe.

Voir le codeMasquer le code 
<div class="crm" data-crm="graphite">
  <aside class="crm__cote">
    <div class="crm__marque">ATELIER<i>.</i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Equipes</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg> Nord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg> Ouest</a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil"><b>Semaine 37</b> <span>&mdash; du 7 au 11 septembre</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
      <button class="crm-b">Aujourd'hui</button>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Planifier</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-plan">
        <div class="crm-plan__jour"></div>
        <div class="crm-plan__jour">Lun 7</div><div class="crm-plan__jour">Mar 8</div>
        <div class="crm-plan__jour">Mer 9</div><div class="crm-plan__jour">Jeu 10</div><div class="crm-plan__jour">Ven 11</div>

        <div class="crm-plan__h">08:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose PAC</b><small>Krissi &mdash; Neuilly</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Entretien</b><small>Martin &mdash; Colombes</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose ballon</b><small>Nguyen &mdash; Bondy</small></span></div>
        <div class="crm-plan__c"></div>

        <div class="crm-plan__h">10:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose PAC</b><small>suite</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Visite technique</b><small>Durand &mdash; Le Raincy</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose ballon</b><small>suite</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev a"><b>Depannage</b><small>Bernard &mdash; Gagny</small></span></div>

        <div class="crm-plan__h">14:00</div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Metre</b><small>Lefevre &mdash; Chelles</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev a"><b>Depannage</b><small>urgence &mdash; Bondy</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Mise en service</b><small>Krissi &mdash; Neuilly</small></span></div>

        <div class="crm-plan__h">16:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Livraison</b><small>depot</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Reunion equipe</b><small>bureau</small></span></div>
        <div class="crm-plan__c"></div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="graphite"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="graphite"> &mdash; le balisage est le meme dans toutes les peaux
Dossiers / 2026-103 / Documents
4 pieces sur 6 RIB et justificatif de domicile manquants
Incomplet
Valide
Devis signe.pdf248 Ko — 12 aout
Valide
Avis d'imposition.pdf96 Ko — 9 aout
Valide
Photo compteur.jpg1,1 Mo — 9 aout
A verifier
Mandat MaPrimeRenov.pdf84 Ko — hier
Documents

Les pieces d'un {{objet}}. L'etat de chaque piece se lit sur la vignette, et la case vide en pointille dit ce qu'il manque encore : c'est elle qui fait avancer le dossier.

Voir le codeMasquer le code 
<div class="crm" data-crm="graphite">
  <aside class="crm__cote">
    <div class="crm__marque">ATELIER<i>.</i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <div class="crm__groupe">Suivi</div>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Dossiers <span>/</span> <b>2026-103</b> <span>/</span> <b>Documents</b></div>
      <div class="crm__espace"></div>
      <button class="crm-b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Tout telecharger</button>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg> Deposer</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-p" style="margin-bottom:12px">
        <div class="crm-p__corps" style="display:flex;align-items:center;gap:14px">
          <div style="flex:1">
            <div style="display:flex;justify-content:space-between;font-size:11.5px;margin-bottom:6px">
              <span style="font-weight:600">4 pieces sur 6</span>
              <span style="color:var(--k-encre-3)">RIB et justificatif de domicile manquants</span>
            </div>
            <div class="crm-jauge"><i style="--p:66%"></i></div>
          </div>
          <span class="crm-e crm-e--attente">Incomplet</span>
        </div>
      </div>
      <div class="crm-docs">
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i><i></i><i></i></div><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Devis signe.pdf</b><small>248 Ko &mdash; 12 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i><i></i></div><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Avis d'imposition.pdf</b><small>96 Ko &mdash; 9 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Photo compteur.jpg</b><small>1,1 Mo &mdash; 9 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i></div><span class="crm-e crm-e--attente">A verifier</span></div>
          <div class="crm-doc__pied"><b>Mandat MaPrimeRenov.pdf</b><small>84 Ko &mdash; hier</small></div>
        </div>
        <label class="crm-doc crm-doc--vide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><b>RIB</b><small>Requis pour le versement</small></label>
        <label class="crm-doc crm-doc--vide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><b>Justificatif de domicile</b><small>Moins de 3 mois</small></label>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="graphite"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="graphite"> &mdash; le balisage est le meme dans toutes les peaux

B. Chantier

Consulte dehors, sur telephone ou tablette, avec des gants. Jaune securite et noir pur, bordure de 2 px, ombre dure, rayon nul, lignes de 52 px. Se lit en plein soleil.

Chantiers / Tous
Rechercher
ReferenceClientCommuneOperationEtatMontantPose
CH-103Krissi JulienNeuilly-sur-MarnePAC air/eau 11 kWSigne4 280,0024 sept.
CH-118Martin SophieColombesChauffe-eau 200 LEnvoye1 890,00—
CH-121Durand PaulLe RaincyIsolation comblesBrouillon12 400,00—
CH-097Bernard AliceGagnyPAC air/air 3 splitsSans reponse6 750,00—
CH-092Lefevre MarcChellesChaudiere gaz THPESigne3 950,002 oct.
CH-088Nguyen ThiBondyBallon thermodynamiqueEnvoye2 340,00—
1 a 6 sur 24 — 31 610,00 EUR au total
Liste

L'ecran d'entree : filtres rapides en haut, tableau dense, pied qui rappelle le compte et le total. Les references sont en chiffres tabulaires pour que les montants se comparent d'un coup d'oeil.

Voir le codeMasquer le code 
<div class="crm" data-crm="chantier">
  <aside class="crm__cote">
    <div class="crm__marque">CHANTIER<i>.</i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Chantiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__groupe">Reglages</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg> Parametres</a>
    <div class="crm__pied"><div class="crm__moi"><span>SM</span>Sophie Martin</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Chantiers <span>/</span> <b>Tous</b></div>
      <div class="crm__espace"></div>
      <div class="crm-recherche"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg> Rechercher</div>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Nouveau chantier</button>
    </header>
    <main class="crm__contenu">
      <div class="crm__outils">
        <button class="crm-b">Tous <b>24</b></button>
        <button class="crm-b">En cours <b>12</b></button>
        <button class="crm-b">A relancer <b>5</b></button>
        <div class="crm__espace"></div>
        <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4h18l-7 8v6l-4 2v-8Z"/></svg> Filtres</button>
        <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Exporter</button>
      </div>
      <div class="crm-cadre">
        <table class="crm-t">
          <thead><tr><th>Reference</th><th>Client</th><th>Commune</th><th>Operation</th><th>Etat</th><th style="text-align:right">Montant</th><th>Pose</th></tr></thead>
          <tbody>
            <tr><td class="crm-t__ref">CH-103</td><td class="crm-t__nom">Krissi Julien</td><td>Neuilly-sur-Marne</td><td>PAC air/eau 11 kW</td><td><span class="crm-e crm-e--ok">Signe</span></td><td class="crm-t__num">4 280,00</td><td>24 sept.</td></tr>
            <tr><td class="crm-t__ref">CH-118</td><td class="crm-t__nom">Martin Sophie</td><td>Colombes</td><td>Chauffe-eau 200 L</td><td><span class="crm-e crm-e--attente">Envoye</span></td><td class="crm-t__num">1 890,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">CH-121</td><td class="crm-t__nom">Durand Paul</td><td>Le Raincy</td><td>Isolation combles</td><td><span class="crm-e crm-e--neutre">Brouillon</span></td><td class="crm-t__num">12 400,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">CH-097</td><td class="crm-t__nom">Bernard Alice</td><td>Gagny</td><td>PAC air/air 3 splits</td><td><span class="crm-e crm-e--ko">Sans reponse</span></td><td class="crm-t__num">6 750,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">CH-092</td><td class="crm-t__nom">Lefevre Marc</td><td>Chelles</td><td>Chaudiere gaz THPE</td><td><span class="crm-e crm-e--ok">Signe</span></td><td class="crm-t__num">3 950,00</td><td>2 oct.</td></tr>
            <tr><td class="crm-t__ref">CH-088</td><td class="crm-t__nom">Nguyen Thi</td><td>Bondy</td><td>Ballon thermodynamique</td><td><span class="crm-e crm-e--attente">Envoye</span></td><td class="crm-t__num">2 340,00</td><td>&mdash;</td></tr>
          </tbody>
        </table>
        <div class="crm-pied"><span>1 a 6 sur 24 &mdash; 31 610,00 EUR au total</span><nav><span>&lsaquo;</span><span class="c">1</span><span>2</span><span>3</span><span>&rsaquo;</span></nav></div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="chantier"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="chantier"> &mdash; le balisage est le meme dans toutes les peaux
Chantiers / CH-103 Signe
ContactVisiteDevisSignaturePoseFacture

Client et chantier

Client
Krissi Julien
Telephone
06 12 34 56 78
Chantier
12 rue des Lilas, 93330 Neuilly-sur-Marne
Logement
Maison individuelle, 112 m2, 1978
Existant
Chaudiere fioul de 1998, 2 400 L par an

Operations

3 lignes
Pompe a chaleur air/eau 11 kWPAC-11-M3 200,00
Depose et evacuation cuve fioulDEP-CUV560,00
Main d'oeuvre, 2 journeesMO-J800,00
Reste a charge
1 880,00 EUR
Total TTC
4 280,00
MaPrimeRenov
2 000,00
CEE
400,00

Pieces

4 / 6

  • Devis signe

    12 aout

  • Avis d'imposition

    9 aout

  • RIB a fournir

    Requis pour le versement

Activite

  • Devis signe par le client

    12 aout a 14:32

  • Devis envoye par courriel

    9 aout a 17:05
Fiche

L'ecran le plus consulte. Le parcours reste visible en haut, les informations a gauche, l'argent et les pieces a droite. Ce qui bloque le dossier doit se voir sans defiler.

Voir le codeMasquer le code 
<div class="crm" data-crm="chantier">
  <aside class="crm__cote">
    <div class="crm__marque">CHANTIER<i>.</i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Chantiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>SM</span>Sophie Martin</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Chantiers <span>/</span> <b>CH-103</b> <span class="crm-e crm-e--ok">Signe</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Dupliquer</button>
      <button class="crm-b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> PDF</button>
      <button class="crm-b crm-b--fort">Planifier la pose</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-etapes">
        <span class="f">Contact</span><span class="f">Visite</span><span class="f">Devis</span><span class="c">Signature</span><span>Pose</span><span>Facture</span>
      </div>
      <div class="crm-fiche" style="margin-top:12px">
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Client et chantier</h4><button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg> Modifier</button></div>
            <div class="crm-p__corps"><dl class="crm-def">
              <dt>Client</dt><dd>Krissi Julien</dd>
              <dt>Telephone</dt><dd>06 12 34 56 78</dd>
              <dt>Chantier</dt><dd>12 rue des Lilas, 93330 Neuilly-sur-Marne</dd>
              <dt>Logement</dt><dd>Maison individuelle, 112 m2, 1978</dd>
              <dt>Existant</dt><dd>Chaudiere fioul de 1998, 2 400 L par an</dd>
            </dl></div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Operations</h4><span style="font-size:11px;color:var(--k-encre-3)">3 lignes</span></div>
            <table class="crm-t">
              <tbody>
                <tr><td class="crm-t__nom">Pompe a chaleur air/eau 11 kW</td><td class="crm-t__ref">PAC-11-M</td><td class="crm-t__num">3 200,00</td></tr>
                <tr><td class="crm-t__nom">Depose et evacuation cuve fioul</td><td class="crm-t__ref">DEP-CUV</td><td class="crm-t__num">560,00</td></tr>
                <tr><td class="crm-t__nom">Main d'oeuvre, 2 journees</td><td class="crm-t__ref">MO-J</td><td class="crm-t__num">800,00</td></tr>
              </tbody>
            </table>
          </div>
        </div>
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p"><div class="crm-p__corps">
            <span style="font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--k-caps);color:var(--k-encre-3)">Reste a charge</span>
            <div style="font-family:var(--k-titre);font-size:27px;font-weight:800;letter-spacing:-.02em;margin:4px 0 10px">1 880,00 EUR</div>
            <dl class="crm-def" style="font-size:12px">
              <dt>Total TTC</dt><dd>4 280,00</dd>
              <dt>MaPrimeRenov</dt><dd>2 000,00</dd>
              <dt>CEE</dt><dd>400,00</dd>
            </dl>
          </div></div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Pieces</h4><span style="font-size:11px;color:var(--k-encre-3)">4 / 6</span></div>
            <div class="crm-p__corps">
              <div class="crm-jauge"><i style="--p:66%"></i></div>
              <ul class="crm-fil-actu" style="margin-top:10px">
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg></i><div><p>Devis signe</p><small>12 aout</small></div></li>
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg></i><div><p>Avis d'imposition</p><small>9 aout</small></div></li>
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></i><div><p><b>RIB</b> a fournir</p><small>Requis pour le versement</small></div></li>
              </ul>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Activite</h4></div>
            <div class="crm-p__corps"><ul class="crm-fil-actu">
              <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg></i><div><p><b>Devis signe</b> par le client</p><small>12 aout a 14:32</small></div></li>
              <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg></i><div><p>Devis envoye par courriel</p><small>9 aout a 17:05</small></div></li>
            </ul></div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="chantier"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="chantier"> &mdash; le balisage est le meme dans toutes les peaux
Septembre 2026 — a jour a 09:14
Chiffre d'affaires48 250+12,4 % vs aout
En attente17-3 sur 7 jours
Taux de signature62 %stable sur 3 mois
Delai moyen4,2 j-0,6 j vs aout

Chiffre d'affaires mensuel

en milliers d'euros
avr
mai
juin
juil
aout
sept

A traiter aujourd'hui

5

  • CH-097 sans reponse

    Envoye il y a 14 jours

  • Facture CH-118 a emettre

    Chantier termine le 2 septembre

  • CH-121 incomplet

    RIB et justificatif manquants

  • Visite chez Bernard Alice

    Demain 10:00 — Gagny
Tableau de bord

L'ecran d'accueil. Il ne montre pas tout ce qui existe, seulement ce qui appelle une decision aujourd'hui : les chiffres du mois, la tendance, et la liste de ce qui attend une action.

Voir le codeMasquer le code 
<div class="crm" data-crm="chantier">
  <aside class="crm__cote">
    <div class="crm__marque">CHANTIER<i>.</i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Chantiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg> Alertes <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>SM</span>Sophie Martin</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil"><b>Septembre 2026</b> <span>&mdash; a jour a 09:14</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b">30 jours</button>
      <button class="crm-b crm-b--nu">Trimestre</button>
      <button class="crm-b crm-b--fort">Exporter</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-kpis">
        <div class="crm-kpi"><span>Chiffre d'affaires</span><strong>48 250</strong><em><b class="h">+12,4 %</b> vs aout</em></div>
        <div class="crm-kpi"><span>En attente</span><strong>17</strong><em><b class="b">-3</b> sur 7 jours</em></div>
        <div class="crm-kpi"><span>Taux de signature</span><strong>62 %</strong><em>stable sur 3 mois</em></div>
        <div class="crm-kpi"><span>Delai moyen</span><strong>4,2 j</strong><em><b class="h">-0,6 j</b> vs aout</em></div>
      </div>
      <div style="display:grid;grid-template-columns:1fr 320px;gap:10px">
        <div class="crm-p">
          <div class="crm-p__tete"><h4>Chiffre d'affaires mensuel</h4><span style="font-size:11px;color:var(--k-encre-3)">en milliers d'euros</span></div>
          <div class="crm-p__corps"><div class="crm-barres">
            <div><i style="--h:42%"></i><small>avr</small></div><div><i style="--h:58%"></i><small>mai</small></div>
            <div><i style="--h:51%"></i><small>juin</small></div><div><i style="--h:74%"></i><small>juil</small></div>
            <div><i style="--h:63%"></i><small>aout</small></div><div class="c"><i style="--h:88%"></i><small>sept</small></div>
          </div></div>
        </div>
        <div class="crm-p">
          <div class="crm-p__tete"><h4>A traiter aujourd'hui</h4><span class="crm-e crm-e--attente">5</span></div>
          <div class="crm-p__corps"><ul class="crm-fil-actu">
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg></i><div><p><b>CH-097</b> sans reponse</p><small>Envoye il y a 14 jours</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg></i><div><p>Facture <b>CH-118</b> a emettre</p><small>Chantier termine le 2 septembre</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg></i><div><p><b>CH-121</b> incomplet</p><small>RIB et justificatif manquants</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></i><div><p>Visite chez <b>Bernard Alice</b></p><small>Demain 10:00 &mdash; Gagny</small></div></li>
          </ul></div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="chantier"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="chantier"> &mdash; le balisage est le meme dans toutes les peaux
Chantiers / Nouveau

Client

Chantier

Operation

PAC air/eauPAC air/airChauffe-eauIsolationChaudiere

Recapitulatif

Reference
CH-124
Client
Krissi Julien
Commune
Neuilly-sur-Marne
Operation
PAC air/eau 11 kW
Aides estimees
2 400 EUR

MaPrimeRenov et CEE, sous reserve des revenus du foyer.

Saisie

Creation d'un {{objet}}. Les champs sont groupes par sujet, la colonne de droite recapitule au fur et a mesure, et la reference est attribuee avant l'enregistrement pour qu'on puisse en parler au telephone.

Voir le codeMasquer le code 
<div class="crm" data-crm="chantier">
  <aside class="crm__cote">
    <div class="crm__marque">CHANTIER<i>.</i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Chantiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__pied"><div class="crm__moi"><span>SM</span>Sophie Martin</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Chantiers <span>/</span> <b>Nouveau</b></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu">Annuler</button>
      <button class="crm-b crm-b--fort">Creer le chantier</button>
    </header>
    <main class="crm__contenu">
      <div style="display:grid;grid-template-columns:1fr 290px;gap:12px;align-items:start">
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Client</h4></div>
            <div class="crm-p__corps crm-form">
              <label><span>Nom ou raison sociale</span><input value="Krissi Julien"></label>
              <div class="crm-form__deux">
                <label><span>Telephone</span><input value="06 12 34 56 78"></label>
                <label><span>Courriel</span><input value="julien@exemple.fr"></label>
              </div>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Chantier</h4></div>
            <div class="crm-p__corps crm-form">
              <label><span>Adresse</span><input value="12 rue des Lilas"></label>
              <div class="crm-form__deux">
                <label><span>Code postal</span><input value="93330"></label>
                <label><span>Commune</span><input value="Neuilly-sur-Marne"></label>
              </div>
              <div class="crm-form__deux">
                <label><span>Surface</span><input value="112 m2"></label>
                <label><span>Annee de construction</span><input value="1978"></label>
              </div>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Operation</h4></div>
            <div class="crm-p__corps crm-form">
              <div class="crm-choix"><span class="c">PAC air/eau</span><span>PAC air/air</span><span>Chauffe-eau</span><span>Isolation</span><span>Chaudiere</span></div>
              <div class="crm-form__deux">
                <label><span>Puissance estimee</span><input value="11 kW"></label>
                <label><span>Pose souhaitee</span><input value="Septembre 2026"></label>
              </div>
            </div>
          </div>
        </div>
        <div class="crm-p">
          <div class="crm-p__tete"><h4>Recapitulatif</h4></div>
          <div class="crm-p__corps">
            <dl class="crm-def" style="font-size:12px">
              <dt>Reference</dt><dd style="font-family:var(--font-mono)">CH-124</dd>
              <dt>Client</dt><dd>Krissi Julien</dd>
              <dt>Commune</dt><dd>Neuilly-sur-Marne</dd>
              <dt>Operation</dt><dd>PAC air/eau 11 kW</dd>
            </dl>
            <div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--k-trait)">
              <span style="font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--k-caps);color:var(--k-encre-3)">Aides estimees</span>
              <div style="font-family:var(--k-titre);font-size:22px;font-weight:800;margin-top:4px">2 400 EUR</div>
              <p style="margin:4px 0 0;font-size:11px;color:var(--k-encre-3);line-height:1.4">MaPrimeRenov et CEE, sous reserve des revenus du foyer.</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="chantier"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="chantier"> &mdash; le balisage est le meme dans toutes les peaux
Semaine 37 — du 7 au 11 septembre
Lun 7
Mar 8
Mer 9
Jeu 10
Ven 11
08:00
Pose PACKrissi — Neuilly
EntretienMartin — Colombes
Pose ballonNguyen — Bondy
10:00
Pose PACsuite
Visite techniqueDurand — Le Raincy
Pose ballonsuite
DepannageBernard — Gagny
14:00
MetreLefevre — Chelles
Depannageurgence — Bondy
Mise en serviceKrissi — Neuilly
16:00
Livraisondepot
Reunion equipebureau
Planning

La semaine des equipes. Chaque intervention porte son heure, son client et sa commune : sans la commune, impossible d'evaluer un trajet. Les couleurs distinguent le type, pas l'equipe.

Voir le codeMasquer le code 
<div class="crm" data-crm="chantier">
  <aside class="crm__cote">
    <div class="crm__marque">CHANTIER<i>.</i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Chantiers <b>24</b></a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Equipes</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg> Nord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg> Ouest</a>
    <div class="crm__pied"><div class="crm__moi"><span>SM</span>Sophie Martin</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil"><b>Semaine 37</b> <span>&mdash; du 7 au 11 septembre</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
      <button class="crm-b">Aujourd'hui</button>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Planifier</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-plan">
        <div class="crm-plan__jour"></div>
        <div class="crm-plan__jour">Lun 7</div><div class="crm-plan__jour">Mar 8</div>
        <div class="crm-plan__jour">Mer 9</div><div class="crm-plan__jour">Jeu 10</div><div class="crm-plan__jour">Ven 11</div>

        <div class="crm-plan__h">08:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose PAC</b><small>Krissi &mdash; Neuilly</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Entretien</b><small>Martin &mdash; Colombes</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose ballon</b><small>Nguyen &mdash; Bondy</small></span></div>
        <div class="crm-plan__c"></div>

        <div class="crm-plan__h">10:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose PAC</b><small>suite</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Visite technique</b><small>Durand &mdash; Le Raincy</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose ballon</b><small>suite</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev a"><b>Depannage</b><small>Bernard &mdash; Gagny</small></span></div>

        <div class="crm-plan__h">14:00</div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Metre</b><small>Lefevre &mdash; Chelles</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev a"><b>Depannage</b><small>urgence &mdash; Bondy</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Mise en service</b><small>Krissi &mdash; Neuilly</small></span></div>

        <div class="crm-plan__h">16:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Livraison</b><small>depot</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Reunion equipe</b><small>bureau</small></span></div>
        <div class="crm-plan__c"></div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="chantier"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="chantier"> &mdash; le balisage est le meme dans toutes les peaux
Chantiers / CH-103 / Documents
4 pieces sur 6 RIB et justificatif de domicile manquants
Incomplet
Valide
Devis signe.pdf248 Ko — 12 aout
Valide
Avis d'imposition.pdf96 Ko — 9 aout
Valide
Photo compteur.jpg1,1 Mo — 9 aout
A verifier
Mandat MaPrimeRenov.pdf84 Ko — hier
Documents

Les pieces d'un {{objet}}. L'etat de chaque piece se lit sur la vignette, et la case vide en pointille dit ce qu'il manque encore : c'est elle qui fait avancer le dossier.

Voir le codeMasquer le code 
<div class="crm" data-crm="chantier">
  <aside class="crm__cote">
    <div class="crm__marque">CHANTIER<i>.</i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Chantiers <b>24</b></a>
    <div class="crm__groupe">Suivi</div>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>SM</span>Sophie Martin</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Chantiers <span>/</span> <b>CH-103</b> <span>/</span> <b>Documents</b></div>
      <div class="crm__espace"></div>
      <button class="crm-b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Tout telecharger</button>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg> Deposer</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-p" style="margin-bottom:12px">
        <div class="crm-p__corps" style="display:flex;align-items:center;gap:14px">
          <div style="flex:1">
            <div style="display:flex;justify-content:space-between;font-size:11.5px;margin-bottom:6px">
              <span style="font-weight:600">4 pieces sur 6</span>
              <span style="color:var(--k-encre-3)">RIB et justificatif de domicile manquants</span>
            </div>
            <div class="crm-jauge"><i style="--p:66%"></i></div>
          </div>
          <span class="crm-e crm-e--attente">Incomplet</span>
        </div>
      </div>
      <div class="crm-docs">
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i><i></i><i></i></div><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Devis signe.pdf</b><small>248 Ko &mdash; 12 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i><i></i></div><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Avis d'imposition.pdf</b><small>96 Ko &mdash; 9 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Photo compteur.jpg</b><small>1,1 Mo &mdash; 9 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i></div><span class="crm-e crm-e--attente">A verifier</span></div>
          <div class="crm-doc__pied"><b>Mandat MaPrimeRenov.pdf</b><small>84 Ko &mdash; hier</small></div>
        </div>
        <label class="crm-doc crm-doc--vide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><b>RIB</b><small>Requis pour le versement</small></label>
        <label class="crm-doc crm-doc--vide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><b>Justificatif de domicile</b><small>Moins de 3 mois</small></label>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="chantier"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="chantier"> &mdash; le balisage est le meme dans toutes les peaux

C. Console

Ecran de supervision ouvert en permanence sur un second moniteur. Sombre, accent lime, separation par le fond et non par la bordure, chiffres en monospace. Fatigue moins les yeux sur une journee entiere.

Dossiers / Tous
Rechercher
ReferenceClientCommuneOperationEtatMontantPose
2026-103Krissi JulienNeuilly-sur-MarnePAC air/eau 11 kWSigne4 280,0024 sept.
2026-118Martin SophieColombesChauffe-eau 200 LEnvoye1 890,00—
2026-121Durand PaulLe RaincyIsolation comblesBrouillon12 400,00—
2026-097Bernard AliceGagnyPAC air/air 3 splitsSans reponse6 750,00—
2026-092Lefevre MarcChellesChaudiere gaz THPESigne3 950,002 oct.
2026-088Nguyen ThiBondyBallon thermodynamiqueEnvoye2 340,00—
1 a 6 sur 24 — 31 610,00 EUR au total
Liste

L'ecran d'entree : filtres rapides en haut, tableau dense, pied qui rappelle le compte et le total. Les references sont en chiffres tabulaires pour que les montants se comparent d'un coup d'oeil.

Voir le codeMasquer le code 
<div class="crm" data-crm="console">
  <aside class="crm__cote">
    <div class="crm__marque">console<i>_</i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__groupe">Reglages</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg> Parametres</a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>julien@jabsdev.fr</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Dossiers <span>/</span> <b>Tous</b></div>
      <div class="crm__espace"></div>
      <div class="crm-recherche"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg> Rechercher</div>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Nouveau dossier</button>
    </header>
    <main class="crm__contenu">
      <div class="crm__outils">
        <button class="crm-b">Tous <b>24</b></button>
        <button class="crm-b">En cours <b>12</b></button>
        <button class="crm-b">A relancer <b>5</b></button>
        <div class="crm__espace"></div>
        <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4h18l-7 8v6l-4 2v-8Z"/></svg> Filtres</button>
        <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Exporter</button>
      </div>
      <div class="crm-cadre">
        <table class="crm-t">
          <thead><tr><th>Reference</th><th>Client</th><th>Commune</th><th>Operation</th><th>Etat</th><th style="text-align:right">Montant</th><th>Pose</th></tr></thead>
          <tbody>
            <tr><td class="crm-t__ref">2026-103</td><td class="crm-t__nom">Krissi Julien</td><td>Neuilly-sur-Marne</td><td>PAC air/eau 11 kW</td><td><span class="crm-e crm-e--ok">Signe</span></td><td class="crm-t__num">4 280,00</td><td>24 sept.</td></tr>
            <tr><td class="crm-t__ref">2026-118</td><td class="crm-t__nom">Martin Sophie</td><td>Colombes</td><td>Chauffe-eau 200 L</td><td><span class="crm-e crm-e--attente">Envoye</span></td><td class="crm-t__num">1 890,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">2026-121</td><td class="crm-t__nom">Durand Paul</td><td>Le Raincy</td><td>Isolation combles</td><td><span class="crm-e crm-e--neutre">Brouillon</span></td><td class="crm-t__num">12 400,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">2026-097</td><td class="crm-t__nom">Bernard Alice</td><td>Gagny</td><td>PAC air/air 3 splits</td><td><span class="crm-e crm-e--ko">Sans reponse</span></td><td class="crm-t__num">6 750,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">2026-092</td><td class="crm-t__nom">Lefevre Marc</td><td>Chelles</td><td>Chaudiere gaz THPE</td><td><span class="crm-e crm-e--ok">Signe</span></td><td class="crm-t__num">3 950,00</td><td>2 oct.</td></tr>
            <tr><td class="crm-t__ref">2026-088</td><td class="crm-t__nom">Nguyen Thi</td><td>Bondy</td><td>Ballon thermodynamique</td><td><span class="crm-e crm-e--attente">Envoye</span></td><td class="crm-t__num">2 340,00</td><td>&mdash;</td></tr>
          </tbody>
        </table>
        <div class="crm-pied"><span>1 a 6 sur 24 &mdash; 31 610,00 EUR au total</span><nav><span>&lsaquo;</span><span class="c">1</span><span>2</span><span>3</span><span>&rsaquo;</span></nav></div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="console"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="console"> &mdash; le balisage est le meme dans toutes les peaux
Dossiers / 2026-103 Signe
ContactVisiteDevisSignaturePoseFacture

Client et chantier

Client
Krissi Julien
Telephone
06 12 34 56 78
Chantier
12 rue des Lilas, 93330 Neuilly-sur-Marne
Logement
Maison individuelle, 112 m2, 1978
Existant
Chaudiere fioul de 1998, 2 400 L par an

Operations

3 lignes
Pompe a chaleur air/eau 11 kWPAC-11-M3 200,00
Depose et evacuation cuve fioulDEP-CUV560,00
Main d'oeuvre, 2 journeesMO-J800,00
Reste a charge
1 880,00 EUR
Total TTC
4 280,00
MaPrimeRenov
2 000,00
CEE
400,00

Pieces

4 / 6

  • Devis signe

    12 aout

  • Avis d'imposition

    9 aout

  • RIB a fournir

    Requis pour le versement

Activite

  • Devis signe par le client

    12 aout a 14:32

  • Devis envoye par courriel

    9 aout a 17:05
Fiche

L'ecran le plus consulte. Le parcours reste visible en haut, les informations a gauche, l'argent et les pieces a droite. Ce qui bloque le dossier doit se voir sans defiler.

Voir le codeMasquer le code 
<div class="crm" data-crm="console">
  <aside class="crm__cote">
    <div class="crm__marque">console<i>_</i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>julien@jabsdev.fr</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Dossiers <span>/</span> <b>2026-103</b> <span class="crm-e crm-e--ok">Signe</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Dupliquer</button>
      <button class="crm-b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> PDF</button>
      <button class="crm-b crm-b--fort">Planifier la pose</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-etapes">
        <span class="f">Contact</span><span class="f">Visite</span><span class="f">Devis</span><span class="c">Signature</span><span>Pose</span><span>Facture</span>
      </div>
      <div class="crm-fiche" style="margin-top:12px">
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Client et chantier</h4><button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg> Modifier</button></div>
            <div class="crm-p__corps"><dl class="crm-def">
              <dt>Client</dt><dd>Krissi Julien</dd>
              <dt>Telephone</dt><dd>06 12 34 56 78</dd>
              <dt>Chantier</dt><dd>12 rue des Lilas, 93330 Neuilly-sur-Marne</dd>
              <dt>Logement</dt><dd>Maison individuelle, 112 m2, 1978</dd>
              <dt>Existant</dt><dd>Chaudiere fioul de 1998, 2 400 L par an</dd>
            </dl></div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Operations</h4><span style="font-size:11px;color:var(--k-encre-3)">3 lignes</span></div>
            <table class="crm-t">
              <tbody>
                <tr><td class="crm-t__nom">Pompe a chaleur air/eau 11 kW</td><td class="crm-t__ref">PAC-11-M</td><td class="crm-t__num">3 200,00</td></tr>
                <tr><td class="crm-t__nom">Depose et evacuation cuve fioul</td><td class="crm-t__ref">DEP-CUV</td><td class="crm-t__num">560,00</td></tr>
                <tr><td class="crm-t__nom">Main d'oeuvre, 2 journees</td><td class="crm-t__ref">MO-J</td><td class="crm-t__num">800,00</td></tr>
              </tbody>
            </table>
          </div>
        </div>
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p"><div class="crm-p__corps">
            <span style="font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--k-caps);color:var(--k-encre-3)">Reste a charge</span>
            <div style="font-family:var(--k-titre);font-size:27px;font-weight:800;letter-spacing:-.02em;margin:4px 0 10px">1 880,00 EUR</div>
            <dl class="crm-def" style="font-size:12px">
              <dt>Total TTC</dt><dd>4 280,00</dd>
              <dt>MaPrimeRenov</dt><dd>2 000,00</dd>
              <dt>CEE</dt><dd>400,00</dd>
            </dl>
          </div></div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Pieces</h4><span style="font-size:11px;color:var(--k-encre-3)">4 / 6</span></div>
            <div class="crm-p__corps">
              <div class="crm-jauge"><i style="--p:66%"></i></div>
              <ul class="crm-fil-actu" style="margin-top:10px">
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg></i><div><p>Devis signe</p><small>12 aout</small></div></li>
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg></i><div><p>Avis d'imposition</p><small>9 aout</small></div></li>
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></i><div><p><b>RIB</b> a fournir</p><small>Requis pour le versement</small></div></li>
              </ul>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Activite</h4></div>
            <div class="crm-p__corps"><ul class="crm-fil-actu">
              <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg></i><div><p><b>Devis signe</b> par le client</p><small>12 aout a 14:32</small></div></li>
              <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg></i><div><p>Devis envoye par courriel</p><small>9 aout a 17:05</small></div></li>
            </ul></div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="console"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="console"> &mdash; le balisage est le meme dans toutes les peaux
Septembre 2026 — a jour a 09:14
Chiffre d'affaires48 250+12,4 % vs aout
En attente17-3 sur 7 jours
Taux de signature62 %stable sur 3 mois
Delai moyen4,2 j-0,6 j vs aout

Chiffre d'affaires mensuel

en milliers d'euros
avr
mai
juin
juil
aout
sept

A traiter aujourd'hui

5

  • 2026-097 sans reponse

    Envoye il y a 14 jours

  • Facture 2026-118 a emettre

    Chantier termine le 2 septembre

  • 2026-121 incomplet

    RIB et justificatif manquants

  • Visite chez Bernard Alice

    Demain 10:00 — Gagny
Tableau de bord

L'ecran d'accueil. Il ne montre pas tout ce qui existe, seulement ce qui appelle une decision aujourd'hui : les chiffres du mois, la tendance, et la liste de ce qui attend une action.

Voir le codeMasquer le code 
<div class="crm" data-crm="console">
  <aside class="crm__cote">
    <div class="crm__marque">console<i>_</i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg> Alertes <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>julien@jabsdev.fr</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil"><b>Septembre 2026</b> <span>&mdash; a jour a 09:14</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b">30 jours</button>
      <button class="crm-b crm-b--nu">Trimestre</button>
      <button class="crm-b crm-b--fort">Exporter</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-kpis">
        <div class="crm-kpi"><span>Chiffre d'affaires</span><strong>48 250</strong><em><b class="h">+12,4 %</b> vs aout</em></div>
        <div class="crm-kpi"><span>En attente</span><strong>17</strong><em><b class="b">-3</b> sur 7 jours</em></div>
        <div class="crm-kpi"><span>Taux de signature</span><strong>62 %</strong><em>stable sur 3 mois</em></div>
        <div class="crm-kpi"><span>Delai moyen</span><strong>4,2 j</strong><em><b class="h">-0,6 j</b> vs aout</em></div>
      </div>
      <div style="display:grid;grid-template-columns:1fr 320px;gap:10px">
        <div class="crm-p">
          <div class="crm-p__tete"><h4>Chiffre d'affaires mensuel</h4><span style="font-size:11px;color:var(--k-encre-3)">en milliers d'euros</span></div>
          <div class="crm-p__corps"><div class="crm-barres">
            <div><i style="--h:42%"></i><small>avr</small></div><div><i style="--h:58%"></i><small>mai</small></div>
            <div><i style="--h:51%"></i><small>juin</small></div><div><i style="--h:74%"></i><small>juil</small></div>
            <div><i style="--h:63%"></i><small>aout</small></div><div class="c"><i style="--h:88%"></i><small>sept</small></div>
          </div></div>
        </div>
        <div class="crm-p">
          <div class="crm-p__tete"><h4>A traiter aujourd'hui</h4><span class="crm-e crm-e--attente">5</span></div>
          <div class="crm-p__corps"><ul class="crm-fil-actu">
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg></i><div><p><b>2026-097</b> sans reponse</p><small>Envoye il y a 14 jours</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg></i><div><p>Facture <b>2026-118</b> a emettre</p><small>Chantier termine le 2 septembre</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg></i><div><p><b>2026-121</b> incomplet</p><small>RIB et justificatif manquants</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></i><div><p>Visite chez <b>Bernard Alice</b></p><small>Demain 10:00 &mdash; Gagny</small></div></li>
          </ul></div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="console"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="console"> &mdash; le balisage est le meme dans toutes les peaux
Dossiers / Nouveau

Client

Chantier

Operation

PAC air/eauPAC air/airChauffe-eauIsolationChaudiere

Recapitulatif

Reference
2026-124
Client
Krissi Julien
Commune
Neuilly-sur-Marne
Operation
PAC air/eau 11 kW
Aides estimees
2 400 EUR

MaPrimeRenov et CEE, sous reserve des revenus du foyer.

Saisie

Creation d'un {{objet}}. Les champs sont groupes par sujet, la colonne de droite recapitule au fur et a mesure, et la reference est attribuee avant l'enregistrement pour qu'on puisse en parler au telephone.

Voir le codeMasquer le code 
<div class="crm" data-crm="console">
  <aside class="crm__cote">
    <div class="crm__marque">console<i>_</i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>julien@jabsdev.fr</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Dossiers <span>/</span> <b>Nouveau</b></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu">Annuler</button>
      <button class="crm-b crm-b--fort">Creer le dossier</button>
    </header>
    <main class="crm__contenu">
      <div style="display:grid;grid-template-columns:1fr 290px;gap:12px;align-items:start">
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Client</h4></div>
            <div class="crm-p__corps crm-form">
              <label><span>Nom ou raison sociale</span><input value="Krissi Julien"></label>
              <div class="crm-form__deux">
                <label><span>Telephone</span><input value="06 12 34 56 78"></label>
                <label><span>Courriel</span><input value="julien@exemple.fr"></label>
              </div>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Chantier</h4></div>
            <div class="crm-p__corps crm-form">
              <label><span>Adresse</span><input value="12 rue des Lilas"></label>
              <div class="crm-form__deux">
                <label><span>Code postal</span><input value="93330"></label>
                <label><span>Commune</span><input value="Neuilly-sur-Marne"></label>
              </div>
              <div class="crm-form__deux">
                <label><span>Surface</span><input value="112 m2"></label>
                <label><span>Annee de construction</span><input value="1978"></label>
              </div>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Operation</h4></div>
            <div class="crm-p__corps crm-form">
              <div class="crm-choix"><span class="c">PAC air/eau</span><span>PAC air/air</span><span>Chauffe-eau</span><span>Isolation</span><span>Chaudiere</span></div>
              <div class="crm-form__deux">
                <label><span>Puissance estimee</span><input value="11 kW"></label>
                <label><span>Pose souhaitee</span><input value="Septembre 2026"></label>
              </div>
            </div>
          </div>
        </div>
        <div class="crm-p">
          <div class="crm-p__tete"><h4>Recapitulatif</h4></div>
          <div class="crm-p__corps">
            <dl class="crm-def" style="font-size:12px">
              <dt>Reference</dt><dd style="font-family:var(--font-mono)">2026-124</dd>
              <dt>Client</dt><dd>Krissi Julien</dd>
              <dt>Commune</dt><dd>Neuilly-sur-Marne</dd>
              <dt>Operation</dt><dd>PAC air/eau 11 kW</dd>
            </dl>
            <div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--k-trait)">
              <span style="font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--k-caps);color:var(--k-encre-3)">Aides estimees</span>
              <div style="font-family:var(--k-titre);font-size:22px;font-weight:800;margin-top:4px">2 400 EUR</div>
              <p style="margin:4px 0 0;font-size:11px;color:var(--k-encre-3);line-height:1.4">MaPrimeRenov et CEE, sous reserve des revenus du foyer.</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="console"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="console"> &mdash; le balisage est le meme dans toutes les peaux
Semaine 37 — du 7 au 11 septembre
Lun 7
Mar 8
Mer 9
Jeu 10
Ven 11
08:00
Pose PACKrissi — Neuilly
EntretienMartin — Colombes
Pose ballonNguyen — Bondy
10:00
Pose PACsuite
Visite techniqueDurand — Le Raincy
Pose ballonsuite
DepannageBernard — Gagny
14:00
MetreLefevre — Chelles
Depannageurgence — Bondy
Mise en serviceKrissi — Neuilly
16:00
Livraisondepot
Reunion equipebureau
Planning

La semaine des equipes. Chaque intervention porte son heure, son client et sa commune : sans la commune, impossible d'evaluer un trajet. Les couleurs distinguent le type, pas l'equipe.

Voir le codeMasquer le code 
<div class="crm" data-crm="console">
  <aside class="crm__cote">
    <div class="crm__marque">console<i>_</i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Equipes</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg> Nord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg> Ouest</a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>julien@jabsdev.fr</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil"><b>Semaine 37</b> <span>&mdash; du 7 au 11 septembre</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
      <button class="crm-b">Aujourd'hui</button>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Planifier</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-plan">
        <div class="crm-plan__jour"></div>
        <div class="crm-plan__jour">Lun 7</div><div class="crm-plan__jour">Mar 8</div>
        <div class="crm-plan__jour">Mer 9</div><div class="crm-plan__jour">Jeu 10</div><div class="crm-plan__jour">Ven 11</div>

        <div class="crm-plan__h">08:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose PAC</b><small>Krissi &mdash; Neuilly</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Entretien</b><small>Martin &mdash; Colombes</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose ballon</b><small>Nguyen &mdash; Bondy</small></span></div>
        <div class="crm-plan__c"></div>

        <div class="crm-plan__h">10:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose PAC</b><small>suite</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Visite technique</b><small>Durand &mdash; Le Raincy</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose ballon</b><small>suite</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev a"><b>Depannage</b><small>Bernard &mdash; Gagny</small></span></div>

        <div class="crm-plan__h">14:00</div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Metre</b><small>Lefevre &mdash; Chelles</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev a"><b>Depannage</b><small>urgence &mdash; Bondy</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Mise en service</b><small>Krissi &mdash; Neuilly</small></span></div>

        <div class="crm-plan__h">16:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Livraison</b><small>depot</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Reunion equipe</b><small>bureau</small></span></div>
        <div class="crm-plan__c"></div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="console"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="console"> &mdash; le balisage est le meme dans toutes les peaux
Dossiers / 2026-103 / Documents
4 pieces sur 6 RIB et justificatif de domicile manquants
Incomplet
Valide
Devis signe.pdf248 Ko — 12 aout
Valide
Avis d'imposition.pdf96 Ko — 9 aout
Valide
Photo compteur.jpg1,1 Mo — 9 aout
A verifier
Mandat MaPrimeRenov.pdf84 Ko — hier
Documents

Les pieces d'un {{objet}}. L'etat de chaque piece se lit sur la vignette, et la case vide en pointille dit ce qu'il manque encore : c'est elle qui fait avancer le dossier.

Voir le codeMasquer le code 
<div class="crm" data-crm="console">
  <aside class="crm__cote">
    <div class="crm__marque">console<i>_</i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <div class="crm__groupe">Suivi</div>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>julien@jabsdev.fr</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Dossiers <span>/</span> <b>2026-103</b> <span>/</span> <b>Documents</b></div>
      <div class="crm__espace"></div>
      <button class="crm-b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Tout telecharger</button>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg> Deposer</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-p" style="margin-bottom:12px">
        <div class="crm-p__corps" style="display:flex;align-items:center;gap:14px">
          <div style="flex:1">
            <div style="display:flex;justify-content:space-between;font-size:11.5px;margin-bottom:6px">
              <span style="font-weight:600">4 pieces sur 6</span>
              <span style="color:var(--k-encre-3)">RIB et justificatif de domicile manquants</span>
            </div>
            <div class="crm-jauge"><i style="--p:66%"></i></div>
          </div>
          <span class="crm-e crm-e--attente">Incomplet</span>
        </div>
      </div>
      <div class="crm-docs">
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i><i></i><i></i></div><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Devis signe.pdf</b><small>248 Ko &mdash; 12 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i><i></i></div><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Avis d'imposition.pdf</b><small>96 Ko &mdash; 9 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Photo compteur.jpg</b><small>1,1 Mo &mdash; 9 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i></div><span class="crm-e crm-e--attente">A verifier</span></div>
          <div class="crm-doc__pied"><b>Mandat MaPrimeRenov.pdf</b><small>84 Ko &mdash; hier</small></div>
        </div>
        <label class="crm-doc crm-doc--vide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><b>RIB</b><small>Requis pour le versement</small></label>
        <label class="crm-doc crm-doc--vide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><b>Justificatif de domicile</b><small>Moins de 3 mois</small></label>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="console"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="console"> &mdash; le balisage est le meme dans toutes les peaux

D. Papier

Cabinet, bureau d'etudes, artisan haut de gamme. Fond creme, encre brune, vert foret, titres en serif, filets fins, aucun aplat colore. Donne le registre d'un document imprime plutot que d'un logiciel.

Etudes / Tous
Rechercher
ReferenceClientCommuneOperationEtatMontantPose
MV-2026-103Krissi JulienNeuilly-sur-MarnePAC air/eau 11 kWSigne4 280,0024 sept.
MV-2026-118Martin SophieColombesChauffe-eau 200 LEnvoye1 890,00—
MV-2026-121Durand PaulLe RaincyIsolation comblesBrouillon12 400,00—
MV-2026-097Bernard AliceGagnyPAC air/air 3 splitsSans reponse6 750,00—
MV-2026-092Lefevre MarcChellesChaudiere gaz THPESigne3 950,002 oct.
MV-2026-088Nguyen ThiBondyBallon thermodynamiqueEnvoye2 340,00—
1 a 6 sur 24 — 31 610,00 EUR au total
Liste

L'ecran d'entree : filtres rapides en haut, tableau dense, pied qui rappelle le compte et le total. Les references sont en chiffres tabulaires pour que les montants se comparent d'un coup d'oeil.

Voir le codeMasquer le code 
<div class="crm" data-crm="papier">
  <aside class="crm__cote">
    <div class="crm__marque">Maison Verte<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Etudes <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__groupe">Reglages</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg> Parametres</a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Etudes <span>/</span> <b>Tous</b></div>
      <div class="crm__espace"></div>
      <div class="crm-recherche"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg> Rechercher</div>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Nouveau etude</button>
    </header>
    <main class="crm__contenu">
      <div class="crm__outils">
        <button class="crm-b">Tous <b>24</b></button>
        <button class="crm-b">En cours <b>12</b></button>
        <button class="crm-b">A relancer <b>5</b></button>
        <div class="crm__espace"></div>
        <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4h18l-7 8v6l-4 2v-8Z"/></svg> Filtres</button>
        <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Exporter</button>
      </div>
      <div class="crm-cadre">
        <table class="crm-t">
          <thead><tr><th>Reference</th><th>Client</th><th>Commune</th><th>Operation</th><th>Etat</th><th style="text-align:right">Montant</th><th>Pose</th></tr></thead>
          <tbody>
            <tr><td class="crm-t__ref">MV-2026-103</td><td class="crm-t__nom">Krissi Julien</td><td>Neuilly-sur-Marne</td><td>PAC air/eau 11 kW</td><td><span class="crm-e crm-e--ok">Signe</span></td><td class="crm-t__num">4 280,00</td><td>24 sept.</td></tr>
            <tr><td class="crm-t__ref">MV-2026-118</td><td class="crm-t__nom">Martin Sophie</td><td>Colombes</td><td>Chauffe-eau 200 L</td><td><span class="crm-e crm-e--attente">Envoye</span></td><td class="crm-t__num">1 890,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">MV-2026-121</td><td class="crm-t__nom">Durand Paul</td><td>Le Raincy</td><td>Isolation combles</td><td><span class="crm-e crm-e--neutre">Brouillon</span></td><td class="crm-t__num">12 400,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">MV-2026-097</td><td class="crm-t__nom">Bernard Alice</td><td>Gagny</td><td>PAC air/air 3 splits</td><td><span class="crm-e crm-e--ko">Sans reponse</span></td><td class="crm-t__num">6 750,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">MV-2026-092</td><td class="crm-t__nom">Lefevre Marc</td><td>Chelles</td><td>Chaudiere gaz THPE</td><td><span class="crm-e crm-e--ok">Signe</span></td><td class="crm-t__num">3 950,00</td><td>2 oct.</td></tr>
            <tr><td class="crm-t__ref">MV-2026-088</td><td class="crm-t__nom">Nguyen Thi</td><td>Bondy</td><td>Ballon thermodynamique</td><td><span class="crm-e crm-e--attente">Envoye</span></td><td class="crm-t__num">2 340,00</td><td>&mdash;</td></tr>
          </tbody>
        </table>
        <div class="crm-pied"><span>1 a 6 sur 24 &mdash; 31 610,00 EUR au total</span><nav><span>&lsaquo;</span><span class="c">1</span><span>2</span><span>3</span><span>&rsaquo;</span></nav></div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="papier"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="papier"> &mdash; le balisage est le meme dans toutes les peaux
Etudes / MV-2026-103 Signe
ContactVisiteDevisSignaturePoseFacture

Client et chantier

Client
Krissi Julien
Telephone
06 12 34 56 78
Chantier
12 rue des Lilas, 93330 Neuilly-sur-Marne
Logement
Maison individuelle, 112 m2, 1978
Existant
Chaudiere fioul de 1998, 2 400 L par an

Operations

3 lignes
Pompe a chaleur air/eau 11 kWPAC-11-M3 200,00
Depose et evacuation cuve fioulDEP-CUV560,00
Main d'oeuvre, 2 journeesMO-J800,00
Reste a charge
1 880,00 EUR
Total TTC
4 280,00
MaPrimeRenov
2 000,00
CEE
400,00

Pieces

4 / 6

  • Devis signe

    12 aout

  • Avis d'imposition

    9 aout

  • RIB a fournir

    Requis pour le versement

Activite

  • Devis signe par le client

    12 aout a 14:32

  • Devis envoye par courriel

    9 aout a 17:05
Fiche

L'ecran le plus consulte. Le parcours reste visible en haut, les informations a gauche, l'argent et les pieces a droite. Ce qui bloque le dossier doit se voir sans defiler.

Voir le codeMasquer le code 
<div class="crm" data-crm="papier">
  <aside class="crm__cote">
    <div class="crm__marque">Maison Verte<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Etudes <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Etudes <span>/</span> <b>MV-2026-103</b> <span class="crm-e crm-e--ok">Signe</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Dupliquer</button>
      <button class="crm-b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> PDF</button>
      <button class="crm-b crm-b--fort">Planifier la pose</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-etapes">
        <span class="f">Contact</span><span class="f">Visite</span><span class="f">Devis</span><span class="c">Signature</span><span>Pose</span><span>Facture</span>
      </div>
      <div class="crm-fiche" style="margin-top:12px">
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Client et chantier</h4><button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg> Modifier</button></div>
            <div class="crm-p__corps"><dl class="crm-def">
              <dt>Client</dt><dd>Krissi Julien</dd>
              <dt>Telephone</dt><dd>06 12 34 56 78</dd>
              <dt>Chantier</dt><dd>12 rue des Lilas, 93330 Neuilly-sur-Marne</dd>
              <dt>Logement</dt><dd>Maison individuelle, 112 m2, 1978</dd>
              <dt>Existant</dt><dd>Chaudiere fioul de 1998, 2 400 L par an</dd>
            </dl></div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Operations</h4><span style="font-size:11px;color:var(--k-encre-3)">3 lignes</span></div>
            <table class="crm-t">
              <tbody>
                <tr><td class="crm-t__nom">Pompe a chaleur air/eau 11 kW</td><td class="crm-t__ref">PAC-11-M</td><td class="crm-t__num">3 200,00</td></tr>
                <tr><td class="crm-t__nom">Depose et evacuation cuve fioul</td><td class="crm-t__ref">DEP-CUV</td><td class="crm-t__num">560,00</td></tr>
                <tr><td class="crm-t__nom">Main d'oeuvre, 2 journees</td><td class="crm-t__ref">MO-J</td><td class="crm-t__num">800,00</td></tr>
              </tbody>
            </table>
          </div>
        </div>
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p"><div class="crm-p__corps">
            <span style="font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--k-caps);color:var(--k-encre-3)">Reste a charge</span>
            <div style="font-family:var(--k-titre);font-size:27px;font-weight:800;letter-spacing:-.02em;margin:4px 0 10px">1 880,00 EUR</div>
            <dl class="crm-def" style="font-size:12px">
              <dt>Total TTC</dt><dd>4 280,00</dd>
              <dt>MaPrimeRenov</dt><dd>2 000,00</dd>
              <dt>CEE</dt><dd>400,00</dd>
            </dl>
          </div></div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Pieces</h4><span style="font-size:11px;color:var(--k-encre-3)">4 / 6</span></div>
            <div class="crm-p__corps">
              <div class="crm-jauge"><i style="--p:66%"></i></div>
              <ul class="crm-fil-actu" style="margin-top:10px">
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg></i><div><p>Devis signe</p><small>12 aout</small></div></li>
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg></i><div><p>Avis d'imposition</p><small>9 aout</small></div></li>
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></i><div><p><b>RIB</b> a fournir</p><small>Requis pour le versement</small></div></li>
              </ul>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Activite</h4></div>
            <div class="crm-p__corps"><ul class="crm-fil-actu">
              <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg></i><div><p><b>Devis signe</b> par le client</p><small>12 aout a 14:32</small></div></li>
              <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg></i><div><p>Devis envoye par courriel</p><small>9 aout a 17:05</small></div></li>
            </ul></div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="papier"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="papier"> &mdash; le balisage est le meme dans toutes les peaux
Septembre 2026 — a jour a 09:14
Chiffre d'affaires48 250+12,4 % vs aout
En attente17-3 sur 7 jours
Taux de signature62 %stable sur 3 mois
Delai moyen4,2 j-0,6 j vs aout

Chiffre d'affaires mensuel

en milliers d'euros
avr
mai
juin
juil
aout
sept

A traiter aujourd'hui

5

  • MV-2026-097 sans reponse

    Envoye il y a 14 jours

  • Facture MV-2026-118 a emettre

    Chantier termine le 2 septembre

  • MV-2026-121 incomplet

    RIB et justificatif manquants

  • Visite chez Bernard Alice

    Demain 10:00 — Gagny
Tableau de bord

L'ecran d'accueil. Il ne montre pas tout ce qui existe, seulement ce qui appelle une decision aujourd'hui : les chiffres du mois, la tendance, et la liste de ce qui attend une action.

Voir le codeMasquer le code 
<div class="crm" data-crm="papier">
  <aside class="crm__cote">
    <div class="crm__marque">Maison Verte<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Etudes <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg> Alertes <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil"><b>Septembre 2026</b> <span>&mdash; a jour a 09:14</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b">30 jours</button>
      <button class="crm-b crm-b--nu">Trimestre</button>
      <button class="crm-b crm-b--fort">Exporter</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-kpis">
        <div class="crm-kpi"><span>Chiffre d'affaires</span><strong>48 250</strong><em><b class="h">+12,4 %</b> vs aout</em></div>
        <div class="crm-kpi"><span>En attente</span><strong>17</strong><em><b class="b">-3</b> sur 7 jours</em></div>
        <div class="crm-kpi"><span>Taux de signature</span><strong>62 %</strong><em>stable sur 3 mois</em></div>
        <div class="crm-kpi"><span>Delai moyen</span><strong>4,2 j</strong><em><b class="h">-0,6 j</b> vs aout</em></div>
      </div>
      <div style="display:grid;grid-template-columns:1fr 320px;gap:10px">
        <div class="crm-p">
          <div class="crm-p__tete"><h4>Chiffre d'affaires mensuel</h4><span style="font-size:11px;color:var(--k-encre-3)">en milliers d'euros</span></div>
          <div class="crm-p__corps"><div class="crm-barres">
            <div><i style="--h:42%"></i><small>avr</small></div><div><i style="--h:58%"></i><small>mai</small></div>
            <div><i style="--h:51%"></i><small>juin</small></div><div><i style="--h:74%"></i><small>juil</small></div>
            <div><i style="--h:63%"></i><small>aout</small></div><div class="c"><i style="--h:88%"></i><small>sept</small></div>
          </div></div>
        </div>
        <div class="crm-p">
          <div class="crm-p__tete"><h4>A traiter aujourd'hui</h4><span class="crm-e crm-e--attente">5</span></div>
          <div class="crm-p__corps"><ul class="crm-fil-actu">
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg></i><div><p><b>MV-2026-097</b> sans reponse</p><small>Envoye il y a 14 jours</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg></i><div><p>Facture <b>MV-2026-118</b> a emettre</p><small>Chantier termine le 2 septembre</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg></i><div><p><b>MV-2026-121</b> incomplet</p><small>RIB et justificatif manquants</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></i><div><p>Visite chez <b>Bernard Alice</b></p><small>Demain 10:00 &mdash; Gagny</small></div></li>
          </ul></div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="papier"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="papier"> &mdash; le balisage est le meme dans toutes les peaux
Etudes / Nouveau

Client

Chantier

Operation

PAC air/eauPAC air/airChauffe-eauIsolationChaudiere

Recapitulatif

Reference
MV-2026-124
Client
Krissi Julien
Commune
Neuilly-sur-Marne
Operation
PAC air/eau 11 kW
Aides estimees
2 400 EUR

MaPrimeRenov et CEE, sous reserve des revenus du foyer.

Saisie

Creation d'un {{objet}}. Les champs sont groupes par sujet, la colonne de droite recapitule au fur et a mesure, et la reference est attribuee avant l'enregistrement pour qu'on puisse en parler au telephone.

Voir le codeMasquer le code 
<div class="crm" data-crm="papier">
  <aside class="crm__cote">
    <div class="crm__marque">Maison Verte<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Etudes <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Etudes <span>/</span> <b>Nouveau</b></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu">Annuler</button>
      <button class="crm-b crm-b--fort">Creer le etude</button>
    </header>
    <main class="crm__contenu">
      <div style="display:grid;grid-template-columns:1fr 290px;gap:12px;align-items:start">
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Client</h4></div>
            <div class="crm-p__corps crm-form">
              <label><span>Nom ou raison sociale</span><input value="Krissi Julien"></label>
              <div class="crm-form__deux">
                <label><span>Telephone</span><input value="06 12 34 56 78"></label>
                <label><span>Courriel</span><input value="julien@exemple.fr"></label>
              </div>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Chantier</h4></div>
            <div class="crm-p__corps crm-form">
              <label><span>Adresse</span><input value="12 rue des Lilas"></label>
              <div class="crm-form__deux">
                <label><span>Code postal</span><input value="93330"></label>
                <label><span>Commune</span><input value="Neuilly-sur-Marne"></label>
              </div>
              <div class="crm-form__deux">
                <label><span>Surface</span><input value="112 m2"></label>
                <label><span>Annee de construction</span><input value="1978"></label>
              </div>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Operation</h4></div>
            <div class="crm-p__corps crm-form">
              <div class="crm-choix"><span class="c">PAC air/eau</span><span>PAC air/air</span><span>Chauffe-eau</span><span>Isolation</span><span>Chaudiere</span></div>
              <div class="crm-form__deux">
                <label><span>Puissance estimee</span><input value="11 kW"></label>
                <label><span>Pose souhaitee</span><input value="Septembre 2026"></label>
              </div>
            </div>
          </div>
        </div>
        <div class="crm-p">
          <div class="crm-p__tete"><h4>Recapitulatif</h4></div>
          <div class="crm-p__corps">
            <dl class="crm-def" style="font-size:12px">
              <dt>Reference</dt><dd style="font-family:var(--font-mono)">MV-2026-124</dd>
              <dt>Client</dt><dd>Krissi Julien</dd>
              <dt>Commune</dt><dd>Neuilly-sur-Marne</dd>
              <dt>Operation</dt><dd>PAC air/eau 11 kW</dd>
            </dl>
            <div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--k-trait)">
              <span style="font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--k-caps);color:var(--k-encre-3)">Aides estimees</span>
              <div style="font-family:var(--k-titre);font-size:22px;font-weight:800;margin-top:4px">2 400 EUR</div>
              <p style="margin:4px 0 0;font-size:11px;color:var(--k-encre-3);line-height:1.4">MaPrimeRenov et CEE, sous reserve des revenus du foyer.</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="papier"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="papier"> &mdash; le balisage est le meme dans toutes les peaux
Semaine 37 — du 7 au 11 septembre
Lun 7
Mar 8
Mer 9
Jeu 10
Ven 11
08:00
Pose PACKrissi — Neuilly
EntretienMartin — Colombes
Pose ballonNguyen — Bondy
10:00
Pose PACsuite
Visite techniqueDurand — Le Raincy
Pose ballonsuite
DepannageBernard — Gagny
14:00
MetreLefevre — Chelles
Depannageurgence — Bondy
Mise en serviceKrissi — Neuilly
16:00
Livraisondepot
Reunion equipebureau
Planning

La semaine des equipes. Chaque intervention porte son heure, son client et sa commune : sans la commune, impossible d'evaluer un trajet. Les couleurs distinguent le type, pas l'equipe.

Voir le codeMasquer le code 
<div class="crm" data-crm="papier">
  <aside class="crm__cote">
    <div class="crm__marque">Maison Verte<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Etudes <b>24</b></a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Equipes</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg> Nord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg> Ouest</a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil"><b>Semaine 37</b> <span>&mdash; du 7 au 11 septembre</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
      <button class="crm-b">Aujourd'hui</button>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Planifier</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-plan">
        <div class="crm-plan__jour"></div>
        <div class="crm-plan__jour">Lun 7</div><div class="crm-plan__jour">Mar 8</div>
        <div class="crm-plan__jour">Mer 9</div><div class="crm-plan__jour">Jeu 10</div><div class="crm-plan__jour">Ven 11</div>

        <div class="crm-plan__h">08:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose PAC</b><small>Krissi &mdash; Neuilly</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Entretien</b><small>Martin &mdash; Colombes</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose ballon</b><small>Nguyen &mdash; Bondy</small></span></div>
        <div class="crm-plan__c"></div>

        <div class="crm-plan__h">10:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose PAC</b><small>suite</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Visite technique</b><small>Durand &mdash; Le Raincy</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose ballon</b><small>suite</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev a"><b>Depannage</b><small>Bernard &mdash; Gagny</small></span></div>

        <div class="crm-plan__h">14:00</div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Metre</b><small>Lefevre &mdash; Chelles</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev a"><b>Depannage</b><small>urgence &mdash; Bondy</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Mise en service</b><small>Krissi &mdash; Neuilly</small></span></div>

        <div class="crm-plan__h">16:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Livraison</b><small>depot</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Reunion equipe</b><small>bureau</small></span></div>
        <div class="crm-plan__c"></div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="papier"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="papier"> &mdash; le balisage est le meme dans toutes les peaux
Etudes / MV-2026-103 / Documents
4 pieces sur 6 RIB et justificatif de domicile manquants
Incomplet
Valide
Devis signe.pdf248 Ko — 12 aout
Valide
Avis d'imposition.pdf96 Ko — 9 aout
Valide
Photo compteur.jpg1,1 Mo — 9 aout
A verifier
Mandat MaPrimeRenov.pdf84 Ko — hier
Documents

Les pieces d'un {{objet}}. L'etat de chaque piece se lit sur la vignette, et la case vide en pointille dit ce qu'il manque encore : c'est elle qui fait avancer le dossier.

Voir le codeMasquer le code 
<div class="crm" data-crm="papier">
  <aside class="crm__cote">
    <div class="crm__marque">Maison Verte<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Etudes <b>24</b></a>
    <div class="crm__groupe">Suivi</div>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Etudes <span>/</span> <b>MV-2026-103</b> <span>/</span> <b>Documents</b></div>
      <div class="crm__espace"></div>
      <button class="crm-b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Tout telecharger</button>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg> Deposer</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-p" style="margin-bottom:12px">
        <div class="crm-p__corps" style="display:flex;align-items:center;gap:14px">
          <div style="flex:1">
            <div style="display:flex;justify-content:space-between;font-size:11.5px;margin-bottom:6px">
              <span style="font-weight:600">4 pieces sur 6</span>
              <span style="color:var(--k-encre-3)">RIB et justificatif de domicile manquants</span>
            </div>
            <div class="crm-jauge"><i style="--p:66%"></i></div>
          </div>
          <span class="crm-e crm-e--attente">Incomplet</span>
        </div>
      </div>
      <div class="crm-docs">
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i><i></i><i></i></div><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Devis signe.pdf</b><small>248 Ko &mdash; 12 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i><i></i></div><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Avis d'imposition.pdf</b><small>96 Ko &mdash; 9 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Photo compteur.jpg</b><small>1,1 Mo &mdash; 9 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i></div><span class="crm-e crm-e--attente">A verifier</span></div>
          <div class="crm-doc__pied"><b>Mandat MaPrimeRenov.pdf</b><small>84 Ko &mdash; hier</small></div>
        </div>
        <label class="crm-doc crm-doc--vide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><b>RIB</b><small>Requis pour le versement</small></label>
        <label class="crm-doc crm-doc--vide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><b>Justificatif de domicile</b><small>Moins de 3 mois</small></label>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="papier"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="papier"> &mdash; le balisage est le meme dans toutes les peaux

E. Ardoise

Produit logiciel vendu a des clients. Bleu-gris froid, indigo profond, ombres douces au lieu des bordures, rayon de 10 px, respiration large. Le registre attendu d'un abonnement mensuel.

Dossiers / Tous
Rechercher
ReferenceClientCommuneOperationEtatMontantPose
PLT-103Krissi JulienNeuilly-sur-MarnePAC air/eau 11 kWSigne4 280,0024 sept.
PLT-118Martin SophieColombesChauffe-eau 200 LEnvoye1 890,00—
PLT-121Durand PaulLe RaincyIsolation comblesBrouillon12 400,00—
PLT-097Bernard AliceGagnyPAC air/air 3 splitsSans reponse6 750,00—
PLT-092Lefevre MarcChellesChaudiere gaz THPESigne3 950,002 oct.
PLT-088Nguyen ThiBondyBallon thermodynamiqueEnvoye2 340,00—
1 a 6 sur 24 — 31 610,00 EUR au total
Liste

L'ecran d'entree : filtres rapides en haut, tableau dense, pied qui rappelle le compte et le total. Les references sont en chiffres tabulaires pour que les montants se comparent d'un coup d'oeil.

Voir le codeMasquer le code 
<div class="crm" data-crm="ardoise">
  <aside class="crm__cote">
    <div class="crm__marque">Pilotis<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__groupe">Reglages</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg> Parametres</a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Dossiers <span>/</span> <b>Tous</b></div>
      <div class="crm__espace"></div>
      <div class="crm-recherche"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg> Rechercher</div>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Nouveau dossier</button>
    </header>
    <main class="crm__contenu">
      <div class="crm__outils">
        <button class="crm-b">Tous <b>24</b></button>
        <button class="crm-b">En cours <b>12</b></button>
        <button class="crm-b">A relancer <b>5</b></button>
        <div class="crm__espace"></div>
        <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4h18l-7 8v6l-4 2v-8Z"/></svg> Filtres</button>
        <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Exporter</button>
      </div>
      <div class="crm-cadre">
        <table class="crm-t">
          <thead><tr><th>Reference</th><th>Client</th><th>Commune</th><th>Operation</th><th>Etat</th><th style="text-align:right">Montant</th><th>Pose</th></tr></thead>
          <tbody>
            <tr><td class="crm-t__ref">PLT-103</td><td class="crm-t__nom">Krissi Julien</td><td>Neuilly-sur-Marne</td><td>PAC air/eau 11 kW</td><td><span class="crm-e crm-e--ok">Signe</span></td><td class="crm-t__num">4 280,00</td><td>24 sept.</td></tr>
            <tr><td class="crm-t__ref">PLT-118</td><td class="crm-t__nom">Martin Sophie</td><td>Colombes</td><td>Chauffe-eau 200 L</td><td><span class="crm-e crm-e--attente">Envoye</span></td><td class="crm-t__num">1 890,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">PLT-121</td><td class="crm-t__nom">Durand Paul</td><td>Le Raincy</td><td>Isolation combles</td><td><span class="crm-e crm-e--neutre">Brouillon</span></td><td class="crm-t__num">12 400,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">PLT-097</td><td class="crm-t__nom">Bernard Alice</td><td>Gagny</td><td>PAC air/air 3 splits</td><td><span class="crm-e crm-e--ko">Sans reponse</span></td><td class="crm-t__num">6 750,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">PLT-092</td><td class="crm-t__nom">Lefevre Marc</td><td>Chelles</td><td>Chaudiere gaz THPE</td><td><span class="crm-e crm-e--ok">Signe</span></td><td class="crm-t__num">3 950,00</td><td>2 oct.</td></tr>
            <tr><td class="crm-t__ref">PLT-088</td><td class="crm-t__nom">Nguyen Thi</td><td>Bondy</td><td>Ballon thermodynamique</td><td><span class="crm-e crm-e--attente">Envoye</span></td><td class="crm-t__num">2 340,00</td><td>&mdash;</td></tr>
          </tbody>
        </table>
        <div class="crm-pied"><span>1 a 6 sur 24 &mdash; 31 610,00 EUR au total</span><nav><span>&lsaquo;</span><span class="c">1</span><span>2</span><span>3</span><span>&rsaquo;</span></nav></div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="ardoise"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="ardoise"> &mdash; le balisage est le meme dans toutes les peaux
Dossiers / PLT-103 Signe
ContactVisiteDevisSignaturePoseFacture

Client et chantier

Client
Krissi Julien
Telephone
06 12 34 56 78
Chantier
12 rue des Lilas, 93330 Neuilly-sur-Marne
Logement
Maison individuelle, 112 m2, 1978
Existant
Chaudiere fioul de 1998, 2 400 L par an

Operations

3 lignes
Pompe a chaleur air/eau 11 kWPAC-11-M3 200,00
Depose et evacuation cuve fioulDEP-CUV560,00
Main d'oeuvre, 2 journeesMO-J800,00
Reste a charge
1 880,00 EUR
Total TTC
4 280,00
MaPrimeRenov
2 000,00
CEE
400,00

Pieces

4 / 6

  • Devis signe

    12 aout

  • Avis d'imposition

    9 aout

  • RIB a fournir

    Requis pour le versement

Activite

  • Devis signe par le client

    12 aout a 14:32

  • Devis envoye par courriel

    9 aout a 17:05
Fiche

L'ecran le plus consulte. Le parcours reste visible en haut, les informations a gauche, l'argent et les pieces a droite. Ce qui bloque le dossier doit se voir sans defiler.

Voir le codeMasquer le code 
<div class="crm" data-crm="ardoise">
  <aside class="crm__cote">
    <div class="crm__marque">Pilotis<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Dossiers <span>/</span> <b>PLT-103</b> <span class="crm-e crm-e--ok">Signe</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Dupliquer</button>
      <button class="crm-b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> PDF</button>
      <button class="crm-b crm-b--fort">Planifier la pose</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-etapes">
        <span class="f">Contact</span><span class="f">Visite</span><span class="f">Devis</span><span class="c">Signature</span><span>Pose</span><span>Facture</span>
      </div>
      <div class="crm-fiche" style="margin-top:12px">
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Client et chantier</h4><button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg> Modifier</button></div>
            <div class="crm-p__corps"><dl class="crm-def">
              <dt>Client</dt><dd>Krissi Julien</dd>
              <dt>Telephone</dt><dd>06 12 34 56 78</dd>
              <dt>Chantier</dt><dd>12 rue des Lilas, 93330 Neuilly-sur-Marne</dd>
              <dt>Logement</dt><dd>Maison individuelle, 112 m2, 1978</dd>
              <dt>Existant</dt><dd>Chaudiere fioul de 1998, 2 400 L par an</dd>
            </dl></div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Operations</h4><span style="font-size:11px;color:var(--k-encre-3)">3 lignes</span></div>
            <table class="crm-t">
              <tbody>
                <tr><td class="crm-t__nom">Pompe a chaleur air/eau 11 kW</td><td class="crm-t__ref">PAC-11-M</td><td class="crm-t__num">3 200,00</td></tr>
                <tr><td class="crm-t__nom">Depose et evacuation cuve fioul</td><td class="crm-t__ref">DEP-CUV</td><td class="crm-t__num">560,00</td></tr>
                <tr><td class="crm-t__nom">Main d'oeuvre, 2 journees</td><td class="crm-t__ref">MO-J</td><td class="crm-t__num">800,00</td></tr>
              </tbody>
            </table>
          </div>
        </div>
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p"><div class="crm-p__corps">
            <span style="font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--k-caps);color:var(--k-encre-3)">Reste a charge</span>
            <div style="font-family:var(--k-titre);font-size:27px;font-weight:800;letter-spacing:-.02em;margin:4px 0 10px">1 880,00 EUR</div>
            <dl class="crm-def" style="font-size:12px">
              <dt>Total TTC</dt><dd>4 280,00</dd>
              <dt>MaPrimeRenov</dt><dd>2 000,00</dd>
              <dt>CEE</dt><dd>400,00</dd>
            </dl>
          </div></div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Pieces</h4><span style="font-size:11px;color:var(--k-encre-3)">4 / 6</span></div>
            <div class="crm-p__corps">
              <div class="crm-jauge"><i style="--p:66%"></i></div>
              <ul class="crm-fil-actu" style="margin-top:10px">
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg></i><div><p>Devis signe</p><small>12 aout</small></div></li>
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg></i><div><p>Avis d'imposition</p><small>9 aout</small></div></li>
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></i><div><p><b>RIB</b> a fournir</p><small>Requis pour le versement</small></div></li>
              </ul>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Activite</h4></div>
            <div class="crm-p__corps"><ul class="crm-fil-actu">
              <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg></i><div><p><b>Devis signe</b> par le client</p><small>12 aout a 14:32</small></div></li>
              <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg></i><div><p>Devis envoye par courriel</p><small>9 aout a 17:05</small></div></li>
            </ul></div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="ardoise"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="ardoise"> &mdash; le balisage est le meme dans toutes les peaux
Septembre 2026 — a jour a 09:14
Chiffre d'affaires48 250+12,4 % vs aout
En attente17-3 sur 7 jours
Taux de signature62 %stable sur 3 mois
Delai moyen4,2 j-0,6 j vs aout

Chiffre d'affaires mensuel

en milliers d'euros
avr
mai
juin
juil
aout
sept

A traiter aujourd'hui

5

  • PLT-097 sans reponse

    Envoye il y a 14 jours

  • Facture PLT-118 a emettre

    Chantier termine le 2 septembre

  • PLT-121 incomplet

    RIB et justificatif manquants

  • Visite chez Bernard Alice

    Demain 10:00 — Gagny
Tableau de bord

L'ecran d'accueil. Il ne montre pas tout ce qui existe, seulement ce qui appelle une decision aujourd'hui : les chiffres du mois, la tendance, et la liste de ce qui attend une action.

Voir le codeMasquer le code 
<div class="crm" data-crm="ardoise">
  <aside class="crm__cote">
    <div class="crm__marque">Pilotis<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg> Alertes <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil"><b>Septembre 2026</b> <span>&mdash; a jour a 09:14</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b">30 jours</button>
      <button class="crm-b crm-b--nu">Trimestre</button>
      <button class="crm-b crm-b--fort">Exporter</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-kpis">
        <div class="crm-kpi"><span>Chiffre d'affaires</span><strong>48 250</strong><em><b class="h">+12,4 %</b> vs aout</em></div>
        <div class="crm-kpi"><span>En attente</span><strong>17</strong><em><b class="b">-3</b> sur 7 jours</em></div>
        <div class="crm-kpi"><span>Taux de signature</span><strong>62 %</strong><em>stable sur 3 mois</em></div>
        <div class="crm-kpi"><span>Delai moyen</span><strong>4,2 j</strong><em><b class="h">-0,6 j</b> vs aout</em></div>
      </div>
      <div style="display:grid;grid-template-columns:1fr 320px;gap:10px">
        <div class="crm-p">
          <div class="crm-p__tete"><h4>Chiffre d'affaires mensuel</h4><span style="font-size:11px;color:var(--k-encre-3)">en milliers d'euros</span></div>
          <div class="crm-p__corps"><div class="crm-barres">
            <div><i style="--h:42%"></i><small>avr</small></div><div><i style="--h:58%"></i><small>mai</small></div>
            <div><i style="--h:51%"></i><small>juin</small></div><div><i style="--h:74%"></i><small>juil</small></div>
            <div><i style="--h:63%"></i><small>aout</small></div><div class="c"><i style="--h:88%"></i><small>sept</small></div>
          </div></div>
        </div>
        <div class="crm-p">
          <div class="crm-p__tete"><h4>A traiter aujourd'hui</h4><span class="crm-e crm-e--attente">5</span></div>
          <div class="crm-p__corps"><ul class="crm-fil-actu">
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg></i><div><p><b>PLT-097</b> sans reponse</p><small>Envoye il y a 14 jours</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg></i><div><p>Facture <b>PLT-118</b> a emettre</p><small>Chantier termine le 2 septembre</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg></i><div><p><b>PLT-121</b> incomplet</p><small>RIB et justificatif manquants</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></i><div><p>Visite chez <b>Bernard Alice</b></p><small>Demain 10:00 &mdash; Gagny</small></div></li>
          </ul></div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="ardoise"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="ardoise"> &mdash; le balisage est le meme dans toutes les peaux
Dossiers / Nouveau

Client

Chantier

Operation

PAC air/eauPAC air/airChauffe-eauIsolationChaudiere

Recapitulatif

Reference
PLT-124
Client
Krissi Julien
Commune
Neuilly-sur-Marne
Operation
PAC air/eau 11 kW
Aides estimees
2 400 EUR

MaPrimeRenov et CEE, sous reserve des revenus du foyer.

Saisie

Creation d'un {{objet}}. Les champs sont groupes par sujet, la colonne de droite recapitule au fur et a mesure, et la reference est attribuee avant l'enregistrement pour qu'on puisse en parler au telephone.

Voir le codeMasquer le code 
<div class="crm" data-crm="ardoise">
  <aside class="crm__cote">
    <div class="crm__marque">Pilotis<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Dossiers <span>/</span> <b>Nouveau</b></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu">Annuler</button>
      <button class="crm-b crm-b--fort">Creer le dossier</button>
    </header>
    <main class="crm__contenu">
      <div style="display:grid;grid-template-columns:1fr 290px;gap:12px;align-items:start">
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Client</h4></div>
            <div class="crm-p__corps crm-form">
              <label><span>Nom ou raison sociale</span><input value="Krissi Julien"></label>
              <div class="crm-form__deux">
                <label><span>Telephone</span><input value="06 12 34 56 78"></label>
                <label><span>Courriel</span><input value="julien@exemple.fr"></label>
              </div>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Chantier</h4></div>
            <div class="crm-p__corps crm-form">
              <label><span>Adresse</span><input value="12 rue des Lilas"></label>
              <div class="crm-form__deux">
                <label><span>Code postal</span><input value="93330"></label>
                <label><span>Commune</span><input value="Neuilly-sur-Marne"></label>
              </div>
              <div class="crm-form__deux">
                <label><span>Surface</span><input value="112 m2"></label>
                <label><span>Annee de construction</span><input value="1978"></label>
              </div>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Operation</h4></div>
            <div class="crm-p__corps crm-form">
              <div class="crm-choix"><span class="c">PAC air/eau</span><span>PAC air/air</span><span>Chauffe-eau</span><span>Isolation</span><span>Chaudiere</span></div>
              <div class="crm-form__deux">
                <label><span>Puissance estimee</span><input value="11 kW"></label>
                <label><span>Pose souhaitee</span><input value="Septembre 2026"></label>
              </div>
            </div>
          </div>
        </div>
        <div class="crm-p">
          <div class="crm-p__tete"><h4>Recapitulatif</h4></div>
          <div class="crm-p__corps">
            <dl class="crm-def" style="font-size:12px">
              <dt>Reference</dt><dd style="font-family:var(--font-mono)">PLT-124</dd>
              <dt>Client</dt><dd>Krissi Julien</dd>
              <dt>Commune</dt><dd>Neuilly-sur-Marne</dd>
              <dt>Operation</dt><dd>PAC air/eau 11 kW</dd>
            </dl>
            <div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--k-trait)">
              <span style="font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--k-caps);color:var(--k-encre-3)">Aides estimees</span>
              <div style="font-family:var(--k-titre);font-size:22px;font-weight:800;margin-top:4px">2 400 EUR</div>
              <p style="margin:4px 0 0;font-size:11px;color:var(--k-encre-3);line-height:1.4">MaPrimeRenov et CEE, sous reserve des revenus du foyer.</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="ardoise"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="ardoise"> &mdash; le balisage est le meme dans toutes les peaux
Semaine 37 — du 7 au 11 septembre
Lun 7
Mar 8
Mer 9
Jeu 10
Ven 11
08:00
Pose PACKrissi — Neuilly
EntretienMartin — Colombes
Pose ballonNguyen — Bondy
10:00
Pose PACsuite
Visite techniqueDurand — Le Raincy
Pose ballonsuite
DepannageBernard — Gagny
14:00
MetreLefevre — Chelles
Depannageurgence — Bondy
Mise en serviceKrissi — Neuilly
16:00
Livraisondepot
Reunion equipebureau
Planning

La semaine des equipes. Chaque intervention porte son heure, son client et sa commune : sans la commune, impossible d'evaluer un trajet. Les couleurs distinguent le type, pas l'equipe.

Voir le codeMasquer le code 
<div class="crm" data-crm="ardoise">
  <aside class="crm__cote">
    <div class="crm__marque">Pilotis<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Equipes</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg> Nord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg> Ouest</a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil"><b>Semaine 37</b> <span>&mdash; du 7 au 11 septembre</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
      <button class="crm-b">Aujourd'hui</button>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Planifier</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-plan">
        <div class="crm-plan__jour"></div>
        <div class="crm-plan__jour">Lun 7</div><div class="crm-plan__jour">Mar 8</div>
        <div class="crm-plan__jour">Mer 9</div><div class="crm-plan__jour">Jeu 10</div><div class="crm-plan__jour">Ven 11</div>

        <div class="crm-plan__h">08:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose PAC</b><small>Krissi &mdash; Neuilly</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Entretien</b><small>Martin &mdash; Colombes</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose ballon</b><small>Nguyen &mdash; Bondy</small></span></div>
        <div class="crm-plan__c"></div>

        <div class="crm-plan__h">10:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose PAC</b><small>suite</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Visite technique</b><small>Durand &mdash; Le Raincy</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose ballon</b><small>suite</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev a"><b>Depannage</b><small>Bernard &mdash; Gagny</small></span></div>

        <div class="crm-plan__h">14:00</div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Metre</b><small>Lefevre &mdash; Chelles</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev a"><b>Depannage</b><small>urgence &mdash; Bondy</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Mise en service</b><small>Krissi &mdash; Neuilly</small></span></div>

        <div class="crm-plan__h">16:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Livraison</b><small>depot</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Reunion equipe</b><small>bureau</small></span></div>
        <div class="crm-plan__c"></div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="ardoise"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="ardoise"> &mdash; le balisage est le meme dans toutes les peaux
Dossiers / PLT-103 / Documents
4 pieces sur 6 RIB et justificatif de domicile manquants
Incomplet
Valide
Devis signe.pdf248 Ko — 12 aout
Valide
Avis d'imposition.pdf96 Ko — 9 aout
Valide
Photo compteur.jpg1,1 Mo — 9 aout
A verifier
Mandat MaPrimeRenov.pdf84 Ko — hier
Documents

Les pieces d'un {{objet}}. L'etat de chaque piece se lit sur la vignette, et la case vide en pointille dit ce qu'il manque encore : c'est elle qui fait avancer le dossier.

Voir le codeMasquer le code 
<div class="crm" data-crm="ardoise">
  <aside class="crm__cote">
    <div class="crm__marque">Pilotis<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <div class="crm__groupe">Suivi</div>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Dossiers <span>/</span> <b>PLT-103</b> <span>/</span> <b>Documents</b></div>
      <div class="crm__espace"></div>
      <button class="crm-b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Tout telecharger</button>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg> Deposer</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-p" style="margin-bottom:12px">
        <div class="crm-p__corps" style="display:flex;align-items:center;gap:14px">
          <div style="flex:1">
            <div style="display:flex;justify-content:space-between;font-size:11.5px;margin-bottom:6px">
              <span style="font-weight:600">4 pieces sur 6</span>
              <span style="color:var(--k-encre-3)">RIB et justificatif de domicile manquants</span>
            </div>
            <div class="crm-jauge"><i style="--p:66%"></i></div>
          </div>
          <span class="crm-e crm-e--attente">Incomplet</span>
        </div>
      </div>
      <div class="crm-docs">
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i><i></i><i></i></div><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Devis signe.pdf</b><small>248 Ko &mdash; 12 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i><i></i></div><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Avis d'imposition.pdf</b><small>96 Ko &mdash; 9 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Photo compteur.jpg</b><small>1,1 Mo &mdash; 9 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i></div><span class="crm-e crm-e--attente">A verifier</span></div>
          <div class="crm-doc__pied"><b>Mandat MaPrimeRenov.pdf</b><small>84 Ko &mdash; hier</small></div>
        </div>
        <label class="crm-doc crm-doc--vide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><b>RIB</b><small>Requis pour le versement</small></label>
        <label class="crm-doc crm-doc--vide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><b>Justificatif de domicile</b><small>Moins de 3 mois</small></label>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="ardoise"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="ardoise"> &mdash; le balisage est le meme dans toutes les peaux

F. Encre

Registre editorial et typographique. Noir et blanc strict plus UN rouge, filets epais, rayon nul, capitales tres espacees, grandes graisses. Assume d'etre un objet graphique.

Dossiers / Tous
Rechercher
ReferenceClientCommuneOperationEtatMontantPose
N°103Krissi JulienNeuilly-sur-MarnePAC air/eau 11 kWSigne4 280,0024 sept.
N°118Martin SophieColombesChauffe-eau 200 LEnvoye1 890,00—
N°121Durand PaulLe RaincyIsolation comblesBrouillon12 400,00—
N°097Bernard AliceGagnyPAC air/air 3 splitsSans reponse6 750,00—
N°092Lefevre MarcChellesChaudiere gaz THPESigne3 950,002 oct.
N°088Nguyen ThiBondyBallon thermodynamiqueEnvoye2 340,00—
1 a 6 sur 24 — 31 610,00 EUR au total
Liste

L'ecran d'entree : filtres rapides en haut, tableau dense, pied qui rappelle le compte et le total. Les references sont en chiffres tabulaires pour que les montants se comparent d'un coup d'oeil.

Voir le codeMasquer le code 
<div class="crm" data-crm="encre">
  <aside class="crm__cote">
    <div class="crm__marque">REGISTRE<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__groupe">Reglages</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg> Parametres</a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Dossiers <span>/</span> <b>Tous</b></div>
      <div class="crm__espace"></div>
      <div class="crm-recherche"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg> Rechercher</div>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Nouveau dossier</button>
    </header>
    <main class="crm__contenu">
      <div class="crm__outils">
        <button class="crm-b">Tous <b>24</b></button>
        <button class="crm-b">En cours <b>12</b></button>
        <button class="crm-b">A relancer <b>5</b></button>
        <div class="crm__espace"></div>
        <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4h18l-7 8v6l-4 2v-8Z"/></svg> Filtres</button>
        <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Exporter</button>
      </div>
      <div class="crm-cadre">
        <table class="crm-t">
          <thead><tr><th>Reference</th><th>Client</th><th>Commune</th><th>Operation</th><th>Etat</th><th style="text-align:right">Montant</th><th>Pose</th></tr></thead>
          <tbody>
            <tr><td class="crm-t__ref">N&deg;103</td><td class="crm-t__nom">Krissi Julien</td><td>Neuilly-sur-Marne</td><td>PAC air/eau 11 kW</td><td><span class="crm-e crm-e--ok">Signe</span></td><td class="crm-t__num">4 280,00</td><td>24 sept.</td></tr>
            <tr><td class="crm-t__ref">N&deg;118</td><td class="crm-t__nom">Martin Sophie</td><td>Colombes</td><td>Chauffe-eau 200 L</td><td><span class="crm-e crm-e--attente">Envoye</span></td><td class="crm-t__num">1 890,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">N&deg;121</td><td class="crm-t__nom">Durand Paul</td><td>Le Raincy</td><td>Isolation combles</td><td><span class="crm-e crm-e--neutre">Brouillon</span></td><td class="crm-t__num">12 400,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">N&deg;097</td><td class="crm-t__nom">Bernard Alice</td><td>Gagny</td><td>PAC air/air 3 splits</td><td><span class="crm-e crm-e--ko">Sans reponse</span></td><td class="crm-t__num">6 750,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">N&deg;092</td><td class="crm-t__nom">Lefevre Marc</td><td>Chelles</td><td>Chaudiere gaz THPE</td><td><span class="crm-e crm-e--ok">Signe</span></td><td class="crm-t__num">3 950,00</td><td>2 oct.</td></tr>
            <tr><td class="crm-t__ref">N&deg;088</td><td class="crm-t__nom">Nguyen Thi</td><td>Bondy</td><td>Ballon thermodynamique</td><td><span class="crm-e crm-e--attente">Envoye</span></td><td class="crm-t__num">2 340,00</td><td>&mdash;</td></tr>
          </tbody>
        </table>
        <div class="crm-pied"><span>1 a 6 sur 24 &mdash; 31 610,00 EUR au total</span><nav><span>&lsaquo;</span><span class="c">1</span><span>2</span><span>3</span><span>&rsaquo;</span></nav></div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="encre"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="encre"> &mdash; le balisage est le meme dans toutes les peaux
Dossiers / N°103 Signe
ContactVisiteDevisSignaturePoseFacture

Client et chantier

Client
Krissi Julien
Telephone
06 12 34 56 78
Chantier
12 rue des Lilas, 93330 Neuilly-sur-Marne
Logement
Maison individuelle, 112 m2, 1978
Existant
Chaudiere fioul de 1998, 2 400 L par an

Operations

3 lignes
Pompe a chaleur air/eau 11 kWPAC-11-M3 200,00
Depose et evacuation cuve fioulDEP-CUV560,00
Main d'oeuvre, 2 journeesMO-J800,00
Reste a charge
1 880,00 EUR
Total TTC
4 280,00
MaPrimeRenov
2 000,00
CEE
400,00

Pieces

4 / 6

  • Devis signe

    12 aout

  • Avis d'imposition

    9 aout

  • RIB a fournir

    Requis pour le versement

Activite

  • Devis signe par le client

    12 aout a 14:32

  • Devis envoye par courriel

    9 aout a 17:05
Fiche

L'ecran le plus consulte. Le parcours reste visible en haut, les informations a gauche, l'argent et les pieces a droite. Ce qui bloque le dossier doit se voir sans defiler.

Voir le codeMasquer le code 
<div class="crm" data-crm="encre">
  <aside class="crm__cote">
    <div class="crm__marque">REGISTRE<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Dossiers <span>/</span> <b>N&deg;103</b> <span class="crm-e crm-e--ok">Signe</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Dupliquer</button>
      <button class="crm-b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> PDF</button>
      <button class="crm-b crm-b--fort">Planifier la pose</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-etapes">
        <span class="f">Contact</span><span class="f">Visite</span><span class="f">Devis</span><span class="c">Signature</span><span>Pose</span><span>Facture</span>
      </div>
      <div class="crm-fiche" style="margin-top:12px">
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Client et chantier</h4><button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg> Modifier</button></div>
            <div class="crm-p__corps"><dl class="crm-def">
              <dt>Client</dt><dd>Krissi Julien</dd>
              <dt>Telephone</dt><dd>06 12 34 56 78</dd>
              <dt>Chantier</dt><dd>12 rue des Lilas, 93330 Neuilly-sur-Marne</dd>
              <dt>Logement</dt><dd>Maison individuelle, 112 m2, 1978</dd>
              <dt>Existant</dt><dd>Chaudiere fioul de 1998, 2 400 L par an</dd>
            </dl></div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Operations</h4><span style="font-size:11px;color:var(--k-encre-3)">3 lignes</span></div>
            <table class="crm-t">
              <tbody>
                <tr><td class="crm-t__nom">Pompe a chaleur air/eau 11 kW</td><td class="crm-t__ref">PAC-11-M</td><td class="crm-t__num">3 200,00</td></tr>
                <tr><td class="crm-t__nom">Depose et evacuation cuve fioul</td><td class="crm-t__ref">DEP-CUV</td><td class="crm-t__num">560,00</td></tr>
                <tr><td class="crm-t__nom">Main d'oeuvre, 2 journees</td><td class="crm-t__ref">MO-J</td><td class="crm-t__num">800,00</td></tr>
              </tbody>
            </table>
          </div>
        </div>
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p"><div class="crm-p__corps">
            <span style="font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--k-caps);color:var(--k-encre-3)">Reste a charge</span>
            <div style="font-family:var(--k-titre);font-size:27px;font-weight:800;letter-spacing:-.02em;margin:4px 0 10px">1 880,00 EUR</div>
            <dl class="crm-def" style="font-size:12px">
              <dt>Total TTC</dt><dd>4 280,00</dd>
              <dt>MaPrimeRenov</dt><dd>2 000,00</dd>
              <dt>CEE</dt><dd>400,00</dd>
            </dl>
          </div></div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Pieces</h4><span style="font-size:11px;color:var(--k-encre-3)">4 / 6</span></div>
            <div class="crm-p__corps">
              <div class="crm-jauge"><i style="--p:66%"></i></div>
              <ul class="crm-fil-actu" style="margin-top:10px">
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg></i><div><p>Devis signe</p><small>12 aout</small></div></li>
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg></i><div><p>Avis d'imposition</p><small>9 aout</small></div></li>
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></i><div><p><b>RIB</b> a fournir</p><small>Requis pour le versement</small></div></li>
              </ul>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Activite</h4></div>
            <div class="crm-p__corps"><ul class="crm-fil-actu">
              <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg></i><div><p><b>Devis signe</b> par le client</p><small>12 aout a 14:32</small></div></li>
              <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg></i><div><p>Devis envoye par courriel</p><small>9 aout a 17:05</small></div></li>
            </ul></div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="encre"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="encre"> &mdash; le balisage est le meme dans toutes les peaux
Septembre 2026 — a jour a 09:14
Chiffre d'affaires48 250+12,4 % vs aout
En attente17-3 sur 7 jours
Taux de signature62 %stable sur 3 mois
Delai moyen4,2 j-0,6 j vs aout

Chiffre d'affaires mensuel

en milliers d'euros
avr
mai
juin
juil
aout
sept

A traiter aujourd'hui

5

  • N°097 sans reponse

    Envoye il y a 14 jours

  • Facture N°118 a emettre

    Chantier termine le 2 septembre

  • N°121 incomplet

    RIB et justificatif manquants

  • Visite chez Bernard Alice

    Demain 10:00 — Gagny
Tableau de bord

L'ecran d'accueil. Il ne montre pas tout ce qui existe, seulement ce qui appelle une decision aujourd'hui : les chiffres du mois, la tendance, et la liste de ce qui attend une action.

Voir le codeMasquer le code 
<div class="crm" data-crm="encre">
  <aside class="crm__cote">
    <div class="crm__marque">REGISTRE<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg> Alertes <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil"><b>Septembre 2026</b> <span>&mdash; a jour a 09:14</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b">30 jours</button>
      <button class="crm-b crm-b--nu">Trimestre</button>
      <button class="crm-b crm-b--fort">Exporter</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-kpis">
        <div class="crm-kpi"><span>Chiffre d'affaires</span><strong>48 250</strong><em><b class="h">+12,4 %</b> vs aout</em></div>
        <div class="crm-kpi"><span>En attente</span><strong>17</strong><em><b class="b">-3</b> sur 7 jours</em></div>
        <div class="crm-kpi"><span>Taux de signature</span><strong>62 %</strong><em>stable sur 3 mois</em></div>
        <div class="crm-kpi"><span>Delai moyen</span><strong>4,2 j</strong><em><b class="h">-0,6 j</b> vs aout</em></div>
      </div>
      <div style="display:grid;grid-template-columns:1fr 320px;gap:10px">
        <div class="crm-p">
          <div class="crm-p__tete"><h4>Chiffre d'affaires mensuel</h4><span style="font-size:11px;color:var(--k-encre-3)">en milliers d'euros</span></div>
          <div class="crm-p__corps"><div class="crm-barres">
            <div><i style="--h:42%"></i><small>avr</small></div><div><i style="--h:58%"></i><small>mai</small></div>
            <div><i style="--h:51%"></i><small>juin</small></div><div><i style="--h:74%"></i><small>juil</small></div>
            <div><i style="--h:63%"></i><small>aout</small></div><div class="c"><i style="--h:88%"></i><small>sept</small></div>
          </div></div>
        </div>
        <div class="crm-p">
          <div class="crm-p__tete"><h4>A traiter aujourd'hui</h4><span class="crm-e crm-e--attente">5</span></div>
          <div class="crm-p__corps"><ul class="crm-fil-actu">
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg></i><div><p><b>N&deg;097</b> sans reponse</p><small>Envoye il y a 14 jours</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg></i><div><p>Facture <b>N&deg;118</b> a emettre</p><small>Chantier termine le 2 septembre</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg></i><div><p><b>N&deg;121</b> incomplet</p><small>RIB et justificatif manquants</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></i><div><p>Visite chez <b>Bernard Alice</b></p><small>Demain 10:00 &mdash; Gagny</small></div></li>
          </ul></div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="encre"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="encre"> &mdash; le balisage est le meme dans toutes les peaux
Dossiers / Nouveau

Client

Chantier

Operation

PAC air/eauPAC air/airChauffe-eauIsolationChaudiere

Recapitulatif

Reference
N°124
Client
Krissi Julien
Commune
Neuilly-sur-Marne
Operation
PAC air/eau 11 kW
Aides estimees
2 400 EUR

MaPrimeRenov et CEE, sous reserve des revenus du foyer.

Saisie

Creation d'un {{objet}}. Les champs sont groupes par sujet, la colonne de droite recapitule au fur et a mesure, et la reference est attribuee avant l'enregistrement pour qu'on puisse en parler au telephone.

Voir le codeMasquer le code 
<div class="crm" data-crm="encre">
  <aside class="crm__cote">
    <div class="crm__marque">REGISTRE<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Dossiers <span>/</span> <b>Nouveau</b></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu">Annuler</button>
      <button class="crm-b crm-b--fort">Creer le dossier</button>
    </header>
    <main class="crm__contenu">
      <div style="display:grid;grid-template-columns:1fr 290px;gap:12px;align-items:start">
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Client</h4></div>
            <div class="crm-p__corps crm-form">
              <label><span>Nom ou raison sociale</span><input value="Krissi Julien"></label>
              <div class="crm-form__deux">
                <label><span>Telephone</span><input value="06 12 34 56 78"></label>
                <label><span>Courriel</span><input value="julien@exemple.fr"></label>
              </div>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Chantier</h4></div>
            <div class="crm-p__corps crm-form">
              <label><span>Adresse</span><input value="12 rue des Lilas"></label>
              <div class="crm-form__deux">
                <label><span>Code postal</span><input value="93330"></label>
                <label><span>Commune</span><input value="Neuilly-sur-Marne"></label>
              </div>
              <div class="crm-form__deux">
                <label><span>Surface</span><input value="112 m2"></label>
                <label><span>Annee de construction</span><input value="1978"></label>
              </div>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Operation</h4></div>
            <div class="crm-p__corps crm-form">
              <div class="crm-choix"><span class="c">PAC air/eau</span><span>PAC air/air</span><span>Chauffe-eau</span><span>Isolation</span><span>Chaudiere</span></div>
              <div class="crm-form__deux">
                <label><span>Puissance estimee</span><input value="11 kW"></label>
                <label><span>Pose souhaitee</span><input value="Septembre 2026"></label>
              </div>
            </div>
          </div>
        </div>
        <div class="crm-p">
          <div class="crm-p__tete"><h4>Recapitulatif</h4></div>
          <div class="crm-p__corps">
            <dl class="crm-def" style="font-size:12px">
              <dt>Reference</dt><dd style="font-family:var(--font-mono)">N&deg;124</dd>
              <dt>Client</dt><dd>Krissi Julien</dd>
              <dt>Commune</dt><dd>Neuilly-sur-Marne</dd>
              <dt>Operation</dt><dd>PAC air/eau 11 kW</dd>
            </dl>
            <div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--k-trait)">
              <span style="font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--k-caps);color:var(--k-encre-3)">Aides estimees</span>
              <div style="font-family:var(--k-titre);font-size:22px;font-weight:800;margin-top:4px">2 400 EUR</div>
              <p style="margin:4px 0 0;font-size:11px;color:var(--k-encre-3);line-height:1.4">MaPrimeRenov et CEE, sous reserve des revenus du foyer.</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="encre"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="encre"> &mdash; le balisage est le meme dans toutes les peaux
Semaine 37 — du 7 au 11 septembre
Lun 7
Mar 8
Mer 9
Jeu 10
Ven 11
08:00
Pose PACKrissi — Neuilly
EntretienMartin — Colombes
Pose ballonNguyen — Bondy
10:00
Pose PACsuite
Visite techniqueDurand — Le Raincy
Pose ballonsuite
DepannageBernard — Gagny
14:00
MetreLefevre — Chelles
Depannageurgence — Bondy
Mise en serviceKrissi — Neuilly
16:00
Livraisondepot
Reunion equipebureau
Planning

La semaine des equipes. Chaque intervention porte son heure, son client et sa commune : sans la commune, impossible d'evaluer un trajet. Les couleurs distinguent le type, pas l'equipe.

Voir le codeMasquer le code 
<div class="crm" data-crm="encre">
  <aside class="crm__cote">
    <div class="crm__marque">REGISTRE<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Equipes</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg> Nord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg> Ouest</a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil"><b>Semaine 37</b> <span>&mdash; du 7 au 11 septembre</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
      <button class="crm-b">Aujourd'hui</button>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Planifier</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-plan">
        <div class="crm-plan__jour"></div>
        <div class="crm-plan__jour">Lun 7</div><div class="crm-plan__jour">Mar 8</div>
        <div class="crm-plan__jour">Mer 9</div><div class="crm-plan__jour">Jeu 10</div><div class="crm-plan__jour">Ven 11</div>

        <div class="crm-plan__h">08:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose PAC</b><small>Krissi &mdash; Neuilly</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Entretien</b><small>Martin &mdash; Colombes</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose ballon</b><small>Nguyen &mdash; Bondy</small></span></div>
        <div class="crm-plan__c"></div>

        <div class="crm-plan__h">10:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose PAC</b><small>suite</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Visite technique</b><small>Durand &mdash; Le Raincy</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose ballon</b><small>suite</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev a"><b>Depannage</b><small>Bernard &mdash; Gagny</small></span></div>

        <div class="crm-plan__h">14:00</div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Metre</b><small>Lefevre &mdash; Chelles</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev a"><b>Depannage</b><small>urgence &mdash; Bondy</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Mise en service</b><small>Krissi &mdash; Neuilly</small></span></div>

        <div class="crm-plan__h">16:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Livraison</b><small>depot</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Reunion equipe</b><small>bureau</small></span></div>
        <div class="crm-plan__c"></div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="encre"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="encre"> &mdash; le balisage est le meme dans toutes les peaux
Dossiers / N°103 / Documents
4 pieces sur 6 RIB et justificatif de domicile manquants
Incomplet
Valide
Devis signe.pdf248 Ko — 12 aout
Valide
Avis d'imposition.pdf96 Ko — 9 aout
Valide
Photo compteur.jpg1,1 Mo — 9 aout
A verifier
Mandat MaPrimeRenov.pdf84 Ko — hier
Documents

Les pieces d'un {{objet}}. L'etat de chaque piece se lit sur la vignette, et la case vide en pointille dit ce qu'il manque encore : c'est elle qui fait avancer le dossier.

Voir le codeMasquer le code 
<div class="crm" data-crm="encre">
  <aside class="crm__cote">
    <div class="crm__marque">REGISTRE<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Dossiers <b>24</b></a>
    <div class="crm__groupe">Suivi</div>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Dossiers <span>/</span> <b>N&deg;103</b> <span>/</span> <b>Documents</b></div>
      <div class="crm__espace"></div>
      <button class="crm-b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Tout telecharger</button>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg> Deposer</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-p" style="margin-bottom:12px">
        <div class="crm-p__corps" style="display:flex;align-items:center;gap:14px">
          <div style="flex:1">
            <div style="display:flex;justify-content:space-between;font-size:11.5px;margin-bottom:6px">
              <span style="font-weight:600">4 pieces sur 6</span>
              <span style="color:var(--k-encre-3)">RIB et justificatif de domicile manquants</span>
            </div>
            <div class="crm-jauge"><i style="--p:66%"></i></div>
          </div>
          <span class="crm-e crm-e--attente">Incomplet</span>
        </div>
      </div>
      <div class="crm-docs">
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i><i></i><i></i></div><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Devis signe.pdf</b><small>248 Ko &mdash; 12 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i><i></i></div><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Avis d'imposition.pdf</b><small>96 Ko &mdash; 9 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Photo compteur.jpg</b><small>1,1 Mo &mdash; 9 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i></div><span class="crm-e crm-e--attente">A verifier</span></div>
          <div class="crm-doc__pied"><b>Mandat MaPrimeRenov.pdf</b><small>84 Ko &mdash; hier</small></div>
        </div>
        <label class="crm-doc crm-doc--vide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><b>RIB</b><small>Requis pour le versement</small></label>
        <label class="crm-doc crm-doc--vide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><b>Justificatif de domicile</b><small>Moins de 3 mois</small></label>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="encre"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="encre"> &mdash; le balisage est le meme dans toutes les peaux

G. Menthe

Services a la personne, sante, associations. Blanc pur, sarcelle, aucune bordure : tout repose sur l'ombre et l'espace. Rayon de 14 px, lignes de 48 px. Registre accueillant plutot que technique.

Suivis / Tous
Rechercher
ReferenceClientCommuneOperationEtatMontantPose
AL-103Krissi JulienNeuilly-sur-MarnePAC air/eau 11 kWSigne4 280,0024 sept.
AL-118Martin SophieColombesChauffe-eau 200 LEnvoye1 890,00—
AL-121Durand PaulLe RaincyIsolation comblesBrouillon12 400,00—
AL-097Bernard AliceGagnyPAC air/air 3 splitsSans reponse6 750,00—
AL-092Lefevre MarcChellesChaudiere gaz THPESigne3 950,002 oct.
AL-088Nguyen ThiBondyBallon thermodynamiqueEnvoye2 340,00—
1 a 6 sur 24 — 31 610,00 EUR au total
Liste

L'ecran d'entree : filtres rapides en haut, tableau dense, pied qui rappelle le compte et le total. Les references sont en chiffres tabulaires pour que les montants se comparent d'un coup d'oeil.

Voir le codeMasquer le code 
<div class="crm" data-crm="menthe">
  <aside class="crm__cote">
    <div class="crm__marque">Alizee<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Suivis <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__groupe">Reglages</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg> Parametres</a>
    <div class="crm__pied"><div class="crm__moi"><span>SM</span>Sophie Martin</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Suivis <span>/</span> <b>Tous</b></div>
      <div class="crm__espace"></div>
      <div class="crm-recherche"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg> Rechercher</div>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Nouveau accompagnement</button>
    </header>
    <main class="crm__contenu">
      <div class="crm__outils">
        <button class="crm-b">Tous <b>24</b></button>
        <button class="crm-b">En cours <b>12</b></button>
        <button class="crm-b">A relancer <b>5</b></button>
        <div class="crm__espace"></div>
        <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4h18l-7 8v6l-4 2v-8Z"/></svg> Filtres</button>
        <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Exporter</button>
      </div>
      <div class="crm-cadre">
        <table class="crm-t">
          <thead><tr><th>Reference</th><th>Client</th><th>Commune</th><th>Operation</th><th>Etat</th><th style="text-align:right">Montant</th><th>Pose</th></tr></thead>
          <tbody>
            <tr><td class="crm-t__ref">AL-103</td><td class="crm-t__nom">Krissi Julien</td><td>Neuilly-sur-Marne</td><td>PAC air/eau 11 kW</td><td><span class="crm-e crm-e--ok">Signe</span></td><td class="crm-t__num">4 280,00</td><td>24 sept.</td></tr>
            <tr><td class="crm-t__ref">AL-118</td><td class="crm-t__nom">Martin Sophie</td><td>Colombes</td><td>Chauffe-eau 200 L</td><td><span class="crm-e crm-e--attente">Envoye</span></td><td class="crm-t__num">1 890,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">AL-121</td><td class="crm-t__nom">Durand Paul</td><td>Le Raincy</td><td>Isolation combles</td><td><span class="crm-e crm-e--neutre">Brouillon</span></td><td class="crm-t__num">12 400,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">AL-097</td><td class="crm-t__nom">Bernard Alice</td><td>Gagny</td><td>PAC air/air 3 splits</td><td><span class="crm-e crm-e--ko">Sans reponse</span></td><td class="crm-t__num">6 750,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">AL-092</td><td class="crm-t__nom">Lefevre Marc</td><td>Chelles</td><td>Chaudiere gaz THPE</td><td><span class="crm-e crm-e--ok">Signe</span></td><td class="crm-t__num">3 950,00</td><td>2 oct.</td></tr>
            <tr><td class="crm-t__ref">AL-088</td><td class="crm-t__nom">Nguyen Thi</td><td>Bondy</td><td>Ballon thermodynamique</td><td><span class="crm-e crm-e--attente">Envoye</span></td><td class="crm-t__num">2 340,00</td><td>&mdash;</td></tr>
          </tbody>
        </table>
        <div class="crm-pied"><span>1 a 6 sur 24 &mdash; 31 610,00 EUR au total</span><nav><span>&lsaquo;</span><span class="c">1</span><span>2</span><span>3</span><span>&rsaquo;</span></nav></div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="menthe"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="menthe"> &mdash; le balisage est le meme dans toutes les peaux
Suivis / AL-103 Signe
ContactVisiteDevisSignaturePoseFacture

Client et chantier

Client
Krissi Julien
Telephone
06 12 34 56 78
Chantier
12 rue des Lilas, 93330 Neuilly-sur-Marne
Logement
Maison individuelle, 112 m2, 1978
Existant
Chaudiere fioul de 1998, 2 400 L par an

Operations

3 lignes
Pompe a chaleur air/eau 11 kWPAC-11-M3 200,00
Depose et evacuation cuve fioulDEP-CUV560,00
Main d'oeuvre, 2 journeesMO-J800,00
Reste a charge
1 880,00 EUR
Total TTC
4 280,00
MaPrimeRenov
2 000,00
CEE
400,00

Pieces

4 / 6

  • Devis signe

    12 aout

  • Avis d'imposition

    9 aout

  • RIB a fournir

    Requis pour le versement

Activite

  • Devis signe par le client

    12 aout a 14:32

  • Devis envoye par courriel

    9 aout a 17:05
Fiche

L'ecran le plus consulte. Le parcours reste visible en haut, les informations a gauche, l'argent et les pieces a droite. Ce qui bloque le dossier doit se voir sans defiler.

Voir le codeMasquer le code 
<div class="crm" data-crm="menthe">
  <aside class="crm__cote">
    <div class="crm__marque">Alizee<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Suivis <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>SM</span>Sophie Martin</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Suivis <span>/</span> <b>AL-103</b> <span class="crm-e crm-e--ok">Signe</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Dupliquer</button>
      <button class="crm-b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> PDF</button>
      <button class="crm-b crm-b--fort">Planifier la pose</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-etapes">
        <span class="f">Contact</span><span class="f">Visite</span><span class="f">Devis</span><span class="c">Signature</span><span>Pose</span><span>Facture</span>
      </div>
      <div class="crm-fiche" style="margin-top:12px">
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Client et chantier</h4><button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg> Modifier</button></div>
            <div class="crm-p__corps"><dl class="crm-def">
              <dt>Client</dt><dd>Krissi Julien</dd>
              <dt>Telephone</dt><dd>06 12 34 56 78</dd>
              <dt>Chantier</dt><dd>12 rue des Lilas, 93330 Neuilly-sur-Marne</dd>
              <dt>Logement</dt><dd>Maison individuelle, 112 m2, 1978</dd>
              <dt>Existant</dt><dd>Chaudiere fioul de 1998, 2 400 L par an</dd>
            </dl></div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Operations</h4><span style="font-size:11px;color:var(--k-encre-3)">3 lignes</span></div>
            <table class="crm-t">
              <tbody>
                <tr><td class="crm-t__nom">Pompe a chaleur air/eau 11 kW</td><td class="crm-t__ref">PAC-11-M</td><td class="crm-t__num">3 200,00</td></tr>
                <tr><td class="crm-t__nom">Depose et evacuation cuve fioul</td><td class="crm-t__ref">DEP-CUV</td><td class="crm-t__num">560,00</td></tr>
                <tr><td class="crm-t__nom">Main d'oeuvre, 2 journees</td><td class="crm-t__ref">MO-J</td><td class="crm-t__num">800,00</td></tr>
              </tbody>
            </table>
          </div>
        </div>
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p"><div class="crm-p__corps">
            <span style="font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--k-caps);color:var(--k-encre-3)">Reste a charge</span>
            <div style="font-family:var(--k-titre);font-size:27px;font-weight:800;letter-spacing:-.02em;margin:4px 0 10px">1 880,00 EUR</div>
            <dl class="crm-def" style="font-size:12px">
              <dt>Total TTC</dt><dd>4 280,00</dd>
              <dt>MaPrimeRenov</dt><dd>2 000,00</dd>
              <dt>CEE</dt><dd>400,00</dd>
            </dl>
          </div></div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Pieces</h4><span style="font-size:11px;color:var(--k-encre-3)">4 / 6</span></div>
            <div class="crm-p__corps">
              <div class="crm-jauge"><i style="--p:66%"></i></div>
              <ul class="crm-fil-actu" style="margin-top:10px">
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg></i><div><p>Devis signe</p><small>12 aout</small></div></li>
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg></i><div><p>Avis d'imposition</p><small>9 aout</small></div></li>
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></i><div><p><b>RIB</b> a fournir</p><small>Requis pour le versement</small></div></li>
              </ul>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Activite</h4></div>
            <div class="crm-p__corps"><ul class="crm-fil-actu">
              <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg></i><div><p><b>Devis signe</b> par le client</p><small>12 aout a 14:32</small></div></li>
              <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg></i><div><p>Devis envoye par courriel</p><small>9 aout a 17:05</small></div></li>
            </ul></div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="menthe"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="menthe"> &mdash; le balisage est le meme dans toutes les peaux
Septembre 2026 — a jour a 09:14
Chiffre d'affaires48 250+12,4 % vs aout
En attente17-3 sur 7 jours
Taux de signature62 %stable sur 3 mois
Delai moyen4,2 j-0,6 j vs aout

Chiffre d'affaires mensuel

en milliers d'euros
avr
mai
juin
juil
aout
sept

A traiter aujourd'hui

5

  • AL-097 sans reponse

    Envoye il y a 14 jours

  • Facture AL-118 a emettre

    Chantier termine le 2 septembre

  • AL-121 incomplet

    RIB et justificatif manquants

  • Visite chez Bernard Alice

    Demain 10:00 — Gagny
Tableau de bord

L'ecran d'accueil. Il ne montre pas tout ce qui existe, seulement ce qui appelle une decision aujourd'hui : les chiffres du mois, la tendance, et la liste de ce qui attend une action.

Voir le codeMasquer le code 
<div class="crm" data-crm="menthe">
  <aside class="crm__cote">
    <div class="crm__marque">Alizee<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Suivis <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg> Alertes <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>SM</span>Sophie Martin</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil"><b>Septembre 2026</b> <span>&mdash; a jour a 09:14</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b">30 jours</button>
      <button class="crm-b crm-b--nu">Trimestre</button>
      <button class="crm-b crm-b--fort">Exporter</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-kpis">
        <div class="crm-kpi"><span>Chiffre d'affaires</span><strong>48 250</strong><em><b class="h">+12,4 %</b> vs aout</em></div>
        <div class="crm-kpi"><span>En attente</span><strong>17</strong><em><b class="b">-3</b> sur 7 jours</em></div>
        <div class="crm-kpi"><span>Taux de signature</span><strong>62 %</strong><em>stable sur 3 mois</em></div>
        <div class="crm-kpi"><span>Delai moyen</span><strong>4,2 j</strong><em><b class="h">-0,6 j</b> vs aout</em></div>
      </div>
      <div style="display:grid;grid-template-columns:1fr 320px;gap:10px">
        <div class="crm-p">
          <div class="crm-p__tete"><h4>Chiffre d'affaires mensuel</h4><span style="font-size:11px;color:var(--k-encre-3)">en milliers d'euros</span></div>
          <div class="crm-p__corps"><div class="crm-barres">
            <div><i style="--h:42%"></i><small>avr</small></div><div><i style="--h:58%"></i><small>mai</small></div>
            <div><i style="--h:51%"></i><small>juin</small></div><div><i style="--h:74%"></i><small>juil</small></div>
            <div><i style="--h:63%"></i><small>aout</small></div><div class="c"><i style="--h:88%"></i><small>sept</small></div>
          </div></div>
        </div>
        <div class="crm-p">
          <div class="crm-p__tete"><h4>A traiter aujourd'hui</h4><span class="crm-e crm-e--attente">5</span></div>
          <div class="crm-p__corps"><ul class="crm-fil-actu">
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg></i><div><p><b>AL-097</b> sans reponse</p><small>Envoye il y a 14 jours</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg></i><div><p>Facture <b>AL-118</b> a emettre</p><small>Chantier termine le 2 septembre</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg></i><div><p><b>AL-121</b> incomplet</p><small>RIB et justificatif manquants</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></i><div><p>Visite chez <b>Bernard Alice</b></p><small>Demain 10:00 &mdash; Gagny</small></div></li>
          </ul></div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="menthe"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="menthe"> &mdash; le balisage est le meme dans toutes les peaux
Suivis / Nouveau

Client

Chantier

Operation

PAC air/eauPAC air/airChauffe-eauIsolationChaudiere

Recapitulatif

Reference
AL-124
Client
Krissi Julien
Commune
Neuilly-sur-Marne
Operation
PAC air/eau 11 kW
Aides estimees
2 400 EUR

MaPrimeRenov et CEE, sous reserve des revenus du foyer.

Saisie

Creation d'un {{objet}}. Les champs sont groupes par sujet, la colonne de droite recapitule au fur et a mesure, et la reference est attribuee avant l'enregistrement pour qu'on puisse en parler au telephone.

Voir le codeMasquer le code 
<div class="crm" data-crm="menthe">
  <aside class="crm__cote">
    <div class="crm__marque">Alizee<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Suivis <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__pied"><div class="crm__moi"><span>SM</span>Sophie Martin</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Suivis <span>/</span> <b>Nouveau</b></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu">Annuler</button>
      <button class="crm-b crm-b--fort">Creer le accompagnement</button>
    </header>
    <main class="crm__contenu">
      <div style="display:grid;grid-template-columns:1fr 290px;gap:12px;align-items:start">
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Client</h4></div>
            <div class="crm-p__corps crm-form">
              <label><span>Nom ou raison sociale</span><input value="Krissi Julien"></label>
              <div class="crm-form__deux">
                <label><span>Telephone</span><input value="06 12 34 56 78"></label>
                <label><span>Courriel</span><input value="julien@exemple.fr"></label>
              </div>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Chantier</h4></div>
            <div class="crm-p__corps crm-form">
              <label><span>Adresse</span><input value="12 rue des Lilas"></label>
              <div class="crm-form__deux">
                <label><span>Code postal</span><input value="93330"></label>
                <label><span>Commune</span><input value="Neuilly-sur-Marne"></label>
              </div>
              <div class="crm-form__deux">
                <label><span>Surface</span><input value="112 m2"></label>
                <label><span>Annee de construction</span><input value="1978"></label>
              </div>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Operation</h4></div>
            <div class="crm-p__corps crm-form">
              <div class="crm-choix"><span class="c">PAC air/eau</span><span>PAC air/air</span><span>Chauffe-eau</span><span>Isolation</span><span>Chaudiere</span></div>
              <div class="crm-form__deux">
                <label><span>Puissance estimee</span><input value="11 kW"></label>
                <label><span>Pose souhaitee</span><input value="Septembre 2026"></label>
              </div>
            </div>
          </div>
        </div>
        <div class="crm-p">
          <div class="crm-p__tete"><h4>Recapitulatif</h4></div>
          <div class="crm-p__corps">
            <dl class="crm-def" style="font-size:12px">
              <dt>Reference</dt><dd style="font-family:var(--font-mono)">AL-124</dd>
              <dt>Client</dt><dd>Krissi Julien</dd>
              <dt>Commune</dt><dd>Neuilly-sur-Marne</dd>
              <dt>Operation</dt><dd>PAC air/eau 11 kW</dd>
            </dl>
            <div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--k-trait)">
              <span style="font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--k-caps);color:var(--k-encre-3)">Aides estimees</span>
              <div style="font-family:var(--k-titre);font-size:22px;font-weight:800;margin-top:4px">2 400 EUR</div>
              <p style="margin:4px 0 0;font-size:11px;color:var(--k-encre-3);line-height:1.4">MaPrimeRenov et CEE, sous reserve des revenus du foyer.</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="menthe"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="menthe"> &mdash; le balisage est le meme dans toutes les peaux
Semaine 37 — du 7 au 11 septembre
Lun 7
Mar 8
Mer 9
Jeu 10
Ven 11
08:00
Pose PACKrissi — Neuilly
EntretienMartin — Colombes
Pose ballonNguyen — Bondy
10:00
Pose PACsuite
Visite techniqueDurand — Le Raincy
Pose ballonsuite
DepannageBernard — Gagny
14:00
MetreLefevre — Chelles
Depannageurgence — Bondy
Mise en serviceKrissi — Neuilly
16:00
Livraisondepot
Reunion equipebureau
Planning

La semaine des equipes. Chaque intervention porte son heure, son client et sa commune : sans la commune, impossible d'evaluer un trajet. Les couleurs distinguent le type, pas l'equipe.

Voir le codeMasquer le code 
<div class="crm" data-crm="menthe">
  <aside class="crm__cote">
    <div class="crm__marque">Alizee<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Suivis <b>24</b></a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Equipes</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg> Nord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg> Ouest</a>
    <div class="crm__pied"><div class="crm__moi"><span>SM</span>Sophie Martin</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil"><b>Semaine 37</b> <span>&mdash; du 7 au 11 septembre</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
      <button class="crm-b">Aujourd'hui</button>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Planifier</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-plan">
        <div class="crm-plan__jour"></div>
        <div class="crm-plan__jour">Lun 7</div><div class="crm-plan__jour">Mar 8</div>
        <div class="crm-plan__jour">Mer 9</div><div class="crm-plan__jour">Jeu 10</div><div class="crm-plan__jour">Ven 11</div>

        <div class="crm-plan__h">08:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose PAC</b><small>Krissi &mdash; Neuilly</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Entretien</b><small>Martin &mdash; Colombes</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose ballon</b><small>Nguyen &mdash; Bondy</small></span></div>
        <div class="crm-plan__c"></div>

        <div class="crm-plan__h">10:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose PAC</b><small>suite</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Visite technique</b><small>Durand &mdash; Le Raincy</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose ballon</b><small>suite</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev a"><b>Depannage</b><small>Bernard &mdash; Gagny</small></span></div>

        <div class="crm-plan__h">14:00</div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Metre</b><small>Lefevre &mdash; Chelles</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev a"><b>Depannage</b><small>urgence &mdash; Bondy</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Mise en service</b><small>Krissi &mdash; Neuilly</small></span></div>

        <div class="crm-plan__h">16:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Livraison</b><small>depot</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Reunion equipe</b><small>bureau</small></span></div>
        <div class="crm-plan__c"></div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="menthe"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="menthe"> &mdash; le balisage est le meme dans toutes les peaux
Suivis / AL-103 / Documents
4 pieces sur 6 RIB et justificatif de domicile manquants
Incomplet
Valide
Devis signe.pdf248 Ko — 12 aout
Valide
Avis d'imposition.pdf96 Ko — 9 aout
Valide
Photo compteur.jpg1,1 Mo — 9 aout
A verifier
Mandat MaPrimeRenov.pdf84 Ko — hier
Documents

Les pieces d'un {{objet}}. L'etat de chaque piece se lit sur la vignette, et la case vide en pointille dit ce qu'il manque encore : c'est elle qui fait avancer le dossier.

Voir le codeMasquer le code 
<div class="crm" data-crm="menthe">
  <aside class="crm__cote">
    <div class="crm__marque">Alizee<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Suivis <b>24</b></a>
    <div class="crm__groupe">Suivi</div>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>SM</span>Sophie Martin</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Suivis <span>/</span> <b>AL-103</b> <span>/</span> <b>Documents</b></div>
      <div class="crm__espace"></div>
      <button class="crm-b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Tout telecharger</button>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg> Deposer</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-p" style="margin-bottom:12px">
        <div class="crm-p__corps" style="display:flex;align-items:center;gap:14px">
          <div style="flex:1">
            <div style="display:flex;justify-content:space-between;font-size:11.5px;margin-bottom:6px">
              <span style="font-weight:600">4 pieces sur 6</span>
              <span style="color:var(--k-encre-3)">RIB et justificatif de domicile manquants</span>
            </div>
            <div class="crm-jauge"><i style="--p:66%"></i></div>
          </div>
          <span class="crm-e crm-e--attente">Incomplet</span>
        </div>
      </div>
      <div class="crm-docs">
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i><i></i><i></i></div><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Devis signe.pdf</b><small>248 Ko &mdash; 12 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i><i></i></div><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Avis d'imposition.pdf</b><small>96 Ko &mdash; 9 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Photo compteur.jpg</b><small>1,1 Mo &mdash; 9 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i></div><span class="crm-e crm-e--attente">A verifier</span></div>
          <div class="crm-doc__pied"><b>Mandat MaPrimeRenov.pdf</b><small>84 Ko &mdash; hier</small></div>
        </div>
        <label class="crm-doc crm-doc--vide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><b>RIB</b><small>Requis pour le versement</small></label>
        <label class="crm-doc crm-doc--vide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><b>Justificatif de domicile</b><small>Moins de 3 mois</small></label>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="menthe"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="menthe"> &mdash; le balisage est le meme dans toutes les peaux

H. Cuivre

Artisanat haut de gamme, agencement, restauration. Sombre chaud, taupe et terracotta, chiffres en serif, aucun blanc pur. Le sombre y est un choix esthetique, pas un mode de confort.

Chantiers / Tous
Rechercher
ReferenceClientCommuneOperationEtatMontantPose
FD-103Krissi JulienNeuilly-sur-MarnePAC air/eau 11 kWSigne4 280,0024 sept.
FD-118Martin SophieColombesChauffe-eau 200 LEnvoye1 890,00—
FD-121Durand PaulLe RaincyIsolation comblesBrouillon12 400,00—
FD-097Bernard AliceGagnyPAC air/air 3 splitsSans reponse6 750,00—
FD-092Lefevre MarcChellesChaudiere gaz THPESigne3 950,002 oct.
FD-088Nguyen ThiBondyBallon thermodynamiqueEnvoye2 340,00—
1 a 6 sur 24 — 31 610,00 EUR au total
Liste

L'ecran d'entree : filtres rapides en haut, tableau dense, pied qui rappelle le compte et le total. Les references sont en chiffres tabulaires pour que les montants se comparent d'un coup d'oeil.

Voir le codeMasquer le code 
<div class="crm" data-crm="cuivre">
  <aside class="crm__cote">
    <div class="crm__marque">Fonderie<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Chantiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__groupe">Reglages</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg> Parametres</a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Chantiers <span>/</span> <b>Tous</b></div>
      <div class="crm__espace"></div>
      <div class="crm-recherche"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg> Rechercher</div>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Nouveau chantier</button>
    </header>
    <main class="crm__contenu">
      <div class="crm__outils">
        <button class="crm-b">Tous <b>24</b></button>
        <button class="crm-b">En cours <b>12</b></button>
        <button class="crm-b">A relancer <b>5</b></button>
        <div class="crm__espace"></div>
        <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4h18l-7 8v6l-4 2v-8Z"/></svg> Filtres</button>
        <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Exporter</button>
      </div>
      <div class="crm-cadre">
        <table class="crm-t">
          <thead><tr><th>Reference</th><th>Client</th><th>Commune</th><th>Operation</th><th>Etat</th><th style="text-align:right">Montant</th><th>Pose</th></tr></thead>
          <tbody>
            <tr><td class="crm-t__ref">FD-103</td><td class="crm-t__nom">Krissi Julien</td><td>Neuilly-sur-Marne</td><td>PAC air/eau 11 kW</td><td><span class="crm-e crm-e--ok">Signe</span></td><td class="crm-t__num">4 280,00</td><td>24 sept.</td></tr>
            <tr><td class="crm-t__ref">FD-118</td><td class="crm-t__nom">Martin Sophie</td><td>Colombes</td><td>Chauffe-eau 200 L</td><td><span class="crm-e crm-e--attente">Envoye</span></td><td class="crm-t__num">1 890,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">FD-121</td><td class="crm-t__nom">Durand Paul</td><td>Le Raincy</td><td>Isolation combles</td><td><span class="crm-e crm-e--neutre">Brouillon</span></td><td class="crm-t__num">12 400,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">FD-097</td><td class="crm-t__nom">Bernard Alice</td><td>Gagny</td><td>PAC air/air 3 splits</td><td><span class="crm-e crm-e--ko">Sans reponse</span></td><td class="crm-t__num">6 750,00</td><td>&mdash;</td></tr>
            <tr><td class="crm-t__ref">FD-092</td><td class="crm-t__nom">Lefevre Marc</td><td>Chelles</td><td>Chaudiere gaz THPE</td><td><span class="crm-e crm-e--ok">Signe</span></td><td class="crm-t__num">3 950,00</td><td>2 oct.</td></tr>
            <tr><td class="crm-t__ref">FD-088</td><td class="crm-t__nom">Nguyen Thi</td><td>Bondy</td><td>Ballon thermodynamique</td><td><span class="crm-e crm-e--attente">Envoye</span></td><td class="crm-t__num">2 340,00</td><td>&mdash;</td></tr>
          </tbody>
        </table>
        <div class="crm-pied"><span>1 a 6 sur 24 &mdash; 31 610,00 EUR au total</span><nav><span>&lsaquo;</span><span class="c">1</span><span>2</span><span>3</span><span>&rsaquo;</span></nav></div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="cuivre"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="cuivre"> &mdash; le balisage est le meme dans toutes les peaux
Chantiers / FD-103 Signe
ContactVisiteDevisSignaturePoseFacture

Client et chantier

Client
Krissi Julien
Telephone
06 12 34 56 78
Chantier
12 rue des Lilas, 93330 Neuilly-sur-Marne
Logement
Maison individuelle, 112 m2, 1978
Existant
Chaudiere fioul de 1998, 2 400 L par an

Operations

3 lignes
Pompe a chaleur air/eau 11 kWPAC-11-M3 200,00
Depose et evacuation cuve fioulDEP-CUV560,00
Main d'oeuvre, 2 journeesMO-J800,00
Reste a charge
1 880,00 EUR
Total TTC
4 280,00
MaPrimeRenov
2 000,00
CEE
400,00

Pieces

4 / 6

  • Devis signe

    12 aout

  • Avis d'imposition

    9 aout

  • RIB a fournir

    Requis pour le versement

Activite

  • Devis signe par le client

    12 aout a 14:32

  • Devis envoye par courriel

    9 aout a 17:05
Fiche

L'ecran le plus consulte. Le parcours reste visible en haut, les informations a gauche, l'argent et les pieces a droite. Ce qui bloque le dossier doit se voir sans defiler.

Voir le codeMasquer le code 
<div class="crm" data-crm="cuivre">
  <aside class="crm__cote">
    <div class="crm__marque">Fonderie<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Chantiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Chantiers <span>/</span> <b>FD-103</b> <span class="crm-e crm-e--ok">Signe</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Dupliquer</button>
      <button class="crm-b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> PDF</button>
      <button class="crm-b crm-b--fort">Planifier la pose</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-etapes">
        <span class="f">Contact</span><span class="f">Visite</span><span class="f">Devis</span><span class="c">Signature</span><span>Pose</span><span>Facture</span>
      </div>
      <div class="crm-fiche" style="margin-top:12px">
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Client et chantier</h4><button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg> Modifier</button></div>
            <div class="crm-p__corps"><dl class="crm-def">
              <dt>Client</dt><dd>Krissi Julien</dd>
              <dt>Telephone</dt><dd>06 12 34 56 78</dd>
              <dt>Chantier</dt><dd>12 rue des Lilas, 93330 Neuilly-sur-Marne</dd>
              <dt>Logement</dt><dd>Maison individuelle, 112 m2, 1978</dd>
              <dt>Existant</dt><dd>Chaudiere fioul de 1998, 2 400 L par an</dd>
            </dl></div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Operations</h4><span style="font-size:11px;color:var(--k-encre-3)">3 lignes</span></div>
            <table class="crm-t">
              <tbody>
                <tr><td class="crm-t__nom">Pompe a chaleur air/eau 11 kW</td><td class="crm-t__ref">PAC-11-M</td><td class="crm-t__num">3 200,00</td></tr>
                <tr><td class="crm-t__nom">Depose et evacuation cuve fioul</td><td class="crm-t__ref">DEP-CUV</td><td class="crm-t__num">560,00</td></tr>
                <tr><td class="crm-t__nom">Main d'oeuvre, 2 journees</td><td class="crm-t__ref">MO-J</td><td class="crm-t__num">800,00</td></tr>
              </tbody>
            </table>
          </div>
        </div>
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p"><div class="crm-p__corps">
            <span style="font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--k-caps);color:var(--k-encre-3)">Reste a charge</span>
            <div style="font-family:var(--k-titre);font-size:27px;font-weight:800;letter-spacing:-.02em;margin:4px 0 10px">1 880,00 EUR</div>
            <dl class="crm-def" style="font-size:12px">
              <dt>Total TTC</dt><dd>4 280,00</dd>
              <dt>MaPrimeRenov</dt><dd>2 000,00</dd>
              <dt>CEE</dt><dd>400,00</dd>
            </dl>
          </div></div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Pieces</h4><span style="font-size:11px;color:var(--k-encre-3)">4 / 6</span></div>
            <div class="crm-p__corps">
              <div class="crm-jauge"><i style="--p:66%"></i></div>
              <ul class="crm-fil-actu" style="margin-top:10px">
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg></i><div><p>Devis signe</p><small>12 aout</small></div></li>
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg></i><div><p>Avis d'imposition</p><small>9 aout</small></div></li>
                <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></i><div><p><b>RIB</b> a fournir</p><small>Requis pour le versement</small></div></li>
              </ul>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Activite</h4></div>
            <div class="crm-p__corps"><ul class="crm-fil-actu">
              <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg></i><div><p><b>Devis signe</b> par le client</p><small>12 aout a 14:32</small></div></li>
              <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg></i><div><p>Devis envoye par courriel</p><small>9 aout a 17:05</small></div></li>
            </ul></div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="cuivre"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="cuivre"> &mdash; le balisage est le meme dans toutes les peaux
Septembre 2026 — a jour a 09:14
Chiffre d'affaires48 250+12,4 % vs aout
En attente17-3 sur 7 jours
Taux de signature62 %stable sur 3 mois
Delai moyen4,2 j-0,6 j vs aout

Chiffre d'affaires mensuel

en milliers d'euros
avr
mai
juin
juil
aout
sept

A traiter aujourd'hui

5

  • FD-097 sans reponse

    Envoye il y a 14 jours

  • Facture FD-118 a emettre

    Chantier termine le 2 septembre

  • FD-121 incomplet

    RIB et justificatif manquants

  • Visite chez Bernard Alice

    Demain 10:00 — Gagny
Tableau de bord

L'ecran d'accueil. Il ne montre pas tout ce qui existe, seulement ce qui appelle une decision aujourd'hui : les chiffres du mois, la tendance, et la liste de ce qui attend une action.

Voir le codeMasquer le code 
<div class="crm" data-crm="cuivre">
  <aside class="crm__cote">
    <div class="crm__marque">Fonderie<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Chantiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Suivi</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg> Alertes <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil"><b>Septembre 2026</b> <span>&mdash; a jour a 09:14</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b">30 jours</button>
      <button class="crm-b crm-b--nu">Trimestre</button>
      <button class="crm-b crm-b--fort">Exporter</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-kpis">
        <div class="crm-kpi"><span>Chiffre d'affaires</span><strong>48 250</strong><em><b class="h">+12,4 %</b> vs aout</em></div>
        <div class="crm-kpi"><span>En attente</span><strong>17</strong><em><b class="b">-3</b> sur 7 jours</em></div>
        <div class="crm-kpi"><span>Taux de signature</span><strong>62 %</strong><em>stable sur 3 mois</em></div>
        <div class="crm-kpi"><span>Delai moyen</span><strong>4,2 j</strong><em><b class="h">-0,6 j</b> vs aout</em></div>
      </div>
      <div style="display:grid;grid-template-columns:1fr 320px;gap:10px">
        <div class="crm-p">
          <div class="crm-p__tete"><h4>Chiffre d'affaires mensuel</h4><span style="font-size:11px;color:var(--k-encre-3)">en milliers d'euros</span></div>
          <div class="crm-p__corps"><div class="crm-barres">
            <div><i style="--h:42%"></i><small>avr</small></div><div><i style="--h:58%"></i><small>mai</small></div>
            <div><i style="--h:51%"></i><small>juin</small></div><div><i style="--h:74%"></i><small>juil</small></div>
            <div><i style="--h:63%"></i><small>aout</small></div><div class="c"><i style="--h:88%"></i><small>sept</small></div>
          </div></div>
        </div>
        <div class="crm-p">
          <div class="crm-p__tete"><h4>A traiter aujourd'hui</h4><span class="crm-e crm-e--attente">5</span></div>
          <div class="crm-p__corps"><ul class="crm-fil-actu">
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg></i><div><p><b>FD-097</b> sans reponse</p><small>Envoye il y a 14 jours</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg></i><div><p>Facture <b>FD-118</b> a emettre</p><small>Chantier termine le 2 septembre</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg></i><div><p><b>FD-121</b> incomplet</p><small>RIB et justificatif manquants</small></div></li>
            <li><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></i><div><p>Visite chez <b>Bernard Alice</b></p><small>Demain 10:00 &mdash; Gagny</small></div></li>
          </ul></div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="cuivre"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="cuivre"> &mdash; le balisage est le meme dans toutes les peaux
Chantiers / Nouveau

Client

Chantier

Operation

PAC air/eauPAC air/airChauffe-eauIsolationChaudiere

Recapitulatif

Reference
FD-124
Client
Krissi Julien
Commune
Neuilly-sur-Marne
Operation
PAC air/eau 11 kW
Aides estimees
2 400 EUR

MaPrimeRenov et CEE, sous reserve des revenus du foyer.

Saisie

Creation d'un {{objet}}. Les champs sont groupes par sujet, la colonne de droite recapitule au fur et a mesure, et la reference est attribuee avant l'enregistrement pour qu'on puisse en parler au telephone.

Voir le codeMasquer le code 
<div class="crm" data-crm="cuivre">
  <aside class="crm__cote">
    <div class="crm__marque">Fonderie<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Chantiers <b>24</b></a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Chantiers <span>/</span> <b>Nouveau</b></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu">Annuler</button>
      <button class="crm-b crm-b--fort">Creer le chantier</button>
    </header>
    <main class="crm__contenu">
      <div style="display:grid;grid-template-columns:1fr 290px;gap:12px;align-items:start">
        <div style="display:flex;flex-direction:column;gap:10px">
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Client</h4></div>
            <div class="crm-p__corps crm-form">
              <label><span>Nom ou raison sociale</span><input value="Krissi Julien"></label>
              <div class="crm-form__deux">
                <label><span>Telephone</span><input value="06 12 34 56 78"></label>
                <label><span>Courriel</span><input value="julien@exemple.fr"></label>
              </div>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Chantier</h4></div>
            <div class="crm-p__corps crm-form">
              <label><span>Adresse</span><input value="12 rue des Lilas"></label>
              <div class="crm-form__deux">
                <label><span>Code postal</span><input value="93330"></label>
                <label><span>Commune</span><input value="Neuilly-sur-Marne"></label>
              </div>
              <div class="crm-form__deux">
                <label><span>Surface</span><input value="112 m2"></label>
                <label><span>Annee de construction</span><input value="1978"></label>
              </div>
            </div>
          </div>
          <div class="crm-p">
            <div class="crm-p__tete"><h4>Operation</h4></div>
            <div class="crm-p__corps crm-form">
              <div class="crm-choix"><span class="c">PAC air/eau</span><span>PAC air/air</span><span>Chauffe-eau</span><span>Isolation</span><span>Chaudiere</span></div>
              <div class="crm-form__deux">
                <label><span>Puissance estimee</span><input value="11 kW"></label>
                <label><span>Pose souhaitee</span><input value="Septembre 2026"></label>
              </div>
            </div>
          </div>
        </div>
        <div class="crm-p">
          <div class="crm-p__tete"><h4>Recapitulatif</h4></div>
          <div class="crm-p__corps">
            <dl class="crm-def" style="font-size:12px">
              <dt>Reference</dt><dd style="font-family:var(--font-mono)">FD-124</dd>
              <dt>Client</dt><dd>Krissi Julien</dd>
              <dt>Commune</dt><dd>Neuilly-sur-Marne</dd>
              <dt>Operation</dt><dd>PAC air/eau 11 kW</dd>
            </dl>
            <div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--k-trait)">
              <span style="font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--k-caps);color:var(--k-encre-3)">Aides estimees</span>
              <div style="font-family:var(--k-titre);font-size:22px;font-weight:800;margin-top:4px">2 400 EUR</div>
              <p style="margin:4px 0 0;font-size:11px;color:var(--k-encre-3);line-height:1.4">MaPrimeRenov et CEE, sous reserve des revenus du foyer.</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="cuivre"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="cuivre"> &mdash; le balisage est le meme dans toutes les peaux
Semaine 37 — du 7 au 11 septembre
Lun 7
Mar 8
Mer 9
Jeu 10
Ven 11
08:00
Pose PACKrissi — Neuilly
EntretienMartin — Colombes
Pose ballonNguyen — Bondy
10:00
Pose PACsuite
Visite techniqueDurand — Le Raincy
Pose ballonsuite
DepannageBernard — Gagny
14:00
MetreLefevre — Chelles
Depannageurgence — Bondy
Mise en serviceKrissi — Neuilly
16:00
Livraisondepot
Reunion equipebureau
Planning

La semaine des equipes. Chaque intervention porte son heure, son client et sa commune : sans la commune, impossible d'evaluer un trajet. Les couleurs distinguent le type, pas l'equipe.

Voir le codeMasquer le code 
<div class="crm" data-crm="cuivre">
  <aside class="crm__cote">
    <div class="crm__marque">Fonderie<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Chantiers <b>24</b></a>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Planning</a>
    <div class="crm__groupe">Equipes</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg> Nord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg> Ouest</a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil"><b>Semaine 37</b> <span>&mdash; du 7 au 11 septembre</span></div>
      <div class="crm__espace"></div>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
      <button class="crm-b">Aujourd'hui</button>
      <button class="crm-b crm-b--nu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Planifier</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-plan">
        <div class="crm-plan__jour"></div>
        <div class="crm-plan__jour">Lun 7</div><div class="crm-plan__jour">Mar 8</div>
        <div class="crm-plan__jour">Mer 9</div><div class="crm-plan__jour">Jeu 10</div><div class="crm-plan__jour">Ven 11</div>

        <div class="crm-plan__h">08:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose PAC</b><small>Krissi &mdash; Neuilly</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Entretien</b><small>Martin &mdash; Colombes</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose ballon</b><small>Nguyen &mdash; Bondy</small></span></div>
        <div class="crm-plan__c"></div>

        <div class="crm-plan__h">10:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose PAC</b><small>suite</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Visite technique</b><small>Durand &mdash; Le Raincy</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Pose ballon</b><small>suite</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev a"><b>Depannage</b><small>Bernard &mdash; Gagny</small></span></div>

        <div class="crm-plan__h">14:00</div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Metre</b><small>Lefevre &mdash; Chelles</small></span></div>
        <div class="crm-plan__c"><span class="crm-plan__ev a"><b>Depannage</b><small>urgence &mdash; Bondy</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev v"><b>Mise en service</b><small>Krissi &mdash; Neuilly</small></span></div>

        <div class="crm-plan__h">16:00</div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Livraison</b><small>depot</small></span></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"></div>
        <div class="crm-plan__c"><span class="crm-plan__ev"><b>Reunion equipe</b><small>bureau</small></span></div>
        <div class="crm-plan__c"></div>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="cuivre"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="cuivre"> &mdash; le balisage est le meme dans toutes les peaux
Chantiers / FD-103 / Documents
4 pieces sur 6 RIB et justificatif de domicile manquants
Incomplet
Valide
Devis signe.pdf248 Ko — 12 aout
Valide
Avis d'imposition.pdf96 Ko — 9 aout
Valide
Photo compteur.jpg1,1 Mo — 9 aout
A verifier
Mandat MaPrimeRenov.pdf84 Ko — hier
Documents

Les pieces d'un {{objet}}. L'etat de chaque piece se lit sur la vignette, et la case vide en pointille dit ce qu'il manque encore : c'est elle qui fait avancer le dossier.

Voir le codeMasquer le code 
<div class="crm" data-crm="cuivre">
  <aside class="crm__cote">
    <div class="crm__marque">Fonderie<i></i></div>
    <div class="crm__groupe">Pilotage</div>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> Tableau de bord</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M9 15h6"/></svg> Chantiers <b>24</b></a>
    <div class="crm__groupe">Suivi</div>
    <a href="#" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg> Documents</a>
    <a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg> Signatures <b>3</b></a>
    <div class="crm__pied"><div class="crm__moi"><span>JK</span>Julien Krissi</div></div>
  </aside>
  <div class="crm__principal">
    <header class="crm__tete">
      <div class="crm__fil">Chantiers <span>/</span> <b>FD-103</b> <span>/</span> <b>Documents</b></div>
      <div class="crm__espace"></div>
      <button class="crm-b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Tout telecharger</button>
      <button class="crm-b crm-b--fort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg> Deposer</button>
    </header>
    <main class="crm__contenu">
      <div class="crm-p" style="margin-bottom:12px">
        <div class="crm-p__corps" style="display:flex;align-items:center;gap:14px">
          <div style="flex:1">
            <div style="display:flex;justify-content:space-between;font-size:11.5px;margin-bottom:6px">
              <span style="font-weight:600">4 pieces sur 6</span>
              <span style="color:var(--k-encre-3)">RIB et justificatif de domicile manquants</span>
            </div>
            <div class="crm-jauge"><i style="--p:66%"></i></div>
          </div>
          <span class="crm-e crm-e--attente">Incomplet</span>
        </div>
      </div>
      <div class="crm-docs">
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i><i></i><i></i></div><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Devis signe.pdf</b><small>248 Ko &mdash; 12 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i><i></i></div><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Avis d'imposition.pdf</b><small>96 Ko &mdash; 9 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg><span class="crm-e crm-e--ok">Valide</span></div>
          <div class="crm-doc__pied"><b>Photo compteur.jpg</b><small>1,1 Mo &mdash; 9 aout</small></div>
        </div>
        <div class="crm-doc">
          <div class="crm-doc__vue"><div class="crm-doc__feuille"><i></i><i></i><i></i></div><span class="crm-e crm-e--attente">A verifier</span></div>
          <div class="crm-doc__pied"><b>Mandat MaPrimeRenov.pdf</b><small>84 Ko &mdash; hier</small></div>
        </div>
        <label class="crm-doc crm-doc--vide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><b>RIB</b><small>Requis pour le versement</small></label>
        <label class="crm-doc crm-doc--vide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><b>Justificatif de domicile</b><small>Moins de 3 mois</small></label>
      </div>
    </main>
  </div>
</div>
/* Le gabarit est commun a toutes les peaux : voir le socle .crm dans
   css/components/crm.css. Seule la peau [data-crm="cuivre"] change,
   et elle ne redefinit que les 20 jetons --k-*. */
<div class="crm" data-crm="cuivre"> &mdash; le balisage est le meme dans toutes les peaux

Z. Mode d'emploi

Ce qui distingue les huit peaux, et comment en creer une pour un client dont la charte est imposee.

graphitechantierconsolepapierardoiseencrementhecuivre
RegistreProductionTerrainSupervisionCabinetProduit SaaSEditorialServicesHaut de gamme
FondBeige froidGris neutreBleu nuitCremeBleu-grisBlanc purVert d'eauBrun sombre
AccentOcre bruleJaune securiteLimeVert foretIndigoRouge uniqueSarcelleTerracotta
SeparationBordure 1 pxBordure 2 px + ombre dureFondFilet finOmbre douceFilet 1,5 pxOmbre seuleBordure sombre
Rayon2 px06 px3 px10 px014 px8 px
TitresSans 800Sans 800Sans 800Serif 400Sans 800Sans 800Sans 800Serif 400
Ligne34 px52 px32 px44 px44 px42 px48 px42 px
SignatureFilet ocreBande de signalisationLignes alternees, monospaceAucun aplatPastille pleineCapitales espaceesZero bordureChiffres en serif
Ce qui distingue les huit peaux

Le tableau a lire avant de choisir. Chaque peau tranche sur au moins quatre points : c'est ce qui evite qu'elles se ressemblent, et c'est ce qu'il faut tenir en creant la sienne.

Voir le codeMasquer le code 
<div class="crm-compare">
  <table class="crm-t" style="--k-trait:var(--c-border);--k-encre-3:var(--c-text-muted);--k-encre:var(--c-text);--k-surface:var(--c-surface);--k-surface-2:var(--c-surface-2);--k-pad:10px;--k-ligne:36px;--k-caps:.05em">
    <thead><tr><th></th><th>graphite</th><th>chantier</th><th>console</th><th>papier</th><th>ardoise</th><th>encre</th><th>menthe</th><th>cuivre</th></tr></thead>
    <tbody>
      <tr><td><b>Registre</b></td><td>Production</td><td>Terrain</td><td>Supervision</td><td>Cabinet</td><td>Produit SaaS</td><td>Editorial</td><td>Services</td><td>Haut de gamme</td></tr>
      <tr><td><b>Fond</b></td><td>Beige froid</td><td>Gris neutre</td><td>Bleu nuit</td><td>Creme</td><td>Bleu-gris</td><td>Blanc pur</td><td>Vert d'eau</td><td>Brun sombre</td></tr>
      <tr><td><b>Accent</b></td><td>Ocre brule</td><td>Jaune securite</td><td>Lime</td><td>Vert foret</td><td>Indigo</td><td>Rouge unique</td><td>Sarcelle</td><td>Terracotta</td></tr>
      <tr><td><b>Separation</b></td><td>Bordure 1 px</td><td>Bordure 2 px + ombre dure</td><td>Fond</td><td>Filet fin</td><td>Ombre douce</td><td>Filet 1,5 px</td><td>Ombre seule</td><td>Bordure sombre</td></tr>
      <tr><td><b>Rayon</b></td><td>2 px</td><td>0</td><td>6 px</td><td>3 px</td><td>10 px</td><td>0</td><td>14 px</td><td>8 px</td></tr>
      <tr><td><b>Titres</b></td><td>Sans 800</td><td>Sans 800</td><td>Sans 800</td><td>Serif 400</td><td>Sans 800</td><td>Sans 800</td><td>Sans 800</td><td>Serif 400</td></tr>
      <tr><td><b>Ligne</b></td><td>34 px</td><td>52 px</td><td>32 px</td><td>44 px</td><td>44 px</td><td>42 px</td><td>48 px</td><td>42 px</td></tr>
      <tr><td><b>Signature</b></td><td>Filet ocre</td><td>Bande de signalisation</td><td>Lignes alternees, monospace</td><td>Aucun aplat</td><td>Pastille pleine</td><td>Capitales espacees</td><td>Zero bordure</td><td>Chiffres en serif</td></tr>
    </tbody>
  </table>
</div>
/* aucun style specifique : le socle .btn suffit */
un tableau de comparaison, pas un composant
/* 1. La peau : les 20 jetons, rien d'autre */
.crm[data-crm="ma-marque"] {
  --k-fond: #eef1f4;  --k-surface: #fff;   --k-surface-2: #f5f7f9;
  --k-cote: #10243a;  --k-cote-txt: #8fa6bd;
  --k-encre: #0e1b28; --k-encre-2: #46586a; --k-encre-3: #7c8b9a;
  --k-trait: #d5dde5;
  --k-accent: #0f6ab4; --k-accent-2: #e3eefa;
  --k-ok: #1c7a4a; --k-alerte: #b45309; --k-danger: #b3261e;
  --k-r: 8px; --k-r-bouton: 6px; --k-ombre: none;
  --k-ligne: 40px; --k-pad: 16px;
  --k-titre: var(--font-ui); --k-corps: var(--font-ui); --k-caps: .07em;
}

/* 2. UN detail de signature, sinon la peau ressemble aux autres */
.crm[data-crm="ma-marque"] .crm__cote a[aria-current] {
  background: var(--k-accent);
  color: #fff;
}

Les quatre points a trancher pour ne pas produire une enieme interface interchangeable : la couleur d'encre (jamais un gris pur), la maniere de separer les blocs (bordure OU ombre OU fond, pas les trois), la densite (une hauteur de ligne assumee), et un detail que les autres peaux n'ont pas. Ajouter ensuite data-crm="ma-marque" sur l'element .crm.

Ajouter un ecran se fait de la meme facon : un bloc @ecran dans css/components/crm.css, ecrit une seule fois avec les jetons {{marque}}, {{objet}}, {{prefixe}}. Le build le decline automatiquement dans les huit peaux.

Creer sa propre peau

Pour un client dont la charte est imposee. Redefinir les 20 jetons, ajouter UN detail de signature, et les six ecrans suivent sans qu'une ligne de balisage change.

Voir le codeMasquer le code 
<div class="thm-recette">
  <pre><code>/* 1. La peau : les 20 jetons, rien d'autre */
.crm[data-crm="ma-marque"] {
  --k-fond: #eef1f4;  --k-surface: #fff;   --k-surface-2: #f5f7f9;
  --k-cote: #10243a;  --k-cote-txt: #8fa6bd;
  --k-encre: #0e1b28; --k-encre-2: #46586a; --k-encre-3: #7c8b9a;
  --k-trait: #d5dde5;
  --k-accent: #0f6ab4; --k-accent-2: #e3eefa;
  --k-ok: #1c7a4a; --k-alerte: #b45309; --k-danger: #b3261e;
  --k-r: 8px; --k-r-bouton: 6px; --k-ombre: none;
  --k-ligne: 40px; --k-pad: 16px;
  --k-titre: var(--font-ui); --k-corps: var(--font-ui); --k-caps: .07em;
}

/* 2. UN detail de signature, sinon la peau ressemble aux autres */
.crm[data-crm="ma-marque"] .crm__cote a[aria-current] {
  background: var(--k-accent);
  color: #fff;
}</code></pre>
  <p class="thm-note"><strong>Les quatre points a trancher</strong> pour ne pas produire une enieme interface interchangeable :
  la couleur d'encre (jamais un gris pur), la maniere de separer les blocs (bordure OU ombre OU fond, pas les trois),
  la densite (une hauteur de ligne assumee), et un detail que les autres peaux n'ont pas.
  Ajouter ensuite <code>data-crm="ma-marque"</code> sur l'element <code>.crm</code>.</p>
  <p class="thm-note"><strong>Ajouter un ecran</strong> se fait de la meme facon : un bloc <code>@ecran</code> dans
  <code>css/components/crm.css</code>, ecrit une seule fois avec les jetons <code>{{marque}}</code>,
  <code>{{objet}}</code>, <code>{{prefixe}}</code>. Le build le decline automatiquement dans les huit peaux.</p>
</div>
/* aucun style specifique : le socle .btn suffit */
etendre crm.css, ne jamais surcharger un ecran
Instrument SansgraphiteGrotesque neutre, chiffres etroits. Un outil qui se fait oublier.
Barlow CondensedchantierCondensee : plus de mots par ligne sur un ecran tenu a bout de bras.
IBM Plex SansconsoleAvec IBM Plex Mono pour les chiffres, qui s'alignent colonne par colonne.
FrauncespapierSerif a axe variable pour les titres, Instrument Sans pour le texte.
ManropeardoiseGeometrique aux terminaisons douces, le registre attendu d'un abonnement.
Space GroteskencreGrotesque a caractere, qui tient les grandes capitales espacees.
FigtreementheHumaniste ronde, chaleureuse sans etre enfantine.
Instrument SerifcuivreSerif de titrage, avec Karla pour le texte et les montants en serif.
Les polices des huit peaux

Chaque peau porte sa police. C'est elle qui fait le plus gros de l'identite, avant meme la couleur. Dans un projet, ne charger QUE la peau utilisee : le catalogue en charge onze parce qu'il les montre toutes.

Voir le codeMasquer le code 
<div class="crm-polices">
  <div data-crm="graphite"><b>Instrument Sans</b><span>graphite</span><em>Grotesque neutre, chiffres etroits. Un outil qui se fait oublier.</em></div>
  <div data-crm="chantier"><b>Barlow Condensed</b><span>chantier</span><em>Condensee : plus de mots par ligne sur un ecran tenu a bout de bras.</em></div>
  <div data-crm="console"><b>IBM Plex Sans</b><span>console</span><em>Avec IBM Plex Mono pour les chiffres, qui s'alignent colonne par colonne.</em></div>
  <div data-crm="papier"><b>Fraunces</b><span>papier</span><em>Serif a axe variable pour les titres, Instrument Sans pour le texte.</em></div>
  <div data-crm="ardoise"><b>Manrope</b><span>ardoise</span><em>Geometrique aux terminaisons douces, le registre attendu d'un abonnement.</em></div>
  <div data-crm="encre"><b>Space Grotesk</b><span>encre</span><em>Grotesque a caractere, qui tient les grandes capitales espacees.</em></div>
  <div data-crm="menthe"><b>Figtree</b><span>menthe</span><em>Humaniste ronde, chaleureuse sans etre enfantine.</em></div>
  <div data-crm="cuivre"><b>Instrument Serif</b><span>cuivre</span><em>Serif de titrage, avec Karla pour le texte et les montants en serif.</em></div>
</div>
.crm-polices { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-3); width: 100%; }
.crm-polices > div {
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.crm-polices b { display: block; font-family: var(--k-titre); font-size: 25px; font-weight: 700; letter-spacing: -.02em; color: var(--c-text); line-height: 1.15; }
.crm-polices span { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--c-primary); }
.crm-polices em {
  display: block;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
  font-family: var(--k-corps);
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  line-height: 1.5;
}
--k-titre / --k-corps / --k-chiffres, trois jetons par peau
<!-- Exemple : la peau "papier" et elle seule -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2
  ?family=Fraunces:opsz,wght@9..144,400;9..144,600
  &family=Instrument+Sans:wght@400;500;600;700
  &display=swap">

<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/components/crm.css">

<div class="crm" data-crm="papier">…</div>

Les familles par peau : graphite Instrument Sans — chantier Barlow Condensed + Barlow — console IBM Plex Sans + IBM Plex Mono — papier Fraunces + Instrument Sans — ardoise Manrope — encre Space Grotesk — menthe Figtree — cuivre Instrument Serif + Karla.

Chaque jeton garde sa pile systeme en repli : --k-titre: "Fraunces", "Iowan Old Style", Georgia, serif. Sans reseau, ou si Google Fonts est bloque, l'ecran reste compose — il change simplement de police. C'est aussi ce qui permet au catalogue de fonctionner hors ligne.

Charger les polices d'une seule peau

Le catalogue charge onze familles parce qu'il les montre toutes. Un projet n'en charge qu'une, ce qui represente 20 a 60 Ko et une seule requete.

Voir le codeMasquer le code 
<div class="mv-code">
  <pre><code>&lt;!-- Exemple : la peau "papier" et elle seule --&gt;
&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link rel="stylesheet" href="https://fonts.googleapis.com/css2
  ?family=Fraunces:opsz,wght@9..144,400;9..144,600
  &amp;family=Instrument+Sans:wght@400;500;600;700
  &amp;display=swap"&gt;

&lt;link rel="stylesheet" href="css/theme.css"&gt;
&lt;link rel="stylesheet" href="css/components/crm.css"&gt;

&lt;div class="crm" data-crm="papier"&gt;…&lt;/div&gt;</code></pre>
  <p class="thm-note"><strong>Les familles par peau :</strong>
  graphite <code>Instrument Sans</code> &mdash;
  chantier <code>Barlow Condensed</code> + <code>Barlow</code> &mdash;
  console <code>IBM Plex Sans</code> + <code>IBM Plex Mono</code> &mdash;
  papier <code>Fraunces</code> + <code>Instrument Sans</code> &mdash;
  ardoise <code>Manrope</code> &mdash;
  encre <code>Space Grotesk</code> &mdash;
  menthe <code>Figtree</code> &mdash;
  cuivre <code>Instrument Serif</code> + <code>Karla</code>.</p>
  <p class="thm-note">Chaque jeton garde sa pile systeme en repli : <code>--k-titre: "Fraunces", "Iowan Old Style", Georgia, serif</code>.
  Sans reseau, ou si Google Fonts est bloque, l'ecran reste compose &mdash; il change simplement de police.
  C'est aussi ce qui permet au catalogue de fonctionner hors ligne.</p>
</div>
/* aucun style specifique : le socle .btn suffit */
preconnect + display=swap + une seule famille par projet