/* ============================================
   GLOSSARY PAGE (/glossary)
   Grille responsive de cards stats avec filtres recherche + categorie.
   ============================================ */

.glossary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
}

/* Cible des liens « i » de l'app : sans cette marge, la fiche arrive sous la
   navbar fixe (56px). */
.glossary-card {
    scroll-margin-top: 72px;
    /* Effet hover subtle : leger lift + bordure plus contrastee. */
    cursor: default;
}

.glossary-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-border) !important;
    box-shadow: var(--shadow-md) !important;
}

@media (max-width: 600px) {
    .glossary-grid {
        grid-template-columns: 1fr;
    }
}

/* ----- Sections par categorie (pages/glossary._category_sections) -----
   Desktop : display: contents, la grille ne voit que les fiches.
   Mobile (specs/mobile/pages-contenu/SPEC.md) : en-tete colle, recherche
   collee, sections repliables (.m-acc), fiche cible mise en evidence. */
.gl-sec { display: contents; }
.gl-back { display: none; }

@media (max-width: 1023.98px) {   /* bp mobile */
    .gl-page { --m-head-h: 56px; }
    .gl-bar {
        position: sticky;
        top: calc(var(--nav-h) + var(--m-head-h));
        z-index: 780;
        margin: 0 0 12px !important;
        padding: 8px 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: var(--color-bg-page) !important;
        box-shadow: none !important;
    }
    .gl-bar > :not(#glossary-search):not(.mantine-TextInput-root) { display: none !important; }
    .gl-bar .mantine-TextInput-root { flex: 1 1 100% !important; max-width: none !important; min-width: 0 !important; }
    .glossary-grid { display: flex; flex-direction: column; gap: 8px; }
    .gl-sec { display: block; }
    .gl-sec.gl-none { display: none; }
    .gl-sec > .glossary-card + .glossary-card { margin-top: 8px; }
    .glossary-card {
        padding: 12px 14px !important;
        scroll-margin-top: calc(var(--nav-h) + var(--m-head-h) + 64px);
    }
    .glossary-card:hover { transform: none; }
    .glossary-card.gl-hit { outline: 2px solid var(--color-primary); outline-offset: 2px; }
    .gl-tech { display: none !important; }
    .gl-back.show {
        display: block;
        min-height: 40px;
        margin: 8px 0;
        padding: 0 12px;
        border: 1px solid var(--color-border);
        border-radius: 10px;
        background: transparent;
        color: var(--color-primary-hover);
        font-size: 13px;
        font-weight: 600;
    }
}