/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   VALORISATION PAR SOCIÉTÉ (16/10, Shared/ValoEntitesPanneau.razor, préfixe vpe-). Chargée après panneaux-flottants.css, dont elle
   reprend la facture (fond, bordure, poignée .vfl-grip, pastille « en direct » .vfl-direct). Couleurs par jetons du thème : clair,
   sombre, Mat (data-style="mat"), papier.
   Places : lanceur au bord droit, sous l'onglet « Valeur » ; panneau en haut à droite, à gauche de la valorisation flottante (hub),
   en bas à droite dans le pilotage ; tiroir par le bas sous 768 px. Au-dessus des vues plein cadre (IntentPopup 1000, pilotage
   1400, pile des boutons 5000), sous le stress-test (6200) et le copilote (10050), comme la valorisation flottante.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root { --vpe-h-mobile: min(72dvh, 600px); }

/* ── Lanceur : un onglet sous « Valeur » (même famille) ─────────────────────────────────────────────────────────────────── */
.vpe-lanceur {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 6090;   /* 16/10 : la place de « Valeur », qu'il remplace sur le Groupe */
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 10px 7px; margin: 0;
  border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 38%, var(--o14)); border-right: 0; border-radius: 12px 0 0 12px;
  background: linear-gradient(135deg, var(--gl92), var(--gd97)); color: var(--brand); font: inherit; cursor: pointer;
  box-shadow: -6px 8px 24px rgba(var(--shadow-col), calc(.4 * var(--shadow-mul)));
  transition: background .15s, padding .15s;
}
html[data-theme="light"] .vpe-lanceur { background: #fff; }
.vpe-lanceur:hover { padding-right: 9px; }
.vpe-lanceur.on { background: color-mix(in srgb, var(--brand) 20%, var(--gd97)); }
html[data-theme="light"] .vpe-lanceur.on { background: color-mix(in srgb, var(--brand) 14%, #fff); }
.vpe-lanceur:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.vpe-lanceur .iku-ico { font-size: 15px; }
.vpe-lanceur-lbl { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 800; letter-spacing: .05em; color: var(--tx1); }
html[data-style="mat"] .vpe-lanceur { background: var(--mt-carte) !important; border-color: var(--mt-trait) !important; }
/*  Copilote ancré à droite : le lanceur et le panneau se rangent à sa gauche (comme la valorisation flottante). */
body:has(.cop-panel.docked) .vpe-lanceur { right: 420px; }
body:has(.cop-panel.docked) .vpe { right: 444px; }
html[data-density="compact"] body:has(.cop-panel.docked) .vpe-lanceur { right: 372px; }
/*  Organigramme : l'onglet « Valeur » s'y efface (la vue porte ses chiffres) ; celui-ci reste, à la même place, mais au-dessus de la
    colonne du panneau latéral de l'organigramme on le remonte d'un cran pour ne pas couvrir ses cartes. */
body:has(.org-back) .vpe-lanceur { top: 50%; transform: translateY(-50%); }

/* ── Panneau ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.vpe {
  position: fixed; top: 84px; right: 24px; z-index: 6100;   /* 16/10 : seul panneau de valeur sur le Groupe, au bord comme « Valeur » */
  width: 384px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 100px);
  display: flex; flex-direction: column; color: var(--tx1); border-radius: 14px;
  background: linear-gradient(135deg, var(--gl60), var(--gd80));
  border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, rgba(255, 255, 255, .12));
  box-shadow: 0 24px 64px rgba(var(--shadow-col), calc(.55 * var(--shadow-mul))); backdrop-filter: blur(26px) contrast(.85);
  animation: vpe-entree .2s ease-out;
}
/*  Valorisation flottante fermée : le panneau prend la place en haut à droite. */
body:not(:has(.vfl)) .vpe { right: 24px; }
/*  Pilotage : en bas à droite, à gauche de l'onglet (le tableau lui réserve 30 px), de hauteur bornée pour laisser voir les colonnes. */
body:has(.fintree-modal) .vpe { top: auto; right: 38px; bottom: 16px; max-height: min(600px, calc(100dvh - 96px)); }
body:has(.org-back) .vpe { right: 24px; }
html[data-theme="light"] .vpe { background: rgba(255, 255, 255, .96); border-color: color-mix(in srgb, var(--mud-palette-primary) 26%, rgba(15, 30, 40, .14)); }
html[data-style="mat"] .vpe { background: var(--mt-carte) !important; border-color: var(--mt-trait) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, .35) !important; backdrop-filter: none; }
html[data-papier] .vpe { box-shadow: var(--pp-ombre-fen) !important; border-radius: 6px; }
@keyframes vpe-entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.vpe-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 8px; cursor: move; touch-action: none;
  border-bottom: 1px solid var(--o12);
}
.vpe-head.is-dragging { cursor: grabbing; }
.vpe-head:hover .vpe-grip { opacity: 1; color: var(--tx2); background: var(--o8); }
.vpe-head.is-dragging .vpe-grip { cursor: grabbing; color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.vpe-titre { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpe-titre .iku-ico { color: var(--brand); font-size: 14px; }
.vpe-etat { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--brand); }
.vpe-spin {
  flex: 0 0 auto; display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--brand) 25%, transparent); border-top-color: var(--brand); animation: vpe-tourne .8s linear infinite;
}
@keyframes vpe-tourne { to { transform: rotate(360deg); } }
.vpe-btn {
  flex: 0 0 auto; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--mut3); font-size: 12px; background: var(--o5); border: 1px solid var(--o12); transition: .14s;
}
.vpe-btn:hover { color: var(--tx1); background: var(--o12); border-color: var(--o22); }
.vpe-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Synthèse ── */
.vpe-synth { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr .85fr; gap: 6px; padding: 10px 11px; }
.vpe.is-replie .vpe-synth { padding-bottom: 11px; }
.vpe:not(.is-replie) .vpe-synth { border-bottom: 1px solid var(--o10); }
.vpe-kpi {
  min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border-radius: 10px; cursor: help;
  background: color-mix(in srgb, var(--brand) 7%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
}
.vpe-kpi-lbl { font-size: 10.5px; font-weight: 700; color: var(--mut2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpe-kpi-val { font-size: 15px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/*  Un chiffre qui bouge est recréé par le panneau (@key) : il passe par la couleur de la marque puis revient (comme .vfl-val). */
.vpe-bouge { display: inline-block; animation: vpe-bouge .6s ease-out; }
@keyframes vpe-bouge { from { color: var(--brand); transform: translateY(-2px); } to { transform: none; } }
.vpe-kpi-sub { font-size: 10px; color: var(--mut2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpe-kpi-ecart { background: var(--o5); border-color: var(--o10); }
.vpe-kpi-ecart.up .vpe-kpi-val { color: #5DCAA5; }
.vpe-kpi-ecart.down .vpe-kpi-val { color: #F09595; }
html[data-theme="light"] .vpe-kpi-ecart.up .vpe-kpi-val { color: #17795a; }
html[data-theme="light"] .vpe-kpi-ecart.down .vpe-kpi-val { color: #b23a32; }

/* ── Corps ── */
.vpe-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 10px; }
.vpe.is-replie .vpe-corps { display: none; }

.vpe-onglets { display: flex; flex-wrap: wrap; align-items: stretch; gap: 5px; }
/*  Les sociétés de structure : une rangée à part, sous un petit intitulé. */
.vpe-onglets-sep {
  flex: 0 0 100%; display: flex; align-items: center; gap: 8px; margin: 3px 0 0; font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--mut3); cursor: help;
}
.vpe-onglets-sep::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--o10); }
.vpe-onglet {
  position: relative; flex: 1 1 0; min-width: 96px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 9px;
  border-radius: 10px; border: 1px solid var(--o12); background: var(--o4, var(--o5)); color: var(--tx1); font: inherit; cursor: pointer; text-align: left;
  transition: background .14s, border-color .14s, box-shadow .14s;
}
.vpe-onglet:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--o12)); }
.vpe-onglet.is-sel {
  border-color: color-mix(in srgb, var(--brand) 60%, transparent); background: color-mix(in srgb, var(--brand) 13%, transparent);
  box-shadow: inset 0 -2px 0 var(--brand);
}
.vpe-onglet.is-struct { flex: 0 1 auto; border-style: dashed; }
.vpe-onglet:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.vpe-onglet-nom { max-width: 100%; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpe-onglet-val { font-size: 11px; color: var(--mut2); font-variant-numeric: tabular-nums; }
.vpe-onglet.is-sel .vpe-onglet-val { color: var(--tx1); }
.vpe-pastille { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }

.vpe-soc { display: flex; flex-direction: column; gap: 11px; transition: opacity .2s; }
.vpe-soc.is-busy { opacity: .82; }
.vpe-soc-tete { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; border-radius: 11px; background: var(--o5); border: 1px solid var(--o10); }
.vpe-soc-val { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vpe-soc-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--mut2); }
.vpe-soc-val b { font-size: 22px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.vpe-soc-pont { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 11px; color: var(--mut2); }
.vpe-soc-pont span { display: inline-flex; align-items: baseline; gap: 5px; }
.vpe-soc-pont b { color: var(--tx1); font-weight: 700; font-variant-numeric: tabular-nums; }
.vpe-soc-ctx { font-size: 11px; color: var(--mut2); line-height: 1.35; }

.vpe-champ { display: flex; align-items: center; gap: 10px; }
.vpe-champ-lbl { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--mut2); }
.vpe-champ-lbl .iku-ico { font-size: 13px; color: var(--brand); }
.vpe-champ .custom-dropdown { flex: 1 1 auto; min-width: 0; }

.vpe-bloc { display: flex; flex-direction: column; gap: 7px; }
.vpe-bloc-titre { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--tx2, var(--tx1)); }
.vpe-bloc-titre span { margin-left: 4px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--mut3); }

.vpe-mult { display: grid; grid-template-columns: 58px 1fr 72px 22px; align-items: center; gap: 8px; }
.vpe-mult-lbl { font-size: 11.5px; font-weight: 700; color: var(--mut2); white-space: nowrap; }
.vpe-mult.is-hors .vpe-mult-lbl { color: var(--brand); }
.vpe-mult-rs { position: relative; min-width: 0; --sf-accent: var(--brand); }
/*  La fourchette du secteur, sous la piste du curseur (même calcul que .iku-rs-fill : 7 px de marge de chaque côté). */
.vpe-mult-sec {
  position: absolute; left: calc(var(--sec-a) * (100% - 14px) + 7px); width: calc((var(--sec-b) - var(--sec-a)) * (100% - 14px));
  bottom: -3px; height: 3px; border-radius: 2px; pointer-events: none;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--tx1) 38%, transparent) 0 4px, transparent 4px 7px);
}
.vpe-mult-val { font-size: 11.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vpe-reset, .vpe-mult-ok {
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}
.vpe-reset { cursor: pointer; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); padding: 0; }
.vpe-reset:hover { background: color-mix(in srgb, var(--brand) 22%, transparent); }
.vpe-reset:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.vpe-mult-ok { color: var(--mut3); opacity: .7; cursor: help; }

.vpe-dcf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vpe-param { display: flex; flex-direction: column; gap: 4px; padding: 8px 9px; border-radius: 10px; background: var(--o5); border: 1px solid var(--o10); min-width: 0; }
.vpe-param-lbl { font-size: 11px; font-weight: 800; color: var(--mut2); cursor: help; }
.vpe-pas { display: flex; align-items: center; gap: 4px; }
.vpe-pas-b {
  flex: 0 0 auto; width: 24px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--o12); background: var(--o5); color: var(--tx2, var(--tx1)); font-size: 11px; cursor: pointer; transition: .14s;
}
.vpe-pas-b:hover:not(:disabled) { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.vpe-pas-b:disabled { opacity: .45; cursor: default; }
.vpe-pas-b:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.vpe .numbox.vpe-pas-in {
  flex: 1 1 auto; min-width: 0; width: 100%; height: 26px; padding: 0 6px; text-align: center; border-radius: 7px; font: inherit; font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--tx1); background: var(--o4, transparent); border: 1px solid var(--o14);
}
.vpe .numbox.vpe-pas-in:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
html[data-theme="light"] .vpe .numbox.vpe-pas-in { background: #fff; }
.vpe-param-sub { font-size: 10.5px; color: var(--mut2); line-height: 1.35; }
.vpe-param-sub.is-saisi { color: var(--brand); font-weight: 700; }
.vpe-lien { margin-left: 4px; padding: 0; border: 0; background: none; font: inherit; color: var(--brand); text-decoration: underline; cursor: pointer; }
.vpe-lien:disabled { opacity: .5; cursor: default; }

.vpe-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 9px; border-top: 1px solid var(--o10); }
.vpe-revenir {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px; font: inherit; font-size: 12px; font-weight: 700;
  color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  cursor: pointer; transition: .14s;
}
.vpe-revenir:hover:not(:disabled) { background: color-mix(in srgb, var(--brand) 18%, transparent); }
.vpe-revenir:disabled { color: var(--mut3); background: transparent; border-color: var(--o12); cursor: default; }
.vpe-revenir:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.vpe-garde { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--mut3); cursor: help; }

.vpe-note { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 11px; line-height: 1.45; color: var(--mut2); }
.vpe-note .iku-ico { flex: 0 0 auto; margin-top: 2px; font-size: 12px; color: var(--mut3); }
.vpe-note.is-warn .iku-ico { color: #E0A84C; }

@media print { .vpe, .vpe-lanceur { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .vpe, .vpe-bouge { animation: none; } .vpe-spin { animation-duration: 2.4s; } .vpe-lanceur { transition: none; } }

/* ── Téléphone (moins de 768 px) : un TIROIR par le bas, pleine largeur ; le lanceur devient un bouton rond au-dessus de celui de
      « Valeur ». Pas de glisser (makeDraggable : aucunSous = 767). ── */
@media (max-width: 767px) {
  .vpe, body:has(.fintree-modal) .vpe, body:not(:has(.vfl)) .vpe, body:has(.org-back) .vpe {
    left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; transform: none !important;
    width: auto; max-width: none; max-height: var(--vpe-h-mobile); z-index: 6150;
    border-radius: 16px 16px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .vpe.is-replie { max-height: none; }
  .vpe-head { cursor: default; }
  .vpe-grip { display: none; }
  .vpe-synth { grid-template-columns: 1fr 1fr .9fr; padding: 9px 10px; }
  .vpe-kpi-val { font-size: 14px; }
  .vpe-lanceur, body:has(.org-back) .vpe-lanceur {
    top: auto; transform: none; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px));   /* la place du bouton « Valeur » */
    width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%;
    border-right: 1px solid color-mix(in srgb, var(--mud-palette-primary) 38%, var(--o14));
  }
  .vpe-lanceur:hover { padding-right: 0; }
  .vpe-lanceur .iku-ico { font-size: 18px; }
  .vpe-lanceur-lbl { display: none; }
  .vpe-lanceur.on, body:has(.fec-fab.open) .vpe-lanceur { display: none; }
  body:has(.fintree-modal) .vpe-lanceur { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body:has(.vfl) .vpe-lanceur, body:has(.gpf) .vpe-lanceur { display: none; }
  .vpe-mult { grid-template-columns: 52px 1fr 66px 22px; gap: 6px; }
}