/* Composition facturation : drilldown-story — Pilotage › Chiffre d'affaires et Marge
   (Cockpit/Drilldown/revenue, margin). Même grammaire que le récit Évolution, dont elles
   réutilisent les primitives .evo-hero / .evo-chapter / .evo-card / .evo-facts ; ce fichier
   n'ajoute que les briques propres : pont N-1 → N, répartitions, cascade de marge, familles.
   Violet : marge et période ; vert : ce qui ajoute ; rouge : ce qui retire. Classes .story-*. */
@layer components {

body :is(.story-share, .story-family, .story-people, .story-podium) { font-variant-numeric: tabular-nums; }
body .story-dot { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--color-muted)); }
body .story-tag { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: var(--color-warning-soft); color: var(--color-warning); font-size: 11px; font-weight: 700; }
body .story-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
body .evo-chapter__note i.is-up { color: var(--color-success); }
body .story-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; }
body .story-sentence { margin: 0 0 16px; color: color-mix(in srgb, var(--color-ink) 78%, transparent); font-size: 15px; font-weight: 500; line-height: 1.5; }
body .story-sentence strong { color: var(--color-ink); font-weight: 800; }
body .story-sentence .is-up { color: var(--color-success); }
body .story-sentence .is-down { color: var(--color-danger); }
body .story-foot { margin: 12px 0 0; color: var(--color-muted); font-size: 12px; font-weight: 500; }
body .story-swatch--previous { background: rgba(139, 138, 147, .35); }

/* ---------- Mise en page des chapitres : graphique, tuiles, côte à côte ---------- */
body .story-chapter-bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
body .story-chapter-bar > .evo-chapter__head { margin-bottom: 0; }
body .story-chapter-bar > .tabs { margin: 2px 4px 0 auto; }
body .story-chart-card { padding: 18px 18px 8px; }
body .evo-health__tile.is-red { --c: var(--color-danger); }
body .evo-health__value.is-up { color: var(--color-success); }
body .evo-health__value.is-down { color: var(--color-danger); }

/* ② Les « personnages » du pont : une tuile par groupe de clients, avec leurs noms */
body .story-actors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@media (max-width: 1299.98px) { body .story-actors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body .story-actor { padding-bottom: 12px; }
body .story-actor__who { display: flex; flex-direction: column; gap: 5px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px dashed color-mix(in srgb, var(--color-ink) 10%, transparent); list-style: none; }
body .story-actor__who li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
body .story-actor__who :is(a, span) { display: -webkit-box; overflow: hidden; color: color-mix(in srgb, var(--color-ink) 78%, transparent); text-decoration: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
body .story-actor__who a:hover { color: var(--color-primary-500); }
body .story-actor__who b { flex: 0 0 auto; color: var(--c); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ③ Treemap + tuiles « ce qui bouge » */
body .story-split { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(220px, 1fr); gap: 12px; align-items: stretch; }
body .story-split__side { display: flex; flex-direction: column; gap: 12px; }
body .story-split__side > .evo-health__tile { flex: 1 1 0; padding-bottom: 18px; }
body .story-scale { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 6px; color: var(--color-muted); font-size: 11.5px; font-weight: 600; }
body .story-scale span { display: inline-flex; align-items: center; gap: 6px; }
body .story-scale i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; background: var(--dot); }
body .story-details { margin-top: 12px; }
body .story-details__body { padding: 4px 22px 14px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 7%, transparent); }

/* ④ La dépendance en une barre, puis le podium */
body .story-stack { display: flex; gap: 3px; height: 34px; overflow: hidden; border-radius: 10px; }
body .story-stack > span { min-width: 4px; }
body .story-stack .is-first { background: var(--color-primary-500); }
body .story-stack .is-next { background: color-mix(in srgb, var(--color-primary-500) 45%, var(--color-surface)); }
body .story-stack .is-rest { background: color-mix(in srgb, var(--color-ink) 12%, transparent); }
body .story-stack__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; color: color-mix(in srgb, var(--color-ink) 75%, transparent); font-size: 12.5px; font-weight: 700; }
body .story-stack__legend span { display: inline-flex; align-items: center; gap: 8px; }
body .story-stack__legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
body .story-stack__legend i.is-first { background: var(--color-primary-500); }
body .story-stack__legend i.is-next { background: color-mix(in srgb, var(--color-primary-500) 45%, var(--color-surface)); }
body .story-stack__legend i.is-rest { background: color-mix(in srgb, var(--color-ink) 12%, transparent); }
body .story-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
body .story-podium__card { --c: var(--color-primary-500); position: relative; display: flex; flex-direction: column; gap: 4px; overflow: hidden; padding: 18px 20px; }
body .story-podium__card::after { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--c); }
body .story-podium__card.is-rank-2 { --c: color-mix(in srgb, var(--color-primary-500) 60%, var(--color-surface)); }
body .story-podium__card.is-rank-3 { --c: color-mix(in srgb, var(--color-primary-500) 35%, var(--color-surface)); }
body .story-podium__rank { position: absolute; top: 6px; right: 14px; color: color-mix(in srgb, var(--color-ink) 8%, transparent); font-size: 56px; font-weight: 900; line-height: 1; }
body .story-podium__name { position: relative; overflow: hidden; padding-right: 40px; color: var(--color-ink); font-size: 14px; font-weight: 800; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
body .story-podium__name:hover { color: var(--color-primary-500); }
body .story-podium__value { position: relative; color: var(--color-ink); font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body .story-podium__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--color-muted); font-size: 12.5px; font-weight: 700; }
body .story-podium__since { color: var(--color-muted); font-size: 12px; font-weight: 500; }

/* Pastille d'évolution face à N-1 */
body .story-trend { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
body .story-trend.is-up { background: var(--color-success-soft); color: var(--color-success); }
body .story-trend.is-down { background: var(--color-danger-soft); color: var(--color-danger); }
body .story-trend.is-flat { background: var(--color-tile); color: var(--color-muted); }
body .story-trend.is-new { background: var(--color-info-soft); color: var(--color-info); }

/* ---------- Répartition : nom, barre de part, montant, %, évolution ---------- */
body .story-share { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
body .story-share__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(80px, 1fr) 76px 52px 74px; align-items: center; gap: 14px; padding: 9px 2px; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 6%, transparent); }
body .story-share__row:last-child { border-bottom: 0; }
body .story-share__row.is-muted { color: var(--color-muted); }
body .story-share__name { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--color-ink); font-size: 13.5px; font-weight: 700; }
body .story-share__name > :is(a, span:not(.story-dot, .story-tag, .story-share__rank)) { overflow: hidden; color: inherit; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
body .story-share__name > a:hover { color: var(--color-primary-500); }
body .story-share__row.is-muted .story-share__name { color: var(--color-muted); font-weight: 600; }
body .story-share__rank { flex: 0 0 auto; width: 18px; color: var(--color-muted); font-size: 12px; font-weight: 700; text-align: right; }
body .story-share__bar { height: 8px; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--color-ink) 6%, transparent); }
body .story-share__bar > span { display: block; height: 100%; min-width: 2px; border-radius: 4px; background: var(--color-primary-500); }
body .story-share__row.is-muted .story-share__bar > span { background: color-mix(in srgb, var(--color-ink) 22%, transparent); }
body .story-share__value { color: var(--color-ink); font-size: 13.5px; font-weight: 800; text-align: right; white-space: nowrap; }
body .story-share__pct { color: var(--color-muted); font-size: 12.5px; font-weight: 700; text-align: right; }
body .story-share__trend { text-align: right; }

body .story-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--color-tile); color: color-mix(in srgb, var(--color-ink) 75%, transparent); font-size: 11.5px; font-weight: 700; }
body .story-config { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--color-tile); color: var(--color-muted); font-size: 11.5px; font-weight: 700; text-decoration: none; cursor: pointer; }
body .story-config:hover { color: var(--color-primary-500); }

/* ---------- Marge : familles — part du CA face à part de la marge ---------- */
body .story-family { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
body .story-family__head, body .story-family__row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(140px, 1.4fr) 70px 84px 74px; align-items: center; gap: 14px; }
body .story-family__head { padding: 0 10px 8px; color: var(--color-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body .story-family__head > :nth-child(n+3) { text-align: right; }
body .story-family__row { padding: 10px; border-radius: 12px; color: inherit; text-decoration: none; transition: background .15s; }
body .story-family__row:hover { background: var(--color-tile); }
body .story-family__row.is-muted .story-family__name { color: var(--color-muted); font-weight: 600; }
body .story-family__row.is-active { background: var(--color-accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary-500) 35%, transparent); }
body .story-family__name { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--color-ink); font-size: 13.5px; font-weight: 700; }
body .story-family__name > span:not(.story-dot, .story-tag) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .story-family__bars { display: grid; gap: 4px; }
body .story-family__bar { display: grid; grid-template-columns: 1fr 34px; align-items: center; gap: 8px; color: var(--color-muted); font-size: 11px; font-weight: 700; }
body .story-family__bar > i { display: block; height: 7px; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--color-ink) 6%, transparent); }
body .story-family__bar > i > span { display: block; height: 100%; min-width: 2px; border-radius: 4px; background: color-mix(in srgb, var(--color-ink) 25%, transparent); }
body .story-family__bar.is-margin { color: var(--color-primary-500); }
body .story-family__bar.is-margin > i > span { background: var(--color-primary-500); }
body .story-family__bar > b { text-align: right; font-weight: 800; }
body .story-family__rate { justify-self: end; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
body .story-family__rate.is-high { background: var(--color-success-soft); color: var(--color-success); }
body .story-family__rate.is-mid { background: var(--color-tile); color: color-mix(in srgb, var(--color-ink) 70%, transparent); }
body .story-family__rate.is-low { background: var(--color-warning-soft); color: var(--color-warning); }
body .story-family__rate.is-loss { background: var(--color-danger-soft); color: var(--color-danger); }
body .story-family__value { color: var(--color-ink); font-size: 13.5px; font-weight: 800; text-align: right; white-space: nowrap; }
body .story-family__trend { text-align: right; }
body .story-legend-bars { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; color: var(--color-muted); font-size: 12px; font-weight: 600; }
body .story-legend-bars span { display: inline-flex; align-items: center; gap: 7px; }
body .story-legend-bars i { display: inline-block; width: 18px; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--color-ink) 25%, transparent); }
body .story-legend-bars i.is-margin { background: var(--color-primary-500); }

/* ---------- Marge : clients — trois colonnes de lecture ---------- */
/* Filtre famille au-dessus des clients : des pastilles, la famille active en plein */
body .story-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 4px 14px; }
body .story-chips__item { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--color-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 10%, transparent); color: color-mix(in srgb, var(--color-ink) 80%, transparent); font-size: 12.5px; font-weight: 700; text-decoration: none; transition: background .15s, color .15s; }
body .story-chips__item:hover { color: var(--color-primary-500); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary-500) 40%, transparent); }
body .story-chips__item.is-active { background: var(--color-night); box-shadow: none; color: var(--color-on-night); }


body .story-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1199.98px) { body .story-people { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
body .story-people__col { --c: var(--color-success); display: flex; flex-direction: column; padding: 16px 16px 8px; }
body .story-people__col.is-amber { --c: var(--color-warning-solid); }
body .story-people__col.is-red { --c: var(--color-danger); }
body .story-people__head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
body .story-people__icon { display: grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--c) 13%, var(--color-surface)); color: var(--c); font-size: 12px; }
body .story-people__title { color: var(--color-ink); font-size: 13.5px; font-weight: 800; }
body .story-people__hint { color: var(--color-muted); font-size: 11.5px; font-weight: 500; line-height: 1.3; }
body .story-people__list { margin: 0; padding: 0; list-style: none; }
body .story-people__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 6%, transparent); }
body .story-people__item:last-child { border-bottom: 0; }
body .story-people__name { overflow: hidden; color: var(--color-ink); font-size: 13px; font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
body a.story-people__name:hover { color: var(--color-primary-500); }
body .story-people__value { color: var(--c); font-size: 13.5px; font-weight: 800; text-align: right; white-space: nowrap; }
body .story-people__sub { grid-column: 1 / -1; color: var(--color-muted); font-size: 11.5px; font-weight: 600; }
body .story-people__empty { padding: 12px 0; color: var(--color-muted); font-size: 12.5px; font-weight: 500; }

/* Fiche client dépliée dans le chapitre (clic sur un nom) */
body .story-focus { margin-bottom: 12px; }
body .story-focus__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; }
body .story-focus__name { color: var(--color-ink); font-size: 17px; font-weight: 800; }
body .story-focus__figures { color: color-mix(in srgb, var(--color-ink) 70%, transparent); font-size: 13px; font-weight: 600; }
body .story-focus__figures strong { color: var(--color-ink); font-weight: 800; }
body .story-focus__close { margin-left: auto; }

/* Pièces à perte */
body .story-losses { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
body .story-losses__item { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 9px 2px; border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 6%, transparent); font-size: 13px; }
body .story-losses__item:last-child { border-bottom: 0; }
body .story-losses__id { color: var(--color-ink); font-weight: 800; text-decoration: none; }
body .story-losses__id:hover { color: var(--color-primary-500); }
body .story-losses__who { overflow: hidden; color: var(--color-muted); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
body .story-losses__value { color: var(--color-danger); font-weight: 800; white-space: nowrap; }

@media (max-width: 991.98px) {
    body .story-split { grid-template-columns: 1fr; }
    body .story-split__side { flex-direction: row; flex-wrap: wrap; }
    body .story-split__side > .evo-health__tile { flex: 1 1 220px; }
}
@media (max-width: 767.98px) {
    body .story-podium { grid-template-columns: 1fr; }
    body .story-share__row { grid-template-columns: minmax(0, 1fr) 70px 64px; }
    body :is(.story-share__bar, .story-share__pct) { display: none; }
    body :is(.story-family__head, .story-family__row) { grid-template-columns: minmax(0, 1fr) 64px 76px; }
    body :is(.story-family__bars, .story-family__trend, .story-family__head > :nth-child(2), .story-family__head > :nth-child(5)) { display: none; }
    body .story-losses__item { grid-template-columns: minmax(0, 1fr) auto; }
    body .story-losses__who { grid-column: 1 / -1; grid-row: 2; }
}
}