/* ---------- pages de référence (informatique, ascii, couleurs) ---------- */
main.ref{
  max-width:1000px; margin:0 auto; padding:24px 22px 40px;
  display:flex; flex-direction:column; gap:18px;
}
.table-wrap{
  margin-top:12px; max-height:560px; overflow:auto;
  border:1px solid var(--line); border-radius:10px;
}
.ref-table{width:100%; border-collapse:collapse; font-size:14px; min-width:640px}
.ref-table thead th{
  position:sticky; top:0; z-index:1; background:var(--card);
  text-align:left; font-size:12px; letter-spacing:.5px; text-transform:uppercase;
  color:var(--ink-soft); padding:8px 12px; border-bottom:2px solid var(--line);
}
.ref-table td{padding:5px 12px; border-bottom:1px solid var(--line); font-family:var(--serif)}
.ref-table tbody tr:nth-child(even) td{background:var(--bg-soft)}
.ref-table .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; white-space:nowrap}
.ref-table .note{color:var(--ink-soft); font-size:13.5px}
.ref-table tr.hl td{background:var(--gold-soft)}
.search{
  font-family:var(--serif); font-size:16px; color:var(--ink);
  padding:8px 12px; border:1px solid var(--line); border-radius:9px; background:var(--card);
  width:100%; max-width:440px; margin:12px 0 4px;
}
.search:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft)}
.glyph{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px;
  display:inline-block; min-width:28px; text-align:center;
  border:1px solid var(--line); background:var(--card); border-radius:6px; padding:2px 6px;
}
.swatch{display:inline-block; width:20px; height:20px; border-radius:5px; border:1px solid rgba(0,0,0,.18); vertical-align:middle}
.swatch-lg{width:30px; height:30px; border-radius:6px}
.frname{font-size:13px; color:var(--ink-soft); font-style:italic}
.count-note{font-size:13px; color:var(--ink-soft); margin:0}
.term-group{margin-top:16px}
.term-group:first-child{margin-top:4px}
.term-group h3{
  margin:0 0 8px; font-size:14px; color:var(--ox); letter-spacing:.6px; text-transform:uppercase;
  border-bottom:1px solid var(--line); padding-bottom:4px;
}
.term-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px 28px; margin:0}
.term{display:flex; gap:10px; font-size:14.5px; padding:5px 0; border-bottom:1px dashed var(--line)}
.term dt{flex:0 0 40%; color:var(--ink); font-weight:700}
.term dd{margin:0; color:var(--ink-soft)}

@media (max-width:640px){
  main.ref{padding:16px 12px 32px}
  .term-grid{grid-template-columns:1fr}
}