/* ---------- le rail alphabétique ---------- */
.alpha{
  display:flex;gap:2px;flex-wrap:wrap;align-items:center;
  padding:14px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  margin-bottom:clamp(24px,3vw,38px);
}
.alpha a,.alpha span{
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.04em;
  min-width:26px;text-align:center;padding:5px 3px;text-decoration:none;
}
.alpha a{color:var(--accent-txt);transition:background .14s ease,color .14s ease}
.alpha a:hover{background:var(--accent-dim)}
.alpha a:focus-visible{outline:2.5px solid var(--accent);outline-offset:1px}
.alpha span{color:var(--line);cursor:default}   /* lettre sans terme visible */

/* ---------- les entrées ---------- */
.lex{border-top:1px solid var(--line)}
.terme{
  border-bottom:1px solid var(--line);padding:clamp(24px,2.8vw,32px) 0;
  display:grid;grid-template-columns:minmax(0,254px) minmax(0,1fr);
  gap:clamp(18px,3vw,44px);align-items:start;
  scroll-margin-top:120px;   /* la barre de navigation est collante */
}
.terme[hidden]{display:none}
.terme:target{background:var(--accent-dim)}
.terme:target h2{color:var(--accent-txt)}
/* le nom du terme reste en vue pendant la lecture d'une entree longue.
   align-self:stretch est indispensable : sans lui l'element colle a sa propre
   hauteur et le sticky n'a aucune course. */
.t-tete{align-self:stretch}
.t-tete h2,.t-tete .sigle{position:sticky;top:100px}
.t-tete .sigle{top:132px}
.t-tete h2{font-size:clamp(19px,2.1vw,24px);letter-spacing:-.022em;line-height:1.16}
.t-tete .sigle{
  margin-top:8px;font-family:var(--mono);font-size:11.5px;line-height:1.45;
  letter-spacing:.02em;color:var(--muted);
}
.t-corps .def{font-size:clamp(15px,1.45vw,16.5px);line-height:1.62;max-width:66ch}
.t-corps .plus{
  margin-top:14px;font-size:14.5px;line-height:1.66;color:var(--muted);max-width:66ch;
  padding-left:16px;border-left:1.5px solid var(--line);
}
.t-corps .voir{
  margin-top:16px;font-size:13px;color:var(--muted);
  font-family:var(--mono);letter-spacing:.01em;line-height:1.8;
}
.t-corps .voir a{color:var(--accent-txt);font-weight:700;text-decoration:none;
  border-bottom:1px solid var(--accent-dim);transition:border-color .14s ease}
.t-corps .voir a:hover{border-bottom-color:var(--accent)}
.t-corps .voir a:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.terme .code{font-family:var(--mono);font-size:.9em;background:var(--accent-dim);
  padding:1px 5px;word-break:break-word}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .terme{grid-template-columns:minmax(0,1fr);gap:12px}
  .t-tete h2,.t-tete .sigle{position:static}
  .t-tete .sigle{margin-top:5px}
}
@media (max-width:560px){
  .alpha{gap:0}
}