/* Interface « Synthèse » : composants communs. Restyle les classes EXISTANTES (aucun markup nouveau). Tout est préfixé par la garde d'interface ;
   couleurs, tailles, rayons, ombres et durées viennent des jetons (var(--…)). */

/* ── Lot 1 : typographie et base ─────────────────────────── */
:root[data-interface="synthese"] body {
  font-size: var(--v5-t-corps);
  font-weight: var(--v5-poids-fin);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
:root[data-interface="synthese"] :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:root[data-interface="synthese"] .page-title {
  font-size: var(--v5-t-l);
  font-weight: var(--v5-poids-moyen);
  letter-spacing: -.01em;
  line-height: 1.2;
}
/* titre de la page (premier en-tête de l'écran) : grand et fin ; les titres de section gardent la taille courante */
:root[data-interface="synthese"] #view > .page-head:first-child .page-title {
  font-size: var(--v5-t-xl);
  font-weight: var(--v5-poids-fin);
  letter-spacing: -.025em;
  line-height: 1.1;
}
:root[data-interface="synthese"] .panel-title,
:root[data-interface="synthese"] .bcard-title { font-weight: var(--v5-poids-moyen); }
:root[data-interface="synthese"] .num,
:root[data-interface="synthese"] .data-table td.num,
:root[data-interface="synthese"] .b-kpi-val {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-weight: var(--v5-poids-moyen);
}

/* ── Lot 1 : statuts « point + texte » (le texte dit toujours le statut) ── */
:root[data-interface="synthese"] .badge,
:root[data-interface="synthese"] .badge-c,
:root[data-interface="synthese"] .badge-green,
:root[data-interface="synthese"] .badge-red,
:root[data-interface="synthese"] .badge-orange,
:root[data-interface="synthese"] .badge-blue,
:root[data-interface="synthese"] .badge-retard,
:root[data-interface="synthese"] .badge-muted {
  --v5-point: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  border: 0;
  border-radius: var(--v5-r-rond);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--v5-t-s);
  font-weight: var(--v5-poids-moyen);
  letter-spacing: 0;
  text-transform: none;
}
:root[data-interface="synthese"] .badge::before {
  content: "";
  flex: none;
  width: var(--v5-pastille);
  height: var(--v5-pastille);
  border-radius: 50%;
  background: var(--v5-point);
}
:root[data-interface="synthese"] .badge-green  { --v5-point: var(--success); color: var(--success-t); }
:root[data-interface="synthese"] .badge-red    { --v5-point: var(--danger);  color: var(--danger-t); }
:root[data-interface="synthese"] .badge-orange { --v5-point: var(--orange);  color: var(--orange-t); }
:root[data-interface="synthese"] .badge-blue   { --v5-point: var(--blue);    color: var(--blue-t); }
:root[data-interface="synthese"] .badge-retard { --v5-point: var(--danger);  color: var(--retard-t); }
:root[data-interface="synthese"] .badge-muted  { --v5-point: var(--muted);   color: var(--muted); }
/* couleur libre (statut de projet) : point à la couleur choisie, texte mélangé au texte courant pour rester lisible sur les deux thèmes */
:root[data-interface="synthese"] .badge-c {
  --v5-point: var(--bc);
  background: color-mix(in oklab, var(--bc) 18%, transparent);
  color: color-mix(in oklab, var(--bc) 55%, var(--fg));
}
/* clair : la couleur de statut la plus claire (jaune pâle) doit rester lisible : le texte tire davantage vers la couleur du texte courant */
:root[data-interface="synthese"][data-theme="light"] .badge-c { color: color-mix(in oklab, var(--bc) 30%, var(--fg)); }

/* ── Lot 1 : logo lisible dans les deux thèmes ───────────── */
:root[data-interface="synthese"] .sb-brand .logo {
  color: var(--fg) !important;
  -webkit-text-fill-color: var(--fg) !important;
}
:root[data-interface="synthese"] .sb-brand .logo.lg-est-image {
  display: inline-flex;
  align-items: center;
  padding: var(--s-2) !important;
  border-radius: var(--r-md);
  background: var(--v5-logo-fond) !important;
}

/* ── Lot 3 : palette Ctrl K et cloche ────────────────────── */
:root[data-interface="synthese"] .zs-panel {
  --zs-glass: color-mix(in oklab, var(--v5-fenetre) 82%, transparent);
  --zs-ring: var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--e-4);
}
:root[data-interface="synthese"] .zs-backdrop { background: color-mix(in oklab, var(--bg) 40%, transparent); }
:root[data-interface="synthese"] .nt-panneau {
  z-index: var(--z-panneau);
  border-color: var(--border);
  border-radius: var(--r-lg);
  background: var(--v5-fenetre);
  box-shadow: var(--e-4);
}
:root[data-interface="synthese"] .nt-entete { background: var(--v5-fenetre); }
:root[data-interface="synthese"] .nt-ligne:hover,
:root[data-interface="synthese"] .nt-ligne:focus-visible { background: var(--surface2); }
:root[data-interface="synthese"] .nt-pastille { background: var(--accent); color: var(--v5-sur-accent); border: 2px solid var(--bg); }
@media (max-width: 720px) {
  /* feuille pleine largeur sous la barre : sa hauteur (deux niveaux sur téléphone) est publiée par synthese.js dans --topbar-h, lue par la règle d'origine */
  :root[data-interface="synthese"] .nt-panneau { z-index: var(--z-message); border-radius: 0 0 var(--r-lg) var(--r-lg); }
}

/* ── Lot 4 : boutons, ondulation, champs, cases, interrupteurs ── */
:root[data-interface="synthese"] .btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--v5-ctl-h);
  padding: 0 var(--s-4);
  border: 1.5px solid var(--border-in);
  border-radius: var(--v5-r-ctl);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--v5-t-corps);
  font-weight: var(--v5-poids-moyen);
  white-space: nowrap;
  transition: transform var(--v5-d-court) var(--v5-ease), background var(--v5-d-moyen), border-color var(--v5-d-moyen), filter var(--v5-d-moyen);
}
:root[data-interface="synthese"] .btn:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); border-color: var(--fg); }
:root[data-interface="synthese"] .btn:active { transform: scale(var(--v5-appui)); }
:root[data-interface="synthese"] .btn-sm { min-height: var(--v5-ctl-h-s); padding: 0 var(--s-3); font-size: var(--v5-t-s); border-radius: var(--r-sm); }
:root[data-interface="synthese"] .btn-ghost { border-color: var(--border-in); }
:root[data-interface="synthese"] .btn-primary {
  border-color: transparent;
  background: var(--accent-grad, var(--accent));
  color: var(--v5-sur-accent);
  font-weight: var(--v5-poids-fort);
}
:root[data-interface="synthese"] .btn-primary:hover { background: var(--accent-grad, var(--accent)); border-color: transparent; filter: brightness(1.08); }
:root[data-interface="synthese"] .btn-danger { border-color: color-mix(in oklab, var(--danger) 55%, transparent); color: var(--danger); background: transparent; }
:root[data-interface="synthese"] .btn-danger:hover { background: color-mix(in oklab, var(--danger) 12%, transparent); border-color: var(--danger); }
:root[data-interface="synthese"] .btn:disabled,
:root[data-interface="synthese"] .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
:root[data-interface="synthese"] .zm-btn { min-width: var(--v5-ctl-h-s); padding: 0 var(--s-2); letter-spacing: 0; }
:root[data-interface="synthese"] .v5-onde {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: .28;
  transform: scale(0);
  pointer-events: none;
  animation: v5-onde var(--v5-d-long) ease-out forwards;
}
@keyframes v5-onde { to { transform: scale(1); opacity: 0; } }

:root[data-interface="synthese"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea) {
  min-height: var(--v5-ctl-h);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-in);
  border-radius: var(--v5-r-ctl);
  background: var(--field);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--v5-t-corps);
  transition: border-color var(--v5-d-court), box-shadow var(--v5-d-court);
}
:root[data-interface="synthese"] input:focus,
:root[data-interface="synthese"] select:focus,
:root[data-interface="synthese"] textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--v5-accent-doux); outline: none; }
:root[data-interface="synthese"] input:disabled,
:root[data-interface="synthese"] select:disabled,
:root[data-interface="synthese"] textarea:disabled { opacity: .55; cursor: not-allowed; }
:root[data-interface="synthese"] ::placeholder { color: var(--muted); opacity: .8; }
:root[data-interface="synthese"] label { font-size: var(--v5-t-s); font-weight: var(--v5-poids-moyen); color: var(--muted); }
:root[data-interface="synthese"] .form-err { color: var(--danger-t); font-size: var(--v5-t-s); }

/* cases et boutons radio animés (CSS seul) */
:root[data-interface="synthese"] input[type="checkbox"],
:root[data-interface="synthese"] input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: var(--v5-ico-s);
  height: var(--v5-ico-s);
  margin: 0;
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  border: 1.5px solid var(--border-in);
  border-radius: var(--r-sm);
  background: var(--field);
  cursor: pointer;
  transition: background var(--v5-d-court), border-color var(--v5-d-court), transform var(--v5-d-court) var(--v5-ease);
}
:root[data-interface="synthese"] input[type="radio"] { border-radius: 50%; }
:root[data-interface="synthese"] input[type="checkbox"]::after {
  content: "";
  width: 55%;
  height: 30%;
  border-left: 2px solid var(--v5-sur-accent);
  border-bottom: 2px solid var(--v5-sur-accent);
  transform: rotate(-45deg) scale(0) translateY(-15%);
  transition: transform var(--v5-d-court) var(--v5-ease);
}
:root[data-interface="synthese"] input[type="radio"]::after {
  content: "";
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: var(--v5-sur-accent);
  transform: scale(0);
  transition: transform var(--v5-d-court) var(--v5-ease);
}
:root[data-interface="synthese"] input[type="checkbox"]:checked,
:root[data-interface="synthese"] input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); }
:root[data-interface="synthese"] input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1) translateY(-15%); }
:root[data-interface="synthese"] input[type="radio"]:checked::after { transform: scale(1); }
:root[data-interface="synthese"] input[type="checkbox"]:active,
:root[data-interface="synthese"] input[type="radio"]:active { transform: scale(var(--v5-appui)); }
:root[data-interface="synthese"] input[type="checkbox"]:disabled,
:root[data-interface="synthese"] input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }
:root[data-interface="synthese"] .toggle-switch .toggle-slider { border-radius: var(--v5-r-rond); border-color: var(--border-in); transition: background var(--v5-d-moyen), border-color var(--v5-d-moyen); }
:root[data-interface="synthese"] .toggle-switch .toggle-slider::before { transition: transform var(--v5-d-moyen) var(--v5-ease), background var(--v5-d-moyen); }
:root[data-interface="synthese"] .toggle-switch input:checked + .toggle-slider { background: var(--v5-accent-doux); border-color: var(--accent); }

/* ── Lot 4 : filtre segmenté (pastille qui glisse) et onglets (soulignement qui glisse) ── */
:root[data-interface="synthese"] .seg {
  position: relative;
  display: inline-flex;
  padding: var(--s-1);
  border: 1px solid var(--border);
  border-radius: var(--v5-r-ctl);
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  overflow: visible;
}
:root[data-interface="synthese"] .seg::before {
  content: "";
  position: absolute;
  top: var(--s-1);
  bottom: var(--s-1);
  left: 0;
  width: var(--v5-seg-w, 0);
  transform: translateX(var(--v5-seg-x, 0));
  border-radius: var(--r-sm);
  background: var(--v5-deco);
  opacity: 0;
  transition: transform var(--v5-d-moyen) var(--v5-ease), width var(--v5-d-moyen) var(--v5-ease), opacity var(--v5-d-court);
}
:root[data-interface="synthese"] .seg.v5-glisse::before { opacity: 1; }
:root[data-interface="synthese"] .seg button {
  position: relative;
  z-index: 1;
  min-height: var(--v5-ctl-h-s);
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--v5-t-corps);
  font-weight: var(--v5-poids-moyen);
  transition: color var(--v5-d-moyen);
}
:root[data-interface="synthese"] .seg button:hover { color: var(--fg); }
:root[data-interface="synthese"] .seg button.on,
:root[data-interface="synthese"] .seg button[aria-pressed="true"] { background: var(--v5-deco); color: var(--v5-sur-deco); font-weight: var(--v5-poids-moyen); }
:root[data-interface="synthese"] .seg.v5-glisse button.on,
:root[data-interface="synthese"] .seg.v5-glisse button[aria-pressed="true"] { background: transparent; color: var(--v5-sur-deco); }

:root[data-interface="synthese"] .tabs-bar {
  position: relative;
  flex-wrap: nowrap;
  gap: var(--s-1);
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
:root[data-interface="synthese"] .tabs-bar .detail-tab {
  padding: var(--s-3);
  border-bottom: 2px solid transparent;
  font-size: var(--v5-t-corps);
  font-weight: var(--v5-poids-moyen);
  color: var(--muted);
  transition: color var(--v5-d-moyen), background var(--v5-d-moyen);
}
:root[data-interface="synthese"] .tabs-bar .detail-tab:hover { background: transparent; color: var(--fg); }
:root[data-interface="synthese"] .tabs-bar .detail-tab.active { background: transparent; color: var(--fg); border-bottom-color: var(--v5-deco); }
:root[data-interface="synthese"] .tabs-bar.v5-glisse .detail-tab.active { border-bottom-color: transparent; }
:root[data-interface="synthese"] .tabs-bar::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: var(--v5-liseret);
  width: var(--v5-tab-w, 0);
  transform: translateX(var(--v5-tab-x, 0));
  background: var(--v5-deco);
  border-radius: var(--v5-r-rond);
  opacity: 0;
  transition: transform var(--v5-d-moyen) var(--v5-ease), width var(--v5-d-moyen) var(--v5-ease), opacity var(--v5-d-court);
}
:root[data-interface="synthese"] .tabs-bar.v5-glisse::after { opacity: 1; }
/* Rangée d'onglets qui peut passer à la ligne (fiche projet : 10 onglets) : retour à la ligne plutôt qu'un onglet coupé, liseré posé sous l'onglet actif (celui qui glisse ne suit qu'une seule rangée). Sur téléphone, la rangée défile. */
@media (min-width: 761px) {
  :root[data-interface="synthese"] .tabs-bar.tabs-wrap { flex-wrap: wrap; overflow-x: visible; }
  :root[data-interface="synthese"] .tabs-bar.tabs-wrap { gap: 0; }
  :root[data-interface="synthese"] .tabs-bar.tabs-wrap .detail-tab { padding-inline: var(--s-2); }
  :root[data-interface="synthese"] .tabs-bar.tabs-wrap::after { display: none; }
  :root[data-interface="synthese"] .tabs-bar.tabs-wrap.v5-glisse .detail-tab.active { border-bottom-color: var(--v5-deco); }
}

/* ── Lot 4 : fenêtres, menus, message, squelettes ────────── */
:root[data-interface="synthese"] #modal-overlay { background: var(--v5-voile); -webkit-backdrop-filter: blur(var(--v5-flou-fenetre)); backdrop-filter: blur(var(--v5-flou-fenetre)); }
:root[data-interface="synthese"] .modal {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--v5-fenetre);
  box-shadow: var(--e-4);
  animation: v5-fenetre-entree var(--v5-d-moyen) var(--v5-ease) both;
}
:root[data-interface="synthese"] .modal-hdr { border-radius: var(--r-lg) var(--r-lg) 0 0; font-size: var(--v5-t-l); font-weight: var(--v5-poids-moyen); }
:root[data-interface="synthese"] .modal-footer { border-radius: 0 0 var(--r-lg) var(--r-lg); }
@keyframes v5-fenetre-entree { from { opacity: 0; transform: translateY(var(--v5-decal)) scale(var(--v5-recul)); } }

:root[data-interface="synthese"] .zm-panel,
:root[data-interface="synthese"] .um-menu {
  padding: var(--s-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--v5-fenetre);
  box-shadow: var(--e-4);
  transform-origin: var(--v5-origine, top right);
  animation: v5-menu-entree var(--v5-d-moyen) var(--v5-ease) both;
}
@keyframes v5-menu-entree { from { opacity: 0; transform: scale(var(--v5-recul)) translateY(calc(var(--v5-decal-s) * -1)); } }
:root[data-interface="synthese"] .zm-item,
:root[data-interface="synthese"] .um-item { padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); font-size: var(--v5-t-corps); transition: background var(--v5-d-court); }
:root[data-interface="synthese"] .zm-item:hover,
:root[data-interface="synthese"] .zm-item:focus-visible,
:root[data-interface="synthese"] .um-item:hover,
:root[data-interface="synthese"] .um-item:focus-visible { background: var(--surface2); }

:root[data-interface="synthese"] #toast {
  position: fixed;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--v5-fenetre);
  color: var(--fg);
  box-shadow: var(--e-4);
  font-family: var(--font-body);
  font-size: var(--v5-t-corps);
  transition: opacity var(--v5-d-moyen), transform var(--v5-d-moyen) var(--v5-ease);
}
:root[data-interface="synthese"] #toast.toast-ok { border-color: color-mix(in oklab, var(--success) 55%, transparent); background: var(--v5-fenetre); }
:root[data-interface="synthese"] #toast.toast-err { border-color: color-mix(in oklab, var(--danger) 55%, transparent); background: var(--v5-fenetre); }
:root[data-interface="synthese"] #toast .toast-annuler {
  flex: none;
  min-height: var(--v5-ctl-h-s);
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: var(--v5-poids-fort);
  cursor: pointer;
}
:root[data-interface="synthese"] #toast .toast-annuler:hover { background: var(--v5-accent-doux); }
:root[data-interface="synthese"] #toast.show:has(.toast-annuler)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--v5-liseret);
  background: var(--accent);
  transform-origin: left;
  animation: v5-compte var(--v5-duree, 5s) linear forwards;
}
:root[data-interface="synthese"] #toast.toast-pause::after { animation-play-state: paused; }
@keyframes v5-compte { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* squelettes brillants pendant un chargement (classe posée par synthese.js sur l'état « Chargement… ») */
:root[data-interface="synthese"] .v5-squelette {
  position: relative;
  min-height: var(--v5-ligne-h);
  border-radius: var(--r-md);
  background: var(--surface);
  color: transparent;
  overflow: hidden;
  user-select: none;
}
:root[data-interface="synthese"] .v5-squelette::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, color-mix(in oklab, var(--fg) 9%, transparent) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: v5-brille 1.4s ease-in-out infinite;
}
@keyframes v5-brille { to { transform: translateX(100%); } }

/* ── Lot 5 : tableaux denses, panneaux et cartes de chiffres ── */
:root[data-interface="synthese"] .panel,
:root[data-interface="synthese"] .bcard {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  box-shadow: var(--v5-ombre-carte);
  transition: border-color var(--v5-d-moyen), box-shadow var(--v5-d-long), transform var(--v5-d-long) var(--v5-ease);
}
:root[data-interface="synthese"] .panel:hover,
:root[data-interface="synthese"] .bcard:hover { border-color: var(--v5-trait); box-shadow: var(--e-2); }
:root[data-interface="synthese"] .panel-head { padding: var(--s-4) var(--s-5) var(--s-3); border-bottom: 1px solid var(--border); }
:root[data-interface="synthese"] .panel-title { font-family: var(--font-body); font-size: var(--v5-t-l); font-weight: var(--v5-poids-moyen); letter-spacing: 0; }
:root[data-interface="synthese"] .panel-meta,
:root[data-interface="synthese"] .bcard-title,
:root[data-interface="synthese"] .bcard-meta {
  font-family: var(--font-body);
  font-size: var(--v5-t-s);
  font-weight: var(--v5-poids-moyen);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
:root[data-interface="synthese"] .panel-body { padding: var(--s-4) var(--s-5); }

:root[data-interface="synthese"] .table-scroll {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--surface) 88%, transparent);
}
:root[data-interface="synthese"] .data-table { font-size: var(--v5-t-corps); }
:root[data-interface="synthese"] .data-table th {
  padding: var(--s-3);
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 94%, transparent);
  font-family: var(--font-body);
  font-size: var(--v5-t-s);
  font-weight: var(--v5-poids-moyen);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
:root[data-interface="synthese"] .data-table td {
  height: var(--v5-ligne-h);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
:root[data-interface="synthese"] .data-table tbody tr td { transition: background var(--v5-d-court); }
:root[data-interface="synthese"] .data-table tbody tr:hover td { background: color-mix(in oklab, var(--surface2) 60%, transparent); }
:root[data-interface="synthese"] .data-table tr.row-red td { background: color-mix(in oklab, var(--danger) 10%, transparent); }
:root[data-interface="synthese"] .data-table tr.row-orange td { background: color-mix(in oklab, var(--orange) 10%, transparent); }
:root[data-interface="synthese"] .data-table tr.row-red:hover td,
:root[data-interface="synthese"] .data-table tr.row-orange:hover td { background: color-mix(in oklab, var(--surface2) 60%, transparent); }
:root[data-interface="synthese"] .data-table td.num,
:root[data-interface="synthese"] .data-table td.r { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-weight: var(--v5-poids-moyen); }
:root[data-interface="synthese"] .data-table tbody tr[data-href],
:root[data-interface="synthese"] .data-table tbody tr[data-id] { cursor: pointer; }

/* cartes de chiffres : valeur fine et grande, liseré qui suit le curseur, légère inclinaison */
:root[data-interface="synthese"] .b-kpi {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  box-shadow: var(--v5-ombre-carte);
  transform: perspective(var(--v5-persp)) rotateX(var(--v5-rx, 0deg)) rotateY(var(--v5-ry, 0deg)) translateY(var(--v5-haut, 0));
  transition: border-color var(--v5-d-moyen), box-shadow var(--v5-d-long), transform var(--v5-d-moyen) var(--v5-ease);
  will-change: transform;
}
:root[data-interface="synthese"] .b-kpi::before {
  inset: 0;
  height: auto;
  background: radial-gradient(var(--v5-rayon) circle at var(--v5-mx, 50%) var(--v5-my, 0%), color-mix(in oklab, var(--c, var(--accent)) 22%, transparent), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--v5-d-moyen);
}
:root[data-interface="synthese"] .b-kpi:hover { border-color: color-mix(in oklab, var(--c, var(--accent)) 40%, transparent); box-shadow: var(--e-3); transform: perspective(var(--v5-persp)) rotateX(var(--v5-rx, 0deg)) rotateY(var(--v5-ry, 0deg)) translateY(calc(var(--v5-decal-s) * -1)); }
:root[data-interface="synthese"] .b-kpi:hover::before { opacity: 1; }
:root[data-interface="synthese"] .b-kpi-lbl,
:root[data-interface="synthese"] .b-kpi-sub {
  font-family: var(--font-body);
  font-size: var(--v5-t-s);
  font-weight: var(--v5-poids-moyen);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
:root[data-interface="synthese"] .b-kpi-badge { font-family: var(--font-body); font-size: var(--v5-t-xs); letter-spacing: 0; text-transform: none; }
:root[data-interface="synthese"] .b-kpi-val {
  font-family: var(--font-body);
  font-size: var(--v5-t-chiffre);
  font-weight: var(--v5-poids-fin);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
@media (hover: none) {
  :root[data-interface="synthese"] .b-kpi { transform: none; will-change: auto; }
  :root[data-interface="synthese"] .b-kpi:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-interface="synthese"] .b-kpi,
  :root[data-interface="synthese"] .b-kpi:hover { transform: none; }
}

/* ── Mon profil > Interface : pastilles de palette (aperçu = fond, deuxième teinte et accent de la palette) ── */
:root[data-interface="synthese"] .um-palettes { display: flex; flex-wrap: wrap; gap: var(--v5-decal-s); }
:root[data-interface="synthese"] .um-pal {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: var(--v5-decal-s);
  padding: var(--v5-decal-s); background: transparent; border: 0; border-radius: var(--r-md); color: var(--muted);
  font: inherit; font-size: var(--v5-t-xs); cursor: pointer; min-width: var(--v5-pal-l);
}
:root[data-interface="synthese"] .um-pal-puce {
  position: relative; width: var(--v5-pal-puce); height: var(--v5-pal-puce); border-radius: var(--v5-r-rond);
  background: linear-gradient(135deg, var(--v5-pal-fond) 0 45%, var(--v5-pal-fond2) 45% 60%, var(--v5-pal-accent) 60%);
  border: 2px solid var(--border-in);
  transition: transform var(--v5-d-court) var(--v5-ease), border-color var(--v5-d-court) var(--v5-ease);
}
:root[data-interface="synthese"] .um-pal:hover .um-pal-puce { transform: scale(1.08); }
:root[data-interface="synthese"] .um-pal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:root[data-interface="synthese"] .um-pal[aria-checked="true"] { color: var(--fg); }
:root[data-interface="synthese"] .um-pal[aria-checked="true"] .um-pal-puce { border-color: var(--fg); }
:root[data-interface="synthese"] .um-pal[aria-checked="true"] .um-pal-puce::after {      /* coche */
  content: "✓"; position: absolute; right: calc(var(--v5-decal-s) * -1); bottom: calc(var(--v5-decal-s) * -1);
  width: var(--v5-ico-s); height: var(--v5-ico-s); display: grid; place-items: center; border-radius: var(--v5-r-rond);
  background: var(--fg); color: var(--bg); font-size: var(--v5-t-xs); font-weight: var(--v5-poids-fort); line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-interface="synthese"] .um-pal-puce { transition: none; }
}