/* ============================================================================
   MOON CAPITAL — Maquette produit (conversation · blocs · preuves) + graphiques
   ========================================================================= */

.app {
  position: relative;
  border-radius: clamp(14px, 1.4vw, 22px);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(var(--c-veil), calc(.05 * var(--k-veil))), rgba(var(--c-veil), calc(.012 * var(--k-veil))) 30%, transparent),
    var(--surface);
  box-shadow:
    0 1px 0 rgba(var(--c-ink), calc(.06 * var(--k-ink))) inset,
    0 60px 130px -60px rgb(var(--c-shadow)),
    0 0 0 1px rgba(var(--c-accent), calc(.07 * var(--k-accent))),
    0 0 120px -40px rgba(var(--c-accent), calc(.22 * var(--k-accent)));
  overflow: hidden;
  container-type: inline-size;
}

/* Reflet subtil sur le bord supérieur. */
.app::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--c-veil), calc(.38 * var(--k-veil))), transparent);
  z-index: 4;
}

/* ── Barre de fenêtre ───────────────────────────────────────────────────── */
/* En-tête de planche, pas de fenêtre de navigateur : cote de référence,
   échelle graduée de part et d'autre, état de l'environnement. */
.app__chrome {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(var(--c-bar), calc(.5 * var(--k-bar)));
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.app__plate-ref { color: var(--accent); flex: none; }
.app__scale {
  flex: 1;
  min-width: 1.5rem;
  height: 7px;
  background-image:
    linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, transparent 0 6px, var(--line) 6px 7px);
  background-size: 14px 7px, 100% 7px;
  background-repeat: repeat-x, no-repeat;
  opacity: .7;
}
.app__path {
  flex: none;
  min-width: 0;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .11em;
}
.app__path span { color: var(--ink-4); margin-inline: .45em; }
.app__path b { color: var(--accent-soft); font-weight: 500; }
.app__state {
  flex: none;
  padding: .22em .6em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  color: var(--accent);
}

/* ── Corps ──────────────────────────────────────────────────────────────── */
.app__body {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.32fr) minmax(0, .96fr);
  min-height: clamp(19rem, 34vw, 27rem);
}

.pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--line-soft);
}
.pane:last-child { border-right: 0; }

.pane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(var(--c-veil), calc(.012 * var(--k-veil)));
}
.pane__title {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pane__meta { font-size: 10px; color: var(--ink-4); display: inline-flex; align-items: center; gap: .35rem; }
.pane__meta i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--c-accent), calc(.18 * var(--k-accent)));
}

/* ── Panneau 1 : conversation ───────────────────────────────────────────── */
.pane--chat { background: rgba(var(--c-sink), calc(.35 * var(--k-sink))); }

.chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .85rem;
  overflow: hidden;
}

.msg {
  padding: .58rem .7rem;
  border-radius: 11px;
  font-size: 11.5px;
  line-height: 1.5;
  border: 1px solid var(--line-soft);
  opacity: 0;
  translate: 0 8px;
  transition: opacity .45s var(--ease-out), translate .45s var(--ease-out);
}
.msg.is-on { opacity: 1; translate: 0 0; }

.msg--user {
  align-self: flex-end;
  max-width: 94%;
  background: linear-gradient(170deg, rgba(var(--c-accent), calc(.18 * var(--k-accent))), rgba(var(--c-accent), calc(.09 * var(--k-accent))));
  border-color: rgba(var(--c-accent), calc(.26 * var(--k-accent)));
  color: var(--accent-soft);
  border-bottom-right-radius: 4px;
}
.msg--agent {
  align-self: flex-start;
  max-width: 96%;
  background: rgba(var(--c-veil), calc(.035 * var(--k-veil)));
  color: var(--ink-2);
  border-bottom-left-radius: 4px;
}
.msg__who {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .3rem;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.msg__who i {
  width: 12px; height: 12px;
  border-radius: 3px;
  background: linear-gradient(150deg, var(--btn-1), var(--btn-2));
  flex: none;
}

.msg__steps { display: grid; gap: .3rem; margin-top: .45rem; }
.msg__step {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: 10.5px;
  color: var(--ink-3);
  opacity: 0;
  translate: -4px 0;
  transition: opacity .3s var(--ease-out), translate .3s var(--ease-out), color .3s var(--ease-out);
}
.msg__step.is-on { opacity: 1; translate: 0 0; }
.msg__step.is-done { color: var(--ink-2); }
.msg__step i {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  flex: none;
  transition: background .3s var(--ease-out);
}
.msg__step.is-done i { background: var(--btn-2); border-color: var(--btn-2); }
.msg__step.is-done i::after {
  content: '';
  width: 4px; height: 2px;
  border-left: 1.5px solid var(--accent-ink);
  border-bottom: 1.5px solid var(--accent-ink);
  rotate: -45deg;
  translate: 0 -.5px;
}

.msg__cost {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .5rem;
  padding: .18em .45em;
  border-radius: 4px;
  background: rgba(var(--c-accent), calc(.1 * var(--k-accent)));
  border: 1px solid rgba(var(--c-accent), calc(.2 * var(--k-accent)));
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent-bright);
}

.composer {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 .85rem .85rem;
  padding: .5rem .6rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(var(--c-sink), calc(.6 * var(--k-sink)));
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.app[data-act='1'] .composer {
  border-color: rgba(var(--c-accent), calc(.34 * var(--k-accent)));
  box-shadow: 0 0 0 3px rgba(var(--c-accent), calc(.07 * var(--k-accent)));
}
.composer__text {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: var(--ink);
  line-height: 1.45;
  min-height: 1.4em;
}
.composer__text:empty::before { content: attr(data-placeholder); color: var(--ink-4); }
.caret {
  display: inline-block;
  width: 1.5px;
  height: 1em;
  translate: 1px .16em;
  background: var(--accent);
  animation: blink 1.05s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.composer__send {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 7px;
  background: linear-gradient(160deg, var(--btn-1), var(--btn-2));
  color: var(--accent-ink);
  flex: none;
  transition: scale var(--dur-fast) var(--ease-spring), opacity var(--dur) var(--ease-out);
  opacity: .35;
}
.app[data-act='1'] .composer__send { opacity: 1; }
.composer__send svg { width: 11px; height: 11px; }

/* ── Panneau 2 : canevas de blocs ───────────────────────────────────────── */
.pane--canvas { background: rgba(var(--c-sink), calc(.55 * var(--k-sink))); }

.canvas {
  position: relative;
  flex: 1;
  min-height: 15rem;
  background-image: radial-gradient(rgba(var(--c-veil), calc(.085 * var(--k-veil))) .9px, transparent .9px);
  background-size: 16px 16px;
  background-position: -1px -1px;
  overflow: hidden;
}

.canvas__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.canvas__wires path {
  fill: none;
  stroke: rgba(var(--c-accent), calc(.42 * var(--k-accent)));
  stroke-width: 1.2;
  stroke-linecap: round;
}
.canvas__wires .wire-glow {
  stroke: rgba(var(--c-accent), calc(.1 * var(--k-accent)));
  stroke-width: 4;
}

.node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w, 27%);
  padding: .42rem .52rem;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: linear-gradient(170deg, rgba(var(--c-veil), calc(.07 * var(--k-veil))), rgba(var(--c-veil), calc(.018 * var(--k-veil)))), var(--surface-2);
  box-shadow: 0 10px 24px -14px rgba(var(--c-shadow), calc(.9 * var(--k-shadow)));
  opacity: 0;
  scale: .88;
  translate: 0 6px;
  transition:
    opacity .42s var(--ease-out),
    scale .52s var(--ease-spring),
    translate .42s var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.node.is-on { opacity: 1; scale: 1; translate: 0 0; }
.node.is-hot {
  border-color: rgba(var(--c-accent), calc(.55 * var(--k-accent)));
  box-shadow: 0 0 0 3px rgba(var(--c-accent), calc(.1 * var(--k-accent))), 0 10px 24px -14px rgba(var(--c-shadow), calc(.9 * var(--k-shadow)));
}

.node__head { display: flex; align-items: center; gap: .35rem; }
.node__icon {
  display: grid;
  place-items: center;
  width: 15px; height: 15px;
  border-radius: 4px;
  background: rgba(var(--c-accent), calc(.13 * var(--k-accent)));
  color: var(--accent);
  flex: none;
}
.node__icon svg { width: 9px; height: 9px; }
.node__title {
  font-size: 10px;
  font-weight: 550;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.node__param {
  margin-top: .18rem;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .01em;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.node--risk { border-color: rgba(var(--c-accent), calc(.3 * var(--k-accent))); }
.node--risk .node__icon { background: rgba(var(--c-accent), calc(.2 * var(--k-accent))); }

.canvas__toolbar {
  position: absolute;
  left: .55rem;
  bottom: .55rem;
  display: flex;
  gap: .3rem;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.app[data-act='2'] .canvas__toolbar,
.app[data-act='3'] .canvas__toolbar { opacity: 1; }
.canvas__tool {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--c-sink), calc(.7 * var(--k-sink)));
  color: var(--ink-3);
}
.canvas__tool svg { width: 10px; height: 10px; }

/* ── Panneau 3 : preuves ────────────────────────────────────────────────── */
.pane--proof { background: rgba(var(--c-sink), calc(.45 * var(--k-sink))); }
.proof { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .6rem; padding: .75rem; }

.proof__run {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.proof__bar {
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: rgba(var(--c-veil), calc(.09 * var(--k-veil)));
  overflow: hidden;
}
.proof__bar i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  scale: 0 1;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-soft));
  transition: scale 1.5s var(--ease-io);
}
.app[data-act='3'] .proof__bar i { scale: 1 1; }

.proof__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
}
.mini-stat {
  padding: .42rem .55rem;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--c-veil), calc(.022 * var(--k-veil)));
}
.mini-stat__k {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.mini-stat__v {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.25;
}
.mini-stat__v[data-tone='gold'] { color: var(--accent-bright); }
.mini-stat__v[data-tone='neg']  { color: var(--neg); }

.proof__chart {
  position: relative;
  flex: 1 1 5.5rem;
  min-height: 5.5rem;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--c-veil), calc(.016 * var(--k-veil)));
  padding: .45rem;
  overflow: hidden;
}
.proof__chart-label {
  position: absolute;
  top: .4rem; right: .55rem;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
  z-index: 1;
}

.proof__trade {
  padding: .5rem .6rem;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--c-veil), calc(.022 * var(--k-veil)));
  font-size: 10px;
  line-height: 1.5;
  color: var(--ink-2);
  opacity: 0;
  translate: 0 6px;
  transition: opacity .5s var(--ease-out) .35s, translate .5s var(--ease-out) .35s;
}
.app[data-act='3'] .proof__trade { opacity: 1; translate: 0 0; }
.proof__trade b { color: var(--accent-soft); font-weight: 550; }
.proof__trade-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .3rem;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ── Barre d'état ───────────────────────────────────────────────────────── */
.app__status {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .55rem 1rem;
  border-top: 1px solid var(--line-soft);
  background: rgba(var(--c-bar), calc(.4 * var(--k-bar)));
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--ink-4);
}
.app__status b { color: var(--ink-2); font-weight: 500; }
.app__status .sep { color: var(--ink-4); opacity: .5; }
.app__status-right { margin-left: auto; display: flex; align-items: center; gap: .45rem; }

/* Bouton rejouer, discret, en bas à droite. */
.app__replay {
  position: absolute;
  right: .7rem;
  bottom: 2.6rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35em .7em;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(var(--c-sink), calc(.82 * var(--k-sink)));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.app:hover .app__replay, .app__replay:focus-visible { opacity: 1; }
.app__replay:hover { color: var(--accent-bright); border-color: var(--line-strong); }
.app__replay svg { width: 10px; height: 10px; }

/* ── Graphiques SVG génériques ──────────────────────────────────────────── */
/* Le SVG est sorti du flux : sinon son ratio intrinsèque et la hauteur mesurée
   du conteneur s'alimentent mutuellement et le panneau enfle sans fin. */
.chart { position: relative; width: 100%; min-width: 0; }
.chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.chart .grid-line { stroke: rgba(var(--c-veil), calc(.07 * var(--k-veil))); stroke-width: 1; }
.chart .axis-label {
  font-family: var(--font-mono);
  font-size: 8px;
  fill: var(--ink-4);
  letter-spacing: .06em;
}
.chart .series-line {
  fill: none;
  stroke: var(--pos);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart .series-line--thin { stroke-width: 1.5; }
.chart .series-area { fill: url(#goldFade); }
.chart .series-neg { fill: color-mix(in srgb, var(--neg) 22%, transparent); stroke: var(--neg); stroke-width: 1.5; }
.chart .baseline { stroke: rgba(var(--c-veil), calc(.16 * var(--k-veil))); stroke-width: 1; stroke-dasharray: 3 4; }

.chart .crosshair { stroke: rgba(var(--c-accent), calc(.45 * var(--k-accent))); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; }
.chart[data-hover='true'] .crosshair { opacity: 1; }
.chart .cursor-dot {
  fill: var(--accent-bright);
  stroke: var(--bg);
  stroke-width: 2;
  opacity: 0;
}
.chart[data-hover='true'] .cursor-dot { opacity: 1; }

/* Tracé animé du chemin. */
.draw-path {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.9s var(--ease-io);
}
.draw-path.is-drawn { stroke-dashoffset: 0; }
.fade-area { opacity: 0; transition: opacity 1s var(--ease-out) .55s; }
.fade-area.is-drawn { opacity: 1; }

/* ── Adaptations de la maquette ─────────────────────────────────────────── */
@container (max-width: 900px) {
  .app__body { grid-template-columns: 1fr; }
  .pane { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .pane:last-child { border-bottom: 0; }
  .canvas {
    display: flex;
    flex-direction: column;
    gap: .38rem;
    padding: .7rem .7rem .7rem 1.5rem;
    min-height: 0;
  }
  .canvas::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 1.1rem;
    bottom: 1.1rem;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(var(--c-accent), calc(.35 * var(--k-accent))), transparent);
  }
  .canvas__wires { display: none; }
  .node { position: static; width: 100%; }
  .canvas__toolbar { position: static; margin-top: .35rem; }
  .proof__stats { grid-template-columns: repeat(4, 1fr); }
}
@container (max-width: 560px) {
  .proof__stats { grid-template-columns: 1fr 1fr; }
}