/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   DÉTAIL PAR COMPTE DANS LA GRILLE DU PILOTAGE (2026-09-25) — CustomFinTree (+ CustomFinTree.Detail.cs, RechercheComptes).
   Maquette : https://claude.ai/artifact/EF699gqJSWSupVEFsDDZs5, planches 1 et 4.

   Portée : .dc-host, posée sur l'enveloppe de CustomFinTree SEULEMENT quand le détail est proposé. FinTreeTable sert aussi
   au Reporting, au business plan, à la comparaison : aucune de ces grilles ne porte .dc-host, rien ici ne les touche.

   Hiérarchie voulue : la LIGNE reste le personnage principal ; ses comptes sont une note de bas de ligne — corps plus
   petit, encre atténuée, bande de fond à peine marquée et filet à gauche qui les rattache à leur ligne. Le retraitement
   économique est en italique ambré : ce n'est pas un compte, c'est ce qui sépare la somme des comptes de la ligne.
   Les surfaces de la colonne figée restent OPAQUES (verre + teinte en background-image), sinon les chiffres défilent
   dessous (cf. FinTreeTable).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Jetons (sombre par défaut, clair plus bas) ── */
.dc-host {
    --dc-ink: #aebfc7;                                                   /* libellé et montants d'un compte */
    --dc-ink-num: #86a0ab;                                               /* numéro de compte */
    --dc-ink-p: rgba(226, 238, 243, .32);                                /* « · » d'un mois projeté */
    --dc-row: rgba(0, 0, 0, .20);                                        /* bande des sous-lignes */
    --dc-edge: color-mix(in srgb, var(--brand, #0bb3c9) 50%, transparent); /* filet qui rattache les comptes à leur ligne */
    --dc-ecart-ink: #d2bb82;                                             /* retraitement économique */
    --dc-amb-ink: #f2c14e;                                               /* puces ambrées : suggestion, à ventiler */
    --dc-amb-bg: rgba(234, 179, 8, .13);
    --dc-amb-bg-h: rgba(234, 179, 8, .24);
    --dc-amb-bd: rgba(234, 179, 8, .42);
    --dc-amb-edge: #eab308;
    --dc-chip-ink: color-mix(in srgb, var(--brand, #0bb3c9) 55%, #eafcff);
    --dc-chip-bg: color-mix(in srgb, var(--brand, #0bb3c9) 10%, transparent);
    --dc-chip-bg-h: color-mix(in srgb, var(--brand, #0bb3c9) 22%, transparent);
    --dc-chip-bd: color-mix(in srgb, var(--brand, #0bb3c9) 40%, transparent);
    --dc-hit: color-mix(in srgb, var(--brand, #0bb3c9) 20%, transparent); /* compte trouvé par la recherche */
}
html[data-theme="light"] .dc-host {
    --dc-ink: #3d4f58;
    --dc-ink-num: #5a6e77;
    --dc-ink-p: rgba(15, 30, 40, .30);
    --dc-row: rgba(15, 40, 55, .04);
    --dc-edge: color-mix(in srgb, var(--brand, #0AACA5) 55%, transparent);
    --dc-ecart-ink: #7a5f18;
    --dc-amb-ink: #7c5100;
    --dc-amb-bg: rgba(202, 138, 4, .11);
    --dc-amb-bg-h: rgba(202, 138, 4, .20);
    --dc-amb-bd: rgba(161, 98, 7, .45);
    --dc-amb-edge: #ca8a04;
    --dc-chip-ink: color-mix(in srgb, var(--brand, #0AACA5) 62%, #0b2530);
    --dc-chip-bg: color-mix(in srgb, var(--brand, #0AACA5) 8%, transparent);
    --dc-chip-bg-h: color-mix(in srgb, var(--brand, #0AACA5) 18%, transparent);
    --dc-chip-bd: color-mix(in srgb, var(--brand, #0AACA5) 45%, transparent);
    --dc-hit: color-mix(in srgb, var(--brand, #0AACA5) 15%, transparent);
}

/* ── Barre « Détail : Lignes | Tous les comptes » + recherche, sous la barre d'outils de la colonne figée ──
   Les deux étages de l'en-tête font 42 px : la barre existante (20 px) et celle-ci (18 px) y tiennent sans pousser la
   bande « Historique / Prévisionnel », dont le décalage collant est calculé sur 20 px. */
.dc-host .dc-bar { position: relative; display: flex; align-items: center; gap: 4px; height: 18px; margin: 2px 4px 0; min-width: 0; }
.dc-host .dc-bar-l { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--ftt-ink-2, #8ea9b3); }
.dc-host .dc-seg { flex: 0 0 auto; height: 18px; }
.dc-host .dc-seg .iku-seg-b { font-size: 10px; padding: 0 6px; }
.dc-host .dc-q { flex: 1 1 64px; min-width: 46px; height: 18px; box-sizing: border-box; display: flex; align-items: center; gap: 3px;
    padding: 0 3px 0 4px; border-radius: 6px; border: 1px solid var(--o14, rgba(255, 255, 255, .14)); background: var(--o4, rgba(255, 255, 255, .04));
    color: var(--ftt-ink-2, #8ea9b3); transition: border-color .15s; }
.dc-host .dc-q.on, .dc-host .dc-q:focus-within { border-color: color-mix(in srgb, var(--brand, #0bb3c9) 65%, transparent); color: var(--ftt-ink, inherit); }
.dc-host .dc-q-ic { flex: 0 0 auto; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; opacity: .75; }
.dc-host .dc-q-i { flex: 1 1 auto; min-width: 0; width: 100%; height: 16px; padding: 0; border: 0; outline: 0; background: none;
    color: var(--ftt-ink, inherit); font: 500 10.5px/16px var(--font-family, system-ui, sans-serif); }
.dc-host .dc-q-i::placeholder { color: var(--ftt-ink-2, #8ea9b3); opacity: .8; }
.dc-host .dc-q-n { flex: 0 0 auto; padding: 2px 5px; border-radius: 999px; font: 700 9.5px/1 var(--font-family, system-ui, sans-serif);
    background: var(--dc-chip-bg-h); color: var(--dc-chip-ink); font-variant-numeric: tabular-nums; cursor: help; }
.dc-host .dc-q-n.vide { background: var(--dc-amb-bg); color: var(--dc-amb-ink); }
.dc-host .dc-q-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; padding: 0;
    border: 0; border-radius: 4px; background: none; color: inherit; cursor: pointer; opacity: .75; }
.dc-host .dc-q-x:hover { opacity: 1; background: var(--o8, rgba(255, 255, 255, .08)); }
.dc-host .dc-q-x svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* Colonne étroite (vue mensuelle, 210 px) : une loupe au bout de la rangée ; le champ s'ouvre PAR-DESSUS la rangée entière
   (opaque : la surface de l'en-tête figé), le temps de la recherche. */
.dc-host .dc-q-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 18px; padding: 0;
    box-sizing: border-box; border: 1px solid var(--o14, rgba(255, 255, 255, .14)); border-radius: 6px; background: var(--o4, rgba(255, 255, 255, .04));
    color: var(--ftt-ink-2, #8ea9b3); cursor: pointer; margin-left: auto; }
.dc-host .dc-q-btn:hover { color: var(--ftt-ink, inherit); border-color: color-mix(in srgb, var(--brand, #0bb3c9) 60%, transparent); }
.dc-host .dc-q.flottant { position: absolute; inset: 0; z-index: 2; background-color: var(--ftt-surface, var(--paper, #fff)); }

/* ── Puce « n comptes » d'une ligne : un vrai bouton, la seule commande de dépliage ──
   `font` complet : les lignes de niveau 1 sont en italique réduit, la puce ne doit pas l'hériter. */
.dc-host .dc-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; height: 16px; margin-left: 6px; padding: 0 6px 0 4px;
    box-sizing: border-box; border: 1px solid var(--dc-chip-bd); border-radius: 999px; background: var(--dc-chip-bg); color: var(--dc-chip-ink);
    font: 600 10px/1 var(--font-family, system-ui, sans-serif); letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums;
    cursor: pointer; transition: background .12s, border-color .12s; }
.dc-host .dc-chip:hover { background: var(--dc-chip-bg-h); }
.dc-host .dc-chip.on { background: var(--dc-chip-bg-h); border-color: color-mix(in srgb, var(--brand, #0bb3c9) 70%, transparent); }
.dc-host .dc-chip:focus-visible, .dc-host .dc-pill:focus-visible { outline: 2px solid var(--brand, #0bb3c9); outline-offset: 1px; }
.dc-host .dc-chev { width: 9px; height: 9px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
    stroke-linejoin: round; transition: transform .12s; }
.dc-host .dc-chip.on .dc-chev { transform: rotate(90deg); }

/* ── Puces ambrées : « → Ligne ? » (suggestion de reclassement), « n à reclasser », « à ventiler » (information) ── */
.dc-host .dc-pill { flex: 0 0 auto; display: inline-flex; align-items: center; height: 16px; margin-left: 5px; padding: 0 6px; box-sizing: border-box;
    border: 1px solid var(--dc-amb-bd); border-radius: 999px; background: var(--dc-amb-bg); color: var(--dc-amb-ink);
    font: 600 10px/1 var(--font-family, system-ui, sans-serif); white-space: nowrap; }
.dc-host button.dc-pill { cursor: pointer; }
.dc-host button.dc-pill:hover { background: var(--dc-amb-bg-h); }
.dc-host .dc-pill-info { cursor: help; }

/* ── Sous-lignes : comptes et retraitement ── */
.dc-host .ftt tbody tr.dc-acct > td,
.dc-host .ftt tbody tr.dc-ecart > td { background-color: var(--dc-row); color: var(--dc-ink); font-size: 10.5px; font-style: normal; font-weight: 400; }
.dc-host .ftt tbody tr.dc-acct > td.ftt-frozen,
.dc-host .ftt tbody tr.dc-ecart > td.ftt-frozen {
    background-color: var(--ftt-frost, var(--ftt-surface, #fff));
    background-image: linear-gradient(var(--dc-row), var(--dc-row));
    box-shadow: inset 2px 0 0 var(--dc-edge), inset -1px 0 0 var(--ftt-frost-edge, transparent),
                7px 0 9px -7px rgba(var(--shadow-col, 0 0 0), calc(.6 * var(--shadow-mul, 1))); }
.dc-host .ftt tbody tr.dc-fin > td { border-bottom: 1px solid var(--ftt-line-soft, rgba(127, 127, 127, .25)); }
/* Colonne annuelle : un cran de graisse, comme la maquette (la règle de la grille y met 600, trop pour une note). */
.dc-host .ftt tbody tr.dc-acct > td.is-annual,
.dc-host .ftt tbody tr.dc-ecart > td.is-annual { font-weight: 500; }

.dc-host .dc-lbl { display: flex; align-items: center; gap: 7px; min-width: 0; padding-left: 12px; }
.dc-host .dc-num { flex: 0 0 auto; min-width: 6ch; color: var(--dc-ink-num); letter-spacing: .01em; font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; }
.dc-host .dc-lib { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-host .dc-lbl-ecart { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; color: var(--dc-ecart-ink); }

/* Montants : du texte nu dans la cellule (aucune balise par cellule, « Tous les comptes » en pose des dizaines de milliers) ;
   c'est la ligne qui donne l'encre. Colonnes projetées (« · ») : encre effacée. Le rouge des négatifs (is-neg) ne
   s'applique pas : une charge est négative par nature, ce n'est pas un signal. */
.dc-host .ftt tbody tr.dc-acct > td:not(.ftt-frozen) { font-variant-numeric: tabular-nums; }
.dc-host .ftt tbody tr.dc-ecart > td:not(.ftt-frozen) { color: var(--dc-ecart-ink); font-style: italic; }
.dc-host .ftt tbody tr.dc-acct > td.is-prev,
.dc-host .ftt tbody tr.dc-ecart > td.is-prev { color: var(--dc-ink-p); font-style: normal; }
/* Exercice EN COURS : cumul réel seulement (la ligne porte l'atterrissage) — pointillé et bulle, pour qu'on ne le lise pas
   comme une année entière. */
.dc-host .dc-ytd { color: var(--dc-ink); font-style: italic; cursor: help; text-decoration: underline dotted; text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); }
.dc-host tr.dc-ecart .dc-ytd { color: var(--dc-ecart-ink); }

/* Compte trouvé par la recherche : il se détache de ses voisins sans crier. */
.dc-host .ftt tbody tr.dc-hit > td { background-color: var(--dc-hit); }
.dc-host .ftt tbody tr.dc-hit > td.ftt-frozen { background-image: linear-gradient(var(--dc-hit), var(--dc-hit)); }
.dc-host tr.dc-hit .dc-lib, .dc-host tr.dc-hit .dc-num { color: var(--ftt-ink-strong, var(--ftt-ink, inherit)); font-weight: 600; }
/* Compte porteur d'une suggestion ou à ventiler : le filet de gauche passe à l'ambre. */
.dc-host .ftt tbody tr.dc-sug-l > td.ftt-frozen,
.dc-host .ftt tbody tr.dc-att-l > td.ftt-frozen {
    box-shadow: inset 3px 0 0 var(--dc-amb-edge), inset -1px 0 0 var(--ftt-frost-edge, transparent),
                7px 0 9px -7px rgba(var(--shadow-col, 0 0 0), calc(.6 * var(--shadow-mul, 1))); }

/* Densité « Compact » : les sous-lignes suivent la grille. */
html[data-density="compact"] .dc-host .ftt tbody tr.dc-acct > td,
html[data-density="compact"] .dc-host .ftt tbody tr.dc-ecart > td { padding-top: 0; padding-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .dc-host .dc-chev, .dc-host .dc-chip, .dc-host .dc-q { transition: none; }
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════════════════════
   PARTAGE DES RÔLES (2026-09-25) : le pilotage n'affiche plus les comptes EN SOUS-LIGNES (cellules vides sur tout le
   prévisionnel) ; sa puce « n comptes » ouvre le VOLET des comptes de la ligne (Pages/VoletComptes.razor, dans le panneau
   de droite). Le détail dans le tableau vit dans le Reporting (toutes ses colonnes sont réelles).
   ═════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Coin de la grille du pilotage (CustomFinTree, barre d'outils de la colonne figée) : une seule rangée, centrée dans
   l'en-tête à deux étages ; poignée et sélecteurs à la même hauteur, An | Mois à gauche, K€ | M€ au bout. ── */
.ftc-coin { display: flex; align-items: center; gap: 6px; padding: 0 6px 0 8px; min-width: 0; }
.ftc-coin-sp { flex: 1 1 auto; min-width: 4px; }
.ftc-coin .iku-seg.ftc-seg { height: 22px; border-radius: 7px; }
.ftc-coin .ftc-seg .iku-seg-b { padding: 0 9px; font-size: 11px; letter-spacing: .01em; }
.ftc-coin .fintree-dragbtn-hdr { height: 22px; width: 24px; border-radius: 7px; }

/* ── Le volet ── (jetons : ceux de .dc-host, posé sur la section) */
.dcv { display: flex; flex-direction: column; gap: 14px; max-width: 760px; padding: 14px 14px 18px; color: var(--dc-ink); container-type: inline-size; }
.dcv-h { display: flex; align-items: flex-start; gap: 12px; }
.dcv-h-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dcv-sur { font: 700 10px/1.2 var(--font-family, system-ui, sans-serif); letter-spacing: .09em; text-transform: uppercase; color: var(--dc-chip-ink); }
.dcv-titre { margin: 0; font: 650 15.5px/1.25 var(--font-family, system-ui, sans-serif); color: var(--tx1, #eafdff); text-wrap: balance; }
.dcv-meta { font-size: 11px; color: var(--dc-ink-num); font-variant-numeric: tabular-nums; }
.dcv-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--o14, rgba(255, 255, 255, .14)); border-radius: 8px; background: var(--o4, rgba(255, 255, 255, .04));
    color: var(--dc-ink); cursor: pointer; transition: border-color .12s, color .12s; }
.dcv-x:hover { border-color: color-mix(in srgb, var(--brand, #0bb3c9) 60%, transparent); color: var(--tx1, #eafdff); }
.dcv-x:focus-visible, .dcv-btn:focus-visible { outline: 2px solid var(--brand, #0bb3c9); outline-offset: 2px; }
.dcv-vide { margin: 0; font-size: 12px; color: var(--dc-ink-num); }

/* Le tableau : une grille CSS par rangée (le libellé prend le reste, les montants s'alignent au chiffre). */
.dcv-tab { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.dcv-r { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--dcv-n, 2), minmax(58px, 72px)) 62px; align-items: center;
    column-gap: 10px; min-height: 30px; padding: 5px 6px 5px 8px; box-sizing: border-box;
    border-bottom: 1px solid var(--o8, rgba(255, 255, 255, .08)); font-size: 11.5px; }
.dcv-r-h { min-height: 0; padding-top: 0; padding-bottom: 7px; align-items: end; border-bottom-color: var(--o14, rgba(255, 255, 255, .14));
    font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dc-ink-num); }
.dcv-r-h small { display: block; margin-top: 2px; font-size: 9.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.dcv-r-h small:empty { display: none; }
.dcv-v { text-align: right; white-space: nowrap; }
.dcv-c { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dcv-l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dcv-l1 .dc-num { flex: 0 0 auto; }
.dcv-lib { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx1, #eafdff); }
.dcv-l2 { display: flex; flex-wrap: wrap; gap: 4px; }
.dcv-l2 .dc-pill { margin-left: 0; }
.dcv-p { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 10.5px; color: var(--dc-ink-num); white-space: nowrap; }
.dcv-bar { position: relative; flex: 0 0 22px; height: 4px; border-radius: 2px; overflow: hidden; background: var(--o8, rgba(255, 255, 255, .08)); }
.dcv-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: 2px;
    background: color-mix(in srgb, var(--brand, #0bb3c9) 80%, transparent); }
/* Un compte porteur d'une suggestion (ou à ventiler) : le filet ambré de la grille, à gauche. */
.dcv-r.is-sug { box-shadow: inset 2px 0 0 var(--dc-amb-edge); }
/* Un compte sans montant sur ces exercices : présent (il est rangé ici), mais en retrait. */
.dcv-r.is-vide { opacity: .55; }
.dcv-r-ecart { font-style: italic; color: var(--dc-ecart-ink); }
.dcv-r-ecart .dcv-c { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.dcv-r-tot { border-bottom: 0; border-top: 1px solid var(--o14, rgba(255, 255, 255, .14)); margin-top: -1px;
    font-weight: 650; color: var(--tx1, #eafdff); }

.dcv-pied { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.dcv-btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--brand, #0bb3c9) 55%, transparent); border-radius: 8px;
    background: color-mix(in srgb, var(--brand, #0bb3c9) 10%, transparent); color: var(--tx1, #eafdff);
    font: 600 12px/1 var(--font-family, system-ui, sans-serif); cursor: pointer; transition: background .12s; }
.dcv-btn:hover { background: color-mix(in srgb, var(--brand, #0bb3c9) 20%, transparent); }
.dcv-btn-ic { width: 15px; height: 15px; flex: 0 0 auto; }
.dcv-btn-n { padding: 3px 7px; border-radius: 999px; background: var(--dc-amb-bg); color: var(--dc-amb-ink);
    font-size: 10.5px; font-weight: 700; }
.dcv-note { margin: 0; font-size: 11px; line-height: 1.45; color: var(--dc-ink-num); }

@media (prefers-reduced-motion: reduce) {
    .dcv-x, .dcv-btn { transition: none; }
}

/* Volet ÉTROIT (le panneau de droite fait ~300 px en 1440) : chaque compte sur deux lignes. Ligne 1, numéro et libellé sur
   toute la largeur ; ligne 2, la part (barre) à gauche et les montants sous leurs années. En-tête : les années seules. */
@container (max-width: 459px) {
    .dcv-r { grid-template-columns: minmax(0, 1fr) repeat(var(--dcv-n, 2), 58px); row-gap: 4px; column-gap: 8px; }
    .dcv-r:not(.dcv-r-h) > .dcv-c { grid-column: 1 / -1; grid-row: 1; }
    .dcv-r:not(.dcv-r-h) > .dcv-p { grid-column: 1; grid-row: 2; justify-content: flex-start; }
    .dcv-r:not(.dcv-r-h) > .dcv-v { grid-row: 2; }
    .dcv-r-h > .dcv-p { display: none; }
    .dcv-l2 { margin-top: 1px; }
}

/* Puce d’une ligne en mode volet : elle ouvre le panneau, elle ne déplie rien ; son chevron ne pivote pas. */
.dc-host .dc-chip.dc-chip-vol.on .dc-chev { transform: none; }