/* v1.77 — Tableau de bord « nuit d'atelier » (maquette KAMSA). Préfixe dz-, toujours sombre. GÉNÉRÉ à partir de la maquette puis ajusté. */
.dz { --ink: #05080f; --bg: #070b14; --panel: #0d1422; --panel-2: #111a2b; --line: rgba(148,170,210,.12); --line-2: rgba(148,170,210,.22);
  --fg: #eef2f8; --fg-2: #b9c3d6; --muted: #7d8aa3; --red: #ff2a35; --red-deep: #c4111b; --red-glow: rgba(255,42,53,.45);
  --ok: #2fd27a; --warn: #f5b22e; --info: #3e8bff; --violet: #8b6cff; --display: 'Barlow Semi Condensed', 'Barlow', 'Segoe UI', system-ui, sans-serif; --body: 'Barlow', 'Segoe UI', system-ui, sans-serif; --r: 14px;
  position: relative; isolation: isolate; min-height: 100%; background: var(--bg); color: var(--fg); font: 14px/1.45 var(--body); }
.dz::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(900px 500px at 70% -10%, rgba(255,42,53,.10), transparent 60%), radial-gradient(700px 600px at 0% 100%, rgba(62,139,255,.06), transparent 60%); }
.dz a { color: inherit; text-decoration: none }
.dz button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
.dz h1, .dz h2, .dz h3 { color: inherit }
.dz .ico { width: 18px; height: 18px; flex-shrink: 0 }
.dz .dz-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; padding: 16px 16px 28px; align-items: start }
.dz .dz-col { display: grid; gap: 16px; min-width: 0 }
.dz .dz-panel { position: relative; background: linear-gradient(180deg, rgba(17,26,43,.92), rgba(11,17,29,.92)); border: 1px solid var(--line); border-radius: var(--r); min-width: 0 }
.dz .dz-panel-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0 }
.dz .dz-panel-h h2 { margin: 0; font: 700 18px var(--display); letter-spacing: .01em }
.dz .dz-panel-h .dz-tool { margin-left: auto; display: flex; gap: 6px; color: var(--muted) }
.dz .dz-hicon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(180deg, #ff3a44, #b40f18); color: #fff; box-shadow: 0 6px 16px -6px var(--red-glow) }
.dz .dz-hicon .ico { width: 16px; height: 16px }
.dz .dz-chip { font-size: 12px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--fg-2) }
.dz .dz-num { font-family: var(--display); font-variant-numeric: tabular-nums }
.dz .dz-rise { animation: dz-rise .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--d, 0) * 70ms) }
@keyframes dz-rise { from { transform: translateY(14px) } to { transform: none } }
.dz .dz-empty { padding: 18px 16px; color: var(--muted); font-size: 12.5px }
.dz .dz-hero { height: 230px; overflow: hidden; border-radius: var(--r); position: relative; border: 1px solid rgba(255,42,53,.25); isolation: isolate }
.dz .dz-hero .dz-photo { position: absolute; inset: -4%; background: url(../assets/dash-hero.jpg) right center / cover no-repeat; animation: dz-kenburns 26s ease-in-out infinite alternate; z-index: -3 }
@keyframes dz-kenburns { from { transform: scale(1.04) translateX(0) } to { transform: scale(1.12) translateX(-2.5%) } }
.dz .dz-hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, #05080f 0%, rgba(5,8,15,.94) 36%, rgba(5,8,15,.5) 60%, rgba(5,8,15,.15) 75%, rgba(5,8,15,.55) 100%) }
.dz .dz-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none }
.dz .dz-scan { position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255,42,53,.0) 30%, rgba(255,60,70,.28) 50%, transparent 70%); mix-blend-mode: screen; animation: dz-scan 7s ease-in-out infinite 1.2s }
@keyframes dz-scan { 0% { left: -40% } 45%, 100% { left: 120% } }
.dz .dz-hero-txt { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); max-width: 470px; display: grid; gap: 8px }
.dz .dz-hero-txt .dz-mark { font: 800 13px var(--display); letter-spacing: .32em; color: var(--fg-2) }
.dz .dz-hero-txt h1 { margin: 0; font: 800 clamp(26px, 3.1vw, 38px)/1.05 var(--display); letter-spacing: -.01em; text-wrap: balance }
.dz .dz-shine { background: linear-gradient(100deg, #ff2a35 0%, #ff2a35 40%, #ffd0d3 50%, #ff2a35 60%, #ff2a35 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: dz-textshine 5s ease-in-out infinite }
@keyframes dz-textshine { 0% { background-position: 120% 0 } 60%, 100% { background-position: -30% 0 } }
.dz .dz-hero-txt p { margin: 0; color: var(--fg-2); max-width: 46ch; font-size: 13.5px }
.dz .dz-vals { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: grid; gap: 10px }
.dz .dz-val { display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 30px; background: rgba(5,8,15,.55); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); font-weight: 600; font-size: 13px;
  animation: dz-slidein .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.5s + var(--d) * 150ms) }
.dz .dz-val i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,42,53,.6); color: #ff6b73 }
.dz .dz-val i .ico { width: 14px; height: 14px }
@keyframes dz-slidein { from { transform: translateX(30px) } to { transform: none } }
.dz .dz-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr); gap: 12px }
.dz .dz-kpi { position: relative; padding: 14px 14px 12px; border-radius: var(--r); overflow: hidden; display: grid; gap: 4px; min-height: 120px; color: #fff;
  border: 1px solid var(--k-line); background: radial-gradient(140% 120% at 0% 0%, var(--k-1), var(--k-2) 70%); transition: transform .25s, box-shadow .25s }
.dz .dz-kpi:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px var(--k-glow), 0 0 0 1px var(--k-glow) }
.dz .dz-kpi::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%); background-size: 260% 100%; background-position: 130% 0; pointer-events: none }
.dz .dz-kpi:hover::after { animation: dz-sweep 1s ease-out }
@keyframes dz-sweep { to { background-position: -30% 0 } }
.dz .dz-kpi .dz-t { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13.5px }
.dz .dz-kpi .dz-t span.dz-i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18) }
.dz .dz-kpi .dz-t span.dz-i .ico { width: 20px; height: 20px }
.dz .dz-kpi .dz-v { display: flex; align-items: flex-end; gap: 10px }
.dz .dz-kpi .dz-v .dz-num { font-size: 40px; font-weight: 700; line-height: 1 }
.dz .dz-trend { font-size: 12px; font-weight: 700; color: #7dffb5; display: inline-flex; gap: 3px; align-items: center; margin-bottom: 6px }
.dz .dz-trend.dz-down { color: #ffb3b7 }
.dz .dz-kpi svg.dz-spark { position: absolute; right: 10px; bottom: 30px; width: 46%; height: 38px; overflow: visible }
.dz .dz-spark path { fill: none; stroke: var(--k-spark); stroke-width: 2; stroke-dasharray: 300; stroke-dashoffset: 300; animation: dz-draw 1.6s ease-out .4s forwards; filter: drop-shadow(0 0 4px var(--k-spark)) }
@keyframes dz-draw { to { stroke-dashoffset: 0 } }
.dz .dz-kpi .dz-more { font-size: 12.5px; color: rgba(255,255,255,.75); display: flex; align-items: center; gap: 4px; margin-top: auto }
.dz .dz-kpi .dz-more .ico { width: 14px; height: 14px; transition: transform .2s }
.dz .dz-kpi:hover .dz-more .ico { transform: translateX(4px) }
.dz .dz-k-red { --k-1: #ff3a44; --k-2: #8f0b12; --k-line: rgba(255,90,100,.5); --k-glow: rgba(255,42,53,.6); --k-spark: #ffd1d4 }
.dz .dz-k-navy { --k-1: #1e3a66; --k-2: #0c1527; --k-line: rgba(90,140,220,.35); --k-glow: rgba(62,139,255,.45); --k-spark: #4ff0c8 }
.dz .dz-k-amber { --k-1: #b8741a; --k-2: #3a2108; --k-line: rgba(245,178,46,.45); --k-glow: rgba(245,178,46,.45); --k-spark: #ffe08a }
.dz .dz-k-violet { --k-1: #4a35c9; --k-2: #160f45; --k-line: rgba(139,108,255,.45); --k-glow: rgba(139,108,255,.5); --k-spark: #c3b4ff }
.dz .dz-today { padding: 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: linear-gradient(160deg, rgba(17,26,43,.95), rgba(8,12,22,.95)), linear-gradient(0deg, #000, #000); display: grid; gap: 10px; position: relative; overflow: hidden }
.dz .dz-today::before { content: ''; position: absolute; right: -10px; top: -10px; width: 170px; height: 90px; background: repeating-linear-gradient(90deg, rgba(62,139,255,.08) 0 6px, transparent 6px 14px); mask: linear-gradient(180deg, #000, transparent); -webkit-mask: linear-gradient(180deg, #000, transparent) }
.dz .dz-today .dz-d { display: flex; gap: 12px; align-items: center }
.dz .dz-today .dz-d .ico { width: 30px; height: 30px; color: var(--fg-2) }
.dz .dz-today small { color: var(--muted); display: block }
.dz .dz-today b { font: 600 16px var(--display) }
.dz .dz-clock { font: 700 22px var(--display); font-variant-numeric: tabular-nums; letter-spacing: .02em }
.dz .dz-clock i { font-style: normal; animation: dz-blink 1s steps(1) infinite } @keyframes dz-blink { 50% { opacity: .2 } }
.dz .dz-quick { display: flex; flex-wrap: wrap; gap: 6px }
.dz .dz-qb { display: inline-flex; align-items: center; gap: 4px; padding: 7px 10px; border-radius: 8px; font-weight: 600; font-size: 12.5px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); transition: background .2s, border-color .2s }
.dz .dz-qb:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.07) }
.dz .dz-qb.dz-p { background: linear-gradient(180deg, #ff3a44, #c4111b); border-color: transparent; box-shadow: 0 6px 16px -8px var(--red-glow) }
.dz .dz-flow { padding: 14px 16px 16px; display: grid; gap: 12px }
.dz .dz-stages { display: grid; grid-template-columns: repeat(9, minmax(86px, 1fr)); gap: 12px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; scrollbar-color: #1d2840 transparent }
.dz .dz-stage { position: relative; border-radius: 12px; padding: 10px 10px 9px; min-height: 112px; display: grid; gap: 4px; align-content: start; color: #fff; cursor: pointer;
  background: linear-gradient(165deg, var(--s1), var(--s2)); border: 1px solid var(--s-line); transition: transform .25s, box-shadow .25s }
.dz .dz-stage:hover, .dz .dz-stage.dz-sel { transform: translateY(-4px); box-shadow: 0 16px 30px -16px var(--s-glow), 0 0 0 1px var(--s-glow) }
.dz .dz-stage:not(:last-child)::after { content: ''; position: absolute; right: -10px; top: 50%; width: 10px; height: 10px; border-top: 2.5px solid var(--s-glow); border-right: 2.5px solid var(--s-glow); transform: translateY(-50%) rotate(45deg); animation: dz-nudge 1.6s ease-in-out infinite; animation-delay: calc(var(--d) * 120ms) }
@keyframes dz-nudge { 0%,100% { transform: translateY(-50%) rotate(45deg) translate(0, 0); opacity: .45 } 50% { transform: translateY(-50%) rotate(45deg) translate(2px, -2px); opacity: 1 } }
.dz .dz-stage .dz-h { display: flex; align-items: center; gap: 5px; font: 700 10.5px var(--display); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-transform: uppercase }
.dz .dz-stage .dz-h span { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14) }
.dz .dz-stage .dz-h .ico { width: 15px; height: 15px }
.dz .dz-stage .dz-n { font: 700 28px/1 var(--display); margin-top: 4px; font-variant-numeric: tabular-nums }
.dz .dz-stage .dz-n small { font-size: 15px; opacity: .55; margin-left: 3px }
.dz .dz-stage .dz-l { font-size: 11.5px; opacity: .85 }
.dz .dz-bar { height: 5px; border-radius: 3px; background: rgba(0,0,0,.35); overflow: hidden; margin-top: auto }
.dz .dz-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, rgba(255,255,255,.7), #fff); box-shadow: 0 0 8px rgba(255,255,255,.6); transition: width 1.4s cubic-bezier(.2,.8,.2,1) }
.dz .dz-stage .dz-pc { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; opacity: .9 }
.dz .dz-s-green { --s1: #1d9a55; --s2: #0b3d24; --s-line: rgba(47,210,122,.45); --s-glow: rgba(47,210,122,.7) }
.dz .dz-s-teal { --s1: #127e94; --s2: #072f3a; --s-line: rgba(40,200,230,.4); --s-glow: rgba(40,200,230,.7) }
.dz .dz-s-amber { --s1: #b56e12; --s2: #3d2306; --s-line: rgba(245,178,46,.45); --s-glow: rgba(245,178,46,.75) }
.dz .dz-s-crimson { --s1: #b3122e; --s2: #430713; --s-line: rgba(255,70,100,.45); --s-glow: rgba(255,70,100,.75) }
.dz .dz-s-blue { --s1: #1f4fb5; --s2: #0b1a45; --s-line: rgba(62,139,255,.45); --s-glow: rgba(62,139,255,.8) }
.dz .dz-s-red { --s1: #d11a24; --s2: #4a0609; --s-line: rgba(255,42,53,.5); --s-glow: rgba(255,42,53,.8) }
.dz .dz-s-orange { --s1: #c95a12; --s2: #4a1d04; --s-line: rgba(255,140,50,.45); --s-glow: rgba(255,140,50,.75) }
.dz .dz-s-lime { --s1: #1f8f45; --s2: #0a2f17; --s-line: rgba(80,220,120,.45); --s-glow: rgba(80,220,120,.7) }
.dz .dz-s-taupe { --s1: #6a5547; --s2: #241b15; --s-line: rgba(200,170,150,.35); --s-glow: rgba(210,180,160,.6) }
.dz .dz-belt { position: relative; height: 26px; border-radius: 13px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 18px, rgba(255,255,255,.015) 18px 36px); border: 1px solid var(--line); overflow: hidden }
.dz .dz-belt::before { content: ''; position: absolute; inset: 0; background: inherit; animation: dz-belt 2.4s linear infinite }
@keyframes dz-belt { to { background-position: 36px 0 } }
.dz .dz-car { position: absolute; top: 4px; height: 16px; width: 26px; color: var(--c); filter: drop-shadow(0 0 6px var(--c)); transition: left 1.8s cubic-bezier(.45,0,.2,1) }
.dz .dz-car .ico { width: 26px; height: 16px; stroke-width: 2.2 }
.dz .dz-belt-cap { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted) }
.dz .dz-fin { padding: 14px 16px 16px; display: grid; gap: 12px }
.dz .dz-fkpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px }
.dz .dz-fk { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 11px; background: rgba(255,255,255,.025); border: 1px solid var(--line) }
.dz .dz-fk span.dz-i { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c) }
.dz .dz-fk { min-width: 0 }
.dz .dz-fk div { min-width: 0 }
.dz .dz-fk small { display: block; color: var(--muted); font-size: 12px }
.dz .dz-fk b { white-space: nowrap; font: 700 17px/1.1 var(--display); font-variant-numeric: tabular-nums }
.dz .dz-fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px }
.dz .dz-fbox { padding: 12px; border-radius: 11px; background: rgba(0,0,0,.18); border: 1px solid var(--line); min-width: 0 }
.dz .dz-fbox h3 { margin: 0 0 10px; font: 700 13.5px var(--display); letter-spacing: .02em; display: flex; align-items: center; gap: 7px; color: var(--fg-2) }
.dz .dz-fbox h3 .ico { width: 15px; height: 15px }
.dz .dz-hb { display: grid; grid-template-columns: minmax(70px, 110px) 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 4px 0 }
.dz .dz-hb span { color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dz .dz-hb div { height: 9px; border-radius: 5px; background: rgba(255,255,255,.05); overflow: hidden }
.dz .dz-hb div i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, #8f0b12, #ff2a35); box-shadow: 0 0 10px rgba(255,42,53,.55); transition: width 1.3s cubic-bezier(.2,.8,.2,1) }
.dz .dz-hb b { white-space: nowrap; text-align: right; font: 600 12.5px var(--display); font-variant-numeric: tabular-nums }
.dz .dz-gap { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; font-size: 12.5px; border-bottom: 1px dashed var(--line) }
.dz .dz-gap:last-child { border-bottom: 0 }
.dz .dz-gap i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c) }
.dz .dz-gap small { display: block; color: var(--muted); font-size: 11.5px }
.dz .dz-gap b { font: 600 13px var(--display); font-variant-numeric: tabular-nums }
.dz .dz-chart { position: relative; height: 150px }
.dz .dz-chart canvas { width: 100%; height: 100% }
.dz .dz-tip { position: absolute; pointer-events: none; padding: 6px 9px; border-radius: 8px; background: rgba(5,8,15,.92); border: 1px solid rgba(255,42,53,.5); font-size: 12px; white-space: nowrap; transform: translate(-50%, -120%); opacity: 0; transition: opacity .15s }
.dz .dz-tip b { font: 700 14px var(--display); display: block }
.dz .dz-bottom { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px }
.dz .dz-bottom .dz-panel { padding-bottom: 14px }
.dz .dz-donut { display: flex; gap: 16px; align-items: center; padding: 14px 16px 0 }
.dz .dz-donut svg { width: 120px; height: 120px; flex-shrink: 0; transform: rotate(-90deg); filter: drop-shadow(0 0 10px rgba(255,42,53,.25)) }
.dz .dz-donut circle.dz-seg { fill: none; stroke-width: 13; transition: stroke-dasharray 1.4s cubic-bezier(.2,.8,.2,1) }
.dz .dz-donut .dz-c { position: relative }
.dz .dz-donut .dz-c b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 26px var(--display) }
.dz .dz-legend { display: grid; gap: 7px; font-size: 12.5px; flex: 1; min-width: 0 }
.dz .dz-legend div { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center }
.dz .dz-legend i { width: 10px; height: 10px; border-radius: 50% }
.dz .dz-legend b { font: 600 13px var(--display) }
.dz .dz-big { padding: 6px 16px 0; font: 700 30px var(--display); font-variant-numeric: tabular-nums }
.dz .dz-bars { display: flex; align-items: flex-end; gap: 5px; height: 92px; padding: 6px 16px 0 }
.dz .dz-bars i { flex: 1; border-radius: 3px 3px 0 0; height: 4%; background: linear-gradient(180deg, #ff4a54, #5a0a10); transition: height 1.2s cubic-bezier(.2,.8,.2,1); position: relative }
.dz .dz-bars i.dz-now { background: linear-gradient(180deg, #ffd1d4, #ff2a35); box-shadow: 0 0 14px rgba(255,42,53,.7) }
.dz .dz-bars-x { display: flex; justify-content: space-between; padding: 4px 16px 0; font-size: 11px; color: var(--muted) }
.dz .dz-svc { display: grid; grid-template-columns: 1fr 70px 34px; gap: 8px; align-items: center; padding: 6px 16px; font-size: 12.5px }
.dz .dz-svc span { display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden }
.dz .dz-svc span i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex-shrink: 0 }
.dz .dz-svc div { height: 6px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden }
.dz .dz-svc div u { display: block; height: 100%; width: 0; background: var(--c); transition: width 1.2s cubic-bezier(.2,.8,.2,1) }
.dz .dz-svc b { text-align: right; font: 600 12.5px var(--display) }
.dz .dz-note { display: flex; gap: 10px; padding: 8px 16px; align-items: flex-start; font-size: 12.5px }
.dz .dz-note span.dz-i { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,42,53,.15); color: #ff6b73; flex-shrink: 0 }
.dz .dz-note span.dz-i .ico { width: 15px; height: 15px }
.dz .dz-note small { display: block; color: var(--muted) }
.dz .dz-note em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 11px; white-space: nowrap }
.dz .dz-rail { position: sticky; top: 16px; display: grid; gap: 16px }
.dz .dz-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(47,210,122,.6); animation: dz-ping 1.6s infinite }
@keyframes dz-ping { 70% { box-shadow: 0 0 0 8px rgba(47,210,122,0) } 100% { box-shadow: 0 0 0 0 rgba(47,210,122,0) } }
.dz .dz-count { margin-left: auto; min-width: 22px; height: 22px; border-radius: 6px; background: var(--red); color: #fff; font: 700 12px/22px var(--body); text-align: center }
.dz .dz-feed { list-style: none; margin: 0; padding: 10px 10px 12px; display: grid; gap: 4px; max-height: 360px; overflow: hidden }
.dz .dz-ev { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; transition: background .3s }
.dz .dz-ev:hover { background: rgba(255,255,255,.035) }
.dz .dz-ev.dz-new { animation: dz-evin .7s cubic-bezier(.2,.8,.2,1), dz-flash 2.4s ease-out }
@keyframes dz-evin { from { transform: translateX(24px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes dz-flash { 0% { background: rgba(255,42,53,.18) } 100% { background: transparent } }
.dz .dz-ev span.dz-i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, var(--c), color-mix(in srgb, var(--c) 45%, #000)); box-shadow: 0 6px 14px -8px var(--c) }
.dz .dz-ev span.dz-i .ico { width: 17px; height: 17px }
.dz .dz-ev b { display: block; font-size: 13px; font-weight: 600 }
.dz .dz-ev small { color: var(--muted); font-size: 12px }
.dz .dz-ev em { font-style: normal; font-size: 11px; color: var(--muted); align-self: start; padding-top: 3px }
.dz .dz-rem { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 14px }
.dz .dz-rem span.dz-i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--c); color: var(--c) }
.dz .dz-rem span.dz-i .ico { width: 16px; height: 16px }
.dz .dz-rem b { font-size: 13px; display: block }
.dz .dz-rem small { color: var(--muted); font-size: 12px }
.dz .dz-due { font: 700 12px var(--display); padding: 3px 8px; border-radius: 6px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); white-space: nowrap }
.dz .dz-rail-more { display: block; text-align: right; padding: 4px 16px 12px; color: #ff6b73; font-weight: 600; font-size: 12.5px }

/* v1.98.x — écrans 1280–1600 px (colonne centrale ≈ 700 px) : 5 cases sur une ligne coupaient les libellés
   (« Véhicules en cours »), la date, l'horloge et « + OR ». Les 4 indicateurs restent sur une ligne, la case
   « Aujourd'hui » passe dessous en bandeau (date + horloge à gauche, raccourcis à droite). */
@media (max-width: 1600px) {
.dz .dz-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.dz .dz-today { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px }
.dz .dz-today .dz-d { min-width: 0 }
.dz .dz-today .dz-d > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px }
.dz .dz-today .dz-d small { flex-basis: 100% }
.dz .dz-kpi .dz-t { line-height: 1.2 }
/* cases du flux étroites (≈ 86 px) : icône au-dessus du libellé, étapes sur deux lignes plutôt que coupées */
.dz .dz-stage { padding: 10px 7px 9px }
.dz .dz-stage .dz-h { flex-wrap: wrap; white-space: normal; letter-spacing: 0; font-size: 10px; line-height: 1.15 }
.dz .dz-stages .dz-stage .dz-l { white-space: normal; text-overflow: clip; line-height: 1.3 }
.dz .dz-stages .dz-stage .dz-l a { white-space: nowrap } }
@media (max-width: 1360px) {
.dz .dz-main { grid-template-columns: 1fr }
.dz .dz-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)) }  }
@media (max-width: 1100px) {
.dz .dz-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.dz .dz-today { grid-column: 1 / -1 }
.dz .dz-fgrid { grid-template-columns: 1fr }
.dz .dz-fkpis { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 860px) {
.dz .dz-vals { display: none }
.dz .dz-rail { grid-template-columns: 1fr } }
@media (max-width: 560px) {
.dz .dz-bottom, .dz .dz-kpis { grid-template-columns: 1fr }
.dz .dz-fkpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.dz .dz-hero { height: 250px }
.dz .dz-hero-txt { left: 18px; right: 18px } }
@media (prefers-reduced-motion: reduce) {
.dz *, .dz *::before, .dz *::after { animation: none !important; transition: none !important } }

/* ajouts ERP */
.dz .dz-l a { color: inherit; text-decoration: none } .dz .dz-l a:hover { text-decoration: underline }
.dz .dz-stage .dz-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dz .dz-panel-h .dz-tool a.dz-chip:hover { border-color: rgba(255,42,53,.5); color: #fff }
.dz .dz-gap div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dz .dz-today .dz-clock { margin-top: 2px }
.dz .dz-rem:hover, .dz .dz-note:hover { background: rgba(255,255,255,.03) }
.dz .dz-note div { min-width: 0 }
.dz .dz-empty { list-style: none }
.dz .dz-hero h1 { color: #fff }
@media print { .dz-hero canvas, .dz-scan { display: none } }
.dz .dz-chip { white-space: nowrap }