/* style.css — Thème sombre « oscilloscope vert » */

:root {
  --bg-page:    #0b100b;
  --bg-panel:   #0f1a0f;
  --bg-panel-2: #0c150c;
  --text-main:  #e6ffe6;
  --text-dim:   #cfeecf;
  --text-soft:  #dddddd;
  --accent:     #4caf50;
  --accent-2:   #2e7d32;
  --accent-3:   #66ff66;
  --accent-4:   #00aa00;
  --radius-s:   6px;
  --radius-m:   12px;
  --grid-green: #062006;
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg-page);
  color: var(--text-main);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.35;
}

#conduction {
  width: 760px;
  max-width: 92vw;
  margin: 18px auto;
  padding: 14px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--accent-2);
  border-radius: var(--radius-m);
  box-shadow: 0 0 24px rgba(0,0,0,0.35) inset;
}

#conduction h2 {
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 8px 0;
  color: var(--text-dim);
}

#conduction .row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

#conduction label { font-size: 0.95em; color: #eee; }

#conduction input[type="number"],
#conduction select {
  min-width: 90px;
  padding: 4px 6px;
  background: #111;
  color: #eee;
  border: 1px solid var(--accent);
  border-radius: var(--radius-s);
  outline: none;
  appearance: none;
}

#conduction input[type="number"]:focus,
#conduction select:focus {
  border-color: #6fdc74;
  box-shadow: 0 0 0 2px rgba(76,175,80,0.25);
}

#startCond {
  padding: 6px 12px;
  font-size: 0.95em;
  cursor: pointer;
  border: none;
  border-radius: var(--radius-s);
  background: var(--accent);
  color: white;
  transition: background 0.15s ease-in-out;
}
#startCond:hover { background: #45a049; }
#startCond:active { background: #388e3c; }
#startCond:disabled { opacity: 0.65; cursor: not-allowed; }

/* Bouton reset (secondaire) */
#resetCond {
  padding: 6px 12px;
  font-size: 0.95em;
  cursor: pointer;
  border: 1px solid var(--accent);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-main);
  transition: background 0.15s ease-in-out, color 0.15s;
}
#resetCond:hover { background: rgba(76,175,80,0.12); color: #eaffea; }
#resetCond:active { background: rgba(76,175,80,0.18); }

#vMyeOut { color: var(--accent-3); font-weight: 600; }
#vUnmyOut { color: var(--accent-4); font-weight: 600; }
#presetOut { color: var(--text-dim); }

#axonCanvas {
  background: #000;
  border: 5px solid var(--accent);
  border-radius: var(--radius-m);
  display: block;
  margin-top: 10px;
  box-shadow: 0 0 12px rgba(0,0,0,0.5) inset;
}

#times {
  margin-top: 8px;
  font-size: 0.98em;
  color: var(--text-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

#trialLog {
  margin-top: 10px;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  color: #eee;
  background: var(--bg-panel-2);
  border-radius: var(--radius-s);
  overflow: hidden;
}
#trialLog thead th {
  background: #123312;
  color: #d5f5d5;
  border-bottom: 1px solid var(--accent-2);
  padding: 8px 8px;
  text-align: center;
  font-weight: 600;
}
#trialLog th, #trialLog td {
  border: 1px solid var(--accent-2);
  padding: 6px 8px;
  text-align: center;
}
#trialLog tbody tr:nth-child(even) { background: #0e180e; }
#trialLog tbody tr:hover { background: #142414; }

/* Bloc d’info physiologique */
#fiberInfo { margin-top: 14px; }
#fiberInfo h3 {
  margin: 10px 0 6px 0;
  font-size: 14px;
  color: var(--text-dim);
}
#fiberInfo .info {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-panel-2);
  color: #eee;
  border: 1px solid var(--accent-2);
  border-radius: var(--radius-s);
  overflow: hidden;
}
#fiberInfo .info th, #fiberInfo .info td {
  border: 1px solid var(--accent-2);
  padding: 6px 8px;
  text-align: left;
}
#fiberInfo .info thead th {
  background: #123312;
  color: #d5f5d5;
}
#fiberInfo .note {
  margin-top: 6px;
  font-size: 0.9em;
  color: var(--text-soft);
}

/* Responsive */
@media (max-width: 520px) {
  #conduction { padding: 12px; }
  #conduction .row { gap: 8px; }
  #axonCanvas { border-width: 4px; }
}

/* Scrollbars (WebKit) */
*::-webkit-scrollbar { height: 10px; width: 10px; }
*::-webkit-scrollbar-thumb { background: #1e4d1f; border-radius: 6px; }
*::-webkit-scrollbar-track { background: #0d170d; }