/*  ── DYNAMIQUE DU PORTEFEUILLE DE « MES CLIENTS » (2026-10-11, préfixe dyc-, Shared/DynamiqueClients) ──────────────────────────
    1. La barre, repliée par défaut entre l'en-tête et le tableau de « Mes clients ». Dépliée sur grand écran (.plein), la section
       prend la place du tableau et de la fiche (sélecteur de FRÈRE, sans :has()) et défile en interne ; en flux (téléphone,
       embarqué), elle s'ouvre sous la barre, le tableau reste dessous.
    2. Le corps : le pont du chiffre d'affaires (barres positionnées en pourcentages), les rétentions, la récurrence observée,
       les listes.
    3. Styles Mat et Papier, densité Compact, téléphone, impression.
    Couleurs : celles de « Mes clients » (encre et teinte tertiaire du thème ; baisse en couleur d'erreur ; comptes divers en encre). */

/*  ════ 1. LA BARRE ════ */
.dyc { margin: 10px 14px 0; flex: 0 0 auto; min-width: 0; display: flex; flex-direction: column; }
.dyc.ouvert.plein { flex: 1 1 0; min-height: 0; margin-bottom: 14px; }
.dyc.ouvert.plein ~ .tcl-main { display: none !important; }
.dyc-barre {
    appearance: none; width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-width: 0;
    padding: 7px 12px; border-radius: 9px; cursor: pointer; text-align: left; font: inherit; color: inherit;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--mud-palette-text-primary) 9%, transparent);
    transition: background .12s ease, border-color .12s ease;
}
.dyc-barre:hover { background: color-mix(in srgb, var(--mud-palette-tertiary) 7%, transparent); border-color: color-mix(in srgb, var(--mud-palette-tertiary) 28%, transparent); }
.dyc-barre:focus-visible { outline: 1.5px solid var(--brand-strong, var(--mud-palette-tertiary)); outline-offset: 2px; }
.dyc.ouvert .dyc-barre { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.dyc-ico { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; flex: none;
    color: var(--mud-palette-tertiary); background: color-mix(in srgb, var(--mud-palette-tertiary) 14%, transparent); }
.dyc-ico .iku-ico { width: 12px; height: 12px; }
.dyc-titre { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 62%, transparent); white-space: nowrap; }
.dyc-periode { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dyc-ret { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mud-palette-tertiary); white-space: nowrap; }
.dyc-nb { font-size: 11px; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--mud-palette-text-primary) 70%, transparent); }
.dyc-chev { margin-left: auto; display: inline-grid; place-items: center; color: color-mix(in srgb, var(--mud-palette-text-primary) 60%, transparent); }
.dyc-chev .iku-ico { width: 14px; height: 14px; }

/*  ════ 2. LE CORPS ════ */
.dyc-corps {
    padding: 10px 12px 12px; min-width: 0;
    border: 0.5px solid color-mix(in srgb, var(--mud-palette-text-primary) 9%, transparent); border-top: 0;
    border-radius: 0 0 9px 9px; background: color-mix(in srgb, var(--mud-palette-text-primary) 1.5%, transparent);
}
.dyc.plein .dyc-corps { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.dyc-def, .dyc-vide { margin: 0 0 8px; font-size: 11.5px; line-height: 1.45; color: color-mix(in srgb, var(--mud-palette-text-primary) 78%, transparent); }
.dyc-vide { margin: 2px 0; }
.dyc-avis { margin: 0 0 8px; padding: 6px 10px; border-radius: 7px; font-size: 11px; line-height: 1.45;
    background: color-mix(in srgb, var(--mud-palette-info) 8%, transparent); border: 0.5px solid color-mix(in srgb, var(--mud-palette-info) 25%, transparent); }
.dyc-avis.alerte { background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent); border-color: color-mix(in srgb, var(--mud-palette-warning) 35%, transparent); }
.dyc-lien { margin-left: 6px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--brand-strong, var(--mud-palette-primary)); text-decoration: underline; cursor: pointer; }
.dyc-note { margin: 8px 0 0; font-size: 10.5px; line-height: 1.45; color: color-mix(in srgb, var(--mud-palette-text-primary) 66%, transparent); }

.dyc-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.dyc-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dyc-carte { padding: 10px 12px; border-radius: 9px; min-width: 0;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 2%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent); }
.dyc-carte-t { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; margin-bottom: 8px;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 64%, transparent); }
.dyc-carte-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 6px; }
.dyc-masque { font-size: 10px; color: color-mix(in srgb, var(--mud-palette-text-primary) 62%, transparent); }

/*  Le pont : une ligne par marche, la barre posée sur l'échelle commune (de 0 au point le plus haut du parcours). */
.dyc-pont { display: flex; flex-direction: column; gap: 3px; }
.dyc-pl { display: grid; grid-template-columns: minmax(130px, 210px) minmax(80px, 1fr) minmax(70px, auto); align-items: center; gap: 0 10px; min-height: 26px; }
.dyc-pl-lib { font-size: 11px; font-weight: 600; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dyc-pl-lib small { font-size: 9.5px; font-weight: 400; color: color-mix(in srgb, var(--mud-palette-text-primary) 62%, transparent); }
.dyc-pl-piste { position: relative; height: 14px; border-radius: 3px; background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent); }
.dyc-pl-piste i { position: absolute; top: 0; bottom: 0; border-radius: 3px; min-width: 0; }
.dyc-pl.total .dyc-pl-piste i { background: color-mix(in srgb, var(--mud-palette-text-primary) 38%, transparent); }
.dyc-pl.neg .dyc-pl-piste i { background: var(--mud-palette-error); opacity: .85; }
.dyc-pl.pos .dyc-pl-piste i { background: var(--mud-palette-tertiary); }
.dyc-pl.div .dyc-pl-piste i { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-text-primary) 40%, transparent) 0 3px, color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent) 3px 6px); }
.dyc-pl-v { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dyc-pl.total { padding: 3px 0; }
.dyc-pl.total .dyc-pl-lib { text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
.dyc-pl.neg .dyc-pl-v { color: var(--mud-palette-error); }
.dyc-pl.pos .dyc-pl-v { color: var(--mud-palette-tertiary); }
.dyc-pl.nul .dyc-pl-v { color: color-mix(in srgb, var(--mud-palette-text-primary) 55%, transparent); }
html[data-theme="light"] .dyc-pl.neg .dyc-pl-v { color: color-mix(in oklab, var(--mud-palette-error) 70%, #000000); }
html[data-theme="light"] :is(.dyc-pl.pos .dyc-pl-v, .dyc-ret) { color: color-mix(in oklab, var(--mud-palette-tertiary) 62%, #000000); }
/*  Recette UX 2026-10-11 : une marche à zéro reste neutre aussi en clair (la règle « neg » du thème clair passait devant « nul » :
    « Sans facture sur la période 0 € » s'affichait en rouge). Petits textes gris relevés en clair (4,2:1 mesuré, 4,5:1 visé). */
html[data-theme] .dyc-pl.nul .dyc-pl-v { color: color-mix(in srgb, var(--mud-palette-text-primary) 72%, transparent); }
html[data-theme="light"] :is(.dyc-kpi-l, .dyc-pl-lib small, .dyc-rl-ex small, .dyc-rl-v small, .dyc-titre, .dyc-carte-t, .dyc-seg button:not(.on)) { color: color-mix(in srgb, var(--mud-palette-text-primary) 74%, transparent); }

/*  Rétentions, clients, perdus : la grammaire des chiffres de la fiche (.tcl-kpi). */
.dyc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dyc-kpi { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; min-width: 0;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 2.5%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent); }
.dyc-kpi.alerte { border-color: color-mix(in srgb, var(--mud-palette-error) 35%, transparent); }
.dyc-kpi-l { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: color-mix(in srgb, var(--mud-palette-text-primary) 62%, transparent); }
.dyc-kpi-v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.dyc-kpi-d { font-size: 10px; line-height: 1.35; color: color-mix(in srgb, var(--mud-palette-text-primary) 66%, transparent); }

/*  Récurrence : une barre à 100 % par exercice. */
.dyc-mention { margin: -4px 0 8px; font-size: 10.5px; font-style: italic; color: color-mix(in srgb, var(--mud-palette-text-primary) 70%, transparent); }
.dyc-rec { display: flex; flex-direction: column; gap: 5px; }
.dyc-rl { display: grid; grid-template-columns: 70px minmax(80px, 1fr) 64px; align-items: center; gap: 0 10px; }
.dyc-rl-ex { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; line-height: 1.2; }
.dyc-rl-ex small { font-size: 9px; font-weight: 400; color: color-mix(in srgb, var(--mud-palette-text-primary) 62%, transparent); }
.dyc-rl-barre { display: flex; height: 14px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent); }
.dyc-rl-barre i { display: block; height: 100%; }
.dyc-rl-v { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dyc-rl-v b { font-size: 11.5px; }
.dyc-rl-v small { font-size: 9px; color: color-mix(in srgb, var(--mud-palette-text-primary) 60%, transparent); }
.s-fid { background: var(--mud-palette-tertiary); }
.s-reg { background: color-mix(in srgb, var(--mud-palette-tertiary) 55%, var(--mud-palette-info)); opacity: .75; }
.s-occ { background: color-mix(in srgb, var(--mud-palette-text-primary) 26%, transparent); }
.s-div { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-text-primary) 40%, transparent) 0 3px, color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent) 3px 6px); }
.dyc-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 10px; color: color-mix(in srgb, var(--mud-palette-text-primary) 70%, transparent); }
.dyc-leg span { display: inline-flex; align-items: center; gap: 5px; }
.dyc-leg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/*  Listes. */
.dyc-seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent); border: 0.5px solid color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent); }
.dyc-seg button { appearance: none; border: 0; background: transparent; font: inherit; font-size: 10.5px; font-weight: 500; padding: 4px 10px; border-radius: 4px; cursor: pointer;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 62%, transparent); white-space: nowrap; }
.dyc-seg button.on { background: color-mix(in srgb, var(--mud-palette-info) 22%, transparent); color: var(--mud-palette-info); }
html[data-theme="light"] .dyc-seg button.on { color: color-mix(in oklab, var(--mud-palette-info) 58%, #000000); }
/*  Recette UX 2026-10-11 : en Mat et Papier sombres, le choix actif tombait à 3,9:1 sur son fond teinté. */
html[data-style="mat"]:not([data-theme="light"]) .dyc-seg button.on { color: color-mix(in oklab, var(--mud-palette-info) 62%, #ffffff); }
.dyc-seg button:focus-visible { outline: 1.5px solid var(--brand-strong, var(--mud-palette-info)); outline-offset: 1px; }
.dyc-tbl { font-size: 11px; }
.dyc-tr { display: grid; grid-template-columns: minmax(90px, 1.4fr) minmax(62px, .6fr) minmax(62px, .6fr) minmax(110px, 1.3fr); gap: 0 10px; align-items: center; padding: 5px 2px;
    border-bottom: 0.5px solid color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent); }
.dyc-th { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: color-mix(in srgb, var(--mud-palette-text-primary) 58%, transparent); }
.dyc-tf { border-bottom: 0; font-weight: 700; color: color-mix(in srgb, var(--mud-palette-text-primary) 72%, transparent); }
.dyc-c-nom { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dyc-c-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dyc-c-st { min-width: 0; display: flex; flex-wrap: wrap; gap: 3px 6px; align-items: center; font-size: 10.5px; }
.dyc-st { color: color-mix(in srgb, var(--mud-palette-text-primary) 74%, transparent); }
.dyc-st.perdu { color: var(--mud-palette-error); font-weight: 600; }
html[data-theme="light"] .dyc-st.perdu { color: color-mix(in oklab, var(--mud-palette-error) 70%, #000000); }
.dyc-tag { font-size: 9.5px; padding: 1px 6px; border-radius: 4px; cursor: help; white-space: nowrap;
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent); color: color-mix(in srgb, var(--mud-palette-text-primary) 82%, transparent); }

/*  ════ 3. VARIANTES ════ */
@media (max-width: 1100px) {
    .dyc-grille { grid-template-columns: minmax(0, 1fr); }
    .dyc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/*  Téléphone : le libellé de la marche sur sa ligne, la barre et le montant dessous. */
@media (max-width: 560px) {
    .dyc { margin: 8px 10px 0; }
    .dyc-pl { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lib v" "piste piste"; row-gap: 3px; padding: 2px 0; }
    .dyc-pl-lib { grid-area: lib; }
    .dyc-pl-v { grid-area: v; }
    .dyc-pl-piste { grid-area: piste; }
    .dyc-tr { grid-template-columns: minmax(0, 1fr) minmax(56px, auto) minmax(56px, auto); }
    .dyc-c-st { grid-column: 1 / -1; padding-top: 1px; }
    .dyc-th .dyc-c-st { display: none; }
    .dyc-kpi-v { font-size: 15px; }
}
html[data-density="compact"] .dyc-barre { padding: 5px 10px; }
html[data-density="compact"] .dyc-corps { padding: 8px 10px 10px; }
html[data-density="compact"] :is(.dyc-carte, .dyc-kpi) { padding: 7px 9px; }
html[data-density="compact"] .dyc-pl { min-height: 22px; }
html[data-density="compact"] .dyc-tr { padding: 3px 2px; }

/*  Mat : surfaces pleines des cartes du hub converti, pas de verre. */
html[data-style="mat"] .dyc-barre { background: var(--mt-carte-2) !important; border-color: var(--mt-trait) !important; }
html[data-style="mat"] .dyc-corps { background: var(--mt-carte) !important; border-color: var(--mt-trait) !important; }
html[data-style="mat"] :is(.dyc-carte, .dyc-kpi) { background: var(--mt-carte-2) !important; border-color: var(--mt-trait) !important; }
/*  Papier : libellés sourds à l'encre sourde du thème (comme « Mes clients »). */
html[data-papier][data-style] :is(.dyc-titre, .dyc-nb, .dyc-pl-lib small, .dyc-kpi-l, .dyc-kpi-d, .dyc-carte-t, .dyc-note, .dyc-th, .dyc-masque,
    .dyc-leg, .dyc-rl-v small, .dyc-rl-ex small, .dyc-mention, .dyc-seg button:not(.on)) { color: var(--pp-encre-3) !important; }
html[data-papier][data-style] :is(.dyc-barre, .dyc-corps) { background: var(--pp-carte) !important; border-color: var(--pp-trait) !important; }
html[data-papier][data-style] :is(.dyc-carte, .dyc-kpi) { background: var(--pp-carte-2) !important; border-color: var(--pp-trait) !important; }

/*  Impression : la section dépliée s'imprime à la suite, sans défileur ; la barre sans chevron. */
@media print {
    .dyc, .dyc.ouvert.plein, .dyc.plein .dyc-corps { flex: none !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
    .dyc.ouvert.plein ~ .tcl-main { display: none !important; }
    .dyc-chev, .dyc-lien { display: none !important; }
    .dyc-carte { break-inside: avoid; page-break-inside: avoid; }
}