/* ============================================================
   sma.css — styles partagés des simulations SMA réactif
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #0a0e14;
  display: flex;
  height: 100vh;
  font-family: monospace;
  color: #eee;
  overflow: hidden;
}

canvas { display: block; }

/* --- Sidebar --- */
#sidebar {
  width: 220px; flex-shrink: 0;
  background: #0d1118; border-right: 1px solid #1e2530;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
#sidebar h2 {
  font-size: 11px; color: #445; padding: 10px 14px 6px;
  text-transform: uppercase; letter-spacing: 1px;
  border-bottom: 1px solid #1a2028;
}

.section { padding: 10px 14px; border-bottom: 1px solid #1a2028; }
.section h3 {
  font-size: 10px; color: #556; margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 0.5px;
}

/* --- Paramètres (label + slider) --- */
label.param { font-size: 11px; color: #aaa; display: flex; flex-direction: column; gap: 3px; margin-bottom: 7px; }
label.param .row { display: flex; justify-content: space-between; }
label.param .row span:last-child { color: #4af; }
label.param input[type=range] { accent-color: #4af; width: 100%; }

/* --- Boutons --- */
button.action {
  padding: 5px 10px; background: #1e2530; border: 1px solid #2a3540;
  color: #ccc; cursor: pointer; font-size: 11px; border-radius: 3px; margin: 2px;
}
button.action:hover { background: #2a3540; }
button.action.active { background: #1a3a2a; border-color: #2a6a4a; color: #4fa; }
button.action.warn { background: #3a1a08; border-color: #7a3a10; color: #f84; }
button.action.fire-active { background: #3a1a08; border-color: #7a3a10; color: #f84; }

.btn-row { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }

/* --- Presets --- */
.preset-btn {
  padding: 4px 8px; background: #12181f; border: 1px solid #222c38;
  color: #89a; cursor: pointer; font-size: 10px; border-radius: 3px;
  font-family: monospace; letter-spacing: 0.5px;
}
.preset-btn:hover { background: #1a2530; border-color: #4af; color: #4af; }

/* --- Stats / texte --- */
#stats { font-size: 11px; color: #667; line-height: 2; }
#stats span { font-size: 12px; }
.hint { font-size: 10px; color: #445; line-height: 1.6; margin-top: 6px; }

/* --- Légende --- */
.legend { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #667; margin-bottom: 3px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* --- Barres de progression --- */
.bar-track { height: 10px; background: #080c10; border: 1px solid #1a2028; border-radius: 2px; overflow: hidden; margin-top: 2px; }
.bar-fill { height: 100%; background: #4af; transition: width 0.2s; }

/* --- Graphique --- */
#chart {
  width: 100%; height: 80px;
  background: #080c10; border: 1px solid #1a2028; border-radius: 3px; display: block;
}

/* --- Lien retour index (injecté par sma.js) --- */
.home-link {
  position: fixed; top: 10px; right: 10px; z-index: 9999;
  background: #0d1118; border: 1px solid #2a3540; color: #778;
  font-family: monospace; font-size: 11px;
  padding: 5px 10px; border-radius: 3px;
  text-decoration: none; letter-spacing: 0.5px;
  transition: color 0.2s, border-color 0.2s;
}
.home-link:hover { color: #cde; border-color: #4af; }