/* ==========================================================================
   Glossaire — le mot souligné dans le texte, sa fiche, et l'écran complet
   Composants : js/components/glossary.js et js/screens/glossary.js
   ========================================================================== */

/* Le mot dans la prose : un bouton qui ne casse pas la ligne. Souligné en
   pointillé, pas en plein — c'est une définition, pas un lien de navigation. */
.glossary-term{
  display:inline;
  padding:0;border:0;
  background:none;
  color:inherit;
  font:inherit;
  text-decoration:underline dotted var(--color-accent);
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
  cursor:help;
}
.glossary-term:hover{color:var(--color-accent-strong);text-decoration-style:solid}
.glossary-term:focus-visible{outline:2px solid var(--color-accent-strong);outline-offset:2px;border-radius:2px}

.glossary-panel{
  width:min(420px,calc(100vw - 32px));
  max-height:min(70vh,520px);
  overflow-y:auto;
  margin:auto;padding:20px;
  border:1px solid var(--color-border-strong);
  border-radius:var(--radius-card);
  background:var(--color-surface-high);
  color:var(--color-text);
  box-shadow:var(--shadow-float);
}
.glossary-panel::backdrop{background:rgba(20,20,19,.32)}
.glossary-panel-head{display:grid;gap:2px;margin-bottom:10px}
.glossary-panel h3{font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.glossary-short{font-size:1rem;line-height:1.5}
.glossary-long{margin-top:10px;color:var(--color-secondary);font-size:.94rem;line-height:1.5}
.glossary-all{display:inline-block;margin-top:14px;min-height:44px;padding-block:12px}

/* --- l'écran ------------------------------------------------------------- */
.glossary-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.glossary-search{
  flex:1 1 240px;min-height:48px;padding:10px 14px;
  border:1px solid var(--color-border-strong);border-radius:var(--radius-button);
  background:var(--color-surface);color:var(--color-text);font-size:1rem;
}
.glossary-search:focus-visible{outline:2px solid var(--color-accent-strong);outline-offset:2px}
.glossary-count{color:var(--color-secondary);font-family:var(--font-mono);font-size:.78rem}

.glossary-list{display:grid;gap:14px}
.glossary-entry{
  display:grid;gap:6px;
  padding:18px 20px;
  border:1px solid var(--color-border);border-radius:var(--radius-card);
  background:var(--color-surface);
  scroll-margin-top:96px;
}
.glossary-entry[hidden]{display:none}
.glossary-entry h2{font-size:1.15rem;font-weight:600;letter-spacing:-.02em}
.glossary-see{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px}
.glossary-see .eyebrow{margin-right:2px}

@media(max-width:560px){
  .glossary-panel{padding:16px}
  .glossary-entry{padding:16px}
}