/* ════════════════════════════════════════════════════════════════════
 *  AKŌ — Glossaire interactif (tooltips au survol)
 *  ───────────────────────────────────────────────────────────────────
 *  Style des termes glossaire auto-wrappés par assets/glossary.js
 *  Validé par Steve 18/05 (audit ChatGPT #213). 13 termes couverts.
 *
 *  Comportement :
 *  - Mot souligné en pointillé cuivré + cursor:help
 *  - Au hover/focus → tooltip ink (#163328) avec label cuivré + définition
 *  - Mobile : focus-within pour le tap (tabindex=0 sur chaque mot)
 *  ════════════════════════════════════════════════════════════════════ */

.ak-glossary {
  text-decoration: underline dotted #b88554;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  cursor: help;
  position: relative;
  color: inherit;
  transition: color 0.2s;
}
.ak-glossary:hover,
.ak-glossary:focus { color: #9a5f2a; outline: none; }
/* Élève le parent au sommet du stacking context quand le tooltip est actif,
   sinon il peut passer sous les éléments des colonnes voisines (bug Xavier
   home 21/05 : tooltip Sourcing masqué par le mot Quiz de la colonne d'à côté). */
.ak-glossary:hover,
.ak-glossary:focus,
.ak-glossary:focus-within { z-index: 9999; }

/* Renfort 02/06/2026 — la règle z-index ci-dessus reste piégée : chaque
   .ah-concept-card (home) porte un transform (anim reveal) = stacking context
   isolé, donc le z-index du terme ne peut pas dépasser la carte VOISINE quand le
   tooltip déborde dessus (bug « le mot Quiz passe par-dessus le tooltip Sourcing »).
   On élève donc la CARTE ENTIÈRE qui contient le terme actif au-dessus de ses
   voisines. :has() supporté par tous les navigateurs courants (2022+). */
.ah-concept-card:has(.ak-glossary:hover),
.ah-concept-card:has(.ak-glossary:focus-within) {
  position: relative;
  z-index: 50;
}
.ak-glossary:focus-visible {
  outline: 2px solid rgba(184, 133, 84, 0.4);
  outline-offset: 2px;
  border-radius: 2px;
}

.ak-glossary-tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 320px;
  background: #163328;
  color: #faf8f2;
  padding: 0.85rem 1rem 0.95rem;
  border-radius: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  text-align: left;
  font-style: normal;
  cursor: default;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  box-shadow: 0 8px 24px rgba(22,51,40,0.18);
  pointer-events: none;
}
/* Flèche du tooltip */
.ak-glossary-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #163328;
}
.ak-glossary-tip-label {
  display: block;
  font-family: 'Noto Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  color: #b88554;
  margin-bottom: 0.3rem;
}

/* Reveal au hover/focus/focus-within (focus-within = tap mobile) */
.ak-glossary:hover .ak-glossary-tip,
.ak-glossary:focus .ak-glossary-tip,
.ak-glossary:focus-within .ak-glossary-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear;
}

/* Positionnement adaptatif si le tooltip déborde du bord droit/gauche */
.ak-glossary-tip[data-pos="left"] {
  left: 0;
  transform: translateX(0) translateY(4px);
}
.ak-glossary-tip[data-pos="left"]::after { left: 20px; transform: translateX(0); }
.ak-glossary:hover .ak-glossary-tip[data-pos="left"],
.ak-glossary:focus .ak-glossary-tip[data-pos="left"],
.ak-glossary:focus-within .ak-glossary-tip[data-pos="left"] {
  transform: translateX(0) translateY(0);
}
.ak-glossary-tip[data-pos="right"] {
  left: auto; right: 0;
  transform: translateX(0) translateY(4px);
}
.ak-glossary-tip[data-pos="right"]::after { left: auto; right: 20px; transform: translateX(0); }
.ak-glossary:hover .ak-glossary-tip[data-pos="right"],
.ak-glossary:focus .ak-glossary-tip[data-pos="right"],
.ak-glossary:focus-within .ak-glossary-tip[data-pos="right"] {
  transform: translateX(0) translateY(0);
}

/* Mobile : tooltip plus étroit */
@media (max-width: 600px) {
  .ak-glossary-tip { max-width: 240px; font-size: 0.78rem; padding: 0.7rem 0.85rem 0.8rem; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ak-glossary-tip { transition: opacity 0.01s ease, visibility 0s linear; }
}


/* ── Petits écrans : le tooltip devient un bandeau fixe en bas (audit 06/07/2026 :
   supprime le débordement horizontal à ~320px, lecture plus confortable) ── */
@media (max-width: 480px) {
  .ak-glossary-tip {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    top: auto;
    width: auto;
    max-width: none;
    transform: none;
  }
  .ak-glossary-tip::after { display: none; }
}