/*  ── POTENTIEL PAR CLIENT DE « MES CLIENTS » (2026-10-11, préfixe pcl-) ─────────────────────────────────────────────────────
    1. Le CA à reconquérir (Shared/ClientsAReconquerir) : une barre repliée entre l'en-tête et le tableau de « Mes clients »,
       dépliée en liste (écart au meilleur niveau des trois derniers exercices, à périmètre égal) avec « Simuler la reconquête ».
    2. La fiabilité de la projection de chaque client (TopClientsLight) : « non fiable » à la place de la projection, mention
       « indicatif », pastille de la fiche, note du total.
    3. Styles Mat et Papier, densité Compact, téléphone.
    Couleurs : celles de « Mes clients » (encre et teinte tertiaire du thème, --brand-strong pour le texte d'action,
    --st-amber assombri par le thème clair). */

/*  ════ 1. CA À RECONQUÉRIR ════ */
.pcl { margin: 10px 14px 0; flex: 0 0 auto; min-width: 0; }
.pcl-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;
}
.pcl-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); }
/*  2026-10-11 (recette UX) : un seul exercice, la barre dit « deux exercices nécessaires » et ne s'ouvre pas. */
.pcl-barre.is-vide { cursor: default; }
.pcl-barre.is-vide:hover { background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent); border-color: color-mix(in srgb, var(--mud-palette-text-primary) 9%, transparent); }
.pcl-barre:focus-visible { outline: 1.5px solid var(--brand-strong, var(--mud-palette-tertiary)); outline-offset: 2px; }
.pcl.ouvert .pcl-barre { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pcl-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); }
.pcl-ico .iku-ico { width: 12px; height: 12px; }
.pcl-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; }
.pcl-total { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mud-palette-tertiary); white-space: nowrap; }
.pcl-total small { font-size: 10px; font-weight: 500; opacity: .8; }
.pcl-part, .pcl-nb { font-size: 11px; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--mud-palette-text-primary) 70%, transparent); }
.pcl-part { font-weight: 600; }
.pcl-chev { margin-left: auto; display: inline-grid; place-items: center; color: color-mix(in srgb, var(--mud-palette-text-primary) 60%, transparent); }
.pcl-chev .iku-ico { width: 14px; height: 14px; }

.pcl-corps {
    padding: 8px 12px 10px; max-height: 280px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
    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);
}
.pcl-def, .pcl-note { margin: 0; font-size: 11px; line-height: 1.45; color: color-mix(in srgb, var(--mud-palette-text-primary) 72%, transparent); }
.pcl-note { margin-top: 8px; font-size: 10.5px; color: color-mix(in srgb, var(--mud-palette-text-primary) 64%, transparent); }

.pcl-table { margin-top: 8px; font-size: 11px; }
.pcl-tr {
    display: grid; align-items: center; gap: 0 10px; padding: 5px 4px;
    /*  Colonnes bornées : sur un grand écran, les montants restent près des noms (le reste de la largeur va à l'action). */
    grid-template-columns: 26px minmax(110px, 300px) repeat(3, minmax(78px, 128px)) minmax(132px, 1fr);
    border-bottom: 0.5px solid color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
    cursor: pointer; border-radius: 4px;
}
.pcl-tr:not(.pcl-th):not(.pcl-tf):hover { background: color-mix(in srgb, var(--mud-palette-tertiary) 5%, transparent); }
.pcl-tr.choisi { background: color-mix(in srgb, var(--mud-palette-tertiary) 10%, transparent); box-shadow: inset 2px 0 0 0 var(--mud-palette-tertiary); }
.pcl-th { cursor: default; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 58%, transparent);
    border-bottom-color: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent); }
.pcl-tf { cursor: default; border-bottom: 0; font-weight: 700; }
.pcl-tf .pcl-c-nom { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: color-mix(in srgb, var(--mud-palette-text-primary) 62%, transparent); }
.pcl-c-rang { display: flex; justify-content: center; }
.pcl-badge { min-width: 20px; height: 20px; padding: 0 4px; border-radius: 6px; display: inline-grid; place-items: center; font-size: 10px; font-weight: 600;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent); color: color-mix(in srgb, var(--mud-palette-text-primary) 70%, transparent); }
.pcl-c-nom { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcl-c-num { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.2; min-width: 0; }
.pcl-c-num b { font-weight: 600; white-space: nowrap; }
.pcl-c-num small { font-size: 9px; white-space: nowrap; color: color-mix(in srgb, var(--mud-palette-text-primary) 58%, transparent); }
.pcl-th .pcl-c-num { display: block; }
.pcl-c-ecart b { color: var(--mud-palette-tertiary); font-weight: 700; }
.pcl-c-act { display: flex; justify-content: flex-start; min-width: 0; padding-left: 8px; }
.pcl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pcl-simuler {
    appearance: none; border: 0; background: none; margin: 0; padding: 3px 2px; position: relative;
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%; border-radius: 4px; cursor: pointer;
    font: inherit; font-size: 10px; font-weight: 700; line-height: 1.2; white-space: nowrap; color: var(--brand-strong, var(--mud-palette-tertiary));
}
.pcl-simuler::after { content: ""; position: absolute; inset: -5px -4px; }
.pcl-simuler .iku-ico { width: 11px; height: 11px; flex: none; }
.pcl-simuler > span { overflow: hidden; text-overflow: ellipsis; }
.pcl-simuler:hover > span { text-decoration: underline; text-underline-offset: 2px; }
.pcl-simuler:focus-visible { outline: 1.5px solid var(--brand-strong, var(--mud-palette-tertiary)); outline-offset: 2px; }

/*  ════ 2. FIABILITÉ DE LA PROJECTION ════ */
/*  Tableau : la projection masquée laisse « non fiable », lisible dans les deux thèmes, l'explication en infobulle. */
.pcl-pred-nf { font-size: 10px; font-weight: 600; white-space: nowrap; cursor: help;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 66%, transparent);
    text-decoration: underline dotted color-mix(in srgb, var(--mud-palette-text-primary) 40%, transparent); text-underline-offset: 2px; }
.pcl-mention { font-weight: 500; color: color-mix(in srgb, var(--mud-palette-text-primary) 62%, transparent); }
/*  Fiche : pastille sous forme de mot, à côté de la valeur. */
.pcl-fiab { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; vertical-align: 2px;
    font-size: 9px; font-weight: 700; letter-spacing: .02em; line-height: 1.35; white-space: nowrap; }
.pcl-fiab.ok { color: var(--mud-palette-tertiary); background: color-mix(in srgb, var(--mud-palette-tertiary) 14%, transparent); }
.pcl-fiab.ind { color: var(--st-amber, #fbbf24); background: color-mix(in srgb, var(--st-amber, #fbbf24) 14%, transparent); }
.pcl-fiab.nm { color: color-mix(in srgb, var(--mud-palette-text-primary) 66%, transparent); background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent); }
.pcl-kpi-nf { cursor: help; }
.pcl-kpi-nf .tcl-kpi-v { color: color-mix(in srgb, var(--mud-palette-text-primary) 55%, transparent); }
.pcl-kpi-nf .tcl-kpi-d { color: color-mix(in srgb, var(--mud-palette-text-primary) 70%, transparent); white-space: normal; }
.tcl-kpi[data-tip] { cursor: help; }
/*  En-tête : comment les clients masqués entrent dans le total. */
.pcl-hero-note { display: block; margin-top: 1px; font-size: 10px; text-align: right; cursor: help; font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 66%, transparent); }
/*  Thème clair : le tertiaire du thème tombe sous 4,5:1 en petit texte sur le blanc ; même teinte, assombrie. */
html[data-theme="light"] :is(.pcl-total, .pcl-c-ecart b, .pcl-fiab.ok, .pcl-ico) { color: color-mix(in oklab, var(--mud-palette-tertiary) 55%, #000000); }

/*  La reconquête préparée dans le pilotage (CroissanceView, .cli-pont en sens Gain) : la teinte de la marque, pas le rouge de la perte. */
html .cli-pont.gain { background: color-mix(in srgb, var(--brand) 7%, transparent); border-color: color-mix(in srgb, var(--brand) 42%, transparent); }
html .cli-pont.gain .iku-ico { color: var(--brand-strong, var(--brand)); }

/*  ════ 3. STYLES, DENSITÉ, TÉLÉPHONE ════ */
html[data-style="mat"] .pcl-barre { background: var(--mt-carte-2) !important; border-color: var(--mt-trait) !important; }
html[data-style="mat"] .pcl-corps { background: var(--mt-carte) !important; border-color: var(--mt-trait) !important; }
html[data-papier][data-style] :is(.pcl-titre, .pcl-part, .pcl-nb, .pcl-def, .pcl-note, .pcl-th, .pcl-c-num small, .pcl-mention, .pcl-hero-note, .pcl-pred-nf) { color: var(--pp-encre-3) !important; }
html[data-papier][data-style] .pcl-titre { font-family: var(--font-family) !important; }

html[data-density="compact"] .pcl { margin-top: 6px; }
html[data-density="compact"] .pcl-barre { padding-block: 5px; }
html[data-density="compact"] .pcl-tr { padding-block: 3px; }
html[data-density="compact"] .pcl-corps { padding-block: 6px 8px; }

@media (max-width: 720px) {
    .pcl { margin: 8px 10px 0; }
    .pcl-barre { gap: 2px 10px; padding: 8px 10px; min-height: 44px; }
    .pcl-chev { position: absolute; right: 10px; }
    .pcl-barre { position: relative; padding-right: 32px; }
    .pcl-corps { max-height: none; padding: 8px 10px 10px; }
    /*  Trois rangées par client : rang et nom ; les trois montants ; l'action, à droite, en entier. L'en-tête suit la même grille. */
    .pcl-tr { grid-template-columns: 22px repeat(3, minmax(0, 1fr)); grid-template-areas: "rang nom nom nom" "rang best per ecart" "rang act act act"; gap: 3px 8px; padding: 6px 2px; }
    .pcl-tf .pcl-c-act, .pcl-th .pcl-c-act { display: none; }
    .pcl-c-rang { grid-area: rang; align-self: start; }
    .pcl-c-nom { grid-area: nom; }
    .pcl-c-best { grid-area: best; }
    .pcl-c-per { grid-area: per; }
    .pcl-c-ecart { grid-area: ecart; }
    .pcl-c-act { grid-area: act; justify-content: flex-end; padding-left: 0; }
    .pcl-th .pcl-c-act { display: none; }
    .pcl-simuler { min-height: 32px; }
    /*  Passe mobile (2026-10-11) : la fiche du client (TopClientsLight, styles du composant, d'où les sélecteurs à deux classes)
        réduisait le nom à « CLIENT… » à côté de la pastille d'évolution et du pager. Le nom et sa part prennent la ligne et
        reviennent à la ligne ; pastille et pager passent dessous. Le tableau garde ses noms tronqués (bulle au survol), la fiche
        les donne en entier. */
    .tcl-panel > .tcl-panel-head { flex-wrap: wrap; row-gap: 6px; }
    .tcl-panel-head > .tcl-panel-id { flex: 1 1 calc(100% - 44px); }
    .tcl-panel-id > .tcl-panel-name, .tcl-panel-id > .tcl-panel-sub { white-space: normal; overflow-wrap: anywhere; }
    /*  Le titre du graphique des ventes porte sa légende (ventes, moyenne sur 3 mois, 12 derniers mois) : sur une seule ligne, la
        légende sortait de la carte. Elle passe à la ligne, chaque repère entier. */
    .tcl-chart-header > .tcl-chart-title { white-space: normal; overflow: visible; line-height: 1.6; }
    .tcl-chart-title > .tcl-lg { white-space: nowrap; }
    /*  Fin de défilement : la vue défile dans .tcl-main (une colonne sous 1 280 px), pas dans l'enveloppe de la fenêtre qui porte
        déjà la réserve du bouton du copilote ; la dernière ligne de la fiche restait sous ce bouton. */
    .intent-popup-view-wrapper .tcl-main { padding-bottom: 72px; }
}
@media (hover: none) {
    /*  La cible élargie de « Et s'il partait ? » (−8 px de tous côtés) mordait sur le nom du client, juste au-dessus : un doigt
        posé sur le nom ouvrait la simulation. Elle ne s'élargit plus vers le haut. */
    .tcl-client-alt > .tcl-pont::after { inset: 0 -8px -8px; }
    /*  Même chose pour « Simuler la reconquête » : sa cible couvrait les montants de la rangée du dessus. */
    .pcl-simuler::after { inset: 0 -8px -8px; }
}
@media print { .pcl-simuler { display: none; } .pcl-corps { max-height: none; overflow: visible; } }