/* ============================================================================
BIBLIOTHEQUE UI JABS - crm.css
Depend de : theme.css uniquement.
Ecrans de CRM complets, prets a habiller un projet.
PRINCIPE : un seul squelette HTML, huit peaux. L'attribut data-crm change
la palette, la typographie, la densite, les rayons, la maniere de separer
les blocs (bordure ou fond) et les detours de signature. Le balisage, lui,
ne bouge pas d'une peau a l'autre.
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, ombre douce identique partout, bleu vif,
tout aere de la meme facon. Ici chaque peau tranche sur au moins quatre
points : la couleur d'encre, la famille typographique, le mode de
separation, et la densite.
graphite outil de production. Neutres chauds, ocre brule, bordure fine,
rayon 2 px, densite forte.
chantier terrain. Jaune securite et noir, ombre dure, rayon 0, cibles
de 52 px, bande de signalisation.
console supervision. Sombre, lime, separation par le fond, chiffres en
monospace.
papier cabinet. Creme, encre brune, vert foret, titres en serif,
filets fins, aucun aplat colore.
ardoise produit logiciel. Bleu-gris froid, indigo, ombres douces,
rayon 10 px, respiration large.
encre editorial. Noir et blanc strict plus UN rouge, filets epais,
rayon 0, grandes graisses.
menthe services et sante. Blanc pur, sarcelle, separation par l'ombre
seule, rayon 14 px, tres aere.
cuivre artisanat haut de gamme. Sombre chaud, taupe et terracotta,
chiffres en serif, rayon 8 px.
========================================================================= */
/* ---------------------------------------------------------------------------
JETONS DE PEAU
Chaque peau redefinit exactement ces 20 variables. Aucune autre valeur
n'est ecrite en dur dans le squelette.
------------------------------------------------------------------------ */
.crm {
/* couleurs */
--k-fond: #f2f1ee;
--k-surface: #ffffff;
--k-surface-2: #f7f6f3;
--k-cote: #1c1a17;
--k-cote-txt: #a8a29a;
--k-encre: #17150f;
--k-encre-2: #57524a;
--k-encre-3: #8a847a;
--k-trait: #ddd9d1;
--k-accent: #b3701a;
--k-accent-2: #fdf2e0;
--k-ok: #2f7d4f;
--k-alerte: #b3541e;
--k-danger: #a52a2a;
/* formes */
--k-r: 2px; /* rayon des blocs */
--k-r-bouton: 2px;
--k-ombre: none;
--k-ligne: 34px; /* hauteur d'une ligne de tableau */
--k-pad: 14px;
/* typographie */
--k-titre: "Instrument Sans", var(--font-ui);
--k-corps: "Instrument Sans", var(--font-ui);
--k-chiffres: var(--k-corps); /* police des montants et des references */
--k-caps: .08em; /* interlettrage des petites capitales */
}
/* --- chantier : terrain, contraste maximum ------------------------------- */
/* graphite utilise les polices du socle : Instrument Sans. */
.crm[data-crm="chantier"] {
--k-fond: #e8e8e6;
--k-surface: #ffffff;
--k-surface-2: #f4f4f2;
--k-cote: #111111;
--k-cote-txt: #b4b4b0;
--k-encre: #111111;
--k-encre-2: #3d3d3b;
--k-encre-3: #6e6e6a;
--k-trait: #111111;
--k-accent: #f5c400;
--k-accent-2: #fff6cc;
--k-ok: #128040;
--k-alerte: #d97200;
--k-danger: #cc1414;
--k-r: 0;
--k-r-bouton: 0;
--k-ombre: 4px 4px 0 #111111;
--k-ligne: 52px;
--k-pad: 18px;
--k-caps: .1em;
--k-titre: "Barlow Condensed", "Helvetica Neue", Impact, var(--font-ui);
--k-corps: "Barlow", var(--font-ui);
--k-chiffres: "Barlow", var(--font-ui);
}
/* --- console : supervision, sombre --------------------------------------- */
.crm[data-crm="console"] {
--k-fond: #0c1014;
--k-surface: #141a20;
--k-surface-2: #1b232b;
--k-cote: #090d11;
--k-cote-txt: #6d7f8d;
--k-encre: #e4ecf2;
--k-encre-2: #9fb0bd;
--k-encre-3: #647585;
--k-trait: #223039;
--k-accent: #9fe870;
--k-accent-2: #1b2a1c;
--k-ok: #4ade80;
--k-alerte: #fbbf24;
--k-danger: #f87171;
--k-r: 6px;
--k-r-bouton: 4px;
--k-ombre: none;
--k-ligne: 32px;
--k-pad: 12px;
--k-titre: "IBM Plex Sans", var(--font-ui);
--k-corps: "IBM Plex Sans", var(--font-ui);
--k-chiffres: "IBM Plex Mono", var(--font-mono);
}
/* --- papier : cabinet, editorial ----------------------------------------- */
.crm[data-crm="papier"] {
--k-fond: #f6f3ec;
--k-surface: #fffdf8;
--k-surface-2: #f1ede3;
--k-cote: #fffdf8;
--k-cote-txt: #6b6355;
--k-encre: #1e1b16;
--k-encre-2: #55503f;
--k-encre-3: #8b8474;
--k-trait: #ddd6c6;
--k-accent: #1f5138;
--k-accent-2: #e6efe7;
--k-ok: #1f5138;
--k-alerte: #92400e;
--k-danger: #8f2323;
--k-r: 3px;
--k-r-bouton: 3px;
--k-ombre: none;
--k-ligne: 44px;
--k-pad: 18px;
--k-caps: .14em;
--k-titre: "Fraunces", "Iowan Old Style", Georgia, serif;
--k-corps: "Instrument Sans", var(--font-ui);
--k-chiffres: "Instrument Sans", var(--font-ui);
}
/* ---------------------------------------------------------------------------
SQUELETTE
------------------------------------------------------------------------ */
.crm {
display: flex;
width: 100%;
height: 520px;
overflow: hidden;
border: 1px solid var(--c-border);
border-radius: var(--r-md);
background: var(--k-fond);
color: var(--k-encre);
font-family: var(--k-corps);
font-size: 13px;
line-height: 1.45;
}
.crm *, .crm *::before, .crm *::after { box-sizing: border-box; }
/* --- barre laterale ------------------------------------------------------ */
.crm__cote {
display: flex;
flex-direction: column;
width: 208px;
flex: none;
padding: 16px 10px;
background: var(--k-cote);
color: var(--k-cote-txt);
overflow-y: auto;
}
.crm__marque {
display: flex;
align-items: baseline;
gap: 6px;
padding: 0 8px 18px;
font-family: var(--k-titre);
font-size: 17px;
font-weight: 800;
letter-spacing: -.02em;
color: #fff;
}
.crm__marque i { font-style: normal; color: var(--k-accent); }
.crm__groupe {
margin: 16px 0 6px;
padding: 0 8px;
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--k-caps);
color: var(--k-encre-3);
}
.crm__groupe:first-of-type { margin-top: 0; }
.crm__cote a {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 8px;
border-radius: var(--k-r-bouton);
font-size: 13px;
color: inherit;
text-decoration: none;
white-space: nowrap;
}
.crm__cote a b { margin-left: auto; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .75; }
.crm__cote a:hover { background: rgba(255,255,255,.07); color: #fff; }
.crm__cote a[aria-current] { background: rgba(255,255,255,.1); color: #fff; font-weight: 600; }
.crm__cote svg { width: 15px; height: 15px; flex: none; opacity: .8; }
.crm__pied { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid rgba(255,255,255,.1); }
.crm__moi { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.crm__moi span {
display: inline-flex; align-items: center; justify-content: center;
width: 27px; height: 27px; flex: none;
border-radius: var(--k-r-bouton);
background: var(--k-accent);
color: var(--k-cote);
font-size: 11px;
font-weight: 800;
}
/* --- zone principale ----------------------------------------------------- */
.crm__principal { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.crm__tete {
display: flex;
align-items: center;
gap: 12px;
padding: 0 var(--k-pad);
height: 54px;
flex: none;
background: var(--k-surface);
border-bottom: 1px solid var(--k-trait);
}
.crm__fil { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--k-encre-3); }
.crm__fil b { color: var(--k-encre); font-weight: 600; }
.crm__espace { flex: 1; }
.crm__contenu { flex: 1; overflow-y: auto; padding: var(--k-pad); padding-right: calc(var(--k-pad) + 4px); }
/* --- barre d'outils ------------------------------------------------------ */
.crm__outils { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.crm-recherche {
display: flex; align-items: center; gap: 7px;
height: 32px; padding: 0 10px;
min-width: 190px;
border: 1px solid var(--k-trait);
border-radius: var(--k-r-bouton);
background: var(--k-surface);
color: var(--k-encre-3);
font-size: 12px;
}
.crm-recherche svg { width: 14px; height: 14px; }
/* --- boutons ------------------------------------------------------------- */
.crm-b {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 32px;
padding: 0 12px;
border: 1px solid var(--k-trait);
border-radius: var(--k-r-bouton);
background: var(--k-surface);
color: var(--k-encre);
font-family: var(--k-corps);
font-size: 12px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.crm-b svg { width: 14px; height: 14px; }
.crm-b:hover { background: var(--k-surface-2); }
.crm-b--fort {
background: var(--k-accent);
border-color: var(--k-accent);
color: var(--k-surface);
box-shadow: var(--k-ombre);
}
.crm[data-crm="chantier"] .crm-b--fort,
.crm[data-crm="console"] .crm-b--fort { color: #111; }
.crm-b--nu { border-color: transparent; background: transparent; color: var(--k-encre-2); }
.crm-b--nu:hover { background: var(--k-surface-2); }
/* --- etiquettes d'etat --------------------------------------------------- */
.crm-e {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 7px;
border-radius: var(--k-r-bouton);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .01em;
white-space: nowrap;
border: 1px solid transparent;
}
.crm-e::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.crm-e--ok { color: var(--k-ok); background: color-mix(in srgb, var(--k-ok) 12%, transparent); }
.crm-e--attente{ color: var(--k-alerte); background: color-mix(in srgb, var(--k-alerte) 14%, transparent); }
.crm-e--ko { color: var(--k-danger); background: color-mix(in srgb, var(--k-danger) 12%, transparent); }
.crm-e--neutre { color: var(--k-encre-3); background: color-mix(in srgb, var(--k-encre-3) 12%, transparent); }
/* --- tableau ------------------------------------------------------------- */
.crm-t { width: 100%; border-collapse: collapse; background: var(--k-surface); }
.crm-t th {
padding: 8px var(--k-pad);
text-align: left;
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--k-caps);
color: var(--k-encre-3);
border-bottom: 1px solid var(--k-trait);
white-space: nowrap;
}
.crm-t td {
height: var(--k-ligne);
padding: 4px var(--k-pad);
border-bottom: 1px solid var(--k-trait);
vertical-align: middle;
white-space: nowrap;
}
.crm-t tbody tr:hover { background: var(--k-surface-2); }
.crm-t__ref { font-family: var(--k-chiffres); font-size: 11.5px; color: var(--k-encre-3); }
.crm-t__nom { font-weight: 600; }
.crm-t__num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.crm-cadre { border: 1px solid var(--k-trait); border-radius: var(--k-r); overflow: hidden; background: var(--k-surface); box-shadow: var(--k-ombre); }
/* --- pied de liste ------------------------------------------------------- */
.crm-pied {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px var(--k-pad);
border-top: 1px solid var(--k-trait);
background: var(--k-surface-2);
font-size: 11.5px;
color: var(--k-encre-3);
}
.crm-pied nav { display: flex; gap: 4px; }
.crm-pied nav span {
min-width: 25px; height: 25px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 6px;
border: 1px solid var(--k-trait);
border-radius: var(--k-r-bouton);
background: var(--k-surface);
font-size: 11.5px;
font-weight: 600;
color: var(--k-encre-2);
cursor: pointer;
}
.crm-pied nav span.c { background: var(--k-accent); border-color: var(--k-accent); color: var(--k-surface); }
.crm[data-crm="chantier"] .crm-pied nav span.c,
.crm[data-crm="console"] .crm-pied nav span.c { color: #111; }
/* --- panneaux ------------------------------------------------------------ */
.crm-p { border: 1px solid var(--k-trait); border-radius: var(--k-r); background: var(--k-surface); box-shadow: var(--k-ombre); }
.crm-p__tete {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px var(--k-pad);
border-bottom: 1px solid var(--k-trait);
}
.crm-p__tete h4 {
margin: 0;
font-family: var(--k-titre);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--k-caps);
color: var(--k-encre-2);
}
.crm-p__corps { padding: var(--k-pad); }
/* --- compteurs ----------------------------------------------------------- */
.crm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.crm-kpi {
padding: var(--k-pad);
border: 1px solid var(--k-trait);
border-radius: var(--k-r);
background: var(--k-surface);
box-shadow: var(--k-ombre);
}
.crm-kpi span {
display: block;
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--k-caps);
color: var(--k-encre-3);
}
.crm-kpi strong {
display: block;
margin-top: 5px;
font-family: var(--k-titre);
font-size: 25px;
font-weight: 800;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.crm-kpi em { display: block; margin-top: 5px; font-style: normal; font-size: 11px; color: var(--k-encre-3); }
.crm-kpi em b { font-weight: 700; }
.crm-kpi em .h { color: var(--k-ok); }
.crm-kpi em .b { color: var(--k-danger); }
/* --- fiche : deux colonnes ---------------------------------------------- */
.crm-fiche { display: grid; grid-template-columns: 1fr 300px; gap: 12px; align-items: start; }
.crm-def { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0; font-size: 12.5px; }
.crm-def dt { color: var(--k-encre-3); }
.crm-def dd { margin: 0; font-weight: 600; }
.crm-fil-actu { list-style: none; margin: 0; padding: 0; }
.crm-fil-actu li { display: flex; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--k-trait); font-size: 12px; }
.crm-fil-actu li:last-child { border-bottom: none; }
.crm-fil-actu i {
width: 22px; height: 22px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--k-r-bouton);
background: var(--k-surface-2);
color: var(--k-encre-3);
font-style: normal;
}
.crm-fil-actu i svg { width: 12px; height: 12px; }
.crm-fil-actu p { margin: 0; color: var(--k-encre-2); }
.crm-fil-actu b { color: var(--k-encre); font-weight: 600; }
.crm-fil-actu small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--k-encre-3); }
.crm-jauge { height: 6px; border-radius: var(--k-r-bouton); background: var(--k-surface-2); overflow: hidden; }
.crm-jauge i { display: block; height: 100%; width: var(--p); background: var(--k-accent); }
.crm-etapes { display: flex; gap: 4px; margin-top: 8px; }
.crm-etapes span {
flex: 1;
padding: 5px 6px;
border-radius: var(--k-r-bouton);
background: var(--k-surface-2);
color: var(--k-encre-3);
font-size: 9.5px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
letter-spacing: .03em;
}
.crm-etapes span.f { background: color-mix(in srgb, var(--k-ok) 16%, transparent); color: var(--k-ok); }
.crm-etapes span.c { background: var(--k-accent); color: var(--k-surface); }
.crm[data-crm="chantier"] .crm-etapes span.c,
.crm[data-crm="console"] .crm-etapes span.c { color: #111; }
/* --- histogramme --------------------------------------------------------- */
.crm-barres { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.crm-barres div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; height: 100%; }
.crm-barres i { display: block; width: 100%; height: var(--h); background: color-mix(in srgb, var(--k-accent) 30%, transparent); border-radius: var(--k-r-bouton) var(--k-r-bouton) 0 0; }
.crm-barres div.c i { background: var(--k-accent); }
.crm-barres small { font-size: 9.5px; color: var(--k-encre-3); }
/* ---------------------------------------------------------------------------
SIGNATURES PROPRES A CHAQUE PEAU
C'est ce qui fait qu'on ne les confond pas : chacune a un detail que les
autres n'ont pas.
------------------------------------------------------------------------ */
/* graphite : filet ocre a gauche de la rubrique active, references en mono */
.crm[data-crm="graphite"] .crm__cote a[aria-current] {
box-shadow: inset 2px 0 0 var(--k-accent);
background: rgba(255,255,255,.06);
}
.crm[data-crm="graphite"] .crm-t tbody tr:first-child td { border-top: none; }
/* chantier : bande de signalisation en tete, bordures epaisses, ombre dure */
.crm[data-crm="chantier"] .crm__tete {
border-bottom: 2px solid #111;
background:
repeating-linear-gradient(-45deg, #f5c400 0 9px, #111 9px 18px) top / 100% 4px no-repeat,
var(--k-surface);
padding-top: 4px;
}
.crm[data-crm="chantier"] .crm-cadre,
.crm[data-crm="chantier"] .crm-p,
.crm[data-crm="chantier"] .crm-kpi { border: 2px solid #111; }
.crm[data-crm="chantier"] .crm-b { border: 2px solid #111; font-weight: 700; height: 38px; font-family: var(--k-titre); font-size: 14px; letter-spacing: .01em; }
.crm[data-crm="chantier"] .crm-e { border: 1.5px solid currentColor; font-weight: 800; }
.crm[data-crm="chantier"] .crm__cote a[aria-current] { background: var(--k-accent); color: #111; font-weight: 800; }
.crm[data-crm="chantier"] .crm-t th { border-bottom: 2px solid #111; }
/* console : separation par le fond, pas de bordure ; chiffres en monospace */
.crm[data-crm="console"] .crm-cadre,
.crm[data-crm="console"] .crm-p,
.crm[data-crm="console"] .crm-kpi { border-color: transparent; }
.crm[data-crm="console"] .crm-t td,
.crm[data-crm="console"] .crm-t th { border-bottom-color: var(--k-trait); }
.crm[data-crm="console"] .crm-t tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--k-surface-2) 55%, transparent); }
.crm[data-crm="console"] .crm-kpi strong,
.crm[data-crm="console"] .crm-t__num,
.crm[data-crm="console"] .crm-t__ref { font-family: var(--k-chiffres); letter-spacing: -.02em; }
.crm[data-crm="console"] .crm__cote a[aria-current] { background: var(--k-accent-2); color: var(--k-accent); }
.crm[data-crm="console"] .crm-e { border-radius: 2px; }
/* papier : filets fins, titres en serif, capitales espacees, aucun aplat */
.crm[data-crm="papier"] .crm__cote { border-right: 1px solid var(--k-trait); }
.crm[data-crm="papier"] .crm__marque { color: var(--k-encre); font-family: var(--k-titre); font-weight: 700; }
.crm[data-crm="papier"] .crm__cote a:hover { background: var(--k-surface-2); color: var(--k-encre); }
.crm[data-crm="papier"] .crm__cote a[aria-current] {
background: transparent;
color: var(--k-accent);
font-weight: 600;
box-shadow: inset 2px 0 0 var(--k-accent);
}
.crm[data-crm="papier"] .crm__moi span { color: #fff; }
.crm[data-crm="papier"] .crm-cadre,
.crm[data-crm="papier"] .crm-p,
.crm[data-crm="papier"] .crm-kpi { border-color: var(--k-trait); }
.crm[data-crm="papier"] .crm-kpi strong { font-weight: 400; }
.crm[data-crm="papier"] .crm-t th { font-weight: 600; }
.crm[data-crm="papier"] .crm-p__tete h4 { font-weight: 600; }
/* --- ardoise : produit logiciel, sobre et aere --------------------------- */
.crm[data-crm="ardoise"] {
--k-fond: #f4f6f9;
--k-surface: #ffffff;
--k-surface-2: #f7f9fb;
--k-cote: #1a2233;
--k-cote-txt: #98a5bb;
--k-encre: #131b2b;
--k-encre-2: #4a566b;
--k-encre-3: #8290a6;
--k-trait: #e4e9f0;
--k-accent: #4436c4;
--k-accent-2: #ecebfb;
--k-ok: #157f52;
--k-alerte: #b45309;
--k-danger: #c0322b;
--k-r: 10px;
--k-r-bouton: 7px;
--k-ombre: 0 1px 2px rgba(19,27,43,.05), 0 4px 12px rgba(19,27,43,.05);
--k-ligne: 44px;
--k-pad: 18px;
--k-caps: .05em;
--k-titre: "Manrope", var(--font-ui);
--k-corps: "Manrope", var(--font-ui);
--k-chiffres: "Manrope", var(--font-ui);
}
/* --- encre : editorial, noir et blanc plus un rouge ---------------------- */
.crm[data-crm="encre"] {
--k-fond: #ffffff;
--k-surface: #ffffff;
--k-surface-2: #f2f2f0;
--k-cote: #0a0a0a;
--k-cote-txt: #9a9a97;
--k-encre: #0a0a0a;
--k-encre-2: #3a3a38;
--k-encre-3: #767672;
--k-trait: #0a0a0a;
--k-accent: #d92a1c;
--k-accent-2: #fdeceb;
--k-ok: #0a0a0a;
--k-alerte: #8a6a00;
--k-danger: #d92a1c;
--k-r: 0;
--k-r-bouton: 0;
--k-ombre: none;
--k-ligne: 42px;
--k-pad: 18px;
--k-caps: .16em;
--k-titre: "Space Grotesk", var(--font-ui);
--k-corps: "Space Grotesk", var(--font-ui);
--k-chiffres: "Space Grotesk", var(--font-ui);
}
/* --- menthe : services, blanc pur, separation par l'ombre seule ---------- */
.crm[data-crm="menthe"] {
--k-fond: #eef4f3;
--k-surface: #ffffff;
--k-surface-2: #f4f9f8;
--k-cote: #ffffff;
--k-cote-txt: #5b6b6c;
--k-encre: #10201f;
--k-encre-2: #47605e;
--k-encre-3: #7b918f;
--k-trait: #dfeae8;
--k-accent: #0f8f86;
--k-accent-2: #dff2f0;
--k-ok: #0f8f86;
--k-alerte: #b4740c;
--k-danger: #c2453c;
--k-r: 14px;
--k-r-bouton: 10px;
--k-ombre: 0 2px 4px rgba(16,32,31,.04), 0 8px 24px rgba(16,32,31,.06);
--k-ligne: 48px;
--k-pad: 20px;
--k-caps: .06em;
--k-titre: "Figtree", var(--font-ui);
--k-corps: "Figtree", var(--font-ui);
--k-chiffres: "Figtree", var(--font-ui);
}
/* --- cuivre : artisanat haut de gamme, sombre chaud --------------------- */
.crm[data-crm="cuivre"] {
--k-fond: #17130f;
--k-surface: #201a15;
--k-surface-2: #2a221b;
--k-cote: #100d0a;
--k-cote-txt: #9c8a78;
--k-encre: #f2e9df;
--k-encre-2: #c2b1a0;
--k-encre-3: #8d7c6c;
--k-trait: #33291f;
--k-accent: #d0803f;
--k-accent-2: #33241a;
--k-ok: #7fb069;
--k-alerte: #e0a458;
--k-danger: #d9635a;
--k-r: 8px;
--k-r-bouton: 6px;
--k-ombre: none;
--k-ligne: 42px;
--k-pad: 18px;
--k-caps: .12em;
--k-titre: "Instrument Serif", "Iowan Old Style", Georgia, serif;
--k-corps: "Karla", var(--font-ui);
--k-chiffres: "Instrument Serif", Georgia, serif;
}
/* ---------------------------------------------------------------------------
SIGNATURES DES QUATRE NOUVELLES PEAUX
------------------------------------------------------------------------ */
/* ardoise : pastille indigo pleine sur la rubrique active, cadres sans bordure */
.crm[data-crm="ardoise"] .crm__cote a[aria-current] { background: var(--k-accent); color: #fff; }
.crm[data-crm="ardoise"] .crm-cadre,
.crm[data-crm="ardoise"] .crm-p,
.crm[data-crm="ardoise"] .crm-kpi { border-color: transparent; }
.crm[data-crm="ardoise"] .crm-t th { background: transparent; }
/* encre : filets epais, capitales tres espacees, un seul rouge dans l'ecran */
.crm[data-crm="encre"] .crm-cadre,
.crm[data-crm="encre"] .crm-p,
.crm[data-crm="encre"] .crm-kpi { border-width: 1.5px; }
.crm[data-crm="encre"] .crm-t th { border-bottom-width: 1.5px; background: transparent; }
.crm[data-crm="encre"] .crm-t td { border-bottom-color: #d8d8d4; }
.crm[data-crm="encre"] .crm-p__tete { border-bottom-width: 1.5px; }
.crm[data-crm="encre"] .crm__cote a[aria-current] { background: var(--k-accent); color: #fff; }
.crm[data-crm="encre"] .crm-kpi strong { font-size: 30px; letter-spacing: -.04em; }
.crm[data-crm="encre"] .crm-e { background: transparent; border: 1.5px solid currentColor; }
.crm[data-crm="encre"] .crm-e::before { display: none; }
/* menthe : aucune bordure, tout repose sur l'ombre et le blanc */
.crm[data-crm="menthe"] .crm__cote { border-right: 1px solid var(--k-trait); }
.crm[data-crm="menthe"] .crm__marque { color: var(--k-encre); }
.crm[data-crm="menthe"] .crm__cote a:hover { background: var(--k-surface-2); color: var(--k-encre); }
.crm[data-crm="menthe"] .crm__cote a[aria-current] { background: var(--k-accent-2); color: var(--k-accent); }
.crm[data-crm="menthe"] .crm__moi span { color: #fff; }
.crm[data-crm="menthe"] .crm-cadre,
.crm[data-crm="menthe"] .crm-p,
.crm[data-crm="menthe"] .crm-kpi { border-color: transparent; }
.crm[data-crm="menthe"] .crm-t th { background: transparent; border-bottom-color: var(--k-trait); }
.crm[data-crm="menthe"] .crm-t td { border-bottom-color: var(--k-surface-2); }
.crm[data-crm="menthe"] .crm-e { border-radius: 20px; padding: 3px 10px; }
/* cuivre : liser cuivre a gauche, chiffres en serif, aucun blanc pur */
.crm[data-crm="cuivre"] .crm__cote a[aria-current] {
background: var(--k-accent-2);
color: var(--k-accent);
box-shadow: inset 2px 0 0 var(--k-accent);
}
.crm[data-crm="cuivre"] .crm-kpi strong,
.crm[data-crm="cuivre"] .crm-t__num { font-family: var(--k-chiffres); font-weight: 400; }
.crm[data-crm="cuivre"] .crm-b--fort { color: #17130f; }
.crm[data-crm="cuivre"] .crm-choix span.c,
.crm[data-crm="cuivre"] .crm-etapes span.c { color: #17130f; }
/* ---------------------------------------------------------------------------
STYLES DES ECRANS
(auparavant portes par les annotations, sortis pour etre partages par
toutes les peaux)
------------------------------------------------------------------------ */
/* --- ecran mobile de terrain -------------------------------------------- */
.crm--mobile { flex-direction: column; width: 100%; max-width: 380px; height: 620px; margin: 0 auto; }
.crm-m__tete {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px var(--k-pad);
flex: none;
background: var(--k-surface);
border-bottom: 1px solid var(--k-trait);
}
.crm-m__tete small { display: block; font-size: 11px; color: var(--k-encre-3); }
.crm-m__tete strong { font-family: var(--k-titre); font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.crm-m__corps { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.crm-m__carte {
padding: 14px;
border: 1px solid var(--k-trait);
border-radius: var(--k-r);
background: var(--k-surface);
box-shadow: var(--k-ombre);
}
.crm-m__heure {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
font-size: 15px; font-weight: 800;
font-variant-numeric: tabular-nums;
margin-bottom: 6px;
}
.crm-m__carte strong { display: block; font-size: 17px; font-weight: 800; }
.crm-m__carte p { margin: 2px 0 0; font-size: 13px; color: var(--k-encre-2); }
.crm-m__op { font-weight: 600; color: var(--k-encre) !important; }
.crm-m__carte .crm-b { margin-top: 12px; width: 100%; height: 44px; font-size: 14px; }
.crm-m__actions { display: flex; gap: 8px; }
.crm-m__actions .crm-b { flex: 1; }
.crm-m__carte.est-faite { opacity: .62; }
.crm-m__carte.est-courante { border-color: var(--k-accent); border-width: 2px; }
.crm-m__bas { display: flex; flex: none; padding: 6px 4px; background: var(--k-cote); border-top: 1px solid var(--k-trait); }
.crm-m__bas a {
display: flex; flex-direction: column; align-items: center; gap: 3px;
flex: 1; padding: 8px 2px;
border-radius: var(--k-r-bouton);
color: var(--k-cote-txt);
text-decoration: none;
font-size: 10.5px; font-weight: 700;
}
.crm-m__bas svg { width: 21px; height: 21px; }
.crm-m__bas a[aria-current] { color: var(--k-accent); }
.crm[data-crm="chantier"] .crm-m__carte { border-width: 2px; }
.crm[data-crm="chantier"] .crm-m__carte.est-courante { border-width: 3px; }
.crm[data-crm="chantier"] .crm-m__carte .crm-b { height: 48px; }
/* --- formulaire ---------------------------------------------------------- */
.crm-form { display: flex; flex-direction: column; gap: 10px; }
.crm-form label { display: flex; flex-direction: column; gap: 4px; }
.crm-form > label > span, .crm-form__deux span {
font-size: 9.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: var(--k-caps); color: var(--k-encre-3);
}
.crm-form input {
height: 34px;
padding: 0 10px;
border: 1px solid var(--k-trait);
border-radius: var(--k-r-bouton);
background: var(--k-surface-2);
color: var(--k-encre);
font-family: var(--k-corps);
font-size: 13px;
}
.crm-form input:focus { outline: 2px solid var(--k-accent); outline-offset: -1px; }
.crm-form__deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.crm-choix { display: flex; flex-wrap: wrap; gap: 5px; }
.crm-choix span {
padding: 6px 11px;
border: 1px solid var(--k-trait);
border-radius: var(--k-r-bouton);
font-size: 11.5px; font-weight: 600;
text-transform: none; letter-spacing: 0;
color: var(--k-encre-2);
cursor: pointer;
}
.crm-choix span.c { background: var(--k-accent); border-color: var(--k-accent); color: var(--k-surface); }
.crm[data-crm="chantier"] .crm-choix span.c,
.crm[data-crm="console"] .crm-choix span.c { color: #111; }
/* --- planning ------------------------------------------------------------ */
.crm-plan { display: grid; grid-template-columns: 52px repeat(5, 1fr); gap: 1px; background: var(--k-trait); border: 1px solid var(--k-trait); border-radius: var(--k-r); overflow: hidden; }
.crm-plan > * { background: var(--k-surface); padding: 6px 8px; }
.crm-plan__jour {
font-size: 9.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: var(--k-caps); color: var(--k-encre-3);
background: var(--k-surface-2);
}
.crm-plan__h { font-size: 10.5px; color: var(--k-encre-3); background: var(--k-surface-2); font-variant-numeric: tabular-nums; }
.crm-plan__c { min-height: 46px; }
.crm-plan__ev {
display: block;
padding: 5px 7px;
border-radius: var(--k-r-bouton);
background: var(--k-accent-2);
border-left: 3px solid var(--k-accent);
font-size: 10.5px;
line-height: 1.3;
}
.crm-plan__ev b { display: block; font-weight: 700; color: var(--k-encre); }
.crm-plan__ev small { color: var(--k-encre-3); }
.crm-plan__ev.v { background: color-mix(in srgb, var(--k-ok) 14%, transparent); border-left-color: var(--k-ok); }
.crm-plan__ev.a { background: color-mix(in srgb, var(--k-alerte) 14%, transparent); border-left-color: var(--k-alerte); }
/* --- documents ----------------------------------------------------------- */
.crm-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.crm-doc {
border: 1px solid var(--k-trait);
border-radius: var(--k-r);
background: var(--k-surface);
box-shadow: var(--k-ombre);
overflow: hidden;
}
.crm-doc__vue {
position: relative;
display: flex; align-items: center; justify-content: center;
aspect-ratio: 4 / 3;
background: var(--k-surface-2);
color: var(--k-encre-3);
}
.crm-doc__vue svg { width: 26px; height: 26px; }
.crm-doc__vue .crm-e { position: absolute; top: 7px; left: 7px; }
.crm-doc__feuille { width: 58%; height: 78%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.14); padding: 9%; }
.crm-doc__feuille i { display: block; height: 3px; margin-bottom: 4px; background: #d8dde4; border-radius: 1px; }
.crm-doc__feuille i:first-child { background: var(--k-accent); width: 55%; height: 5px; margin-bottom: 7px; }
.crm-doc__pied { padding: 8px 10px; }
.crm-doc__pied b { display: block; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-doc__pied small { font-size: 10.5px; color: var(--k-encre-3); }
.crm-doc--vide {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
border-style: dashed;
background: transparent;
color: var(--k-encre-3);
font-size: 11.5px;
min-height: 100%;
padding: 18px;
text-align: center;
}
.crm-doc--vide svg { width: 22px; height: 22px; }
/* --- tableau de comparaison des peaux ----------------------------------- */
.crm-compare { width: 100%; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: auto; background: var(--c-surface); }
.crm-compare .crm-t tbody td:first-child { width: 132px; }
.crm-compare .crm-t td { color: var(--c-text-soft); font-size: 12px; }
.crm-compare .crm-t b { color: var(--c-text); }
/* ===========================================================================
DECLARATION DES PEAUX
Chaque peau porte son identite ET son vocabulaire metier : une console de
supervision ne parle pas de la meme chose qu'un cabinet d'etudes.
Le build croise ces peaux avec les gabarits @ecran ci-dessous.
======================================================================== */
/* @peau graphite
@nom Graphite
@usage 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.
@marque ATELIER
@point .
@user Julien Krissi
@ini JK
@objet dossier
@objets Dossiers
@prefixe 2026-
@end */
/* @peau chantier
@nom Chantier
@usage 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.
@marque CHANTIER
@point .
@user Sophie Martin
@ini SM
@objet chantier
@objets Chantiers
@prefixe CH-
@end */
/* @peau console
@nom Console
@usage 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.
@marque console
@point _
@user julien@jabsdev.fr
@ini JK
@objet dossier
@objets Dossiers
@prefixe 2026-
@end */
/* @peau papier
@nom Papier
@usage 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.
@marque Maison Verte
@point
@user Julien Krissi
@ini JK
@objet etude
@objets Etudes
@prefixe MV-2026-
@end */
/* @peau ardoise
@nom Ardoise
@usage 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.
@marque Pilotis
@point
@user Julien Krissi
@ini JK
@objet dossier
@objets Dossiers
@prefixe PLT-
@end */
/* @peau encre
@nom Encre
@usage 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.
@marque REGISTRE
@point
@user Julien Krissi
@ini JK
@objet dossier
@objets Dossiers
@prefixe N°
@end */
/* @peau menthe
@nom Menthe
@usage 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.
@marque Alizee
@point
@user Sophie Martin
@ini SM
@objet accompagnement
@objets Suivis
@prefixe AL-
@end */
/* @peau cuivre
@nom Cuivre
@usage 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.
@marque Fonderie
@point
@user Julien Krissi
@ini JK
@objet chantier
@objets Chantiers
@prefixe FD-
@end */
/* ===========================================================================
GABARITS D'ECRAN
Ecrits une fois. Le build les decline dans chaque peau : les jetons
{{peau}}, {{marque}}, {{objet}}... sont remplaces par les valeurs ci-dessus.
======================================================================== */
/* @ecran liste
@nom Liste
@usage 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.
@html
Tous 24
En cours 12
A relancer 5
{{icon:filtre}} Filtres
{{icon:download}} Exporter
Reference Client Commune Operation Etat Montant Pose
{{prefixe}}103 Krissi Julien Neuilly-sur-Marne PAC air/eau 11 kW Signe 4 280,00 24 sept. {{prefixe}}118 Martin Sophie Colombes Chauffe-eau 200 L Envoye 1 890,00 — {{prefixe}}121 Durand Paul Le Raincy Isolation combles Brouillon 12 400,00 — {{prefixe}}097 Bernard Alice Gagny PAC air/air 3 splits Sans reponse 6 750,00 — {{prefixe}}092 Lefevre Marc Chelles Chaudiere gaz THPE Signe 3 950,00 2 oct. {{prefixe}}088 Nguyen Thi Bondy Ballon thermodynamique Envoye 2 340,00 —
1 a 6 sur 24 — 31 610,00 EUR au total ‹ 1 2 3 ›
@end */
/* @ecran fiche
@nom Fiche
@usage 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.
@html
Contact Visite Devis Signature Pose Facture
Client et chantier {{icon:pencil}} Modifier
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 kW PAC-11-M 3 200,00 Depose et evacuation cuve fioul DEP-CUV 560,00 Main d'oeuvre, 2 journees MO-J 800,00
Reste a charge
1 880,00 EUR
Total TTC 4 280,00
MaPrimeRenov 2 000,00
CEE 400,00
Pieces 4 / 6
{{icon:check}} {{icon:check}} {{icon:plus}} RIB a fournir
Requis pour le versement
Activite
{{icon:signature}} Devis signe par le client
12 aout a 14:32 {{icon:mail}} Devis envoye par courriel
9 aout a 17:05
@end */
/* @ecran bord
@nom Tableau de bord
@usage 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.
@html
Chiffre d'affaires 48 250 +12,4 % vs aout
En attente 17 -3 sur 7 jours
Taux de signature 62 % stable sur 3 mois
Delai moyen 4,2 j -0,6 j vs aout
Chiffre d'affaires mensuel en milliers d'euros
A traiter aujourd'hui 5
{{icon:alerte}} {{prefixe}}097 sans reponse
Envoye il y a 14 jours {{icon:file}} Facture {{prefixe}}118 a emettre
Chantier termine le 2 septembre {{icon:archive}} {{prefixe}}121 incomplet
RIB et justificatif manquants {{icon:calendar}} Visite chez Bernard Alice
Demain 10:00 — Gagny
@end */
/* @ecran saisie
@nom Saisie
@usage 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.
@html
{{objets}} / Nouveau
Annuler
Creer le {{objet}}
Recapitulatif
Reference {{prefixe}}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.
@end */
/* @ecran planning
@nom Planning
@usage 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.
@html
Lun 7
Mar 8
Mer 9
Jeu 10
Ven 11
08:00
Pose PAC Krissi — Neuilly
Entretien Martin — Colombes
Pose ballon Nguyen — Bondy
10:00
Pose PAC suite
Visite technique Durand — Le Raincy
Pose ballon suite
Depannage Bernard — Gagny
14:00
Metre Lefevre — Chelles
Depannage urgence — Bondy
Mise en service Krissi — Neuilly
16:00
Livraison depot
Reunion equipe bureau
@end */
/* @ecran documents
@nom Documents
@usage 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.
@html
4 pieces sur 6
RIB et justificatif de domicile manquants
Incomplet
Devis signe.pdf 248 Ko — 12 aout
Avis d'imposition.pdf 96 Ko — 9 aout
{{icon:image}}Valide
Photo compteur.jpg 1,1 Mo — 9 aout
Mandat MaPrimeRenov.pdf 84 Ko — hier
{{icon:plus}}RIB Requis pour le versement
{{icon:plus}}Justificatif de domicile Moins de 3 mois
@end */
/* ===========================================================================
MODE D'EMPLOI
======================================================================== */
/* @v CRM-Z1
@nom Ce qui distingue les huit peaux
@usage 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.
@large
@html
graphite chantier console papier ardoise encre menthe cuivre
Registre Production Terrain Supervision Cabinet Produit SaaS Editorial Services Haut de gamme Fond Beige froid Gris neutre Bleu nuit Creme Bleu-gris Blanc pur Vert d'eau Brun sombre Accent Ocre brule Jaune securite Lime Vert foret Indigo Rouge unique Sarcelle Terracotta Separation Bordure 1 px Bordure 2 px + ombre dure Fond Filet fin Ombre douce Filet 1,5 px Ombre seule Bordure sombre Rayon 2 px 0 6 px 3 px 10 px 0 14 px 8 px Titres Sans 800 Sans 800 Sans 800 Serif 400 Sans 800 Sans 800 Sans 800 Serif 400 Ligne 34 px 52 px 32 px 44 px 44 px 42 px 48 px 42 px Signature Filet ocre Bande de signalisation Lignes alternees, monospace Aucun aplat Pastille pleine Capitales espacees Zero bordure Chiffres en serif
@tw un tableau de comparaison, pas un composant
@end */
/* @endv */
/* @v CRM-Z2
@nom Creer sa propre peau
@usage 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.
@large
@html
/* 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.
@tw etendre crm.css, ne jamais surcharger un ecran
@end */
/* @endv */
/* @v CRM-Z3
@nom Les polices des huit peaux
@usage 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.
@large
@html
Instrument Sans graphite Grotesque neutre, chiffres etroits. Un outil qui se fait oublier.
Barlow Condensed chantier Condensee : plus de mots par ligne sur un ecran tenu a bout de bras.
IBM Plex Sans console Avec IBM Plex Mono pour les chiffres, qui s'alignent colonne par colonne.
Fraunces papier Serif a axe variable pour les titres, Instrument Sans pour le texte.
Manrope ardoise Geometrique aux terminaisons douces, le registre attendu d'un abonnement.
Space Grotesk encre Grotesque a caractere, qui tient les grandes capitales espacees.
Figtree menthe Humaniste ronde, chaleureuse sans etre enfantine.
Instrument Serif cuivre Serif de titrage, avec Karla pour le texte et les montants en serif.
@tw --k-titre / --k-corps / --k-chiffres, trois jetons par peau
@end */
.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;
}
/* @endv */
/* @v CRM-Z4
@nom Charger les polices d'une seule peau
@usage 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.
@large
@html
<!-- 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.
@tw preconnect + display=swap + une seule famille par projet
@end */
/* @endv */