/* Graphiques : courbe avec période d'avant, répartition en barres, mini-courbes. Grille et axes en retrait. */

/* ---------- Grande courbe ---------- */
.area { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: 260px auto; }
.area__y { position: relative; grid-row: 1; }
.area__y span { position: absolute; right: 12px; translate: 0 -50%; color: var(--faint); font-size: var(--t-2xs); white-space: nowrap; }
.area__plot { position: relative; grid-row: 1; min-width: 0; }
.area__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.area__grid { stroke: var(--grid-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.area__line { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: var(--line-glow); }
.area__prev { fill: none; stroke: var(--prev-line); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.area__x { grid-column: 2; position: relative; height: 26px; }
.area__x span { position: absolute; top: 8px; translate: -50% 0; color: var(--faint); font-size: var(--t-2xs); white-space: nowrap; }
.area__x span:first-child { translate: 0 0; }
.area__x span:last-child { translate: -100% 0; }
.area__hit { position: absolute; inset: 0; cursor: crosshair; touch-action: pan-y; }
.area__cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-strong); opacity: 0; pointer-events: none; }
.area__dot {
  position: absolute; width: 10px; height: 10px; border-radius: 50%; translate: -50% -50%; background: var(--accent);
  box-shadow: 0 0 0 2px var(--chart-surface), 0 0 12px var(--accent-ring); opacity: 0; pointer-events: none;
}
.area.is-hover .area__cross, .area.is-hover .area__dot { opacity: 1; }
.tip-float {
  position: absolute; z-index: 5; min-width: 170px; padding: 10px 12px; border-radius: 10px; pointer-events: none;
  background: var(--tip-bg); border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); font-size: var(--t-xs); opacity: 0; transition: opacity var(--dur-fast);
}
.area.is-hover .tip-float { opacity: 1; }
.tip-float div { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); }
.tip-float div + div { margin-top: 4px; }
.tip-float span { display: inline-flex; align-items: center; gap: 7px; }
.tip-float strong { color: var(--ink); font-weight: 600; }
.key { display: inline-block; width: 12px; height: 0; border-top: 2.25px solid var(--accent); }
.key--prev { border-top: 1.5px dashed var(--prev-line); }
.legend-inline { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-2); color: var(--muted); font-size: var(--t-xs); }
.legend-inline span { display: inline-flex; align-items: center; gap: 7px; }
.legend-inline i { display: inline-block; width: 16px; height: 0; border-top: 2.25px solid var(--accent); }
.legend-inline i.prev { border-top: 1.5px dashed var(--prev-line); }

/* ---------- Répartition par shop ---------- */
.split { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.split li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.split li:first-child { border-top: 0; padding-top: 4px; }
.split__mark { grid-area: 1 / 1 / 3 / 2; align-self: start; }
.split__name { grid-area: 1 / 2; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.split__value { grid-area: 1 / 3; font-weight: 650; text-align: right; white-space: nowrap; }
.split__bar { grid-area: 2 / 2; height: 6px; border-radius: 99px; background: var(--chip); overflow: hidden; }
.split__bar span { display: block; width: var(--w); height: 100%; border-radius: 99px; background: var(--c); transform-origin: left; animation: grow-x 800ms var(--ease) both; }
.split__pct { grid-area: 2 / 3; color: var(--ink-2); font-size: var(--t-xs); font-weight: 600; text-align: right; }
.split__meta { grid-area: 3 / 2 / 4 / 4; display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: var(--t-xs); white-space: nowrap; }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Mini-courbe ---------- */
.spark { display: block; width: 100%; height: 48px; overflow: visible; }
.spark__line { fill: none; stroke: var(--c, var(--s1)); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Globe ---------- */
.globe-wrap { position: relative; width: min(100%, 300px); aspect-ratio: 1; margin: 0 auto; }
.globe-wrap canvas { width: 100%; height: 100%; opacity: 0; cursor: grab; transition: opacity 1s ease; contain: layout paint size; }

@media (max-width: 560px) {
  .area__x span:nth-child(even):not(:last-child), .area__x span:nth-last-child(2) { display: none; }
  .area { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 200px auto; }
  .area__y span { right: 8px; }
}