/* outils.css — page outils : grille de cartes + résultats */

.tools-wrap {
  padding: 16px;
}
.tools-title {
  font-family: monospace;
  font-size: 11px;
  color: rgba(240,235,220,0.3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 12px;
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.card {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(240,235,220,0.1);
  border-radius: 10px;
  padding: 13px;
  backdrop-filter: blur(8px);
  font-family: monospace;
}
.card h2 {
  font-size: 11px;
  color: rgba(240,235,220,0.4);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 9px;
}
.input-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.card input[type=text],
.card select {
  flex: 1;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(240,235,220,0.18);
  border-radius: 6px;
  padding: 6px 10px;
  color: rgba(240,235,220,0.9);
  font-family: monospace;
  font-size: 12px;
  outline: none;
  min-width: 80px;
}
.card input:focus, .card select:focus {
  border-color: rgba(240,235,220,0.45);
}
.card select option { background: #111; }

.card button {
  background: rgba(240,235,220,0.08);
  border: 1px solid rgba(240,235,220,0.18);
  border-radius: 6px;
  padding: 6px 12px;
  color: rgba(240,235,220,0.8);
  font-family: monospace;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.card button:hover {
  background: rgba(240,235,220,0.15);
  border-color: rgba(240,235,220,0.35);
}
.card button:active { transform: scale(0.97); }

.result {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(240,235,220,0.07);
  border-radius: 6px;
  padding: 9px;
  min-height: 50px;
  max-height: 180px;
  overflow-y: auto;
  font-size: 11px;
  line-height: 1.75;
  color: rgba(240,235,220,0.6);
  white-space: pre-wrap;
  word-break: break-all;
}
.result .ok   { color: #7ec87e; }
.result .err  { color: #e07070; }
.result .info { color: rgba(240,235,220,0.3); }
.result .key  { color: rgba(240,235,220,0.85); }
.result .big  { font-size: 20px; color: rgba(240,235,220,0.95); display: block; margin-bottom: 3px; }