diff --git a/ui/src/i18n/en.js b/ui/src/i18n/en.js
index 5926150..7200cc0 100644
--- a/ui/src/i18n/en.js
+++ b/ui/src/i18n/en.js
@@ -296,6 +296,8 @@ export default {
   'wizard.rule.nodeId': 'Use the colon-separated form, e.g. service:scm:git:internal',
 
   // 2026 redesign: project/system/api view keys
+  'common.collapseAll': "Collapse all",
+  'common.expandAll': "Expand all",
   'api.collapseAll': "Collapse all",
   'api.deprecated': "deprecated",
   'api.downloadOpenapi': "Download OpenAPI",
diff --git a/ui/src/i18n/fr.js b/ui/src/i18n/fr.js
index 8336550..e729290 100644
--- a/ui/src/i18n/fr.js
+++ b/ui/src/i18n/fr.js
@@ -295,6 +295,8 @@ export default {
   'wizard.rule.nodeId': 'Utilisez la forme séparée par des deux-points, ex. service:scm:git:internal',
 
   // 2026 redesign: project/system/api view keys
+  'common.collapseAll': "Tout réduire",
+  'common.expandAll': "Tout déplier",
   'api.collapseAll': "Tout replier",
   'api.deprecated': "déprécié",
   'api.downloadOpenapi': "Télécharger OpenAPI",
diff --git a/ui/src/views/HomeView.vue b/ui/src/views/HomeView.vue
index 472fb7a..fef2ad5 100644
--- a/ui/src/views/HomeView.vue
+++ b/ui/src/views/HomeView.vue
@@ -1,13 +1,15 @@
 <!--
   DashboardView — 2026 "Vibrant" home, faithful to the validated mockup
   (design/ligoj-2026-prototype.html → viewHome): page header + 4 KPI cards, a
-  toolbar (Cards/List · Functional/Technical · search · count) and a grid of
-  tool cards (branded glyph, name + kind, total/active counter, subscription
-  rows, health bar) or a list table.
+  toolbar (Cards/List · Functional/Technical · collapse-all · search · count)
+  and a grid of tool cards (branded glyph, name + kind, total/active counter,
+  health bar, a collapsible mini-table of subscriptions) or a list table.
 
   REAL data first: a single `rest/project?rows=100` call returns the projects
   WITH their subscriptions (each carrying its node), so we aggregate them by
-  tool (node) into the cards — real logos via the host's NodeIcon. When the
+  tool (node) into the cards — real logos via the host's NodeIcon. A batched
+  `rest/subscription/status/refresh` call then pulls each subscription's live
+  status, used for the per-card health bar and the row status dots. When the
   backend has no subscriptions (empty dev DB) we fall back to the mockup's demo
   dataset, flagged "Aperçu". Card chrome reused from ProjectDetailView.
 -->
@@ -30,6 +32,10 @@
     <div class="toolbar">
       <LjSegmented v-model="view" :options="viewOptions" />
       <LjSegmented v-model="cat" :options="catOptions" />
+      <button v-if="view === 'cards'" class="collapse-all" type="button" @click="toggleAll">
+        <v-icon size="16">{{ anyCollapsed ? 'mdi-unfold-more-horizontal' : 'mdi-unfold-less-horizontal' }}</v-icon>
+        <span>{{ anyCollapsed ? t('common.expandAll') : t('common.collapseAll') }}</span>
+      </button>
       <LjSearch v-model="query" placeholder="Rechercher un projet ou un outil…" />
       <span class="tb-sp" />
       <span class="tcount"><b>{{ filtered.length }}</b> outils · <b>{{ activeSum.toLocaleString('fr-FR') }}</b> souscriptions{{ isDemo ? ' actives' : '' }}</span>
@@ -37,27 +43,59 @@
 
     <!-- Cards -->
     <div v-if="view === 'cards'" class="grid">
-      <article v-for="(t, i) in filtered" :key="t.key" class="card" :style="{ '--c': colorOf(t, i), animationDelay: Math.min(i, 12) * 45 + 'ms' }" @click="$router.push('/project')">
+      <article v-for="(tool, i) in displayCards" :key="tool.key" class="card" :class="{ collapsed: collapsed.has(tool.key) }" :style="{ '--c': colorOf(tool, i), animationDelay: Math.min(i, 12) * 45 + 'ms' }">
+        <!-- Two-row header: long tool names can no longer get squeezed by the
+             health bar / counter sharing a single flex row. Row 1 = glyph +
+             name + collapse chevron; row 2 = kind + health bar + counter. -->
         <div class="card-head">
-          <span class="glyph" :class="{ noimg: failed.has(t.key) }" :data-letter="t.name[0]">
-            <NodeIcon v-if="t.nodeId" :node="{ id: t.nodeId }" />
-            <img v-else-if="!failed.has(t.key)" class="tool-logo" :src="toolLogo(t.name)" :alt="t.name" loading="lazy" @error="failed.add(t.key)" />
-          </span>
-          <div class="t"><div class="name">{{ t.name }}</div><div class="kind">{{ t.kind }}</div></div>
-          <div class="count">{{ t.total.toLocaleString('fr-FR') }}<small v-if="t.health != null"> / {{ t.active }}</small></div>
-        </div>
-        <div class="rows">
-          <div v-for="r in t.rows" :key="r.n" class="row">
-            <span class="st" :class="r.s" />
-            <span class="rn">{{ r.n }}</span>
-            <span v-if="r.p.length" class="pills"><span v-for="p in r.p" :key="p" class="pill" :class="{ cost: r.cost }">{{ p }}</span></span>
+          <div class="ch-row top">
+            <span class="glyph" :class="{ noimg: failed.has(tool.key) }" :data-letter="tool.name[0]">
+              <NodeIcon v-if="tool.nodeId" :node="{ id: tool.nodeId }" />
+              <img v-else-if="!failed.has(tool.key)" class="tool-logo" :src="toolLogo(tool.name)" :alt="tool.name" loading="lazy" @error="failed.add(tool.key)" />
+            </span>
+            <div class="name">{{ tool.name }}</div>
+            <button class="chev" type="button" :aria-label="collapsed.has(tool.key) ? t('common.expandAll') : t('common.collapseAll')" @click.stop="toggle(tool.key)">
+              <v-icon size="18">{{ collapsed.has(tool.key) ? 'mdi-chevron-down' : 'mdi-chevron-up' }}</v-icon>
+            </button>
+          </div>
+          <div class="ch-row bottom">
+            <div class="kind">{{ tool.kind }}</div>
+            <span class="health">
+              <template v-if="tool.health != null">
+                <span class="barh"><i :style="{ width: Math.round(tool.health * 100) + '%' }" /></span>
+                <span class="pct">{{ Math.round(tool.health * 100) }}%</span>
+              </template>
+              <span class="count">{{ tool.total.toLocaleString('fr-FR') }}<small v-if="tool.health != null"> / {{ tool.active }}</small></span>
+            </span>
           </div>
         </div>
-        <div class="card-foot">
-          <a class="morelink">{{ isDemo ? `Voir les ${t.total.toLocaleString('fr-FR')} →` : 'Ouvrir →' }}</a>
-          <span v-if="t.health != null" class="health"><span class="barh"><i :style="{ width: Math.round(t.health * 100) + '%' }" /></span>{{ Math.round(t.health * 100) }}%</span>
-          <span v-else class="health"><v-icon size="14">mdi-folder-multiple-outline</v-icon>{{ t.rows.length }}</span>
-        </div>
+        <v-expand-transition>
+          <div v-show="!collapsed.has(tool.key)">
+            <!-- Lightweight subscriptions mini-table (NOT VibrantDataTable —
+                 one instance per card would be far too heavy). The tool's own
+                 type/name are intentionally omitted: the whole card already
+                 represents that tool. Clicking a row opens its project. -->
+            <div class="mini">
+              <div class="mrow mhead">
+                <span class="m-st" />
+                <span class="m-name">{{ t('common.name') }}</span>
+                <span class="m-sum">{{ t('common.status') }}</span>
+              </div>
+              <div v-for="(r, j) in tool.shown" :key="r.projectId ?? r.label ?? j" class="mrow" :class="{ clickable: r.projectId != null }" @click="r.projectId != null && openProject(r.projectId)">
+                <LjStatus class="m-st" :status="ljStatus(r.status)" :tooltip="t('subscription.status.' + r.status)" />
+                <span class="m-name mlabel">{{ r.label }}</span>
+                <span class="m-sum">
+                  <span v-if="r.pills && r.pills.length" class="pills"><span v-for="p in r.pills" :key="p" class="pill" :class="{ cost: r.cost }">{{ p }}</span></span>
+                </span>
+              </div>
+              <div v-if="!tool.shown.length" class="mrow mempty">{{ t('common.noData') }}</div>
+              <div v-if="tool.extra" class="mrow mmore">+{{ tool.extra }} {{ t('project.detail.more') }}</div>
+            </div>
+            <div v-if="tool.health == null" class="card-foot">
+              <span class="health"><v-icon size="14">mdi-folder-multiple-outline</v-icon>{{ tool.rows.length }}</span>
+            </div>
+          </div>
+        </v-expand-transition>
       </article>
     </div>
 
@@ -83,12 +121,16 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
-import { useApi, useAuthStore, NodeIcon } from '@ligoj/host'
-import { VibrantDataTable, LjPageHeader, LjSegmented, LjSearch } from '@ligoj/host'
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useApi, useAuthStore, useI18nStore, NodeIcon, APP_BASE } from '@ligoj/host'
+import { VibrantDataTable, LjPageHeader, LjSegmented, LjSearch, LjStatus } from '@ligoj/host'
 
 const api = useApi()
 const auth = useAuthStore()
+const router = useRouter()
+const i18n = useI18nStore()
+const t = i18n.t
 
 const PALETTE = ['#2563eb', '#d33833', '#15a06a', '#7759c2', '#e6a019', '#0ea5a5', '#db2777', '#7c3aed', '#ff7a18', '#4e9bcd']
 const COLORS = { Jira: '#2563eb', Jenkins: '#d33833', LDAP: '#15a06a', SonarQube: '#4e9bcd', Confluence: '#e6a019', 'AWS EC2': '#7cb518', GitLab: '#7759c2', 'Provisioning AWS': '#ff7a18', 'Squash TM': '#e0524a' }
@@ -117,6 +159,12 @@ const DEMO_KPIS = [
 const projects = ref([])
 const projectsTotal = ref(0)
 const usersTotal = ref(0)
+// Live subscription statuses keyed by subscription id, and a flag set once
+// the (best-effort) refresh has run — until then we don't claim any health.
+const subStatus = ref(new Map())
+const healthReady = ref(false)
+const STATUS_CHUNK = 50
+
 async function load() {
   try {
     const data = await api.get('rest/project?rows=100&page=1&sidx=name&sord=asc')
@@ -129,11 +177,52 @@ async function load() {
     const u = await api.get('rest/system/user?rows=1&page=1')
     usersTotal.value = u?.recordsTotal ?? (Array.isArray(u?.data) ? u.data.length : 0)
   } catch { usersTotal.value = 0 }
+
+  await loadStatuses()
 }
+
+/* Pull each subscription's live status in a single batched pass (chunked so
+   the query string stays well under URL limits). Best-effort: a failed chunk
+   just leaves those subscriptions at "idle". Mirrors the refresh contract of
+   ProjectDetailView.refreshSubscriptions. */
+async function loadStatuses() {
+  const ids = []
+  for (const p of projects.value) {
+    for (const s of (Array.isArray(p.subscriptions) ? p.subscriptions : [])) {
+      if (s?.id != null) ids.push(s.id)
+    }
+  }
+  if (!ids.length) { healthReady.value = true; return }
+  const map = new Map()
+  for (let i = 0; i < ids.length; i += STATUS_CHUNK) {
+    const q = ids.slice(i, i + STATUS_CHUNK).map((id) => `id=${encodeURIComponent(id)}`).join('&')
+    try {
+      const fresh = await api.get(`rest/subscription/status/refresh?${q}`)
+      if (fresh && typeof fresh === 'object') {
+        for (const k of Object.keys(fresh)) {
+          const v = fresh[k]
+          map.set(String(k), v && typeof v === 'object' ? v.status : v)
+        }
+      }
+    } catch { /* keep partial results */ }
+  }
+  subStatus.value = map
+  healthReady.value = true
+}
+
 // Functional service families (identity, knowledge, bug/ticket, test mgmt);
 // everything else (build, scm, qa, prov…) reads as technical.
 function classify(id) { return /:(id|km|bt|tm|ticket|issue|build\/confluence)/i.test(id || '') ? 'func' : 'tech' }
 
+/* Map a backend status (NodeStatus UP/DOWN, or a string) to a mockup dot. */
+function statusDot(raw) {
+  const s = String(raw?.status ?? raw ?? '').toLowerCase()
+  if (s === 'up' || s === 'ok') return 'ok'
+  if (s === 'down' || s === 'error' || s === 'ko') return 'err'
+  if (s === 'warn' || s === 'blocked') return 'warn'
+  return 'idle'
+}
+
 const realTools = computed(() => {
   const byNode = new Map()
   for (const p of projects.value) {
@@ -142,27 +231,36 @@ const realTools = computed(() => {
       const node = s?.node || {}
       const id = node.id || node.name
       if (!id) continue
-      if (!byNode.has(id)) byNode.set(id, { id, name: node.name || id, projects: [], count: 0 })
-      const e = byNode.get(id)
-      e.count++
-      const pn = p.name || p.pkey
-      if (pn && !e.projects.includes(pn)) e.projects.push(pn)
+      if (!byNode.has(id)) byNode.set(id, { id, name: node.name || id, rows: [] })
+      const status = healthReady.value ? statusDot(subStatus.value.get(String(s.id))) : 'idle'
+      byNode.get(id).rows.push({
+        label: p.name || p.pkey || ('#' + s.id),
+        status,
+        pills: [],
+        projectId: p.id ?? p.pkey,
+        subId: s.id,
+      })
     }
   }
   const arr = [...byNode.values()]
   if (!arr.length) return null
-  return arr.sort((a, b) => b.count - a.count).map((e) => ({
-    key: e.id, name: e.name, kind: e.id, nodeId: e.id, cat: classify(e.id),
-    total: e.count, active: e.count, health: null,
-    rows: e.projects.slice(0, 4).map((n) => ({ n, s: 'idle', p: [] })),
-  }))
+  return arr.sort((a, b) => b.rows.length - a.rows.length).map((e) => {
+    const ok = e.rows.filter((r) => r.status === 'ok').length
+    return {
+      key: e.id, name: e.name, kind: e.id, nodeId: e.id, cat: classify(e.id),
+      total: e.rows.length,
+      active: healthReady.value ? ok : e.rows.length,
+      health: healthReady.value ? (e.rows.length ? ok / e.rows.length : 0) : null,
+      rows: e.rows,
+    }
+  })
 })
 
 const isDemo = computed(() => !realTools.value)
 const tools = computed(() => realTools.value || DEMO_TOOLS)
 const kpis = computed(() => {
   if (isDemo.value) return DEMO_KPIS
-  const subsTotal = realTools.value.reduce((a, t) => a + t.total, 0)
+  const subsTotal = realTools.value.reduce((a, x) => a + x.total, 0)
   return [
     { l: 'Projets', v: projectsTotal.value.toLocaleString('fr-FR'), c: '#2f6df6', icon: 'mdi-folder-multiple-outline' },
     { l: 'Outils', v: realTools.value.length, c: '#1d9d63', icon: 'mdi-hammer-wrench' },
@@ -176,6 +274,22 @@ const cat = ref('func')
 const query = ref('')
 const failed = ref(new Set())
 
+// Per-card collapse state (ephemeral, by tool.key). Empty = all expanded.
+const collapsed = ref(new Set())
+const anyCollapsed = computed(() => collapsed.value.size > 0)
+function toggle(key) {
+  const next = new Set(collapsed.value)
+  if (next.has(key)) next.delete(key)
+  else next.add(key)
+  collapsed.value = next
+}
+function toggleAll() {
+  collapsed.value = anyCollapsed.value ? new Set() : new Set(filtered.value.map((tool) => tool.key))
+}
+
+// Tool brand colour extracted from its PNG logo (best-effort, see extractColor).
+const toolColors = ref({})
+
 // LjSegmented option sets for the two toolbar tab controls.
 const viewOptions = [
   { value: 'cards', icon: 'mdi-view-grid-outline', label: 'Cartes' },
@@ -187,7 +301,7 @@ const catOptions = [
 ]
 
 function catOf(t) { return t.cat || DEMO_CAT[t.name] || 'tech' }
-function colorOf(t, i) { return COLORS[t.name] || PALETTE[i % PALETTE.length] }
+function colorOf(tool, i) { return toolColors.value[tool.key] || COLORS[tool.name] || PALETTE[i % PALETTE.length] }
 function toolLogo(name) {
   const icon = LOGOS[name]
   if (!icon) return ''
@@ -195,13 +309,83 @@ function toolLogo(name) {
   return `https://api.iconify.design/${icon}.svg?height=26${tint}`
 }
 
+// Map our internal status token to the LjStatus semantic state.
+const LJ_STATUS = { ok: 'ok', warn: 'warn', err: 'error', idle: 'idle' }
+function ljStatus(s) { return LJ_STATUS[s] || 'idle' }
+
+function openProject(id) { router.push(`/project/${id}`) }
+// List mode rows are tools (not projects), so a row maps to no single project;
+// keep the legacy navigation to the project list (issue #15 scopes the cards).
+
+/* Best-effort dominant-colour extraction from a tool's PNG logo. Same-origin
+   logos (the host's /ligoj/main/service/.../img/*.png) can be read back from a
+   canvas; cross-origin ones taint it, so getImageData throws and we resolve
+   null to fall back to the named palette. Pure inline JS, no dependency. */
+function pngUrl(nodeId) {
+  const f = String(nodeId || '').split(':')
+  if (f.length < 3) return null
+  return `${APP_BASE}main/service/${f[1]}/${f[2]}/img/${f[2]}.png`
+}
+function extractColor(url) {
+  return new Promise((resolve) => {
+    const img = new Image()
+    img.onload = () => {
+      try {
+        const w = 32, h = 32
+        const cv = document.createElement('canvas')
+        cv.width = w; cv.height = h
+        const ctx = cv.getContext('2d', { willReadFrequently: true })
+        ctx.drawImage(img, 0, 0, w, h)
+        const { data } = ctx.getImageData(0, 0, w, h) // throws if tainted
+        let r = 0, g = 0, b = 0, wsum = 0
+        for (let i = 0; i < data.length; i += 4) {
+          const pr = data[i], pg = data[i + 1], pb = data[i + 2], pa = data[i + 3]
+          if (pa < 128) continue
+          const mx = Math.max(pr, pg, pb), mn = Math.min(pr, pg, pb)
+          if (mx > 240 && mn > 240) continue // near-white
+          if (mx < 18) continue              // near-black
+          const weight = (mx - mn) + 1       // weight vivid pixels over greys
+          r += pr * weight; g += pg * weight; b += pb * weight; wsum += weight
+        }
+        if (!wsum) { resolve(null); return }
+        resolve('#' + [r, g, b].map((c) => Math.round(c / wsum).toString(16).padStart(2, '0')).join(''))
+      } catch { resolve(null) }
+    }
+    img.onerror = () => resolve(null)
+    img.src = url
+  })
+}
+
+// Kick off colour extraction for each real tool once, as the set resolves.
+watch(realTools, (list) => {
+  if (!list) return
+  for (const tool of list) {
+    if (!tool.nodeId || toolColors.value[tool.key]) continue
+    const url = pngUrl(tool.nodeId)
+    if (!url) continue
+    extractColor(url).then((hex) => { if (hex) toolColors.value = { ...toolColors.value, [tool.key]: hex } })
+  }
+}, { immediate: true })
+
 const filtered = computed(() => {
   const q = query.value.trim().toLowerCase()
-  return tools.value.filter((t) => catOf(t) === cat.value)
-    .filter((t) => !q || t.name.toLowerCase().includes(q) || (t.kind || '').toLowerCase().includes(q) || t.rows.some((r) => r.n.toLowerCase().includes(q)))
+  return tools.value.filter((tool) => catOf(tool) === cat.value)
+    .filter((tool) => !q || tool.name.toLowerCase().includes(q) || (tool.kind || '').toLowerCase().includes(q) || (tool.rows || []).some((r) => (r.label ?? r.n ?? '').toLowerCase().includes(q)))
 })
-const activeSum = computed(() => filtered.value.reduce((a, t) => a + (t.active ?? t.total), 0))
-const attention = computed(() => DEMO_TOOLS.filter((t) => t.rows.some((r) => r.s === 'err')).length)
+
+// Normalise both real ({label,status,projectId}) and demo ({n,s,p}) rows to a
+// single shape for the mini-table, capped so a tool with hundreds of
+// subscriptions stays light (the overflow count is surfaced as "+N").
+const ROW_CAP = 50
+const displayCards = computed(() => filtered.value.map((tool) => {
+  const all = (tool.rows || []).map((r) => (r.label !== undefined)
+    ? r
+    : { label: r.n, status: r.s, pills: r.p || [], projectId: null, cost: r.cost })
+  return { ...tool, rows: all, shown: all.slice(0, ROW_CAP), extra: Math.max(0, all.length - ROW_CAP) }
+}))
+
+const activeSum = computed(() => filtered.value.reduce((a, tool) => a + (tool.active ?? tool.total), 0))
+const attention = computed(() => DEMO_TOOLS.filter((tool) => tool.rows.some((r) => r.s === 'err')).length)
 
 const headers = [
   { key: 'name', label: 'Outil', sortable: true, icon: 'mdi-hammer-wrench' },
@@ -217,8 +401,7 @@ onMounted(load)
 /* View-specific styling only — chrome (header, segmented tab controls,
    search) comes from the shared host components + the global `.lj-surface`
    class, which supplies the ink, pill, radius, mono, surface, card and
-   border vars these dashboard cards read. The status-dot colour vars below
-   are bespoke to this view. */
+   border vars these dashboard cards read. */
 .dash {
   --ok: #1d9d63; --warn: #d9701a; --err: #df4d42; --idle: #9aa0a6;
 }
@@ -233,37 +416,69 @@ onMounted(load)
 .tb-sp { flex: 1; }
 .tcount { font-size: 13px; font-weight: 500; color: var(--ink-3); }
 .tcount b { color: var(--ink-2); font-family: var(--mono); }
+/* Collapse / expand-all toggle, sized to sit beside the segmented controls. */
+.collapse-all { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: var(--radius-sm); border: var(--border-w) var(--lj-border-style, solid) var(--border-c); background: var(--card); color: var(--ink-2); font-family: var(--font); font-weight: 700; font-size: 13px; cursor: pointer; transition: background .12s, color .12s; }
+.collapse-all:hover { background: var(--pill); color: var(--ink); }
 
 .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
-.card { position: relative; display: flex; flex-direction: column; background: var(--card); border: var(--border-w) var(--lj-border-style, solid) var(--border-c); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); cursor: pointer; opacity: 0; transform: translateY(12px); animation: rise .5s cubic-bezier(.2,.7,.3,1) forwards; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s; }
+.card { position: relative; display: flex; flex-direction: column; background: var(--card); border: var(--border-w) var(--lj-border-style, solid) var(--border-c); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); animation: rise .5s cubic-bezier(.2,.7,.3,1) forwards; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s; }
+/* Expanded cards keep the grid's default `align-self: stretch` so a whole row
+   shares a common bottom edge (no "staircase"). Only a collapsed card opts out
+   of the stretch, shrinking to its header height on its own. */
+.card.collapsed { align-self: start; }
 @keyframes rise { to { opacity: 1; transform: none; } }
 @media (prefers-reduced-motion: reduce) { .card { animation: none; opacity: 1; transform: none; } }
 .card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--c) 55%, transparent); }
-.card-head { display: flex; align-items: center; gap: 13px; padding: 16px 16px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, var(--card)), color-mix(in srgb, var(--c) 5%, var(--card))); border-bottom: 1px solid color-mix(in srgb, var(--c) 16%, var(--border)); }
+/* The preferred colour materialises as a 4px top edge, in addition to the
+   existing tinted header gradient. Two stacked rows (see template). */
+.card-head { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 12px; border-top: 4px solid var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, var(--card)), color-mix(in srgb, var(--c) 5%, var(--card))); border-bottom: 1px solid color-mix(in srgb, var(--c) 16%, var(--border)); }
+.ch-row { display: flex; align-items: center; gap: 10px; }
+.ch-row.bottom { justify-content: space-between; }
 .glyph { width: 44px; height: 44px; border-radius: var(--radius-sm); flex: none; display: grid; place-items: center; background: var(--card); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--c) 50%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, var(--border)); }
 .glyph.sm { width: 36px; height: 36px; border-radius: var(--radius-sm); }
 .glyph .tool-logo, .glyph :deep(img.tool-icon) { width: 26px; height: 26px; object-fit: contain; }
 .glyph.sm .tool-logo, .glyph.sm :deep(img.tool-icon) { width: 22px; height: 22px; }
 .glyph :deep(i) { font-size: 24px; color: color-mix(in srgb, var(--c) 75%, var(--ink)); }
 .glyph.noimg::after { content: attr(data-letter); font-family: var(--font); font-weight: var(--bold); font-size: 20px; color: color-mix(in srgb, var(--c) 75%, var(--ink)); }
-.card-head .t { flex: 1; min-width: 0; }
-.card-head .name { font-family: var(--font); font-weight: var(--bold); font-size: 16.5px; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.card-head .kind { font-family: var(--mono); font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--c) 55%, var(--ink-3)); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.count { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--c) 65%, var(--ink)); background: var(--card); border: var(--border-w) var(--lj-border-style, solid) color-mix(in srgb, var(--c) 22%, var(--border)); border-radius: var(--radius-sm); padding: 5px 9px; white-space: nowrap; }
+/* On each row only the text (name / kind) flexes and ellipsis-shrinks; the
+   glyph, chevron and health cluster keep their intrinsic size. With the bar +
+   counter moved to their own row, long names get the full card width. */
+.ch-row.top .name { flex: 1 1 auto; min-width: 0; font-family: var(--font); font-weight: var(--bold); font-size: 16.5px; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* Row 2 runs at a smaller type scale so the uppercase kind (e.g. "GESTION DE
+   TICKETS") fits in full alongside the health bar + percentage + counter,
+   without dropping any of them. */
+.ch-row.bottom .kind { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 10px; font-weight: 700; color: color-mix(in srgb, var(--c) 55%, var(--ink-3)); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ch-row.bottom .health { flex: none; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ink-3); }
+.ch-row.bottom .pct { font-variant-numeric: tabular-nums; }
+.card-head .barh { width: 44px; }
+.count { font-family: var(--mono); font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--c) 65%, var(--ink)); background: var(--card); border: var(--border-w) var(--lj-border-style, solid) color-mix(in srgb, var(--c) 22%, var(--border)); border-radius: var(--radius-sm); padding: 4px 8px; white-space: nowrap; }
 .count small { opacity: .5; }
-.rows { flex: 1; padding: 8px 12px; }
-.row { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 11px; transition: background .12s; }
-.row:hover { background: color-mix(in srgb, var(--c) 8%, var(--card)); }
-.row + .row { box-shadow: inset 0 1px 0 var(--border); }
-.st { width: 9px; height: 9px; border-radius: 50%; flex: none; position: relative; }
-.st::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: currentColor; opacity: .18; }
-.st.ok { background: var(--ok); color: var(--ok); } .st.warn { background: var(--warn); color: var(--warn); } .st.err { background: var(--err); color: var(--err); } .st.idle { background: var(--idle); color: var(--idle); }
-.row .rn { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* Collapse chevron. */
+.chev { flex: none; width: 30px; height: 30px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; transition: background .12s, color .12s; }
+.chev:hover { background: color-mix(in srgb, var(--c) 12%, var(--card)); color: var(--ink); }
+
+/* Subscriptions mini-table. */
+.mini { padding: 6px 10px 10px; max-height: 232px; overflow-y: auto; }
+.mrow { position: relative; display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; padding: 8px; border-radius: 11px; }
+/* Straight hairline divider, inset from the rounded row corners. An inset
+   box-shadow here would follow the 11px radius and curve into little hooks at
+   each end (the "weird rounding" between rows); a horizontally-inset pseudo
+   line stays perfectly straight while the hover pill keeps its rounded look. */
+.mrow + .mrow::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: 1px; background: var(--border); }
+.mrow.mhead { font-family: var(--mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); padding-bottom: 6px; }
+.mrow.mhead + .mrow::before { display: none; }
+.mrow.mhead .m-sum { justify-self: end; }
+.mrow.clickable { cursor: pointer; transition: background .12s; }
+.mrow.clickable:hover { background: color-mix(in srgb, var(--c) 8%, var(--card)); }
+.mlabel { min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.m-sum { justify-self: end; min-width: 0; }
+.mempty, .mmore { display: block; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 8px; }
+.mmore::before { display: none; }
+
 .pills { display: flex; gap: 5px; flex: none; }
 .pill { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-2); background: var(--pill); border: var(--border-w) var(--lj-border-style, solid) var(--border-c); border-radius: var(--radius-sm); padding: 2px 7px; }
 .pill.cost { color: #b85b00; background: rgba(255,153,0,.12); border-color: rgba(255,153,0,.3); }
-.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px 14px; }
-.morelink { font-size: 12.5px; font-weight: 800; color: color-mix(in srgb, var(--c) 55%, var(--ink)); cursor: pointer; }
+.card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 4px 16px 14px; }
 .health { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
 .barh { width: 80px; height: 7px; border-radius: 5px; background: var(--pill); overflow: hidden; }
 .barh i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 60%, white)); }