/* ============================================================
   Graphiques de l'écran — charts.js (2.47.0)
   ============================================================
   Couleurs : jetons de la charte sémantique (charte.css) et neutres de app.css ; rien en dur.
   Mouvement : transitions courtes en cascade, coupées sous prefers-reduced-motion (en bas de fichier). */

/* ---------- infobulle commune ---------- */
.ch-tip { position: fixed; inset-inline-start: 0; top: 0; left: 0; z-index: 1200; pointer-events: none; min-width: 120px; max-width: 320px;
  padding: 8px 11px 9px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg); backdrop-filter: blur(8px); font-size: 12px; color: var(--text);
  opacity: 0; transition: opacity .12s ease-out; }
.ch-tip.on { opacity: 1; }
.ch-tip-t { font-size: 11px; font-weight: 650; color: var(--text-2); margin-bottom: 4px; text-transform: none; }
.ch-tip-r { display: flex; align-items: center; gap: 7px; line-height: 1.45; }
.ch-tip-r b { font-size: 15px; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ch-tip-r span { color: var(--text-2); }
.ch-tip-k { width: 14px; height: 3px; border-radius: 2px; background: var(--k); flex-shrink: 0; }
.ch-tip-s { margin-top: 3px; font-size: 11px; color: var(--text-muted); }

/* ---------- marques : survol, focus, mise en évidence ---------- */
.ch-m { transition: opacity .18s var(--ease), filter .18s var(--ease), stroke-width .18s var(--ease); }
.ch-m:focus { outline: none; }
.ch-m:focus-visible { filter: drop-shadow(0 0 0.5px var(--text)) drop-shadow(0 0 3px var(--primary)); }
.ch-act { cursor: pointer; }
.ch-hl .ch-m:not(.on) { opacity: .28; }
.ch-hl .ch-m.on { filter: saturate(1.15) brightness(1.04); }
div.ch-hl .ch-m.on, .ch-s100.ch-hl .ch-m.on { filter: saturate(1.2) brightness(1.06); }

/* ---------- anneau segmenté ---------- */
.ch-donut { flex-shrink: 0; overflow: visible; }
.ch-dn-s { transition: stroke-dasharray .9s cubic-bezier(.33, 1, .68, 1), stroke-width .18s var(--ease), opacity .18s var(--ease); }
.ch-dn-s.on, .ch-dn-s:focus-visible { stroke-width: 30px; }
.ch-dn-v { font-variant-numeric: tabular-nums; }
.ch-donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ch-donut-wrap .ch-legend { margin: 0; }

/* ---------- barre 100 % ---------- */
.ch-s100 { display: flex; gap: 2px; height: 12px; border-radius: 7px; overflow: hidden; background: var(--ch-neutre); min-width: 60px; }
.ch-s100.thin { height: 8px; }
.ch-s100-s { display: flex; align-items: center; justify-content: center; min-width: 3px; background: var(--c); height: 100%;
  font-style: normal; transform-origin: left center; }
[dir="rtl"] .ch-s100-s { transform-origin: right center; }
.ch-s100-s span { font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 1px rgb(0 0 0 / .35); white-space: nowrap; }
.ch-s100-s.rest { background: transparent; }
.ch-s100-s:hover, .ch-s100-s.on { transform: scaleY(1.25); }
.ch-s100.big { height: 22px; border-radius: 8px; }

/* ---------- colonnes, barres, jauges ---------- */
.ch-heatmap, .ch-trend { width: 100%; height: auto; }
/* colonnes, matrice, barres empilées : taille naturelle (barres ≤ 30 px), réduites seulement si la place manque —
   étirées à la largeur de leur carte, leurs étiquettes grossissaient jusqu'à 20 px */
.ch-columns, .ch-matrix, .ch-stacked { width: auto; max-width: 100%; height: auto; display: block; margin-inline: auto; }
.ch-col:hover path, .ch-col.on path { filter: brightness(1.08) saturate(1.1); }
.ch-meter { position: relative; height: 10px; border-radius: 6px; overflow: hidden;
  background: color-mix(in srgb, var(--c) 18%, var(--surface)); }
.ch-meter > i { display: block; height: 100%; border-radius: 6px; background: var(--c); transform-origin: left center; }
[dir="rtl"] .ch-meter > i { transform-origin: right center; }
.ch-hbar-t > i, .ch-prog > i { background: var(--c, var(--brand)); }
.ch-hbar { transition: background .15s var(--ease); }
.ch-tl-dot { background: var(--c, var(--brand)); }
.ch-trend .ch-cross { opacity: 0; transition: opacity .12s; pointer-events: none; }
.ch-trend.ch-crossing .ch-cross { opacity: 1; }
.ch-trend .ch-pt { transition: r .15s var(--ease); }
.ch-trend .ch-pt.on { r: 7; }
.ch-trend .ch-zone { cursor: crosshair; }
.ch-radar .ch-pt { transition: r .15s var(--ease); }
.ch-radar .ch-m:hover .ch-pt, .ch-radar .ch-m.on .ch-pt { r: 7.5; }
.ch-mx rect { transition: fill-opacity .18s var(--ease); }
.ch-mx:hover rect, .ch-mx.on rect { fill-opacity: .4; }

/* ---------- légende ---------- */
.ch-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-2); margin-top: 8px; }
.ch-legend.col { flex-direction: column; gap: 4px; }
.ch-legend > span, .ch-legend > button { display: inline-flex; align-items: center; gap: 7px; }
.ch-legend > button { border: 0; background: transparent; color: inherit; font: inherit; padding: 3px 7px; margin: -3px -7px; border-radius: 7px;
  cursor: pointer; transition: background .15s var(--ease), opacity .15s var(--ease); text-align: start; }
.ch-legend > button:hover, .ch-legend > button:focus-visible { background: var(--surface-2); outline: none; }
.ch-legend > button.off { opacity: .45; }
.ch-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; background: var(--c); flex-shrink: 0; }
.ch-legend b { font-variant-numeric: tabular-nums; color: var(--text); margin-inline-start: auto; padding-inline-start: 8px; }
.ch-legend.col > button, .ch-legend.col > span { width: 100%; }

/* ---------- carte de graphique ---------- */
.ch-panel .card-h { gap: 8px 10px; flex-wrap: wrap; align-items: flex-start; }
.ch-panel .card-h > .grow { flex: 1 1 200px; min-width: 0; }
.ch-panel .card-h > .grow .small { margin-top: 2px; }
.audit-dash-aud td { vertical-align: middle; }
.audit-dash-aud .ch-meter { height: 6px; margin-top: 3px; min-width: 70px; }
.audit-dash-plan .ch-meter { margin-top: 6px; }
.audit-dash-plan .ch-s100 { margin-top: 6px; }
.ch-tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ch-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border-soft); margin-inline-end: 4px; }
.ch-seg button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--text-muted); font: inherit;
  font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 6px; cursor: pointer; }
.ch-seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.ch-menu-w { position: relative; }
.ch-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 30; min-width: 200px; padding: 5px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); display: grid; }
.ch-menu button { border: 0; background: transparent; font: inherit; color: var(--text); text-align: start; padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.ch-menu button:hover { background: var(--surface-2); }
.ch-panel-t { max-height: 420px; overflow: auto; }
.ch-panel.ch-full { position: fixed; inset: 3vh 3vw; z-index: 1100; overflow: auto; box-shadow: 0 30px 80px rgb(0 0 0 / .45); }
.ch-panel.ch-full .ch-panel-b { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 70vh; }
.ch-panel.ch-full .ch-panel-b > svg { width: min(100%, 1400px); height: auto; max-height: 78vh; }
body.ch-full-on::after { content: ""; position: fixed; inset: 0; background: var(--overlay); z-index: 1090; }

/* ---------- animations d'entrée (état initial, puis .ca-in) ---------- */
.ca-sweep { transition-property: stroke-dasharray, stroke-width, opacity; }
.ca-rise { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.ca-rise.ca-in { opacity: 1; transform: none; }

/* ---------- impression : l'état final, sans outils ---------- */
@media print {
  .ch-tools, .ch-tip { display: none !important; }
  .ch-hl .ch-m:not(.on) { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-m, .ch-dn-s, .ca-sweep, .ca-rise, .ch-s100-s, .ch-tip, .ch-hbar, .ch-mx rect, .ch-trend .ch-pt, .ch-radar .ch-pt { transition: none !important; }
  .ch-s100-s:hover, .ch-s100-s.on { transform: none; }
}

/* ---------- audit technique : synthèse des anomalies (techresults.js trAnSynthese) ---------- */
.tr-syn { align-items: stretch; }
.tr-syn > .card { margin: 0; }
.tr-syn-cats { display: grid; gap: 9px; }
.tr-syn-cat { display: grid; grid-template-columns: minmax(96px, 150px) 1fr 34px; gap: 10px; align-items: center; font-size: 12.5px; }
.tr-syn-l { border: 0; background: transparent; color: var(--text); font: inherit; text-align: start; padding: 2px 4px; margin: -2px -4px; border-radius: 6px;
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-syn-l:hover, .tr-syn-l:focus-visible { background: var(--surface-2); outline: none; }
.tr-syn-cat > b { text-align: end; font-variant-numeric: tabular-nums; }