/* ============================================================
   SM Glossaire — Styles page A-Z + tooltips articles
   Accent science : var(--sml-accent-science, #a855f7) violet
   ============================================================ */

/* ── Navigation alphabétique sticky ── */
.sm-alpha-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  position: sticky;
  top: 169px; /* valeur initiale — surchargée par smUpdateSidebarTop() */
  z-index: 10;
  background: var(--sml-bg, #0d0d0d);
  padding: 10px 0 12px;
  margin-bottom: 24px;
  border-bottom: 1px solid #374151;
}
.sm-glossaire-wrap .sm-alpha-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 4px;
  color: #9ca3af !important;
  font-family: var(--sml-font-body, 'Nunito', sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* Panels lettre — masqués sauf actif */
.sm-alpha-panel { display: none; }
.sm-alpha-panel.active { display: block; }
.sm-glossaire-wrap .sm-alpha-link:hover,
.sm-glossaire-wrap .sm-alpha-link.active {
  background: var(--sml-accent-science, #a855f7) !important;
  border-color: var(--sml-accent-science, #a855f7) !important;
  color: #fff !important;
}

/* ── Section par lettre ── */
.sm-groupe { margin-bottom: 32px; }

.sm-lettre-header {
  font-family: var(--sml-font-display, 'Crushed', cursive) !important;
  font-size: 2rem !important;
  font-weight: 400 !important;
  color: var(--sml-accent-science, #a855f7) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px;
  margin: 0 0 16px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid #374151;
  line-height: 1.1;
}

/* ── Grille des termes ── */
.sm-groupe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* ── Carte d'un terme ── */
.sm-terme-item {
  background: #111827;
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  list-style: none;
}
.sm-terme-item:hover {
  border-color: var(--sml-accent-science, #a855f7);
  transform: translateY(-2px);
}

.sm-glossaire-wrap .sm-terme-titre {
  font-family: var(--sml-font-body, 'Nunito', sans-serif) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--sml-accent-science, #a855f7) !important;
  margin: 0 0 8px !important;
  text-transform: none !important;
  line-height: 1.3;
}

.sm-terme-def {
  font-family: var(--sml-font-body, 'Nunito', sans-serif);
  font-size: 0.82rem;
  color: #6b7280;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sm-terme-def p { margin: 0; }

/* ── Tooltips dans les articles ── */
.sm-tooltip-word {
  color: var(--sml-accent-science, #a855f7);
  border-bottom: 1px dashed var(--sml-accent-science, #a855f7);
  cursor: pointer;
  transition: color 0.15s;
}
.sm-tooltip-word:hover { color: #fff; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .sm-groupe-grid { grid-template-columns: 1fr; }
  .sm-alpha-nav { top: 60px; }
}