/* Lectures CA / marge : frises comparatives Y et récit, sur les tokens Stamina. */
.performance-page { container:performance-page / inline-size; --pf-real:var(--color-night,#201733); --pf-old:color-mix(in srgb,var(--color-accent) 14%,color-mix(in srgb,var(--pf-real) 12%,var(--color-surface))); color:var(--color-ink); }
.performance-page [hidden] { display:none !important; }
.pf-period { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
.pf-year { margin-left:auto; }
.pf-months { min-width:0; flex:1; max-width:max-content; }
.pf-custom { position:relative; flex:none; }
.pf-custom summary { cursor:pointer; border:1px solid var(--color-line); background:var(--color-surface); border-radius:50%; padding:.5rem .65rem; }
.pf-custom form { position:absolute; right:0; z-index:10; background:var(--color-surface); border:1px solid var(--color-line); border-radius:1rem; box-shadow:var(--shadow-card); padding:1rem; width:18rem; display:grid; gap:.8rem; }
.pf-custom label { display:grid; gap:.4rem; font-size:.8rem; }
.pf-table-scroll { overflow:auto; border:1px solid var(--color-line); border-radius:.9rem; margin-top:16px; }
.pf-table { width:100%; border-collapse:collapse; font-size:.76rem; font-variant-numeric:tabular-nums; }
.pf-table th,.pf-table td { padding:.7rem .6rem; text-align:right; border-bottom:1px solid var(--color-line); }
.pf-table tr > :first-child { text-align:left; }
.pf-table td { white-space:nowrap; }
.pf-table th { font-weight:600; }
.pf-table tfoot td { font-weight:700; }
.pf-table tbody th { min-width:10rem; max-width:20rem; }
.pf-table tbody th a:hover { color:var(--color-accent); }
.pf-table small { display:block; color:var(--color-ink-2); font-weight:400; font-size:.65rem; margin-top:.25rem; }
.pf-table thead,.pf-table tfoot { background:var(--color-tile); }
.pf-current-col { background:color-mix(in srgb,var(--color-accent) 7%,transparent); font-weight:650; }
.pf-table thead .pf-current-col { background:var(--pf-real); color:#fff; }
.pf-table thead .pf-current-col small { color:#fff; opacity:.7; }
.pf-notice { border-left:3px solid var(--color-warning); padding:.65rem .8rem; background:var(--color-tile); font-size:.76rem; line-height:1.6; margin:.8rem 0; }
.pf-recurring-list details { border-bottom:1px solid var(--color-line); padding:1rem 0; }
.pf-recurring-list summary { display:flex; gap:1rem; align-items:center; justify-content:space-between; cursor:pointer; }
.pf-recurring-list summary small,.pf-recurring-list summary em { display:block; margin-top:.25rem; font-size:.73rem; color:var(--color-ink-2); }
.pf-recurring-list summary em { color:var(--color-warning); font-style:normal; }
.pf-recurring-list summary strong { white-space:nowrap; font-size:.95rem; }
.pf-recurring-list li { font-size:.8rem; display:flex; justify-content:space-between; gap:1rem; padding:.3rem 0; }
.pf-change-group { margin-top:1rem; border-top:1px solid var(--color-line); padding-top:1rem; }
.pf-change-group summary { cursor:pointer; font-size:.85rem; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 0; }
.pf-change-group summary::before { content:"›"; color:var(--color-muted); }
.pf-change-group[open] summary::before { transform:rotate(90deg); }
.pf-change-group summary > span:first-child { flex:1; }
.pf-change-group[open] summary { margin-bottom:16px; }


.pf-effects { display:flex; gap:1rem; flex-wrap:wrap; margin:1rem 0; }
.pf-effects > div { flex:1; min-width:7rem; padding:.8rem; background:var(--color-tile); border-radius:.7rem; }
.pf-effects > div > span:first-child { display:block; font-size:.73rem; color:var(--color-ink-2); margin-bottom:.4rem; }
.pf-family-composition { display:grid; grid-template-columns:auto 1fr; gap:.4rem .7rem; margin:1rem 0; align-items:center; }
.pf-family-composition > span { font-size:.75rem; font-weight:650; }
.pf-family-composition > div { display:flex; height:1.3rem; border-radius:.3rem; overflow:hidden; }
.pf-family-composition a { display:block; min-width:1px; border-right:1px solid var(--color-surface); }
.pf-family-composition small { grid-column:1/-1; color:var(--color-ink-2); font-size:.65rem; }
/* Géométrie et interactions de la maquette Y, avec les tokens de l’application. */
.performance-page:has(> .pf-toolbar) { display:flex; flex-direction:column; min-height:0; }
.pf-toolbar { width:100%; flex:none; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:end; gap:32px; max-width:1482px; margin:0 auto 24px; }
.pf-toolbar .pf-period { margin:0; }
@container performance-page (max-width:950px) { .pf-toolbar { grid-template-columns:minmax(0,1fr); gap:16px; } .pf-toolbar .pf-period { grid-row:1; } }
.pf-layout { --pf-comparison-width:518px; display:grid; grid-template-columns:var(--pf-comparison-width) minmax(0,1fr); justify-content:center; gap:64px; align-items:center; flex:1; width:100%; position:relative; min-height:var(--pf-viewport-height,622px); max-width:calc(var(--pf-comparison-width) + 964px); margin-inline:auto; }
.pf-comparison { position:sticky; top:16px; align-self:start; height:var(--pf-viewport-height,622px); min-height:622px; min-width:0; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1; }
.pf-controls { margin:0; }
.pf-chart { align-self:center; max-width:100%; overflow-x:auto; scrollbar-width:thin; }
.pf-chart > svg { display:block; flex:none; overflow:visible; }
.pf-chart text { font-family:inherit; fill:var(--color-ink-2); font-variant-numeric:tabular-nums; }
.pf-chart .pf-positive { fill:var(--color-success); }
.pf-chart .pf-negative { fill:var(--color-danger); }
.pf-chart .pf-current-label { fill:#fff; }
.pf-chart .pf-svg-total { font-weight:700; fill:var(--color-ink); }
.pf-chart .pf-svg-future { fill:var(--color-accent); font-weight:700; }
.pf-chart [data-source] { cursor:pointer; transition:opacity .22s,filter .22s; outline-offset:3px; }
.pf-chart [data-source]:focus-visible { outline:2px solid var(--color-accent); }
.pf-layout.is-selected .pf-chart [data-source]:not(.is-active),.pf-layout.is-hovering .pf-chart [data-source]:not(.is-hot) { opacity:.24; }
.pf-chart [data-source].is-hot { filter:brightness(1.1); }
.pf-chart-hint { margin-top:18px; color:var(--color-muted); font-size:12px; text-align:center; }
.pf-card { min-width:0; width:100%; max-width:900px; margin-inline:auto; background:var(--color-surface); border-radius:22px; padding:30px 34px 32px; box-shadow:0 0 0 1px var(--color-line),0 1px 2px #1d15310a,0 10px 30px -12px #1d153129; position:relative; z-index:1; container-type:inline-size; }
.pf-card.is-detail { max-width:none; }
.pf-card h2 { max-width:34ch; font-size:30px; line-height:1.24; font-weight:600; letter-spacing:-.02em; margin:0; text-wrap:balance; }
.pf-card h2 b { font-weight:800; white-space:nowrap; }
.pf-card.is-detail h2 { font-size:26px; font-weight:700; }
.pf-heading { margin-bottom:28px; }
.pf-lead { font-size:15.5px; line-height:1.55; color:var(--color-ink-2); margin:14px 0 28px; max-width:64ch; text-wrap:pretty; }
.pf-heading .pf-lead { margin-bottom:0; }
.pf-caption { font-size:12.5px; line-height:1.6; color:var(--color-muted); margin:14px 0 20px; }
.pf-caption a,.pf-link { color:var(--color-accent); font-weight:650; }
.pf-link { display:inline-block; margin-top:16px; font-size:13px; }
.pf-positive { color:var(--color-success) !important; }
.pf-negative { color:var(--color-danger) !important; }
.pf-equation { display:grid; }
.pf-part { display:grid; grid-template-columns:18px 14px minmax(0,1fr) auto minmax(120px,auto) 14px; gap:14px; align-items:center; width:100%; padding:15px 14px; border:0; border-bottom:1px solid var(--color-line); background:none; color:inherit; text-align:left; cursor:pointer; transition:background .15s; }
.pf-part:hover,.pf-part.is-hot { border-radius:12px; background:var(--color-tile); }
.pf-part > em { color:var(--color-muted); font-size:18px; font-style:normal; font-weight:600; text-align:center; }
.pf-part-text { display:grid; gap:2px; min-width:0; }
.pf-part-text b { font-size:15px; font-weight:700; }
.pf-part-text small { color:var(--color-muted); font-size:12.5px; line-height:1.5; }
.pf-part-amount { font-size:18px; font-weight:800; text-align:right; white-space:nowrap; }
.pf-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
.pf-badge-fact { background:var(--color-tile); color:var(--color-ink); }
.pf-badge-sign,.pf-badge-rec { background:color-mix(in srgb,var(--color-accent) 9%,transparent); color:var(--color-accent); }
.pf-badge-trend { background:color-mix(in srgb,var(--color-warning) 12%,transparent); color:var(--color-warning); }
.pf-badge-up { background:color-mix(in srgb,var(--color-success) 10%,transparent); color:var(--color-success); }
.pf-badge-down { background:color-mix(in srgb,var(--color-danger) 10%,transparent); color:var(--color-danger); }
.pf-go { color:var(--color-muted); font-size:12px; }
.pf-dot { display:inline-block; width:14px; height:14px; flex:none; border-radius:4px; }
.pf-fact { background:var(--pf-real); }
.pf-sign { background:var(--color-accent); }
.pf-rec { background:color-mix(in srgb,var(--color-accent) 65%,var(--color-surface)); }
.pf-trend { background:repeating-linear-gradient(45deg,var(--color-accent),var(--color-accent) 1px,transparent 1px,transparent 4px); border:1px solid var(--color-accent); }
.pf-end { box-shadow:inset 0 0 0 2px var(--pf-real); }
.pf-total { border-top:2px solid var(--color-ink); border-bottom:0; margin-top:2px; }
.pf-total .pf-part-amount { font-size:24px; letter-spacing:-.02em; }
.pf-eyebrow { display:flex; align-items:center; gap:8px; color:var(--color-muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; }
.pf-questions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:34px; }
.pf-questions h3 { grid-column:1/-1; text-transform:uppercase; letter-spacing:.06em; font-size:12px; font-weight:700; color:var(--color-muted); margin-bottom:0; }
.pf-questions h3 small { text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:500; margin-left:8px; }
.pf-questions button { display:flex; flex-direction:column; gap:10px; border:1px solid var(--color-line); border-radius:16px; padding:16px 18px 14px; text-align:left; cursor:pointer; min-width:0; background:var(--color-surface); transition:border-color .15s,box-shadow .15s,transform .15s; }
.pf-questions button:hover,.pf-questions button:focus-visible { border-color:var(--color-accent); box-shadow:0 12px 28px color-mix(in srgb,var(--color-accent) 14%,transparent); transform:translateY(-2px); outline:none; }
.pf-q-title { display:flex; align-items:center; gap:10px; }
.pf-q-title > i { display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:9px; background:color-mix(in srgb,var(--color-accent) 8%,transparent); color:var(--color-accent); font-size:13px; }
.pf-q-title b { font-size:15px; font-weight:700; line-height:1.25; }
.pf-questions button > small { display:block; color:var(--color-muted); font-size:13px; line-height:1.45; }
.pf-preview { display:grid; gap:8px; padding:10px 12px; border-radius:10px; background:var(--color-tile); width:100%; }
.pf-preview-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; align-items:center; font-size:12.5px; }
.pf-preview-row > span { grid-column:1/-1; color:var(--color-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-preview-row > i { height:5px; border-radius:3px; background:var(--color-line); overflow:hidden; }
.pf-preview-row > i > i { display:block; height:100%; background:var(--color-accent); border-radius:3px; }
.pf-preview-row strong { font-weight:700; white-space:nowrap; }
.pf-questions em { display:flex; align-items:center; gap:8px; margin-top:auto; font-size:13px; font-style:normal; color:var(--color-accent); font-weight:700; }
.pf-questions em i { transition:transform .15s; }
.pf-questions button:hover em i { transform:translateX(4px); }
.pf-bars { padding:16px 16px 12px; border-radius:18px; background:var(--color-tile); margin:26px 0 0; }
.pf-bars svg { width:100%; height:auto; display:block; overflow:visible; }
.pf-bars text { font-family:inherit; fill:var(--color-muted); }
.pf-legend { display:flex; flex-wrap:wrap; gap:16px; color:var(--color-muted); font-size:12px; margin-top:12px; }
.pf-legend span { display:inline-flex; align-items:center; gap:6px; }
.pf-legend i { width:10px; height:10px; border-radius:3px; }
.pf-wires { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:0; }
.pf-wires g { transition:opacity .2s; }
.pf-wires path { fill:none; stroke:var(--color-accent); stroke-width:1.5; opacity:.36; }
.pf-wires circle { fill:var(--color-surface); stroke:var(--color-accent); stroke-width:1.3; }
.pf-wires .is-hot path,.pf-layout.is-selected .pf-wires path { opacity:.85; stroke-width:2; }
.pf-layout.is-hovering .pf-wires g:not(.is-hot) { opacity:.16; }
.pf-tooltip { position:fixed; z-index:1100; pointer-events:none; min-width:190px; max-width:300px; padding:12px 14px; background:var(--pf-real); color:white; border-radius:12px; font-size:12px; line-height:1.65; box-shadow:0 8px 30px #20173330; white-space:pre-line; }
.pf-step-nav { display:flex; justify-content:space-between; gap:16px; margin-top:30px; padding-top:20px; border-top:1px solid var(--color-line); }
.pf-step-nav button { cursor:pointer; font-size:13px; padding:10px 4px; color:var(--color-muted); }
.pf-step-nav button:last-child { padding:12px 20px; border-radius:12px; background:var(--pf-real); color:white; box-shadow:0 8px 20px #20173325; transition:transform .15s; }
.pf-step-nav button:last-child:hover { transform:translateX(2px); }
@keyframes pf-next { from { opacity:0; transform:translateX(28px); } }
@keyframes pf-prev { from { opacity:0; transform:translateX(-28px); } }
@keyframes pf-up { from { opacity:0; transform:translateY(14px); } }
.pf-in-next > * { animation:pf-next .4s cubic-bezier(.2,.8,.2,1) both; }
.pf-in-prev > * { animation:pf-prev .4s cubic-bezier(.2,.8,.2,1) both; }
.pf-in-up > * { animation:pf-up .32s cubic-bezier(.2,.8,.2,1) both; }
[data-pf-panel] > :nth-child(2) { animation-delay:.05s; }
[data-pf-panel] > :nth-child(3) { animation-delay:.1s; }
[data-pf-panel] > :nth-child(4) { animation-delay:.15s; }
[data-pf-panel] > :nth-child(5) { animation-delay:.2s; }
@container (max-width:680px) {
 .pf-part { grid-template-columns:18px 14px minmax(0,1fr) auto 14px; grid-template-rows:auto auto; row-gap:5px; }
 .pf-part > em { grid-area:1/1/3/2; }
 .pf-part > .pf-dot { grid-area:1/2/3/3; }
 .pf-part-text { grid-area:1/3/3/4; }
 .pf-part-amount { grid-area:1/4/2/5; justify-self:end; }
 .pf-part > .pf-badge { grid-area:2/4/3/5; justify-self:end; }
 .pf-part > .pf-go { grid-area:1/5/3/6; }
}
@media(max-width:1500px) { .pf-card { padding:24px 24px 26px; } .pf-card h2 { font-size:27px; } }
@media(max-width:1100px) { .pf-layout,.pf-layout[data-years] { grid-template-columns:minmax(290px,var(--pf-comparison-width)) minmax(0,1fr); gap:32px; } .pf-comparison { padding:0; } .pf-questions { grid-template-columns:1fr; } }
@container performance-page (max-width:950px) { .pf-layout,.pf-layout[data-years] { grid-template-columns:minmax(0,1fr); gap:24px; min-height:0; } .pf-comparison { position:static; height:auto; min-height:0; padding:0; } .pf-card { padding:20px 16px; } .pf-card h2 { font-size:25px; } .pf-wires { display:none; } .pf-year { margin-left:0; } .pf-months { width:100%; max-width:100%; flex:none; order:3; } .pf-period { gap:8px; } .pf-part { padding:14px 0; column-gap:8px; } .pf-part-text b { font-size:13px; } .pf-part-text small { font-size:11px; } .pf-part-amount { font-size:15px; } .pf-total .pf-part-amount { font-size:18px; } .pf-badge { font-size:11px; padding:3px 7px; } }
@media(prefers-reduced-motion:reduce) { .performance-page *, .performance-page *::before, .performance-page *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
.pf-table-tools { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0 0 16px; }
.pf-search { min-height:40px; display:flex; align-items:center; gap:8px; flex:1; min-width:150px; border:1px solid var(--color-line); border-radius:10px; padding:8px 12px; font-size:13px; color:var(--color-muted); }
.pf-search input { width:100%; min-width:0; background:none; color:var(--color-ink); outline:none; }
.pf-table-tools select { min-height:40px; border:1px solid var(--color-line); border-radius:10px; padding:8px 12px; font-size:13px; background:var(--color-surface); }
.pf-comparison-table { font-size:12.5px; }
.pf-comparison-table th,.pf-comparison-table td { padding:9px 10px; }
.pf-comparison-table thead { background:none; }
.pf-comparison-table .pf-current-col { background:var(--pf-real); color:white; }
.pf-comparison-table .pf-current-col small { color:#ffffffb3; }
.pf-comparison-table .pf-previous-col { background:var(--pf-old); }
.pf-comparison-table thead .pf-current-col,.pf-comparison-table thead .pf-previous-col { border-radius:10px 10px 0 0; }
.pf-comparison-table tfoot .pf-current-col,.pf-comparison-table tfoot .pf-previous-col { border-radius:0 0 10px 10px; }
.pf-comparison-table th button { cursor:pointer; text-align:inherit; }
.pf-comparison-table thead th[aria-sort=ascending] button,.pf-comparison-table thead th[aria-sort=descending] button { text-decoration:underline; text-underline-offset:4px; }
.pf-comparison-table tbody tr:hover > :not(.pf-current-col):not(.pf-previous-col) { background:var(--color-tile); }
.pf-row-link { display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:13px; max-width:100%; white-space:normal; }
.pf-row-link:hover { color:var(--color-accent); }
.pf-row-link > i { display:inline-block; width:9px; height:9px; flex:none; border-radius:3px; }
.pf-pagination { display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:14px; color:var(--color-muted); font-size:12px; }
.pf-pagination button { border:1px solid var(--color-line); border-radius:8px; padding:5px 10px; cursor:pointer; }
.pf-pagination button:disabled { opacity:.3; cursor:default; }
[data-mode=amounts] .pf-delta-mode,[data-mode=deltas] .pf-amount-mode { display:none; }
.pf-dialog { position:fixed; inset:0 0 0 auto; width:min(780px,100%); max-width:100%; max-height:100dvh; height:100dvh; margin:0; padding:38px 32px; border:0; background:var(--color-surface); color:var(--color-ink); box-shadow:-10px 0 50px #20173320; overflow:auto; }
.pf-dialog[open] { animation:pf-next .3s cubic-bezier(.2,.8,.2,1); }
.pf-dialog::backdrop { background:#20173355; backdrop-filter:blur(3px); }
.pf-dialog-close { position:sticky; display:block; top:0; margin-left:auto; width:34px; height:34px; background:var(--color-tile); border-radius:50%; font-size:24px; cursor:pointer; }
.pf-dialog h2 { font-size:27px; font-weight:700; letter-spacing:-.02em; }
.pf-dialog h3 { font-size:15px; font-weight:700; margin:28px 0 12px; }
.pf-detail-stats { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0; }
.pf-detail-stats > div { flex:1; min-width:150px; padding:16px; border-radius:12px; background:var(--color-tile); }
.pf-detail-stats span { display:block; color:var(--color-muted); font-size:12px; margin-bottom:7px; }
.pf-detail-stats b { font-size:22px; font-weight:750; }
.pf-matrix .pf-table { font-size:12.5px; }
.pf-matrix .pf-table th,.pf-matrix .pf-table td { padding:9px 10px; }
.pf-matrix .pf-table tbody th { min-width:170px; max-width:210px; }
.pf-matrix .pf-table small { white-space:nowrap; font-size:10px; }
.pf-family-label { display:inline-flex; align-items:center; gap:8px; text-align:left; }
.pf-family-label > i { width:9px; height:9px; border-radius:3px; flex:none; }
.pf-family-label > span { min-width:0; }

.pf-card h2:focus { outline:none; }
.pf-projected-chart { padding:16px; background:var(--color-tile); border-radius:18px; margin:24px 0; }
.pf-projected-chart svg { width:100%; height:auto; display:block; }
.pf-customer-mix { display:flex; height:5px; width:120px; margin-top:7px; overflow:hidden; border-radius:3px; background:var(--color-line); }
.pf-customer-mix i { display:block; height:100%; }
.pf-status { display:inline-block; padding:3px 7px; border-radius:999px; font-size:10px; font-weight:650; }
.pf-status-new,.pf-status-up { color:var(--color-success); background:color-mix(in srgb,var(--color-success) 10%,transparent); }
.pf-status-down,.pf-status-lost { color:var(--color-danger); background:color-mix(in srgb,var(--color-danger) 10%,transparent); }

.pf-bars,.pf-projected-chart { overflow-x:auto; }
.pf-bars[data-source-kind] svg { min-width:350px; }
.pf-bars:not([data-source-kind]) svg { min-width:540px; }
.pf-projected-chart svg { min-width:450px; }

.pf-detail-heading { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.pf-detail-heading > div { min-width:0; }
.pf-detail-heading h2 { font-size:25px; font-weight:700; text-wrap:pretty; }
.pf-detail-heading .pf-caption { font-size:14px; margin:6px 0 0; color:var(--color-ink-2); }
.pf-detail-heading .pf-back { cursor:pointer; }
.pf-detail-amount { font-size:36px; font-weight:800; letter-spacing:-.025em; line-height:1.2; margin:0 0 12px; }
@media(max-width:767px) { .pf-detail-heading { gap:12px; } .pf-detail-heading h2 { font-size:21px; } .pf-detail-amount { font-size:30px; } }

.pf-heading-copy { flex:1; }
.pf-heading-total { flex:none; padding-left:20px; border-left:1px solid var(--color-line); text-align:right; }
.pf-heading-total span { display:block; color:var(--color-ink-2); font-size:12px; font-weight:500; margin-bottom:5px; }
.pf-heading-total strong { display:block; white-space:nowrap; font-size:23px; line-height:1.2; font-weight:750; letter-spacing:-.02em; }
@container (max-width:620px) {
    .pf-detail-heading:has(.pf-heading-total) { display:grid; grid-template-columns:auto minmax(0,1fr); }
    .pf-heading-total { grid-column:2; text-align:left; border:0; padding:0; }
}

.pf-table-tools + .pf-table-scroll { margin-top:0; }

/* Écarts des tableaux et aperçus CA / marge : signe + montant + repère commun. */
.pf-neutral { color:var(--color-muted); }
.pf-variance { display:grid; grid-template-columns:minmax(72px,1fr) 40px; align-items:center; gap:10px; font-variant-numeric:tabular-nums; }
.pf-variance-copy { display:grid; gap:4px; text-align:right; white-space:nowrap; }
.pf-variance-value { font-weight:600; }
.pf-variance-copy small { margin:0; font-size:10px; color:var(--color-muted); }
.pf-variance-bar { display:block; position:relative; width:40px; height:9px; }
.pf-variance-bar::after { content:''; position:absolute; left:50%; top:-3px; height:15px; border-left:1px solid var(--color-line); }
.pf-variance-bar i { position:absolute; height:9px; border-radius:2px; background:currentColor; }
.pf-preview-change { display:grid; gap:5px; font-size:12.5px; }
.pf-preview-change .pf-family-label { color:var(--color-ink-2); }

.pf-table th.pf-variance-heading { padding-right:60px; }

/* Lecture d'un détail : la frise glisse à gauche et n'en laisse qu'un liseré, la carte prend la place ; revenir à la vue d'ensemble la rappelle. */
@container performance-page (min-width:951px) {
    .pf-layout.is-ready { transition:grid-template-columns .6s cubic-bezier(.2,.8,.2,1),gap .6s cubic-bezier(.2,.8,.2,1); }
    .pf-layout.is-ready .pf-chart { transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s; }
    .pf-layout.is-ready .pf-card { transition:max-width .6s cubic-bezier(.2,.8,.2,1); }
    .pf-layout.is-ready .pf-chart text { transition:opacity .25s; }
    .pf-layout.is-selected,.pf-layout.is-selected[data-years] { --pf-peek:40px; grid-template-columns:var(--pf-peek) minmax(0,1fr); gap:28px; }
    .pf-layout.is-selected .pf-comparison { overflow-x:clip; cursor:pointer; }
    .pf-layout.is-selected .pf-chart { flex:none; max-width:none; overflow:visible; transform:translateX(calc((var(--pf-peek) - 100%) / 2)); opacity:.45; pointer-events:none; }
    .pf-layout.is-selected .pf-comparison:hover .pf-chart { opacity:.8; }
    .pf-layout.is-selected .pf-chart text { opacity:0; }
    .pf-layout.is-selected .pf-card { max-width:100%; }
}

/* Tableaux de répartition sur une ligne (écart et taux côte à côte) ; sur un écran peu haut, en-têtes resserrés pour laisser voir les lignes. */
.pf-card { scroll-margin-top:16px; }
.pf-comparison-table .pf-variance { grid-template-columns:auto 40px; justify-content:end; }
.pf-comparison-table .pf-variance-copy { display:flex; align-items:baseline; justify-content:flex-end; gap:8px; }
.pf-comparison-table .pf-variance-copy small { min-width:4.2em; }
@media (max-height:900px) {
    .pf-card.is-detail { padding-top:20px; }
    .pf-detail-heading { gap:12px; margin-bottom:14px; }
    .pf-detail-heading .pf-back { width:2.5rem; height:2.5rem; border-radius:.75rem; font-size:1rem; }
    .pf-detail-heading h2 { font-size:21px; }
    .pf-detail-heading .pf-caption { font-size:13px; margin-top:2px; }
    .pf-heading-total strong { font-size:20px; }
    .pf-table-tools { margin-bottom:10px; }
    .pf-table-tools .pf-search,.pf-table-tools select { min-height:34px; padding-block:5px; }
}
@container (max-width:1000px) {
    .pf-comparison-table .pf-variance { grid-template-columns:auto; }
    .pf-comparison-table .pf-variance-bar { display:none; }
    .pf-comparison-table th,.pf-comparison-table td,.pf-matrix .pf-table th,.pf-matrix .pf-table td { padding-inline:7px; }
    .pf-comparison-table th.pf-variance-heading { padding-right:7px; }
}