/* ML UREL — KPI V6.3, 27/09/2026.
   Complément de KPI Premium V6.2. Réorganisation visuelle des éléments existants.
   Aucun calcul, route, appel réseau ou contenu chiffré ajouté.
   Les deux identifiants garantissent la priorité sur les anciennes couches CSS.
   Les largeurs des barres restent intégralement définies par l'application. */

#root #app.topnav-layout {
  --k63-gap: 12px;
  --k63-ink: #152e52;
  --k63-muted: #62738c;
  --k63-value: #123f82;
  --k63-border: #e1e8f2;
  --k63-soft: #f5f8fc;
}

/* Même ordre des cartes. Cinq colonnes sur grand écran, adaptation en dessous. */
#root #app.topnav-layout :is(.dg-synth-kpi-grid, .dg-global-kpis, .ru-kpi-grid, .pilotage-kpis, .price-dash-kpis, .kgrid) {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: var(--k63-gap) !important;
  align-items: stretch !important;
}

#root #app.topnav-layout :is(.dg-kpi-modern, .dg-synth-kpi-grid > .dg-exec-card, .dg-kpi-card, .ru-kpi, .ru-mini, .pilotage-kpi, .price-dash-kpi, .kcard, .kpi, .sig-kpi-card, .sig-kpi) {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 16px !important;
  border: 1px solid var(--k63-border) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 3px 6px #152e5203, 0 10px 24px #152e5209 !important;
  text-align: left;
}
#root #app.topnav-layout :is(.dg-kpi-modern, .ru-kpi, .ru-mini, .pilotage-kpi, .price-dash-kpi, .kcard)::before {
  display: none !important;
}
#root #app.topnav-layout :is(.dg-card-title, .ru-kpi-title, .ru-mini-title, .pilotage-kpi-label, .klbl, .kpi-lbl, .dg-kpi-copy > span, .price-dash-kpi small) {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--k63-ink) !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
  text-overflow: clip !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
#root #app.topnav-layout :is(.dg-kpi-modern-value, .ru-kpi-value-row > strong, .ru-mini-body > strong, .pilotage-kpi-value, .price-dash-kpi strong, .dg-kpi-copy > strong, .kval, .kpi-val) {
  font-size: clamp(24px, 1.75vw, 30px) !important;
  font-weight: 750 !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
  font-variant-numeric: tabular-nums;
  color: var(--k63-value) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
}
#root #app.topnav-layout :is(.dg-card-icon, .ru-kpi-icon, .ru-mini-icon, .pilotage-kpi-icon, .dg-kpi-icon, .price-dash-kpi-icon) {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  border-radius: 11px !important;
  box-shadow: none !important;
}

/* Direction générale : titre, valeur, comparaison, objectif, puis statut. */
#root #app.topnav-layout .dg-kpi-modern {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
#root #app.topnav-layout .dg-kpi-modern .dg-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 36px !important;
  margin: 0 !important;
}
#root #app.topnav-layout .dg-kpi-modern-value { margin: 14px 0 6px !important; }
#root #app.topnav-layout .dg-kpi-modern-period {
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: var(--k63-muted) !important;
  margin: 0 0 12px !important;
  white-space: normal !important;
}
#root #app.topnav-layout :is(.dg-kpi-compare-row, .ru-kpi-boxes, .ru-metric-comparison) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin: 0 !important;
}
#root #app.topnav-layout :is(.dg-kpi-compare-box, .dg-kpi-evolution-box, .ru-kpi-box, .ru-metric-comparison > span) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 9px !important;
  border: 1px solid var(--k63-border) !important;
  border-radius: 10px !important;
  background: var(--k63-soft) !important;
  box-shadow: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
#root #app.topnav-layout :is(.dg-kpi-compare-box > span, .dg-kpi-evolution-box > span, .ru-box-label, .ru-metric-comparison > span) {
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--k63-muted) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}
#root #app.topnav-layout :is(.dg-kpi-compare-box > b, .dg-kpi-evolution-box > b, .ru-box-value, .ru-metric-comparison > span > b) {
  display: block !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
  color: var(--k63-ink) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-variant-numeric: tabular-nums;
}
/* Réutilise les états fournis ; la variation n'est jamais recalculée en CSS. */
#root #app.topnav-layout :is(.dg-kpi-evolution-box.up, .ru-metric-comparison > .ru-delta.up) { background: #eff8f3 !important; border-color: #d3eadd !important; }
#root #app.topnav-layout :is(.dg-kpi-evolution-box.down, .ru-metric-comparison > .ru-delta.down) { background: #fff4f2 !important; border-color: #f3dcd6 !important; }
#root #app.topnav-layout :is(.dg-kpi-evolution-box.flat, .ru-metric-comparison > .ru-delta.neutral) { background: var(--k63-soft) !important; }
#root #app.topnav-layout :is(.dg-kpi-evolution-box.up > b, .ru-metric-comparison > .ru-delta.up) { color: #17784f !important; }
#root #app.topnav-layout :is(.dg-kpi-evolution-box.down > b, .ru-metric-comparison > .ru-delta.down) { color: #bf4637 !important; }
#root #app.topnav-layout :is(.dg-kpi-evolution-box.flat > b, .ru-metric-comparison > .ru-delta.neutral) { color: var(--k63-muted) !important; }
#root #app.topnav-layout .ru-metric-comparison > .ru-delta { font-size: 13px !important; font-weight: 700 !important; }
#root #app.topnav-layout .ru-metric-comparison > .ru-delta::before { content: "Évolution"; font-size: 10px; font-weight: 600; color: var(--k63-muted); }
#root #app.topnav-layout .ru-kpi-box.evolution .ru-box-value { color: var(--objective-tone, var(--k63-ink)) !important; }

/* Détache visuellement la cible et garde intactes toutes les barres réelles. */
#root #app.topnav-layout .dg-kpi-modern-separator { height: 1px !important; margin: 14px 0 12px !important; background: #e8edf5 !important; }
#root #app.topnav-layout .dg-kpi-objective-row { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; gap: 7px !important; align-items: center !important; font-size: 11px !important; }
#root #app.topnav-layout .dg-kpi-objective-row > b { font-size: 12px !important; white-space: normal !important; overflow: visible !important; overflow-wrap: anywhere; }
#root #app.topnav-layout :is(.dg-kpi-modern-progress, .ru-target-bar, .ml-global-objective-bar, .ml-global-objective-track) { height: 6px !important; min-height: 6px !important; border-radius: 999px !important; box-shadow: none !important; background: #e9eef5 !important; margin-top: 8px !important; }
#root #app.topnav-layout :is(.dg-kpi-modern-scale, .ru-target-scale, .ml-global-objective-scale) { font-size: 10px !important; line-height: 1.4 !important; margin-top: 5px !important; }
#root #app.topnav-layout :is(.dg-kpi-modern-scale b, .ru-target-scale strong, .ml-global-objective-scale strong) { font-size: 11px !important; font-variant-numeric: tabular-nums; }
#root #app.topnav-layout :is(.ru-target-block, .ml-global-objective) { grid-column: 1 / -1 !important; padding: 12px 0 0 !important; margin-top: 8px !important; border: 0 !important; border-top: 1px solid #e8edf5 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
#root #app.topnav-layout :is(.ru-target-headline, .ru-target-summary, .ml-global-objective-head) { font-size: 11px !important; line-height: 1.4 !important; gap: 8px !important; }
#root #app.topnav-layout :is(.ru-target-headline b, .ru-target-summary strong, .ml-global-objective-head b) { font-size: 12px !important; font-variant-numeric: tabular-nums; }
#root #app.topnav-layout .ru-target-block-rich { gap: 10px !important; }

/* Statut compact et accès à l'analyse déjà proposé par la carte. */
#root #app.topnav-layout .dg-kpi-status-banner {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px !important;
  width: 100% !important;
  min-height: 30px !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
#root #app.topnav-layout .dg-kpi-status-banner > b { display: inline-block; width: auto; padding: 5px 8px; border-radius: 999px; font-size: 10px !important; font-weight: 650 !important; line-height: 1.3; }
#root #app.topnav-layout .dg-kpi-status-banner.bad > b { color: #b74637; background: #fff1ee; }
#root #app.topnav-layout .dg-kpi-status-banner.ok > b { color: #17784f; background: #eef8f2; }
#root #app.topnav-layout .dg-kpi-status-banner.partial > b { color: #966117; background: #fff6e8; }
#root #app.topnav-layout .dg-kpi-status-banner.neutral > b { color: #65758d; background: #f1f4f8; }
#root #app.topnav-layout .dg-kpi-status-banner > small { margin-left: auto !important; font-size: 10px !important; line-height: 1.4; opacity: 1 !important; }
/* La zone existe déjà et la carte possède déjà son action de diagnostic.
   Le texte accessible d'origine reste dans le DOM ; seule sa présentation change. */
#root #app.topnav-layout .dg-kpi-modern.diagnostic-action .dg-kpi-status-banner > small:not(:empty) { font-size: 0 !important; color: #255dc7 !important; }
#root #app.topnav-layout .dg-kpi-modern.diagnostic-action .dg-kpi-status-banner > small:not(:empty)::after { content: "Voir analyse ›"; font-size: 10px; font-weight: 650; white-space: nowrap; }
#root #app.topnav-layout :is(.ru-target-status, .ru-status-main, .ml-global-objective-status, .ru-objective-status) { font-size: 10px !important; line-height: 1.4 !important; }
#root #app.topnav-layout .ru-target-status { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; align-items: center !important; }
#root #app.topnav-layout :is(.ru-status-main, .ru-objective-status, .ml-global-objective-status) { width: fit-content !important; max-width: 100%; padding: 5px 8px !important; border-radius: 999px !important; white-space: normal !important; }
#root #app.topnav-layout .ru-status-cta { margin-left: auto !important; font-size: 11px !important; color: #255dc7 !important; }

/* UREL : la valeur et les détails utilisent toute la largeur de la carte.
   display:contents ne déplace ni ne copie les nœuds React. */
#root #app.topnav-layout :is(.ru-kpi, .ru-mini) { display: grid !important; grid-template-columns: 36px minmax(0, 1fr) !important; gap: 10px !important; align-content: start !important; }
#root #app.topnav-layout :is(.ru-kpi-body, .ru-mini-body) { display: contents !important; }
#root #app.topnav-layout :is(.ru-kpi-icon, .ru-mini-icon) { grid-column: 1 !important; grid-row: 1 !important; }
#root #app.topnav-layout :is(.ru-kpi-head, .ru-mini-title) { grid-column: 2 !important; grid-row: 1 !important; align-self: center; }
#root #app.topnav-layout :is(.ru-kpi-value-row, .ru-mini-body > strong) { grid-column: 1 / -1 !important; grid-row: 2 !important; margin: 3px 0 !important; }
#root #app.topnav-layout :is(.ru-kpi-foot, .ru-mini-body > div:not(.ru-mini-title)) { grid-column: 1 / -1 !important; margin: 0 !important; }
#root #app.topnav-layout :is(.ru-kpi-foot, .ru-mini-note, .pilotage-kpi-hint, .dg-kpi-copy small, .price-dash-kpi em) { font-size: 11px !important; line-height: 1.45 !important; color: var(--k63-muted) !important; }

/* Modules opérationnels : icône et libellé en tête, valeur sur la ligne suivante. */
#root #app.topnav-layout .pilotage-kpi { display: grid !important; grid-template-columns: 36px minmax(0, 1fr) !important; grid-template-rows: auto auto auto !important; row-gap: 10px !important; align-content: start !important; }
#root #app.topnav-layout .pilotage-kpi-icon { grid-row: 1 !important; grid-column: 1 !important; }
#root #app.topnav-layout .pilotage-kpi-label { grid-row: 1 !important; grid-column: 2 !important; align-self: center !important; }
#root #app.topnav-layout .pilotage-kpi-value { grid-row: 2 !important; grid-column: 1 / -1 !important; }
#root #app.topnav-layout .pilotage-kpi-hint { grid-row: 3 !important; grid-column: 1 / -1 !important; }
#root #app.topnav-layout :is(.dg-kpi-card, .price-dash-kpi) { grid-template-columns: 36px minmax(0, 1fr) !important; gap: 10px !important; }
#root #app.topnav-layout :is(.dg-kpi-copy, .price-dash-kpi > div:last-child) { min-width: 0; }
#root #app.topnav-layout .dg-synth-kpi-grid > .dg-exec-card:not(.dg-kpi-modern) > span { font-size: 12px !important; line-height: 1.4 !important; color: var(--k63-ink) !important; }
#root #app.topnav-layout .dg-synth-kpi-grid > .dg-exec-card:not(.dg-kpi-modern) > strong:first-of-type { font-size: clamp(24px, 1.75vw, 30px) !important; line-height: 1.12 !important; color: var(--k63-value) !important; white-space: normal !important; overflow-wrap: anywhere; }
#root #app.topnav-layout .dg-synth-kpi-grid > .dg-exec-card:not(.dg-kpi-modern) > small { font-size: 11px !important; line-height: 1.45 !important; color: var(--k63-muted) !important; }

/* Les règles de masquage de l'application gardent leur priorité. */
#root #app.topnav-layout :is(.ml-v5527-hidden, .ml-v5530-hidden) { display: none !important; }

@media (max-width: 1279px) {
  #root #app.topnav-layout :is(.dg-synth-kpi-grid, .dg-global-kpis, .ru-kpi-grid, .pilotage-kpis, .price-dash-kpis, .kgrid) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 820px) {
  #root #app.topnav-layout :is(.dg-synth-kpi-grid, .dg-global-kpis, .ru-kpi-grid, .pilotage-kpis, .price-dash-kpis, .kgrid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 540px) {
  #root #app.topnav-layout :is(.dg-synth-kpi-grid, .dg-global-kpis, .ru-kpi-grid, .pilotage-kpis, .price-dash-kpis, .kgrid) { grid-template-columns: minmax(0, 1fr) !important; }
  #root #app.topnav-layout :is(.dg-kpi-modern, .ru-kpi, .ru-mini, .pilotage-kpi, .price-dash-kpi, .dg-kpi-card) { padding: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #root #app.topnav-layout :is(.dg-kpi-modern, .ru-kpi, .ru-mini, .pilotage-kpi, .price-dash-kpi, .kcard) { transition: none !important; transform: none !important; }
}
@media print {
  #root #app.topnav-layout :is(.dg-synth-kpi-grid, .dg-global-kpis, .ru-kpi-grid, .pilotage-kpis, .price-dash-kpis, .kgrid) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #root #app.topnav-layout :is(.dg-kpi-modern, .ru-kpi, .ru-mini, .pilotage-kpi, .price-dash-kpi, .kcard) { box-shadow: none !important; break-inside: avoid; transform: none !important; }
}