/* ============================================================================
   Respirit — assets/demos.css · tableaux de bord de démonstration (06/10/2026)
   ----------------------------------------------------------------------------
   Chargée après pp.css et site.css sur / (vitrine à onglets, #cas) et /demos.
   Préfixe dm-, jetons --pp-* seuls : le mode sombre suit sans rien déclarer.
   Aucun dégradé, titres à 600 au plus. Balisage écrit par
   ../design/demos/build-demos.mjs ; comportement dans assets/demos.js.
   Réel = encre pleine (pastille « Mesuré » vers /methode) ; exemple = cyan
   clair à filet, badge « Exemple ».
   ========================================================================== */

.dm-app, .dm-keyline, .dm-legend {
  --dm-ex-fill: color-mix(in srgb, var(--pp-electric) 24%, var(--pp-bg));
  --dm-ex-fill-strong: color-mix(in srgb, var(--pp-electric) 46%, var(--pp-bg));
  --dm-ex-line: var(--pp-accent);
  --dm-dot: var(--pp-accent);
}

/* ---- États : le HTML porte tous les états, un attribut choisit ---------------------------------------- */
.dm-app[data-state="avant"] [data-show="apres"],
.dm-app[data-state="apres"] [data-show="avant"],
.dm-app[data-state="attente"] [data-show="relance"],
.dm-app[data-state="relance"] [data-show="attente"],
.dm-app[data-r="250"] [data-show-r]:not([data-show-r~="250"]),
.dm-app[data-r="500"] [data-show-r]:not([data-show-r~="500"]),
.dm-app[data-r="1000"] [data-show-r]:not([data-show-r~="1000"]),
.dm-app [hidden] { display: none !important; }

/* ---- Cadre d'application ------------------------------------------------------------------------------ */
.dm-app {
  position: relative;
  container-type: inline-size;
  min-width: 0;
  background: var(--pp-bg);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-xl);
  box-shadow: 0 1px 2px rgba(10, 15, 20, 0.04), 0 16px 32px -20px rgba(10, 15, 20, 0.18);
  text-align: left;
}
.dm-app p, .dm-app li { max-width: none; }
.dm-app__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-space-3);
  padding: var(--pp-space-3) var(--pp-space-4);
  border-bottom: 1px solid var(--pp-border);
}
.dm-app__id { min-width: 0; }
.dm-app__title {
  display: flex;
  align-items: center;
  gap: var(--pp-space-2);
  margin: 0;
  font-size: var(--pp-text-sm);
  font-weight: var(--pp-weight-semibold);
  letter-spacing: -0.01em;
  color: var(--pp-text-1);
}
.dm-app__title::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pp-logo-dot); }
.dm-app__meta { margin: 2px 0 0 16px; font-family: var(--pp-font-mono); font-size: 0.6875rem; color: var(--pp-text-3); }
.dm-app__body { display: grid; gap: var(--pp-space-3); padding: var(--pp-space-3); }
@container (min-width: 560px) { .dm-app__body { gap: var(--pp-space-4); padding: var(--pp-space-4); } }

/* ---- Bascule segmentée (pilule encre pour l'état choisi) --------------------------------------------- */
.dm-seg { display: inline-flex; flex: none; gap: 2px; padding: 3px; background: var(--pp-surface-2); border-radius: var(--pp-radius-pill); max-width: 100%; }
.dm-seg__btn, .dm-chip, .dm-tab {
  position: relative;
  border: 0;
  border-radius: var(--pp-radius-pill);
  font-family: var(--pp-font-sans);
  font-weight: var(--pp-weight-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--pp-dur-normal) var(--pp-ease), color var(--pp-dur-normal) var(--pp-ease), box-shadow var(--pp-dur-normal) var(--pp-ease);
}
.dm-seg__btn::after, .dm-chip::after, .dm-tab::after, .dm-jump a::after { content: ""; position: absolute; inset-inline: 0; inset-block: min(0px, calc((100% - 44px) / 2)); }
.dm-seg__btn { min-height: 2rem; padding: 0 0.85rem; background: transparent; color: var(--pp-text-2); font-size: 0.8125rem; }
.dm-seg__btn:hover { color: var(--pp-text-1); }
.dm-seg__btn[aria-pressed="true"] { background: var(--pp-primary); color: var(--pp-on-primary); }
.dm-seg__btn:focus-visible, .dm-chip:focus-visible, .dm-tab:focus-visible { outline: 2px solid var(--pp-border-focus); outline-offset: 2px; }

.dm-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--pp-space-3); }
.dm-chip { min-height: 2rem; padding: 0 0.8rem; background: transparent; color: var(--pp-text-2); font-size: 0.8125rem; box-shadow: inset 0 0 0 1px var(--pp-border-strong); }
.dm-chip:hover { color: var(--pp-text-1); background: var(--pp-surface-1); }
@container (max-width: 440px) {
  .dm-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: -6px calc(var(--pp-space-3) * -1) var(--pp-space-2); padding: 6px var(--pp-space-3); }
  .dm-filters::-webkit-scrollbar { display: none; }
  .dm-chip { flex: none; padding: 0 0.7rem; font-size: 0.78rem; }
}
.dm-chip[aria-pressed="true"] { color: var(--pp-accent); background: var(--pp-accent-soft); box-shadow: inset 0 0 0 1px var(--pp-accent-line); }

/* ---- Tuiles KPI : filets d'un pixel, chiffre en 600 ----------------------------------------------- */
.dm-kpis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--pp-border);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg);
  overflow: hidden;
}
@container (min-width: 600px) { .dm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dm-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; padding: var(--pp-space-3); background: var(--pp-bg); }
@container (min-width: 600px) { .dm-kpi { padding: var(--pp-space-3) var(--pp-space-4); } }
.dm-kpi__label { margin: 0; font-size: 0.75rem; font-weight: var(--pp-weight-medium); color: var(--pp-text-2); }
.dm-kpi__value { margin: 2px 0 0; font-size: 1.375rem; font-weight: var(--pp-weight-semibold); line-height: 1.15; letter-spacing: -0.025em; color: var(--pp-text-1); }
@container (min-width: 600px) { .dm-kpi__value { font-size: 1.5rem; } }
.dm-kpi__value--txt, .dm-kpi__txt { font-size: 1rem; letter-spacing: -0.01em; }
@container (min-width: 600px) { .dm-kpi__value--txt, .dm-kpi__txt { font-size: 1.0625rem; } }
.dm-kpi__value .dm-ex { vertical-align: 0.3em; margin-left: 2px; }
.dm-kpi__unit { font-size: 0.8125rem; font-weight: var(--pp-weight-medium); letter-spacing: 0; color: var(--pp-text-2); }
.dm-kpi__sub { margin: 0; font-size: 0.75rem; line-height: 1.35; color: var(--pp-text-3); }
.dm-kpi__tag { margin: auto 0 0; padding-top: var(--pp-space-2); line-height: 1; }

/* Pastille « Mesuré » (gabarit .pp-source.rs-source--internal, en plus petit) et badge « Exemple » */
main .pp-source.dm-src { font-size: 0.6875rem; padding: 1px 6px 1px 5px; line-height: 1.5; white-space: nowrap; }
main .dm-src .pp-source__dot { margin-right: 4px; }
.dm-ex {
  font-family: var(--pp-font-mono);
  font-size: 0.6875rem;
  font-weight: var(--pp-weight-medium);
  letter-spacing: 0.03em;
  line-height: 1.5;
  padding: 0 7px;
  border-color: color-mix(in srgb, var(--pp-warning) 32%, transparent);
}

/* ---- Panneaux ------------------------------------------------------------------------------------------ */
.dm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pp-space-3); }
@container (min-width: 640px) {
  .dm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pp-space-4); }
  .dm-grid--map { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--pp-space-4); align-items: start; }
}
.dm-stack { display: grid; gap: var(--pp-space-3); align-content: start; }
.dm-panel { container-type: inline-size; min-width: 0; padding: var(--pp-space-3) var(--pp-space-3) var(--pp-space-3); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); background: var(--pp-bg); }
.dm-panel--flush { padding: 0; overflow: hidden; }
.dm-panel--flush > .dm-panel__head { padding: var(--pp-space-3) var(--pp-space-3) 0; }
.dm-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pp-space-2); margin-bottom: var(--pp-space-3); }
.dm-panel__title { margin: 0; font-size: 0.8125rem; font-weight: var(--pp-weight-semibold); color: var(--pp-text-1); }

/* Légende sous un graphique */
.dm-legend { list-style: none; margin: var(--pp-space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.75rem; color: var(--pp-text-2); }
.dm-key { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.dm-key__sw { flex: none; width: 10px; height: 10px; border-radius: 2px; }
.dm-key__sw--ex { background: var(--dm-ex-fill); box-shadow: inset 0 0 0 1px var(--dm-ex-line); }
.dm-key__sw--reel { background: var(--pp-text-1); }
.dm-key__sw--band { border-radius: 0; border-block: 1px solid var(--pp-text-1); background: color-mix(in srgb, var(--pp-text-1) 7%, transparent); }
.dm-key__sw--ref { width: 2px; height: 12px; border-radius: 1px; background: var(--pp-text-1); }
.dm-key__sw--dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dm-dot); }
.dm-key__sw--ring { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--pp-text-1); }

/* État vide */
.dm-empty { display: grid; place-content: center; gap: 4px; min-height: 11rem; padding: var(--pp-space-4); text-align: center; border: 1px dashed var(--pp-border-strong); border-radius: var(--pp-radius-md); background: var(--pp-surface-inset); }
.dm-empty p { margin: 0; font-size: 0.9375rem; font-weight: var(--pp-weight-semibold); color: var(--pp-text-1); }
.dm-empty .dm-empty__sub { font-size: 0.8125rem; font-weight: var(--pp-weight-regular); color: var(--pp-text-3); }

/* Pastilles d'état : point et libellé, jamais la couleur seule */
.dm-status { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 2px 8px 2px 7px; border-radius: var(--pp-radius-pill); font-size: 0.75rem; font-weight: var(--pp-weight-medium); white-space: nowrap; color: var(--pp-text-2); background: var(--pp-surface-1); }
.dm-status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dm-status--ok { color: var(--pp-success); background: var(--pp-success-soft); }
.dm-status--off { color: var(--pp-danger); background: var(--pp-danger-soft); }
.dm-status--warn { color: var(--pp-warning); background: var(--pp-warning-soft); }
.dm-status--wait { display: none; color: var(--pp-text-3); }

.dm-sources { list-style: none; margin: 0; padding: 0; }
.dm-source { display: flex; align-items: center; justify-content: space-between; gap: var(--pp-space-3); margin: 0; padding: var(--pp-space-2) 0; border-top: 1px solid var(--pp-border); font-size: 0.8125rem; }
.dm-source:first-child { border-top: 0; padding-top: 0; }
.dm-source__name { min-width: 0; font-weight: var(--pp-weight-medium); color: var(--pp-text-1); }
.dm-source__det { display: block; font-family: var(--pp-font-mono); font-size: 0.6875rem; font-weight: var(--pp-weight-regular); color: var(--pp-text-3); }

.dm-tag { display: inline-block; padding: 1px 7px; border-radius: var(--pp-radius-pill); font-size: 0.6875rem; font-weight: var(--pp-weight-medium); line-height: 1.5; white-space: nowrap; }
.dm-tag--new { color: var(--pp-accent); background: var(--pp-accent-soft); box-shadow: inset 0 0 0 1px var(--pp-accent-line); }
.dm-muted { font-size: 0.75rem; color: var(--pp-text-3); }
.dm-hint { margin: var(--pp-space-3) 0 0; font-size: 0.75rem; text-align: center; color: var(--pp-text-3); }

/* ---- Colonnes (publicité) --------------------------------------------------------------------------- */
.dm-cols { --h: 132px; }
@container (min-width: 340px) { .dm-cols { --h: 190px; } }
.dm-app--compact .dm-cols { --h: 150px; }
.dm-cols__plot { position: relative; height: var(--h); margin-top: 20px; border-bottom: 1px solid var(--pp-border-strong); }
.dm-cols__set { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-around; gap: var(--pp-space-2); }
.dm-col { position: relative; z-index: 1; flex: 1 1 0; max-width: 76px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; border-radius: 4px; outline: none; }
.dm-col__v { position: relative; z-index: 1; margin-bottom: 3px; padding: 0 4px; border-radius: 3px; background: var(--pp-bg); font-size: 0.75rem; font-weight: var(--pp-weight-semibold); color: var(--pp-text-1); }
.dm-col__bar { display: block; width: 24px; height: calc(var(--v) * var(--h)); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--dm-ex-fill); box-shadow: inset 0 0 0 1px var(--dm-ex-line); transform-origin: 50% 100%; transition: background-color var(--pp-dur-fast) var(--pp-ease); }
.dm-col:hover .dm-col__bar, .dm-col:focus-visible .dm-col__bar { background: var(--dm-ex-fill-strong); }
.dm-col:focus-visible { outline: 2px solid var(--pp-border-focus); outline-offset: 2px; }
.dm-cols__x { display: flex; justify-content: space-around; gap: var(--pp-space-2); margin-top: 6px; }
.dm-cols__x span { flex: 1 1 0; max-width: 76px; font-size: 0.6875rem; text-align: center; white-space: nowrap; color: var(--pp-text-3); }
.dm-band { position: absolute; left: 0; right: 0; bottom: calc(var(--lo) * 100%); height: calc((var(--hi) - var(--lo)) * 100%); border-block: 1px solid var(--pp-text-1); background: color-mix(in srgb, var(--pp-text-1) 5%, transparent); }

/* ---- Journal des envois ---------------------------------------------------------------------------- */
.dm-log__list { list-style: none; margin: 0; padding: 0; }
.dm-log__row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; margin: 0; padding: 7px 0; border-top: 1px solid var(--pp-border); font-size: 0.8125rem; }
.dm-log__row:first-child { border-top: 0; padding-top: 0; }
.dm-log__time { font-family: var(--pp-font-mono); font-size: 0.6875rem; white-space: nowrap; color: var(--pp-text-3); }
.dm-log__step { padding: 1px 7px; border-radius: var(--pp-radius-pill); font-size: 0.6875rem; font-weight: var(--pp-weight-medium); white-space: nowrap; color: var(--pp-text-2); background: var(--pp-surface-2); }
.dm-log__step--signature { color: var(--pp-accent); background: var(--pp-accent-soft); }
.dm-log__what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pp-text-1); }
.dm-log__ok { display: inline-flex; align-items: center; gap: 3px; font-size: 0.6875rem; white-space: nowrap; color: var(--pp-success); }
.dm-log__ok svg, .dm-actions__msg svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@container (max-width: 400px) {
  .dm-log__row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "step time ok" "what what what"; }
  .dm-log__step { grid-area: step; justify-self: start; }
  .dm-log__time { grid-area: time; }
  .dm-log__ok { grid-area: ok; }
  .dm-log__what { grid-area: what; }
}
.dm-log__list[data-f="demande"] .dm-log__row:not([data-etape="demande"]),
.dm-log__list[data-f="devis"] .dm-log__row:not([data-etape="devis"]),
.dm-log__list[data-f="signature"] .dm-log__row:not([data-etape="signature"]) { display: none; }
@container (max-width: 400px) { .dm-log__list[data-f="tout"] .dm-log__row:nth-child(n+6) { display: none; } }
/* Vitrine de l'accueil : le journal accompagne le graphique sur grand écran seulement, quatre lignes */
.dm-app--compact .dm-log__list[data-f="tout"] .dm-log__row:nth-child(n+5) { display: none; }
@container (max-width: 639px) { .dm-app--compact .dm-log { display: none; } }
.dm-log__rule { display: flex; align-items: center; gap: 6px; margin: var(--pp-space-3) 0 0; padding-top: var(--pp-space-3); border-top: 1px solid var(--pp-border); font-size: 0.75rem; color: var(--pp-text-3); }
.dm-log__rule svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ---- Tableau de bord : jauges de doublons, signatures ------------------------------------------- */
.dm-meter { display: grid; gap: var(--pp-space-3); }
.dm-meter__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 2rem; align-items: center; gap: var(--pp-space-3); font-size: 0.75rem; }
.dm-meter__lbl { color: var(--pp-text-2); }
.dm-meter__track { position: relative; height: 12px; }
.dm-meter__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); border-radius: 3px; background: var(--pp-text-1); transform-origin: 0 50%; }
.dm-meter__ghost { position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--w) * 100% + 3px); border: 1px dashed var(--pp-border-field); border-radius: 3px; }
.dm-meter__v { font-size: 0.8125rem; font-weight: var(--pp-weight-semibold); text-align: right; color: var(--pp-text-1); }
.dm-meter__note { margin: 0; font-size: 0.75rem; color: var(--pp-text-3); }

.dm-list { list-style: none; margin: 0; padding: 0; }
.dm-list__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--pp-space-2); margin: 0; padding: var(--pp-space-2) 0; border-top: 1px solid var(--pp-border); font-size: 0.8125rem; }
.dm-list__row:first-child { border-top: 0; padding-top: 0; }
.dm-list__what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pp-text-1); }
.dm-list__v { min-width: 5.5em; font-weight: var(--pp-weight-semibold); text-align: right; color: var(--pp-text-1); }

/* ---- Relances : actions, frise, tableau --------------------------------------------------------------- */
.dm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pp-space-2) var(--pp-space-4); }
.dm-actions__msg { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 0.8125rem; color: var(--pp-text-1); }
.dm-actions__msg svg { flex: none; color: var(--pp-success); }
.dm-actions__msg--muted { color: var(--pp-text-3); }

.dm-frise { --dots-h: 50px; }
.dm-frise__track { position: relative; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; }
.dm-frise__track::before { content: ""; position: absolute; left: 10%; right: 10%; top: calc(var(--dots-h) + 5px); height: 2px; background: var(--pp-border-strong); }
.dm-frise__step { position: relative; display: grid; grid-template-rows: var(--dots-h) 12px auto auto; justify-items: center; align-content: start; gap: 0; margin: 0; padding: 0 2px; text-align: center; }
.dm-frise__node { grid-row: 2; width: 12px; height: 12px; border-radius: 50%; background: var(--pp-bg); box-shadow: inset 0 0 0 2px var(--pp-accent); }
.dm-frise__step--start .dm-frise__node { box-shadow: inset 0 0 0 2px var(--pp-text-3); }
.dm-frise__step--stop .dm-frise__node { background: var(--pp-text-1); box-shadow: none; }
.dm-frise__lbl { grid-row: 3; margin-top: 6px; font-size: 0.8125rem; font-weight: var(--pp-weight-semibold); color: var(--pp-text-1); }
.dm-frise__n { grid-row: 4; font-size: 0.6875rem; line-height: 1.3; color: var(--pp-text-3); }
.dm-frise__dots { grid-row: 1; align-self: end; display: flex; flex-wrap: wrap-reverse; justify-content: center; align-content: flex-start; gap: 3px; max-width: 48px; padding-bottom: 8px; }
.dm-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--dm-ex-fill); box-shadow: inset 0 0 0 1px var(--dm-ex-line); }
@container (min-width: 480px) { .dm-frise__dots { max-width: 64px; } .dm-dot { width: 11px; height: 11px; } }

.dm-table-wrap { max-height: 320px; overflow: auto; margin-top: var(--pp-space-3); border-top: 1px solid var(--pp-border); outline: none; }
.dm-table-wrap:focus-visible { outline: 2px solid var(--pp-border-focus); outline-offset: -2px; }
.dm-app--compact .dm-table-wrap { max-height: 220px; }
.dm-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.dm-table th, .dm-table td { padding: 7px var(--pp-space-3); text-align: left; vertical-align: middle; font-weight: var(--pp-weight-regular); border-bottom: 1px solid var(--pp-border); }
.dm-table thead th { position: sticky; top: 0; z-index: 1; font-family: var(--pp-font-mono); font-size: 0.6875rem; font-weight: var(--pp-weight-medium); letter-spacing: 0.04em; text-transform: uppercase; color: var(--pp-text-3); background: var(--pp-surface-1); }
.dm-table tbody th { color: var(--pp-text-1); }
.dm-table__id { font-weight: var(--pp-weight-semibold); white-space: nowrap; }
.dm-table__what { color: var(--pp-text-2); }
.dm-table__age { white-space: nowrap; color: var(--pp-text-3); }
.dm-table .is-num { text-align: right; white-space: nowrap; }
.dm-table tfoot th, .dm-table tfoot td { position: sticky; bottom: 0; font-weight: var(--pp-weight-semibold); color: var(--pp-text-1); background: var(--pp-surface-1); border-top: 1px solid var(--pp-border-strong); border-bottom: 0; }
.dm-app[data-state="relance"] .dm-table tr.is-relance > * { background: color-mix(in srgb, var(--pp-electric) 7%, var(--pp-bg)); }
@container (max-width: 520px) {
  .dm-table .dm-table__age { display: none; }
  .dm-table__what { display: block; font-size: 0.75rem; }
  .dm-table th, .dm-table td { padding-inline: var(--pp-space-2); }
}

/* ---- Fichier : barres horizontales, ligne de référence réelle -------------------------------------- */
.dm-axis { display: grid; gap: var(--pp-space-4); }
@container (min-width: 600px) { .dm-axis { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } }
.dm-hbars { display: grid; gap: 2px; }
.dm-hbar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) 3.3rem;
  align-items: center;
  gap: var(--pp-space-3);
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--pp-radius-md);
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  color: var(--pp-text-1);
  cursor: pointer;
}
.dm-hbar:hover { background: var(--pp-surface-1); }
.dm-hbar[aria-pressed="true"] { background: var(--pp-surface-2); }
.dm-hbar:focus-visible { outline: 2px solid var(--pp-border-focus); outline-offset: 1px; }
.dm-hbar__lbl { min-width: 0; line-height: 1.25; color: var(--pp-text-2); }
.dm-hbar[aria-pressed="true"] .dm-hbar__lbl { color: var(--pp-text-1); font-weight: var(--pp-weight-medium); }
.dm-hbar__track { position: relative; height: 16px; }
.dm-hbar__bar { position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); border-radius: 0 4px 4px 0; background: var(--dm-ex-fill); box-shadow: inset 0 0 0 1px var(--dm-ex-line); transform-origin: 0 50%; }
.dm-hbar:hover .dm-hbar__bar, .dm-hbar[aria-pressed="true"] .dm-hbar__bar { background: var(--dm-ex-fill-strong); }
.dm-hbar__track::after { content: ""; position: absolute; top: -14px; bottom: -14px; left: calc(var(--ref) * 100%); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--pp-text-1); }
.dm-hbar__v { font-weight: var(--pp-weight-semibold); text-align: right; }
@container (max-width: 440px) {
  .dm-hbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lbl v" "track track"; row-gap: 6px; padding-block: 8px; }
  .dm-hbar__lbl { grid-area: lbl; }
  .dm-hbar__v { grid-area: v; }
  .dm-hbar__track { grid-area: track; height: 12px; }
  .dm-hbar__track::after { top: -4px; bottom: -4px; }
}
.dm-prio { padding-top: var(--pp-space-3); border-top: 1px solid var(--pp-border); }
@container (min-width: 600px) { .dm-prio { padding: 0 0 0 var(--pp-space-4); border-top: 0; border-left: 1px solid var(--pp-border); } }
.dm-prio__title { margin: 0 0 var(--pp-space-2); font-family: var(--pp-font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pp-text-3); }
.dm-prio__lvl { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--pp-space-2); font-size: 0.8125rem; font-weight: var(--pp-weight-semibold); color: var(--pp-text-1); }
.dm-prio__lvl::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pp-border-field); }
.dm-prio__lvl--haute::before { background: var(--pp-accent); }
.dm-prio__lvl--moyenne::before { background: var(--pp-text-3); }
.dm-prio__list { list-style: none; margin: 0; padding: 0; }
.dm-prio__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--pp-space-2); margin: 0; padding: 7px 0; border-top: 1px solid var(--pp-border); font-size: 0.8125rem; }
.dm-prio__id { font-weight: var(--pp-weight-semibold); color: var(--pp-text-1); }
.dm-prio__what { grid-column: 1; font-size: 0.75rem; color: var(--pp-text-2); }
.dm-prio__age { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 0.6875rem; white-space: nowrap; color: var(--pp-text-3); }

/* ---- Étude de zone : carte stylisée, sans tuiles ------------------------------------------------------ */
.dm-map__frame { max-width: 460px; margin: var(--pp-space-3) auto 0; border-radius: var(--pp-radius-md); overflow: hidden; }
.dm-map__svg { display: block; width: 100%; height: auto; }
.dm-map__bg { fill: var(--pp-surface-1); }
.dm-map__minor { fill: none; stroke: var(--pp-border-strong); stroke-width: 1; }
.dm-map__major { fill: none; stroke: var(--pp-border-field); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; }
.dm-map__river { fill: none; stroke: var(--pp-accent-line); stroke-width: 9; stroke-linecap: round; }
.dm-map__ring { fill: none; stroke: var(--pp-text-1); stroke-width: 1; opacity: 0.2; transition: opacity var(--pp-dur-slow) var(--pp-ease); }
.dm-map__rlbl { font-family: var(--pp-font-sans); font-size: 12px; font-weight: var(--pp-weight-medium); fill: var(--pp-text-3); opacity: 0; transition: opacity var(--pp-dur-slow) var(--pp-ease); }
.dm-map__scale rect { fill: var(--pp-bg); opacity: 0.88; }
.dm-map__dots { fill: none; stroke: var(--dm-dot); stroke-width: 3.6; stroke-linecap: round; opacity: 0.2; }
.dm-app[data-r="250"] .dm-map__ring[data-ring="250"],
.dm-app[data-r="500"] .dm-map__ring[data-ring="500"],
.dm-app[data-r="1000"] .dm-map__ring[data-ring="1000"] { opacity: 1; stroke-width: 1.5; fill: color-mix(in srgb, var(--pp-electric) 7%, transparent); }
.dm-app[data-r="250"] .dm-map__rlbl[data-ring="250"],
.dm-app[data-r="500"] .dm-map__rlbl[data-ring="500"],
.dm-app[data-r="1000"] .dm-map__rlbl[data-ring="1000"] { opacity: 1; fill: var(--pp-text-1); font-weight: var(--pp-weight-semibold); }
.dm-app[data-r="250"] .dm-map__dots[data-band="250"],
.dm-app[data-r="500"] .dm-map__dots:is([data-band="250"], [data-band="500"]),
.dm-app[data-r="1000"] .dm-map__dots { opacity: 0.85; }
.dm-map__pin-halo { fill: var(--pp-bg); }
.dm-map__pin-dot { fill: var(--pp-text-1); }
.dm-map__pin-core { fill: var(--pp-logo-dot); }
.dm-map__scale path { fill: none; stroke: var(--pp-text-2); stroke-width: 1.5; }
.dm-map__scale text { font-family: var(--pp-font-sans); font-size: 12px; fill: var(--pp-text-2); }
.dm-map .dm-seg { margin-top: 0; }

.dm-zsrc__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pp-space-2); margin-top: var(--pp-space-3); padding-top: var(--pp-space-3); border-top: 1px solid var(--pp-border); }
.dm-zsrc__time { margin: 0; font-size: 0.8125rem; color: var(--pp-text-2); }
.dm-zsrc__clock { font-weight: var(--pp-weight-semibold); color: var(--pp-text-1); }
.dm-zsrc__note { margin: var(--pp-space-2) 0 0; font-size: 0.75rem; color: var(--pp-text-3); }
.dm-app[data-run] .dm-source:not(.is-done) .dm-status:not(.dm-status--wait) { display: none; }
.dm-app[data-run] .dm-source:not(.is-done) .dm-status--wait { display: inline-flex; }

/* ---- Infobulle : la valeur d'abord, le libellé ensuite ---------------------------------------------- */
.dm-tip {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  max-width: 15rem;
  padding: 6px 9px;
  border-radius: var(--pp-radius-md);
  background: var(--pp-primary);
  color: var(--pp-on-primary);
  font-size: 0.75rem;
  line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 8px));
  transition: opacity var(--pp-dur-fast) var(--pp-ease);
  box-shadow: 0 6px 18px rgba(10, 15, 20, 0.2);
}
.dm-tip.is-on { opacity: 1; }
.dm-tip strong { display: block; font-size: 0.875rem; font-weight: var(--pp-weight-semibold); }
.dm-tip span { opacity: 0.78; }

/* ---- Mouvement : apparition à l'écran, bascules ; rien si mouvement réduit ---------------------------- */
@keyframes dm-grow-y { from { transform: scaleY(0); } }
@keyframes dm-grow-x { from { transform: scaleX(0); } }
@keyframes dm-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes dm-pop { from { opacity: 0; transform: scale(0.3); } }
@keyframes dm-pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: no-preference) {
  .dm-on:not(.dm-seen) .dm-col__bar { transform: scaleY(0); }
  .dm-on:not(.dm-seen) :is(.dm-hbar__bar, .dm-meter__fill) { transform: scaleX(0); }
  .dm-seen .dm-col__bar { animation: dm-grow-y 0.7s var(--pp-ease) both; }
  .dm-seen .dm-col:nth-child(2) .dm-col__bar { animation-delay: 70ms; }
  .dm-seen .dm-col:nth-child(3) .dm-col__bar { animation-delay: 140ms; }
  .dm-seen .dm-col:nth-child(4) .dm-col__bar { animation-delay: 210ms; }
  .dm-seen :is(.dm-hbar__bar, .dm-meter__fill) { animation: dm-grow-x 0.7s var(--pp-ease) both; }
  .dm-seen .dm-list__row { animation: dm-in 0.45s var(--pp-ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
  .dm-seen .dm-dot { animation: dm-pop 0.35s var(--pp-ease) both; animation-delay: calc(var(--i, 0) * 45ms + 100ms); }
  .dm-map__dots { transition: opacity var(--pp-dur-slow) var(--pp-ease); }
  .dm-status--wait::before { animation: dm-pulse 0.9s ease-in-out infinite; }
}
@media (forced-colors: active) {
  .dm-col__bar, .dm-hbar__bar, .dm-dot, .dm-meter__fill { border: 1px solid CanvasText; }
}
@media print {
  .dm-ctl, .dm-tip, .dm-tabs__list { display: none !important; }
  .dm-tabpanel[hidden] { display: block !important; }
  .dm-app { box-shadow: none; break-inside: avoid; }
}

/* ============================================================================
   PAGE /demos
   ========================================================================== */
.dm-hero .pp-lead { max-width: 40rem; }
.dm-keyline { list-style: none; display: flex; flex-wrap: wrap; gap: var(--pp-space-2) var(--pp-space-5); margin: var(--pp-space-5) 0 0; padding: 0; font-size: 0.8125rem; color: var(--pp-text-2); }
.dm-keyline li { display: inline-flex; align-items: center; gap: var(--pp-space-2); margin: 0; max-width: none; }
.dm-jump { display: flex; flex-wrap: wrap; gap: var(--pp-space-2); margin-top: var(--pp-space-6); }
@media (max-width: 759px) {
  .dm-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pp-gutter) * -1); padding: 6px var(--pp-gutter); }
  .dm-jump::-webkit-scrollbar { display: none; }
  .dm-jump a { flex: none; }
}
.dm-jump a { position: relative; display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.9rem; border-radius: var(--pp-radius-pill); box-shadow: inset 0 0 0 1px var(--pp-border-strong); font-size: 0.8125rem; font-weight: var(--pp-weight-medium); color: var(--pp-text-1); text-decoration: none; }
.dm-jump a:hover { background: var(--pp-surface-2); color: var(--pp-text-1); }

.dm-block { padding-block: var(--pp-space-12); }
@media (min-width: 760px) { .dm-block { padding-block: var(--pp-space-16); } }
.dm-block__grid { display: grid; gap: var(--pp-space-6); }
@media (min-width: 1100px) {
  .dm-block__grid { grid-template-columns: minmax(0, 18.5rem) minmax(0, 1fr); gap: var(--pp-space-12); align-items: start; }
  .dm-block__text { position: sticky; top: calc(var(--pp-nav-height) + var(--pp-space-8)); }
}
.dm-block__text h2 { margin-bottom: var(--pp-space-4); }
@media (min-width: 980px) { .dm-block__text h2 { font-size: 2rem; line-height: var(--pp-leading-tight); } }
.dm-block__rows { display: grid; gap: var(--pp-space-4); margin: 0; }
.dm-block__row { margin: 0; }
.dm-block__row dt { font-family: var(--pp-font-mono); font-size: var(--pp-text-2xs); font-weight: var(--pp-weight-medium); letter-spacing: var(--pp-tracking-label); text-transform: uppercase; color: var(--pp-text-3); }
.dm-block__row dd { margin: var(--pp-space-1) 0 0; font-size: 0.9375rem; line-height: var(--pp-leading-normal); color: var(--pp-text-2); }
.dm-block__row--knot dd { font-size: var(--pp-text-lg); font-weight: var(--pp-weight-semibold); line-height: var(--pp-leading-snug); letter-spacing: -0.015em; color: var(--pp-text-1); }
.dm-block__try { display: flex; align-items: baseline; gap: var(--pp-space-2); margin: var(--pp-space-5) 0 0; font-size: 0.8125rem; font-weight: var(--pp-weight-medium); color: var(--pp-accent); }
.dm-block__try::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--pp-logo-dot); transform: translateY(-1px); }
.dm-block__links { display: flex; flex-wrap: wrap; gap: var(--pp-space-3) var(--pp-space-5); margin: var(--pp-space-5) 0 0; }
.dm-end .rs-cta-band { margin-top: 0; }
.dm-end__note { margin-top: var(--pp-space-5); }

/* ============================================================================
   ACCUEIL — vitrine à onglets (#cas)
   ========================================================================== */
.dm-show .dm-keyline { margin-top: var(--pp-space-4); }
.dm-tabs__list { display: flex; gap: 4px; width: fit-content; max-width: 100%; padding: 4px; overflow-x: auto; scrollbar-width: none; border-radius: var(--pp-radius-pill); background: var(--pp-surface-2); scroll-snap-type: x proximity; }
.dm-tabs__list::-webkit-scrollbar { display: none; }
.dm-tab { flex: none; min-height: 2.5rem; padding: 0 1.05rem; background: transparent; color: var(--pp-text-2); font-size: 0.875rem; scroll-snap-align: start; }
.dm-tab:hover { color: var(--pp-text-1); }
.dm-tab[aria-selected="true"] { background: var(--pp-primary); color: var(--pp-on-primary); }
@media (max-width: 479px) { .dm-tab__more { display: none; } .dm-tab { padding: 0 0.95rem; } }
.dm-tabs__panels { margin-top: var(--pp-space-5); }
.dm-tabpanel { outline: none; }
.dm-tabpanel:focus-visible { outline: 2px solid var(--pp-border-focus); outline-offset: 6px; border-radius: var(--pp-radius-xl); }
.dm-tabpanel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--pp-space-2) var(--pp-space-6); margin: 0 0 var(--pp-space-4); }
.dm-tabpanel__knot { margin: 0; max-width: 62ch; font-size: 0.9375rem; color: var(--pp-text-1); }
.dm-tabpanel__who { margin-right: var(--pp-space-2); font-family: var(--pp-font-mono); font-size: var(--pp-text-2xs); letter-spacing: var(--pp-tracking-label); text-transform: uppercase; color: var(--pp-text-3); }
.dm-show__links { max-width: none; display: flex; flex-wrap: wrap; gap: var(--pp-space-3) var(--pp-space-6); margin: var(--pp-space-6) 0 0; padding-top: var(--pp-space-5); border-top: 1px solid var(--pp-border); }