/* Panneau « Le modèle apprend » (onglet Résultats de l'IA). */
.learning-panel .learning-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 4px 0 14px;
}
.learning-panel .learning-status {
  font-size: .95rem; color: var(--text); margin: 0 0 10px; font-weight: 600;
}
.learning-panel .learning-status::before { content: ""; }
@media (max-width: 560px) { .learning-panel .learning-metrics { grid-template-columns: 1fr; } }

/* Historique des recalibrations (timeline repliable) */
.learning-timeline { margin: 4px 0 12px; }
.learning-timeline summary { cursor: pointer; font-size: .82rem; color: var(--muted); font-weight: 600; }
.learning-timeline summary:hover { color: var(--lime); }
.lt-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lt-item { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0 6px 4px; position: relative; }
.lt-item:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 18px; bottom: -2px; width: 1px; background: var(--line-strong); }
.lt-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: 0 0 9px; z-index: 1; background: var(--muted-2); }
.lt-adopted .lt-dot { background: var(--lime); }
.lt-kept .lt-dot { background: var(--cyan); }
.lt-item strong { display: block; font-size: .84rem; color: var(--text); font-weight: 600; }
.lt-item small { display: block; font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Panneau « Stratégie Placé » (réutilise .learning-metrics/.performance-metric). */
.place-strat-panel .learning-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 4px 0 14px; }
.place-strat-panel .performance-metric em { display: block; font-style: normal; font-size: .74rem; color: var(--muted); margin-top: 3px; }
.place-strat-panel .performance-metric.ps-live { border-color: rgba(120, 190, 255, .38); }
.place-strat-panel .performance-metric.ps-live strong { color: #8fc4ff; }
.place-strat-panel .performance-metric.ps-bt strong { color: var(--lime); }
.place-strat-panel .learning-status::before { content: "🥉 "; }
.ps-breakdown { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.ps-bk-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-right: 2px; }
.ps-chip { font-size: .8rem; padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); background: rgba(120, 190, 255, .07); }
.ps-chip b { font-weight: 600; }
.ps-chip em { font-style: normal; color: var(--muted); font-size: .72rem; }
@media (max-width: 560px) { .place-strat-panel .learning-metrics { grid-template-columns: 1fr; } }

/* « Salle de calcul » : visualisation animée de l'apprentissage (learning.js › mountCore). */
.lc {
  position: relative; height: 280px; margin: 4px 0 16px; border-radius: 18px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(70% 90% at 50% 50%, rgba(22, 217, 172, .10) 0, transparent 60%),
    linear-gradient(180deg, rgba(4, 12, 10, .9), rgba(6, 13, 11, .98));
  border: 1px solid rgba(22, 217, 172, .28);
  box-shadow: inset 0 0 60px rgba(22, 217, 172, .06), inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 32px rgba(22, 217, 172, .08);
}
.lc::before { /* léger balayage CRT */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .35;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px);
}
.lc::after { /* coins lumineux */
  content: ""; position: absolute; inset: 8px; pointer-events: none; z-index: 2; border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(55, 242, 197, .6), rgba(55, 242, 197, .6)) 0 0 / 16px 1px no-repeat,
    linear-gradient(180deg, rgba(55, 242, 197, .6), rgba(55, 242, 197, .6)) 0 0 / 1px 16px no-repeat,
    linear-gradient(90deg, rgba(55, 242, 197, .6), rgba(55, 242, 197, .6)) 100% 100% / 16px 1px no-repeat,
    linear-gradient(180deg, rgba(55, 242, 197, .6), rgba(55, 242, 197, .6)) 100% 100% / 1px 16px no-repeat;
}
.lc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.lc-hud { position: absolute; top: 12px; left: 14px; right: 110px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; }
.lc-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px;
  font: 700 10.5px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  background: rgba(6, 13, 11, .7); border: 1px solid rgba(22, 217, 172, .25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-variant-numeric: tabular-nums;
}
.lc-pill b { color: var(--mint, #37F2C5); font-weight: 800; }
.lc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint, #37F2C5); box-shadow: 0 0 8px var(--mint, #37F2C5); animation: lc-blink 1.2s ease-in-out infinite; }
@keyframes lc-blink { 50% { opacity: .25; } }
.lc-tag { position: absolute; top: 12px; right: 14px; z-index: 3; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(167, 187, 180, .7); border: 1px dashed rgba(167, 187, 180, .35); border-radius: 999px; padding: 4px 8px; }
.lc-log {
  position: absolute; left: 14px; right: 14px; bottom: 10px; z-index: 3; display: grid; gap: 2px;
  font: 500 11.5px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(55, 242, 197, .92);
  text-shadow: 0 0 8px rgba(55, 242, 197, .35);
}
.lc-log p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-log p:nth-child(2) { opacity: .55; } .lc-log p:nth-child(3) { opacity: .3; }
@media (max-width: 700px) {
  .lc { height: 340px; }
  .lc-hud { right: 14px; }
  .lc-tag { top: auto; bottom: 12px; right: 10px; }
  .lc-log { font-size: 10.5px; right: 112px; }
}
@media (prefers-reduced-motion: reduce) { .lc-dot { animation: none; } }