/* =====================================================================
   Opera Populi : glossaire cliquable (ui/glossary.js)
   Terme expliqué (.glossary-term : bouton dans le texte, souligné en pointillés)
   et pop-up partagée (#glossary-pop, API popover : couche supérieure, placée en JS).
   ===================================================================== */
.glossary-term {
  display: inline; font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit;
  font-variation-settings: inherit; text-transform: inherit; vertical-align: baseline;
  text-decoration: underline dotted; text-decoration-thickness: max(1px, .07em); text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, currentColor 70%, transparent);
  border-radius: var(--r-2xs); cursor: help;
  transition: text-decoration-color var(--dur-fast), background-color var(--dur-fast);
}
.glossary-term:hover, .glossary-term[aria-expanded="true"] { text-decoration-color: var(--accent); text-decoration-style: solid; }
.glossary-term[aria-expanded="true"] { background: var(--accent-soft); }
.glossary-term:focus-visible { outline-offset: 2px; }

/* Pop-up : taille et position posées par le JS (largeur 20rem au plus, 8 px du bord de l'écran, hauteur réelle mesurée) ;
   pas de "display" ici (l'API popover la masque tant qu'elle est fermée). */
.glossary-pop {
  position: fixed; inset: auto; margin: 0; box-sizing: border-box;
  width: min(20rem, calc(100vw - 1rem)); max-width: calc(100vw - 1rem); overflow: visible;
  padding: 0; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
  font: var(--fw-regular) var(--fs-sm) / var(--lh-base) var(--font-body); font-style: normal; letter-spacing: normal;
  text-align: left; text-transform: none;
  animation: pop var(--dur) var(--ease-out);
}
.glossary-pop[data-side="above"] { transform-origin: bottom center; }
/* Corps : défilement interne quand la place manque (hauteur réduite par le JS, bornée ici à l'écran) ; la flèche,
   hors du corps, reste visible. */
.glossary-pop__body {
  box-sizing: border-box; max-height: calc(100vh - 1rem - 2px); max-height: calc(100dvh - 1rem - 2px);
  overflow-y: auto; overscroll-behavior: contain; padding: .85rem 1rem .95rem; border-radius: inherit;
}
/* Flèche : tesselle tournée qui vise le mot (--arrow-x) */
.glossary-pop::before {
  content: ""; position: absolute; left: calc(var(--arrow-x, 50%) - 6px);
  width: 12px; height: 12px; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--line); border-radius: 2px; rotate: 45deg;
}
.glossary-pop[data-side="below"]::before { top: -7px; border-right: 0; border-bottom: 0; }
.glossary-pop[data-side="above"]::before { bottom: -7px; border-left: 0; border-top: 0; }
.glossary-pop__title {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem;
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-semibold);
  font-variation-settings: var(--soft); line-height: var(--lh-snug);
}
.glossary-pop__title .tessera { width: .6em; height: .6em; }
.glossary-pop__text { margin: 0; color: var(--text-muted); overflow-wrap: break-word; }