/* Composition facturation : evolution-page — Pilotage › Évolution (Cockpit/Drilldown/evolution).
   La page se lit comme un récit : un en-tête (profondeur d'historique), une phrase, puis des
   chapitres numérotés posés chacun comme une question. Cartes au gabarit de la fiche affaire.
   Violet : marge ; vert : progression ; rouge : recul. Classes .evo-* uniquement. */
@layer components {

body .evo-card {
    padding: 20px 22px;
    border: 1px solid color-mix(in srgb, var(--color-ink) 9%, transparent);
    border-radius: 16px;
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(29, 21, 49, .04), 0 8px 24px -12px rgba(29, 21, 49, .12);
}
body :is(.evo-hero, .evo-health__value, .evo-year__figures dd, .evo-year__swing-value) { font-variant-numeric: tabular-nums; }
body .is-up { color: var(--color-success); }
body .is-down { color: var(--color-danger); }

/* ---------- ⓪ Profondeur d'historique : segmenté, à côté du retour ---------- */
body .evo-depth { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--color-tile); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 7%, transparent); }
body .evo-depth__label { display: inline-flex; align-items: center; gap: 7px; padding: 0 10px 0 8px; color: var(--color-muted); font-size: 12px; font-weight: 700; }
body .evo-depth__label i { color: var(--color-primary-500); }
body .evo-depth__item { padding: 6px 13px; border-radius: 999px; color: var(--color-ink); font-size: 12.5px; font-weight: 700; white-space: nowrap; text-decoration: none; transition: background .15s, color .15s; }
body .evo-depth__item:hover { background: color-mix(in srgb, var(--color-primary-500) 10%, transparent); color: var(--color-primary-500); }
body .evo-depth__item.is-active { background: var(--color-night); color: var(--color-on-night); }

/* ---------- ① Le récit ---------- */
body .evo-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 34px;
    padding: 30px 32px 28px;
    border-radius: 20px;
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--color-primary-500) 16%, transparent) 0%, transparent 55%),
        var(--color-surface);
    box-shadow: 0 1px 2px rgba(29, 21, 49, .04), 0 8px 24px -12px rgba(29, 21, 49, .12);
    border: 1px solid color-mix(in srgb, var(--color-ink) 9%, transparent);
}
body .evo-hero__eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--color-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
body .evo-hero__eyebrow i { color: var(--color-primary-500); font-size: 14px; }
body .evo-hero__title { max-width: 860px; margin: 0 0 10px; color: var(--color-ink); font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.22; }
body .evo-hero__title em { color: var(--color-primary-500); font-style: normal; white-space: nowrap; }
body .evo-hero__title em.is-up { color: var(--color-success); }
body .evo-hero__title em.is-down { color: var(--color-danger); }
body .evo-hero__lead { max-width: 820px; margin: 0; color: color-mix(in srgb, var(--color-ink) 70%, transparent); font-size: 15px; font-weight: 500; line-height: 1.55; }
body .evo-hero__lead strong { color: var(--color-ink); font-weight: 800; }

body .evo-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 24px; }
body .evo-fact { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 9px; padding: 13px 15px; border-radius: 14px; background: var(--color-tile); }
body .evo-fact__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
body .evo-fact__icon.is-violet { background: var(--color-accent-soft); color: var(--color-primary-500); }
body .evo-fact__icon.is-green { background: color-mix(in srgb, var(--color-success) 14%, var(--color-surface)); color: var(--color-success); }
body .evo-fact__icon.is-red { background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface)); color: var(--color-danger); }
body .evo-fact__label { color: var(--color-muted); font-size: 12px; font-weight: 700; line-height: 1.2; }
body .evo-fact__value { grid-column: 1 / -1; color: var(--color-ink); font-size: 22px; font-weight: 800; line-height: 1; }
body .evo-fact__sub { grid-column: 1 / -1; margin-top: -3px; color: color-mix(in srgb, var(--color-ink) 65%, transparent); font-size: 12.5px; font-weight: 600; }

/* ---------- Chapitres ---------- */
body .evo-chapter { margin-bottom: 34px; }
body .evo-chapter__head { display: flex; align-items: flex-start; gap: 14px; margin: 0 4px 14px; }
body .evo-chapter__num { display: grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; margin-top: 1px; border-radius: 50%; background: var(--color-night); color: var(--color-on-night); font-size: 13px; font-weight: 800; }
body .evo-chapter__title { margin: 0; color: var(--color-ink); font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
body .evo-chapter__sub { margin: 3px 0 0; color: var(--color-muted); font-size: 13px; font-weight: 500; }
body .evo-chapter__note { display: flex; gap: 10px; align-items: baseline; margin: 14px 4px 0; color: color-mix(in srgb, var(--color-ink) 75%, transparent); font-size: 13px; font-weight: 600; }
body .evo-chapter__note i { color: var(--color-warning); }

/* ② Trajectoire : légende en clair au-dessus du graphe */
body .evo-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-bottom: 6px; color: color-mix(in srgb, var(--color-ink) 75%, transparent); font-size: 12.5px; font-weight: 600; }
body .evo-legend > span { display: inline-flex; align-items: center; gap: 8px; }
body .evo-legend__swatch { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
body .evo-legend__swatch.is-gross { background: var(--color-primary-500); }
body .evo-legend__swatch.is-cost { background: color-mix(in srgb, var(--color-primary-500) 22%, transparent); }
body .evo-legend__config { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 11px; border-radius: 999px; background: var(--color-tile); color: var(--color-muted); font-size: 11.5px; font-weight: 700; text-decoration: none; }
body .evo-legend__config:hover { color: var(--color-primary-500); }


/* ③ Cette année : tuiles du chapitre ④ ; en pied, l'exercice face au précédent à même date */
body .evo-health__tile:not(:has(.evo-health__spark)) { padding-bottom: 18px; }
body .evo-health__diff.is-muted { color: var(--color-muted); font-weight: 700; }
body .evo-duel { display: grid; gap: 6px; margin-top: auto; padding-top: 16px; }
body .evo-duel__row { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; color: var(--color-muted); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
body .evo-duel__track { height: 8px; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--color-ink) 6%, transparent); }
body .evo-duel__track > span { display: block; height: 100%; min-width: 3px; border-radius: 4px; background: color-mix(in srgb, var(--color-ink) 22%, transparent); }
body .evo-duel__row.is-now { color: var(--c); }
body .evo-duel__row.is-now .evo-duel__track > span { background: var(--c); }
body .evo-goal { margin-top: auto; padding-top: 16px; }
body .evo-goal__track { display: block; height: 8px; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--color-ink) 6%, transparent); }
body .evo-goal__track > span { display: block; height: 100%; min-width: 3px; border-radius: 4px; background: var(--c); }

/* ④ Santé de la croissance : une tuile par indicateur, courbe en pied */
body .evo-health { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
body .evo-health__tile { --c: var(--color-primary-500); display: flex; flex-direction: column; padding: 18px 18px 6px; overflow: hidden; }
body .evo-health__tile.is-blue { --c: var(--color-info); }
body .evo-health__tile.is-green { --c: var(--color-success); }
body .evo-health__tile.is-amber { --c: var(--color-warning-solid); }
body .evo-health__head { display: flex; gap: 10px; align-items: flex-start; min-height: 50px; margin-bottom: 10px; }
body .evo-health__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 .evo-health__label { color: var(--color-ink); font-size: 13.5px; font-weight: 800; }
body .evo-health__hint { margin-top: 1px; color: var(--color-muted); font-size: 11.5px; font-weight: 500; line-height: 1.3; }
body .evo-health__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: var(--color-ink); font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
body .evo-health__diff { font-size: 13px; font-weight: 800; letter-spacing: 0; }
body .evo-health__since { margin-top: 2px; color: var(--color-muted); font-size: 12px; font-weight: 600; }
body .evo-health__spark { margin: auto -18px 0; padding-top: 10px; }

/* ⑤ Chronique : une carte par exercice, reliées par un fil */
body .evo-chronicle { position: relative; display: flex; flex-direction: column; gap: 12px; padding-left: 30px; }
body .evo-chronicle::before { content: ""; position: absolute; top: 22px; bottom: 22px; left: 9px; border-left: 2px dashed color-mix(in srgb, var(--color-ink) 14%, transparent); }
body .evo-year { --c: color-mix(in srgb, var(--color-ink) 30%, transparent); position: relative; }
body .evo-year.is-up { --c: var(--color-success); }
body .evo-year.is-down { --c: var(--color-danger); }
body .evo-year__dot { position: absolute; top: 24px; left: -27px; width: 14px; height: 14px; border: 3px solid var(--c); border-radius: 50%; background: var(--color-surface); box-shadow: 0 0 0 4px var(--color-surface); }
body .evo-year__card { display: grid; grid-template-columns: minmax(0, 1fr) 170px; align-items: center; gap: 14px 24px; padding: 16px 20px; }
body .evo-year__main { min-width: 0; }
body .evo-year__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
body .evo-year__year { color: var(--color-ink); font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1; text-decoration: none; }
body .evo-year__year:hover { color: var(--color-primary-500); }
body .evo-verdict { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
body .evo-verdict.is-up { background: var(--color-success-soft); color: var(--color-success); }
body .evo-verdict.is-mixed { background: var(--color-warning-soft); color: var(--color-warning); }
body .evo-verdict.is-down { background: var(--color-danger-soft); color: var(--color-danger); }
body .evo-verdict.is-neutral { background: var(--color-tile); color: var(--color-muted); }
body .evo-year__figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 16px; margin: 0; }
body .evo-year__figures dt { overflow: hidden; color: var(--color-muted); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
body .evo-year__figures dd { margin: 2px 0 0; color: var(--color-ink); font-size: 15px; font-weight: 800; white-space: nowrap; }
body .evo-year__figures dd small { margin-left: 4px; font-size: 11.5px; font-weight: 800; }
body .evo-year__swing { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
body .evo-year__swing-value { color: var(--c); font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
body .evo-year__swing-value.is-neutral { color: var(--color-muted); }
body .evo-year__swing-label { color: var(--color-muted); font-size: 11.5px; font-weight: 600; }
body .evo-year__swing-bar { display: flex; justify-content: flex-end; width: 100%; height: 6px; margin-top: 5px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--color-ink) 6%, transparent); }
body .evo-year__swing-bar > span { display: block; height: 100%; min-width: 3px; border-radius: 3px; background: var(--c); }

/* ⑥ Tous les chiffres : replié par défaut */
body .evo-details { margin-bottom: 20px; padding: 0; }
body .evo-details__summary { display: flex; align-items: center; gap: 14px; padding: 18px 22px; cursor: pointer; list-style: none; }
body .evo-details__summary::-webkit-details-marker { display: none; }
body .evo-details__icon { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--color-tile); color: var(--color-muted); font-size: 15px; }
body .evo-details__title { display: block; color: var(--color-ink); font-size: 15px; font-weight: 800; }
body .evo-details__sub { display: block; color: var(--color-muted); font-size: 12.5px; font-weight: 500; }
body .evo-details__chevron { margin-left: auto; color: var(--color-muted); transition: transform .2s; }
body .evo-details[open] .evo-details__chevron { transform: rotate(180deg); }
body .evo-details .table-responsive { padding: 0 22px; border-top: 1px solid color-mix(in srgb, var(--color-ink) 7%, transparent); }
body .evo-details__note { margin: 0; padding: 14px 22px 18px; color: var(--color-muted); font-size: 12px; font-weight: 500; line-height: 1.5; }

@media (max-width: 767.98px) {
    body .evo-hero { padding: 22px 20px; }
    body .evo-year__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body .evo-year__card { grid-template-columns: 1fr; }
    body .evo-year__swing { align-items: flex-start; text-align: left; }
    body .evo-year__swing-bar { justify-content: flex-start; }
}
}