/* ════════════════════════════════════════════════════════════════════════════ * KPI COMPACT — layout horizontal unifié pour TOUTES les KPI V1 * ════════════════════════════════════════════════════════════════════════════ * * Refonte des cartes "synthèse" de chaque module pour homogénéité visuelle : * - icône en pastille à gauche (au lieu d'emoji nu au-dessus) * - texte (valeur + label + sous-titre) stacké à droite * - hauteur ~60-66px (au lieu de 120-130px) — gain ~50% * - grille auto-fit `minmax(140px, 1fr)` → 8 cartes en 1 ligne dès 1180px * * Namespaces ciblés (11) : * aff2 · biz2 · cli2 · cong2 · devis2 · dir2 · dv2 · fact2 · me2 · sal2 · temps2 * * Sub-element naming : * Style A : __icon __value __label __sub (+ __unit pour cong/temps) * Style B : __ico __val __lbl __sub (+ __unit pour me, + __head/__yoy pour dir) * * !important nécessaire : chaque module *.js injecte ses propres styles via * `document.head.appendChild(style)` APRÈS le parsing du , ce qui leur * donne la priorité cascade par défaut. !important nivelle le terrain pour * que notre layout compact s'applique partout. * ════════════════════════════════════════════════════════════════════════════ */ /* ─── Container grid ─────────────────────────────────────────────────── */ .aff2-kpis, .biz2-kpis, .cli2-kpis, .cong2-kpis, .devis2-kpis, .dir2-kpis, .dv2-kpis, .fact2-kpis, .me2-kpis, .sal2-kpis, .temps2-kpis { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; gap: 8px !important; margin-bottom: 14px !important; } /* ─── Carte KPI ──────────────────────────────────────────────────────── */ .aff2-kpi, .biz2-kpi, .cli2-kpi, .cong2-kpi, .devis2-kpi, .dir2-kpi, .dv2-kpi, .fact2-kpi, .me2-kpi, .sal2-kpi, .temps2-kpi { background: #fff !important; border-radius: 12px !important; padding: 10px 12px 10px 18px !important; /* +6px à gauche pour laisser respirer le pill d'accent */ border: 1px solid rgba(11, 33, 64, .06) !important; box-shadow: 0 1px 4px rgba(11, 33, 64, .04) !important; position: relative !important; overflow: hidden !important; display: grid !important; grid-template-columns: 32px 1fr !important; grid-template-rows: auto auto auto !important; column-gap: 10px !important; row-gap: 0 !important; align-items: center !important; min-height: 0 !important; transition: all .2s cubic-bezier(.4, 0, .2, 1); } /* Barre d'accent verticale gauche en PILL (capsule arrondie, inset des bords) */ .aff2-kpi::before, .biz2-kpi::before, .cli2-kpi::before, .cong2-kpi::before, .devis2-kpi::before, .dir2-kpi::before, .dv2-kpi::before, .fact2-kpi::before, .me2-kpi::before, .sal2-kpi::before, .temps2-kpi::before { content: '' !important; position: absolute !important; left: 6px !important; top: 10px !important; bottom: 10px !important; width: 4px !important; background: var(--accent, #1d70b7) !important; border-radius: 999px !important; box-shadow: 0 1px 4px color-mix(in srgb, var(--accent, #1d70b7) 35%, transparent) !important; } /* Halo décoratif retiré dans le compact (gain de respiration) */ .aff2-kpi::after, .biz2-kpi::after, .cli2-kpi::after, .cong2-kpi::after, .devis2-kpi::after, .dir2-kpi::after, .dv2-kpi::after, .fact2-kpi::after, .me2-kpi::after, .sal2-kpi::after, .temps2-kpi::after { display: none !important; } /* Hover discret */ .aff2-kpi:hover, .biz2-kpi:hover, .cli2-kpi:hover, .cong2-kpi:hover, .devis2-kpi:hover, .dir2-kpi:hover, .dv2-kpi:hover, .fact2-kpi:hover, .me2-kpi:hover, .sal2-kpi:hover, .temps2-kpi:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(11, 33, 64, .08) !important; } /* ─── Icône (Style A: __icon, Style B: __ico) ────────────────────────── */ .aff2-kpi__icon, .biz2-kpi__icon, .cli2-kpi__icon, .cong2-kpi__icon, .devis2-kpi__icon, .dv2-kpi__icon, .fact2-kpi__icon, .temps2-kpi__icon, .dir2-kpi__ico, .me2-kpi__ico, .sal2-kpi__ico, .dir2-kpi__head { grid-column: 1 !important; grid-row: 1 / span 3 !important; align-self: center !important; width: 30px !important; height: 30px !important; font-size: 15px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: color-mix(in srgb, var(--accent, #1d70b7) 12%, white) !important; border-radius: 8px !important; margin: 0 !important; opacity: 1 !important; padding: 0 !important; } /* dir2-kpi__yoy : chip "+12%" repositionné à droite du value */ .dir2-kpi__yoy { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; align-self: center !important; font-size: 9.5px !important; font-weight: 700 !important; padding: 1px 5px !important; border-radius: 4px !important; margin: 0 !important; } /* ─── Valeur (Style A: __value, Style B: __val) ──────────────────────── */ .aff2-kpi__value, .biz2-kpi__value, .cli2-kpi__value, .cong2-kpi__value, .devis2-kpi__value, .dv2-kpi__value, .fact2-kpi__value, .temps2-kpi__value, .dir2-kpi__val, .me2-kpi__val, .sal2-kpi__val { grid-column: 2 !important; grid-row: 1 !important; font-size: 16.5px !important; line-height: 1.1 !important; font-weight: 800 !important; color: #0B2140 !important; letter-spacing: -.02em !important; font-variant-numeric: tabular-nums !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 !important; } /* Unité optionnelle (cong2/temps2/me2) : suit la valeur inline, plus petite */ .cong2-kpi__unit, .temps2-kpi__unit, .me2-kpi__unit { font-size: 11px !important; font-weight: 700 !important; color: #6b7a8f !important; margin-left: 3px !important; } /* ─── Label (Style A: __label, Style B: __lbl) ───────────────────────── */ .aff2-kpi__label, .biz2-kpi__label, .cli2-kpi__label, .cong2-kpi__label, .devis2-kpi__label, .dv2-kpi__label, .fact2-kpi__label, .temps2-kpi__label, .dir2-kpi__lbl, .me2-kpi__lbl, .sal2-kpi__lbl { grid-column: 2 !important; grid-row: 2 !important; font-size: 9.5px !important; line-height: 1.2 !important; color: #6b7a8f !important; text-transform: uppercase !important; font-weight: 700 !important; letter-spacing: .05em !important; margin-top: 2px !important; margin-bottom: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ─── Sous-titre __sub ──────────────────────────────────────────────── */ .aff2-kpi__sub, .biz2-kpi__sub, .cli2-kpi__sub, .devis2-kpi__sub, .dv2-kpi__sub, .fact2-kpi__sub, .temps2-kpi__sub, .dir2-kpi__sub, .me2-kpi__sub, .sal2-kpi__sub { grid-column: 2 !important; grid-row: 3 !important; font-size: 9.5px !important; line-height: 1.2 !important; color: #94a3b8 !important; font-weight: 600 !important; margin-top: 0 !important; margin-bottom: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ─── Responsive : sur écran étroit, wrap propre + un peu plus de gap ── */ @media (max-width: 900px) { .aff2-kpis, .biz2-kpis, .cli2-kpis, .cong2-kpis, .devis2-kpis, .dir2-kpis, .dv2-kpis, .fact2-kpis, .me2-kpis, .sal2-kpis, .temps2-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: 10px !important; } }