/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   PANNEAUX FLOTTANTS (2026-10-15, décisions d'Arthur). Chargée après analyses.css (index.html), dont elle reprend les classes.
   1. Le VOLET DU PILOTAGE (Pages/FinTreePopup.razor, aside#ftp-volet) en trois états : fermé (défaut, .fintree-body.side-closed),
      FLOTTANT (.is-float : posé par-dessus le tableau, qui garde toute sa largeur ; déplacé par son en-tête, ikuFlyout.makeDraggable)
      et ÉPINGLÉ (.is-pinned : l'ancrage à droite d'avant, analyses.css inchangé). Moins de 768 px : un tiroir par le bas, les deux.
   2. La VALORISATION FLOTTANTE (Shared/ValoFlottante.razor, préfixe vfl-) : un lanceur au bord droit de l'écran et un panneau
      compact, au-dessus des vues plein cadre (IntentPopup 1000, pilotage 1400, pile des boutons 5000), sous le stress-test (6200)
      et le copilote (10050), qui ne le recouvrent pas à leurs places par défaut.
   Règles :has() : sujet à classe, argument positif à classe (css-has-invalidation : jamais de :not() dans l'argument).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. VOLET DU PILOTAGE ─────────────────────────────────────────────────────────────────────────────────────────────── */
/*  Flottant : position:fixed (.fintree-modal couvre la fenêtre, sans transform : ses coordonnées sont celles de l'écran), hors du
    flux du tableau, qui reprend toute la largeur. Spécificité à deux classes : l'emporte sur le volet empilé de analyses.css
    (max-width:1120px), qui ne vaut plus que pour le volet épinglé. */
.fintree-side.is-float {
  position: fixed; top: 56px; right: 16px; z-index: 30;
  width: min(400px, calc(100vw - 32px)); height: min(720px, calc(100dvh - 72px)); max-width: none; max-height: none; flex: none;
  padding: 0 12px 12px; border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 26%, var(--o14));
  border-radius: 14px; transform: none;
  background: linear-gradient(135deg, var(--gl92), var(--gd97)); backdrop-filter: blur(18px);
  box-shadow: 0 24px 64px rgba(var(--shadow-col), calc(.55 * var(--shadow-mul)));
}
html[data-theme="light"] .fintree-side.is-float { background: #fff; }
html[data-style="mat"] .fintree-side.is-float { background: var(--mt-carte) !important; border-color: var(--mt-trait) !important; backdrop-filter: none; }
html[data-papier] .fintree-side.is-float { box-shadow: var(--pp-ombre-fen) !important; border-radius: 6px; }

/*  L'en-tête est la poignée : la bande vide et la poignée pointillée démarrent le glisser (les onglets et boutons gardent leur clic,
    makeDraggable les écarte). */
.fintree-side.is-float > .side-modebar {
  margin: 0 -12px 10px; padding: 8px 10px 8px 8px; cursor: move; touch-action: none;
  border-bottom: 1px solid var(--o10); border-radius: 14px 14px 0 0;
}
.fintree-side.is-float > .side-modebar.is-dragging { cursor: grabbing; }
/*  15/10 (Arthur : « améliore svg du handle ») : poignée dessinée (2 × 3 points en SVG, currentColor) au lieu d'un motif de
    points répété sur toute la hauteur ; une pastille discrète au survol de l'en-tête, la marque pendant le glisser. Même
    poignée pour le volet du pilotage (.side-grip) et la valorisation flottante (.vfl-grip). */
.side-grip, .vfl-grip {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 26px; border-radius: 7px;
  cursor: grab; color: var(--mut3, #7f8f9a); opacity: .8; transition: background .14s, color .14s, opacity .14s;
}
.side-grip svg, .vfl-grip svg { display: block; fill: currentColor; }
.fintree-side.is-float > .side-modebar:hover .side-grip, .vfl-head:hover .vfl-grip { opacity: 1; color: var(--tx2); background: var(--o8); }
.fintree-side.is-float > .side-modebar.is-dragging .side-grip, .vfl-head.is-dragging .vfl-grip { cursor: grabbing; color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); }

/*  Épingler / Détacher : à côté du ✕. Libellé visible dans le volet flottant (assez large), icône seule dans le volet épinglé. */
.side-modebar-pin {
  flex: 0 0 auto; height: 26px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: 13px;
  border: 1px solid var(--o12); background: var(--o5); color: var(--mut2); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  transition: color .14s, background .14s, border-color .14s;
}
.side-modebar-pin:hover { color: var(--tx1); border-color: color-mix(in srgb, var(--brand) 55%, transparent); }
.side-modebar-pin.on { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, transparent); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.side-modebar-pin:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.side-modebar-pin .iku-ico { font-size: 12px; }
.fintree-side.is-pinned .side-modebar-pin { width: 26px; padding: 0; justify-content: center; }
.fintree-side.is-pinned .side-modebar-pin-lbl { display: none; }

/*  Téléphone (moins de 768 px) : flottant comme épinglé, un TIROIR par le bas, pleine largeur, hauteur bornée, le contenu défile
    dedans (.fintree-side-scroll). Les !important couvrent la position posée par le glisser (style en ligne) et la hauteur du volet
    empilé (SideStyle). Ni poignée de largeur, ni Épingler, ni glisser (makeDraggable : aucunSous = 767). */
@media (max-width: 767px) {
  .fintree-body:not(.side-closed) > .fintree-side {
    position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; transform: none !important;
    width: auto !important; max-width: none !important; height: min(66dvh, 560px) !important; flex: none !important; z-index: 30;
    padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); border: 1px solid var(--o14); border-bottom: 0; border-radius: 16px 16px 0 0;
    background: rgba(7, 18, 26, .985); backdrop-filter: none;
    box-shadow: 0 -12px 32px rgba(var(--shadow-col), calc(.5 * var(--shadow-mul)));
  }
  html[data-theme="light"] .fintree-body:not(.side-closed) > .fintree-side { background: #fff; }
  .fintree-body:not(.side-closed) > .fintree-side > .side-modebar { margin: 0 -12px 8px; padding: 8px 10px; cursor: default; border-bottom: 1px solid var(--o10); }
  .fintree-body > .fintree-splitter { display: none !important; }
  .side-modebar-pin, .side-grip { display: none; }
}

/* ── 2. VALORISATION FLOTTANTE ────────────────────────────────────────────────────────────────────────────────────────── */
:root { --vfl-h-mobile: 236px; }

/*  Lanceur : un onglet au bord droit, à mi-hauteur, partout (hub, pilotage, vues) ; il ne croise ni la pile des boutons (en bas à
    droite), ni les en-têtes. */
.vfl-lanceur {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 6090;
  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"] .vfl-lanceur { background: #fff; }
.vfl-lanceur:hover { padding-right: 9px; }
.vfl-lanceur.on { background: color-mix(in srgb, var(--brand) 20%, var(--gd97)); }
html[data-theme="light"] .vfl-lanceur.on { background: color-mix(in srgb, var(--brand) 14%, #fff); }
.vfl-lanceur:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.vfl-lanceur .iku-ico { font-size: 15px; }
/* 17/10 : pilotage ouvert, l'onglet s'efface ; son bouton « Valeur » dans la barre du pilotage (FinTreePopup), gemme à la marque. */
.fintree-valeur-btn .iku-ico { color: var(--brand); }
.fintree-valeur-btn.on { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.vfl-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"] .vfl-lanceur { background: var(--mt-carte) !important; border-color: var(--mt-trait) !important; }
/*  Copilote ancré à droite (pleine hauteur) : le lanceur et le panneau se rangent à sa gauche. */
body:has(.cop-panel.docked) .vfl-lanceur { right: 420px; }
body:has(.cop-panel.docked) .vfl { right: 444px; }
html[data-density="compact"] body:has(.cop-panel.docked) .vfl-lanceur { right: 372px; }
html[data-density="compact"] body:has(.cop-panel.docked) .vfl { right: 396px; }
/*  15/10 (recette des finitions, agent A) : l'organigramme du groupe (plein écran, Shared/OrganigrammeGroupeVue) porte ses propres
    chiffres de valeur. Ni lanceur ni panneau de la valeur, ni pastille du copilote, ni piles de boutons par-dessus ses cartes : la
    pastille du copilote couvrait « CA 2026P » d'Orvane Industrie et le « Combiné ». Comme le Reporting et les multiples. */
body:has(.org-back) :is(.vfl-lanceur, .vfl, .cop-fab, .fab-stack-r, .fab-stack-l) { display: none !important; }
/*  16/10 (recette finale) : dans le pilotage, le tableau allait jusqu'au bord droit et l'onglet (29 px) couvrait la dernière colonne
    projetée (2030p) à mi-hauteur. Le tableau lui laisse sa largeur ; sur téléphone, l'onglet devient un bouton rond (plus bas).
    19/10 : la place n'est réservée que si l'onglet est là (formule Stratégique, hors pilotage depuis le 17/10). Sans lui, la vue
    intégrée et les autres formules gardaient 34 px vides à droite contre 10 à gauche. :has() sur une simple classe, comme le copilote. */
@media (min-width: 768px) {
  body:has(.vfl-lanceur) .fintree-modal .fintree-body.side-closed .fintree-tree { padding-right: 30px; }
  /*  Même chose dans les vues (conteneur commun, ex. le simulateur : l'onglet couvrait la colonne « effet mesuré à la clôture »). */
  body:has(.vfl-lanceur) .intent-popup .intent-popup-view-wrapper, html[data-density="compact"] body:has(.vfl-lanceur) .intent-popup .intent-popup-view-wrapper { padding-right: 34px; }
}

/*  Panneau : en haut à droite par défaut (à gauche du stress-test s'il est ouvert, .vfl-decale) ; dans le pilotage, en bas à gauche,
    pour ne pas couvrir le volet (en haut à droite, flottant ou épinglé). Une fois déplacé, la position posée par le glisser
    (left/top en ligne) l'emporte partout : c'est le même nœud d'un écran à l'autre. */
.vfl {
  position: fixed; top: 84px; right: 24px; z-index: 6100;
  width: 304px; 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: vfl-entree .2s ease-out;
}
.vfl.vfl-decale { right: 244px; }
body:has(.fintree-modal) .vfl { top: auto; right: auto; left: 16px; bottom: 16px; }
/*  Copilote ouvert (flottant, en bas à gauche : 384 px, 700 avec un graphique) : le panneau du pilotage se pose à sa droite. */
body:has(.fintree-modal):has(.cop-panel) .vfl { left: 416px; }
body:has(.fintree-modal):has(.cop-panel.has-chart) .vfl { left: 732px; }
html[data-style="mat"] .vfl { 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] .vfl { box-shadow: var(--pp-ombre-fen) !important; border-radius: 6px; }
@keyframes vfl-entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.vfl-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);
}
.vfl-head.is-dragging { cursor: grabbing; }
.vfl-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; }
.vfl-titre .iku-ico { color: var(--brand); font-size: 14px; }
.vfl-direct { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--mut2); cursor: help; }
.vfl-direct i { width: 6px; height: 6px; border-radius: 50%; background: #5DCAA5; box-shadow: 0 0 0 3px rgba(93, 202, 165, .18); }
.vfl-x {
  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;
}
.vfl-x:hover { color: var(--tx1); background: var(--o12); border-color: var(--o22); }
.vfl-x:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.vfl-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 11px 13px 12px; display: flex; flex-direction: column; gap: 7px; }
.vfl-tete { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.vfl-val { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; animation: vfl-bouge .5s ease-out; }
@keyframes vfl-bouge { from { color: var(--brand); } to { color: var(--tx1); } }
.vfl-ecart { font-size: 11.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; cursor: help; }
.vfl-ecart.up { color: #5DCAA5; background: rgba(93, 202, 165, .14); }
.vfl-ecart.down { color: #F09595; background: rgba(240, 149, 149, .14); }
html[data-theme="light"] .vfl-ecart.up { color: #17795a; }
html[data-theme="light"] .vfl-ecart.down { color: #b23a32; }
.vfl-ctx { font-size: 11.5px; color: var(--mut2); line-height: 1.35; }
.vfl-datee { color: var(--mut3); font-style: italic; }
.vfl-note { margin: 2px 0; font-size: 12px; line-height: 1.45; color: var(--mut2); }

.vfl-ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.vfl-secteur { flex: 1 1 auto; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--tx2, var(--tx1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vfl-vevt { flex: 0 0 auto; display: inline-flex; border: 1px solid var(--o15, rgba(255, 255, 255, .16)); border-radius: 9px; overflow: hidden; }
.vfl-vevt button { appearance: none; border: 0; background: transparent; color: var(--mut2, #8aa0ad); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 4px 11px; cursor: pointer; line-height: 1.4; transition: background .15s, color .15s; }
.vfl-vevt button:hover { color: var(--tx1); }
.vfl-vevt button.active { background: var(--brand); color: var(--brand-contrast, #06141a); }
.vfl-vevt button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/*  La piste : mêmes repères que la carte du hub (analyses.css, .intent-valo-db-*), les points glissent quand la valeur bouge. */
.vfl-piste { position: relative; width: 100%; height: 16px; margin: 4px 0 0; }
.vfl-piste::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); border-radius: 2px; background: rgba(148, 163, 184, .25); }
.vfl-bande { position: absolute; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 2px; background: linear-gradient(90deg, var(--valo-mult), var(--valo-dcf)); }
.vfl-pt { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%); box-sizing: border-box; }
.vfl-pt.is-mult { background: var(--valo-mult); }
.vfl-pt.is-dcf { background: var(--valo-dcf); }
.vfl-pt.is-lbo { background: var(--valo-lbo); }
.vfl-pt.is-dcf.is-hors { background: transparent; border: 1.5px dashed var(--valo-dcf); }
.vfl-pt.is-lbo.is-hors { background: transparent; border: 1.5px dashed var(--valo-lbo); }
.vfl-cur { position: absolute; top: 50%; width: 2px; height: 16px; border-radius: 1px; background: var(--tx1); transform: translate(-50%, -50%); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tx1) 16%, transparent); }
.vfl-bande, .vfl-pt, .vfl-cur { transition: left .45s cubic-bezier(.33, 1, .68, 1), width .45s cubic-bezier(.33, 1, .68, 1); }
.vfl-leg { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3px 8px; font-size: 10.5px; color: var(--mut2); font-variant-numeric: tabular-nums; }
.vfl-leg span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.vfl-leg span.is-mult::before, .vfl-leg span.is-dcf::before, .vfl-leg span.is-lbo::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box; }
.vfl-leg .is-mult::before { background: var(--valo-mult); }
.vfl-leg .is-dcf::before { background: var(--valo-dcf); }
.vfl-leg .is-lbo::before { background: var(--valo-lbo); }
.vfl-leg .is-dcf.is-hors::before { background: transparent; border: 1.5px dashed var(--valo-dcf); }
.vfl-leg .is-lbo.is-hors::before { background: transparent; border: 1.5px dashed var(--valo-lbo); }
.vfl-leg b { color: var(--tx1); font-weight: 700; }

.vfl-lien {
  align-self: flex-start; margin-top: 3px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 700;
  color: var(--brand); cursor: pointer;
}
.vfl-lien:hover { text-decoration: underline; }
.vfl-lien:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }

@media print { .vfl, .vfl-lanceur { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .vfl, .vfl-val { animation: none; }
  .vfl-bande, .vfl-pt, .vfl-cur, .vfl-lanceur { transition: none; }
}

/*  Téléphone (moins de 768 px) : un TIROIR par le bas, pleine largeur, de hauteur fixe (le volet du pilotage s'arrête au-dessus, la
    pile des boutons du hub remonte d'autant), le contenu défile dedans. Pas de glisser (makeDraggable : aucunSous = 767). */
@media (max-width: 767px) {
  .vfl, .vfl.vfl-decale, body:has(.fintree-modal) .vfl {
    left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; transform: none !important;
    width: auto; max-width: none; height: var(--vfl-h-mobile); max-height: 50dvh;
    border-radius: 16px 16px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .vfl-head { cursor: default; }
  .vfl-grip { display: none; }
  /*  15/10 (recette des finitions, agent A) : à mi-hauteur au bord droit, l'onglet mordait sur le bandeau du groupe et les tuiles. Sur
      téléphone, il rejoint la colonne des boutons ronds, juste au-dessus de la pile du hub (même taille, 12 px d'écart) ; ouvert, le
      tiroir le remplace (sa croix le referme) ; il s'efface quand la pile se déplie. Dans le pilotage, la pile est masquée : il
      descend à sa place. */
  .vfl-lanceur {
    top: auto; transform: none; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    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));
  }
  .vfl-lanceur:hover { padding-right: 0; }
  .vfl-lanceur .iku-ico { font-size: 18px; }
  .vfl-lanceur-lbl { display: none; }
  .vfl-lanceur.on, body:has(.fec-fab.open) .vfl-lanceur { display: none; }
  body:has(.fintree-modal) .vfl-lanceur { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  body:has(.vfl) .fab-stack-r { bottom: calc(var(--vfl-h-mobile) + 12px); }
  body:has(.vfl) .fintree-body:not(.side-closed) > .fintree-side {
    bottom: min(var(--vfl-h-mobile), 50dvh) !important; height: min(52dvh, calc(100dvh - var(--vfl-h-mobile) - 64px)) !important;
    border-radius: 16px 16px 0 0; border-bottom: 1px solid var(--o14);
  }
}

/* ── 3. PÉRIMÈTRE DU GROUPE (2026-10-15) ──────────────────────────────────────────────────────────────────────────────── */
/*  Shared/PerimetreGroupe.razor (préfixe gpf-) : les sociétés d'un groupe affiché, cochées ou décochées. Même facture que la
    valorisation flottante (fond, bordure, poignée), en bas à GAUCHE, au-dessus du lanceur du copilote : les chiffres clés du haut
    du hub restent visibles pendant qu'on coche (la valorisation est à droite, la pile des boutons en bas à droite) ; dans le
    pilotage, à droite de la valorisation. 15/10 : ouvert à la demande (puce « Périmètre n/N »), fermé il n'occupe rien. */
:root { --gpf-h-mobile: 232px; }

.gpf {
  position: fixed; bottom: 84px; left: 16px; z-index: 6100;
  width: 284px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 160px);
  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%, var(--o12));
  box-shadow: 0 24px 64px rgba(var(--shadow-col), calc(.55 * var(--shadow-mul))); backdrop-filter: blur(26px) contrast(.85);
  animation: vfl-entree .2s ease-out;
}
body:has(.fintree-modal) .gpf { left: 336px; bottom: 16px; }
html[data-style="mat"] .gpf { 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] .gpf { box-shadow: var(--pp-ombre-fen) !important; border-radius: 6px; }

.gpf-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px; cursor: move; touch-action: none;
  border-bottom: 1px solid var(--o12);
}
.gpf-head.is-dragging { cursor: grabbing; }
.gpf-head:hover .gpf-grip { opacity: 1; color: var(--tx2); background: var(--o8); }
.gpf-head.is-dragging .gpf-grip { cursor: grabbing; color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.gpf-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; cursor: help; }
.gpf-titre .iku-ico { color: var(--brand); font-size: 14px; }
.gpf-compte { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--mut2); font-variant-numeric: tabular-nums; }
.gpf-plier {
  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: 13px; background: var(--o5); border: 1px solid var(--o12); transition: .14s;
}
.gpf-plier:hover { color: var(--tx1); background: var(--o12); border-color: var(--o22); }
.gpf-plier:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.gpf-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 6px; }
.gpf-leg { display: flex; justify-content: space-between; padding: 0 8px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--mut3); }
.gpf-socs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.gpf-soc {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; transition: background .14s, border-color .14s;
}
.gpf-soc:hover { background: var(--o5); }
.gpf-soc.is-on { border-color: color-mix(in srgb, var(--brand) 30%, transparent); background: color-mix(in srgb, var(--brand) 9%, transparent); }
.gpf-soc input { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.gpf-soc input:disabled { cursor: default; }
.gpf-soc input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.gpf-nom { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gpf-soc .gpf-nom { color: var(--mut2); font-weight: 600; }
.gpf-soc.is-on .gpf-nom { color: var(--tx1); font-weight: 700; }
.gpf-ca { flex: 0 0 auto; font-size: 11.5px; color: var(--mut2); font-variant-numeric: tabular-nums; }
.gpf.is-busy .gpf-soc { cursor: progress; }

.gpf-pied { display: flex; align-items: center; gap: 6px; margin-top: 2px; padding: 8px 6px 0; border-top: 1px solid var(--o10); }
.gpf-etat { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mut2); }
.gpf-etat .iku-ico { font-size: 12px; color: var(--mut3); }
.gpf-etat.is-busy { color: var(--brand); font-weight: 700; }
.gpf-spin {
  flex: 0 0 auto; display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--brand) 25%, transparent); border-top-color: var(--brand); animation: gpf-tourne .8s linear infinite;
}
@keyframes gpf-tourne { to { transform: rotate(360deg); } }
.gpf-note { margin: 2px 6px 0; font-size: 11px; line-height: 1.45; color: var(--mut2); }

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

/*  Téléphone (moins de 768 px) : un TIROIR par le bas, pleine largeur (replié : son en-tête seul) ; au-dessus de la valorisation
    flottante quand elle est ouverte ; la pile des boutons du hub remonte d'autant. Pas de glisser (makeDraggable : aucunSous = 767). */
@media (max-width: 767px) {
  .gpf, body:has(.fintree-modal) .gpf {
    left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; transform: none !important;
    width: auto; max-width: none; height: var(--gpf-h-mobile); max-height: 50dvh;
    border-radius: 16px 16px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body:has(.vfl) .gpf { bottom: var(--vfl-h-mobile) !important; }
  .gpf-head { cursor: default; }
  .gpf-grip { display: none; }
  body:has(.gpf) .fab-stack-r { bottom: calc(var(--gpf-h-mobile) + 12px); }
  body:has(.gpf) .vfl-lanceur { bottom: calc(var(--gpf-h-mobile) + 72px); }   /* 15/10 : au-dessus de la pile remontée */
  body:has(.vfl):has(.gpf) .fab-stack-r { bottom: calc(var(--vfl-h-mobile) + var(--gpf-h-mobile) + 12px); }
}