/* stepper.css — Visualiseur Python pas à pas (Math@mine)
   Thèmes VS Code dark/light, plein écran, responsive */

.stepper {
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  font-family: 'Courier New', monospace;
  font-size: 13px;
}
.stepper .step-line { padding: 2px 8px; border-radius: 3px; font-weight: 600; transition: background 0.15s; }
.stepper .step-line .kw { font-weight: 700; }
.stepper .step-line .fn { font-weight: 700; }
.stepper .step-line .ln { opacity: 0.5; margin-right: 10px; }
.stepper .step-line .cm { font-style: italic; }

/* Thème sombre (défaut) */
.stepper-dark { background: #1e1e1e; color: #d4d4d4; }
.stepper-dark .step-line { color: #d4d4d4; }
.stepper-dark .kw { color: #c586c0; }
.stepper-dark .fn { color: #dcdcaa; }
.stepper-dark .num { color: #b5cea8; }
.stepper-dark .str { color: #ce9178; }
.stepper-dark .cm { color: #6a9955; }
.stepper-dark .ln { color: #888; }
.stepper-dark .stepper-title { color: #569cd6; }
.stepper-dark .theme-btn { background: #444; color: white; }
.stepper-dark .stepper-btn { background: #444; color: white; }
.stepper-dark .stepper-btn-run { background: #569cd6; color: white; }
.stepper-dark .stepper-vars { border-top: 1px solid #444; color: #d4d4d4; }
.stepper-dark .stepper-var-name { color: #9cdcfe; }
.stepper-dark .stepper-var-val { color: #b5cea8; }
.stepper-dark .stepper-var-updated { color: #4ec9b0; }
.stepper-dark .stepper-var-false { color: #f44747; }
.stepper-dark .stepper-cond { color: #ce9178; }

/* Thème clair */
.stepper-light { background: #fffef8; color: #1e1e1e; border: 2px solid #ddd; }
.stepper-light .step-line { color: #1e1e1e; font-weight: 600; }
.stepper-light .kw { color: #0000ff; }
.stepper-light .fn { color: #795e26; }
.stepper-light .num { color: #098658; }
.stepper-light .str { color: #a31515; }
.stepper-light .cm { color: #008000; }
.stepper-light .ln { color: #999; }
.stepper-light .stepper-title { color: #185FA5; }
.stepper-light .theme-btn { background: #ddd; color: #333; }
.stepper-light .stepper-btn { background: #eee; color: #333; }
.stepper-light .stepper-btn-run { background: #185FA5; color: white; }
.stepper-light .stepper-vars { border-top: 1px solid #ddd; color: #1e1e1e; }
.stepper-light .stepper-var-name { color: #0000ff; }
.stepper-light .stepper-var-val { color: #098658; }
.stepper-light .stepper-var-updated { color: #098658; font-weight: 700; }
.stepper-light .stepper-var-false { color: #a31515; }
.stepper-light .stepper-cond { color: #333; }

/* Plein écran */
.stepper-fullscreen {
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10000;
  margin: 0 !important;
  border-radius: 0 !important;
  font-size: 1.4em !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.stepper-fullscreen .stepper-header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 1rem 3rem;
  flex-shrink: 0;
}
.stepper-fullscreen .stepper-code {
  flex: 1;
  overflow-y: auto;
  padding: 0 3rem;
}
.stepper-fullscreen .stepper-vars {
  flex-shrink: 0;
  padding: 1rem 3rem;
}
.stepper-fullscreen .step-line { padding: 6px 12px !important; font-size: 1.1em; }

/* Header */
.stepper-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.stepper-title { font-weight: 700; font-size: 12px; }
.stepper-controls { display: flex; gap: 6px; }
.stepper-btn, .theme-btn {
  padding: 4px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.stepper-btn-run { padding: 4px 14px; font-weight: 600; }

/* Variables */
.stepper-vars {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 768px) {
  .stepper { font-size: 11px; padding: 0.75rem; }
  .stepper-vars { flex-direction: column; gap: 0.5rem; }
  .stepper-controls { flex-wrap: wrap; }
}