/* ==========================================================================
   161 — Line Chart
   Courbe SVG construite par anim.js depuis data-values : le tracé avance en
   stroke-dashoffset (rAF), l'aire est révélée par un clip-rect qui suit la
   plume, les points poppent au passage, le dernier point pulse en continu
   avec une étiquette de valeur. Grille et labels d'axe fondent en cascade.
   Ce fichier porte les états (armé / joué / reset) et tout le styling des
   éléments générés. Racine : .line-chart (js: true).
   ========================================================================== */

.line-chart {
  --lc-accent: var(--ml-accent, #7c8cff);
  --lc-accent-2: var(--ml-accent-2, #2dd4bf);
  --lc-muted: var(--ml-muted, #8b91a3);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 340px;
  color: var(--ml-fg, #e8eaf2);
}

.line-chart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.line-chart__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lc-muted);
}

.line-chart__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Grille + labels d'axe (fade stagger, délais inline posés par le JS) --- */

.line-chart__grid-line {
  stroke: color-mix(in srgb, var(--lc-muted) 16%, transparent);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 450ms ease;
}

.line-chart__baseline {
  stroke: color-mix(in srgb, var(--lc-muted) 38%, transparent);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 450ms ease;
}

.line-chart__x-label {
  fill: var(--lc-muted);
  font-size: 9.5px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(3px);
  transition:
    opacity 400ms ease,
    transform 400ms cubic-bezier(0.2, 0.7, 0.25, 1);
}

.line-chart.is-played .line-chart__grid-line,
.line-chart.is-played .line-chart__baseline {
  opacity: 1;
}

.line-chart.is-played .line-chart__x-label {
  opacity: 1;
  transform: none;
}

/* --- Courbe + aire ----------------------------------------------------------- */

.line-chart__line {
  fill: none;
  stroke: var(--lc-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--lc-accent) 45%, transparent));
}

.line-chart__area {
  pointer-events: none; /* révélée par le clip-rect qui suit le tracé */
}

/* --- Points de données --------------------------------------------------------- */

.line-chart__dot {
  fill: var(--ml-surface, #151a24);
  stroke: var(--lc-accent);
  stroke-width: 2;
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 340ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 180ms ease;
}

.line-chart__dot.is-in {
  opacity: 1;
  transform: none;
}

.line-chart__dot--last {
  fill: var(--lc-accent-2);
  stroke: var(--ml-bg, #0d1017);
}

/* pulse persistant du dernier point */
.line-chart__pulse {
  fill: none;
  stroke: var(--lc-accent-2);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.line-chart__pulse.is-live {
  animation: line-chart-pulse 2200ms cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}

@keyframes line-chart-pulse {
  0% { transform: scale(0.7); opacity: 0.7; }
  75% { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* --- Étiquette de valeur du dernier point --------------------------------------- */

.line-chart__pill {
  opacity: 0;
  transform: translateY(5px) scale(0.92);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 380ms cubic-bezier(0.3, 1.5, 0.45, 1),
    opacity 220ms ease;
}

.line-chart__pill.is-in {
  opacity: 1;
  transform: none;
}

.line-chart__pill-bg {
  fill: var(--lc-accent-2);
}

.line-chart__pill-text {
  fill: var(--ml-bg, #0d1017);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
}

/* --- Reset silencieux (rejouer sans transitions inverses) ------------------------ */

.line-chart.is-reset .line-chart__grid-line,
.line-chart.is-reset .line-chart__baseline,
.line-chart.is-reset .line-chart__x-label,
.line-chart.is-reset .line-chart__dot,
.line-chart.is-reset .line-chart__pill {
  transition: none;
}

/* --- Bouton rejouer ----------------------------------------------------------- */

.line-chart__replay {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--lc-muted) 35%, transparent);
  background: transparent;
  color: var(--lc-muted);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    color 200ms ease,
    border-color 200ms ease,
    transform 200ms cubic-bezier(0.3, 1.4, 0.5, 1);
}

.line-chart__replay:hover {
  color: var(--ml-fg, #e8eaf2);
  border-color: color-mix(in srgb, var(--lc-muted) 60%, transparent);
}

.line-chart__replay:hover .line-chart__replay-icon {
  transform: rotate(-45deg);
}

.line-chart__replay:active {
  transform: scale(0.92);
}

.line-chart__replay:focus-visible {
  outline: 2px solid var(--lc-accent);
  outline-offset: 2px;
}

.line-chart__replay-icon {
  width: 13px;
  height: 13px;
  display: block;
  transition: transform 300ms cubic-bezier(0.2, 0.7, 0.25, 1);
}

/* --- Reduced motion ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .line-chart__grid-line,
  .line-chart__baseline,
  .line-chart__x-label,
  .line-chart__dot,
  .line-chart__pill,
  .line-chart__replay,
  .line-chart__replay-icon {
    transition: none;
  }

  .line-chart__pulse.is-live {
    animation: none;
    opacity: 0;
  }
}