/*
 * Novadev Glossaire — Frontend CSS
 * Accent: #c9ada7 (rose poudré) / #22223b (bleu nuit)
 * Toutes les tailles de police et couleurs de texte héritent du thème.
 */

:root {
    --ndgl-accent:      #c9ada7;
    --ndgl-dark:        #22223b;
    --ndgl-accent-hover:#b8918b;
    --ndgl-dark-hover:  #3a3a5c;
    --ndgl-radius:      0px;
    --ndgl-gap:         1.5rem;
    --ndgl-border:      1px solid #e8e8e8;
    --ndgl-shadow:      none;
}

.page-id-8592 #qodef-page-inner {
    padding: 100px 0 160px;
}
.single-ndgl_mot #qodef-page-inner {
    padding: 60px 0 160px;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.ndgl-wrapper {
    width: 100%;
    max-width: 100%;
}

/* ── Filtre catégories ───────────────────────────────────────────────────── */

.ndgl-categories-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 3rem;
}

.ndgl-cat-btn {
    display: inline-block;
    padding: .45rem 1.5rem;
    border: 1px solid #d0d0d0;
    background: transparent;
    color: black;
    font-family: inherit;
    /* font-size: .875rem; */
    cursor: pointer;
    border-radius: 999px;
    transition: background .2s, border-color .2s, color .2s;
    line-height: 1.4;
}

.ndgl-cat-btn:hover,
.ndgl-cat-btn.active {
    background: var(--ndgl-dark);
    border-color: var(--ndgl-dark);
    color: #fff;
}

/* ── Navigation alphabétique ─────────────────────────────────────────────── */

.ndgl-alpha-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-bottom: 3.5rem;
    padding: .75rem 0;
    border-top: var(--ndgl-border);
    justify-content: space-between;
    border-bottom: var(--ndgl-border);
}

.ndgl-alpha-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 1.875rem;
    font-weight: 500;
    color: var(--ndgl-dark);
    text-decoration: none;
    border-radius: 3px;
    transition: background .15s, color .15s;
    font-family: 'Raleway';
}

.ndgl-alpha-link.has-entries:hover {
    background: var(--ndgl-accent);
    color: #fff;
}

.ndgl-alpha-link.no-entries {
    color: #ccc;
    pointer-events: none;
    cursor: default;
}

/* ── Groupe de lettres ───────────────────────────────────────────────────── */

.ndgl-letter-group {
    margin-bottom: 2.5rem;
}

.ndgl-letter-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.ndgl-letter-char {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--ndgl-dark);
    flex-shrink: 0;
    min-width: 2rem;
    line-height: 1;
}

.ndgl-letter-hr {
    flex: 1;
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 0;
}

/* ── Grille des mots ─────────────────────────────────────────────────────── */

.ndgl-mots-grid {
    display: grid;
    gap: 2.5rem;
}


.ndgl-mots-grid.ndgl-cols-1 { grid-template-columns: 1fr; }
.ndgl-mots-grid.ndgl-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ndgl-mots-grid.ndgl-cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 640px) {
    .ndgl-mots-grid.ndgl-cols-2,
    .ndgl-mots-grid.ndgl-cols-3 {
        grid-template-columns: 1fr;
    }

    .ndgl-mot-link {
        flex-direction: column;
    }
}

/* ── Item mot (liste) ────────────────────────────────────────────────────── */

.ndgl-mot-item {
    border-bottom: 1px solid #f0f0f0;
}

.ndgl-mot-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    text-decoration: none;
    color: inherit;
    transition: color .15s;
}

.ndgl-mot-link:hover {
    color: var(--ndgl-accent);
}

.ndgl-mot-titre {
    font-weight: 600;
    color: #272727;
}

.ndgl-mot-titre:hover {
    color: #c9ada7 !important;
}

.ndgl-mot-cats {
    font-size: 1.8rem;
    color: #4d4d4d;
    white-space: nowrap;
}

/* ── AJAX loading ────────────────────────────────────────────────────────── */

.ndgl-liste-inner.ndgl-loading {
    opacity: .4;
    pointer-events: none;
    transition: opacity .2s;
}

.ndgl-empty {
    color: #888;
    font-style: italic;
    padding: 2rem 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE DÉTAIL
   ══════════════════════════════════════════════════════════════════════════ */

.ndgl-single-wrapper {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

/* ── Fil d'ariane ─────────────────────────────────────────────────────── */

.ndgl-breadcrumb {
    color: #888;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-top: 30px;
}

.ndgl-breadcrumb a {
    color: #888;
    text-decoration: none;
}

.ndgl-breadcrumb a:hover {
    color: var(--ndgl-accent);
}

.ndgl-bc-sep {
    color: #ccc;
}

/* ── En-tête article ─────────────────────────────────────────────────── */

.ndgl-single-header {
    margin-bottom: 2rem;
}

.ndgl-single-cats {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .75rem;
    font-size: 1.5rem;
    color: white;
    background: #4a4e69;
    padding: 2px 12px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.ndgl-single-cats:hover a {
    text-decoration: none;
}

.ndgl-cat-tag {
    color: inherit;
    text-decoration: none;
}

.ndgl-cat-tag:hover {
    color: var(--ndgl-accent);
}

.ndgl-single-title {
    font-size: 3.5rem;
    line-height: 1.2;
    color: black;
    margin: 20px 0 .75rem;
}

.ndgl-single-meta {
    color: #999;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.ndgl-meta-sep { color: #ddd; }

/* ── Contenu ─────────────────────────────────────────────────────────── */

.ndgl-single-content {
    line-height: 1.8;
    margin-top: 30px !important;
}

.ndgl-single-content h3 {
    font-size: 22px !important;
}

.ndgl-single-content h2 {
    font-size: 26px !important;
}

.ndgl-single-content p {
    margin-bottom: 1.25em;
}

/* ── Section "Autres définitions" ───────────────────────────────────── */

.ndgl-related-section {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: var(--ndgl-border);
}

.ndgl-related-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ndgl-dark);
    margin-bottom: 1.5rem;
}

.ndgl-related-grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(220px, 0fr)); */
    gap: 2rem;
}

.ndgl-related-card {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 3.25rem;
    background: #c9ada70f;
    border: var(--ndgl-border);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, background .2s;
}

.ndgl-related-card:hover {
    border-color: var(--ndgl-accent);
    background: #fff;
}

.ndgl-related-card-cat {
    font-size: 13px;
    letter-spacing: .6em;
    font-family: Raleway;
    font-weight: 500;
    text-transform: uppercase;
    font-weight: 500;
    color: #c28562;
}

.ndgl-related-card-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ndgl-dark);
    margin: 0;
    line-height: 1.3;
}

.ndgl-related-card-excerpt {
    /* font-size: .875rem; */
    color: #777;
    margin: 0;
    flex: 1;
    line-height: 1.5;
    margin-top: 10px;
}

.ndgl-related-card-more {
    font-size: 1.8rem;
    color: var(--ndgl-accent);
    font-weight: 500;
    margin-top: 1.25rem;
}

.ndgl-related-grid a:hover {
    text-decoration: none !important;
}

.single-ndgl_mot .qodef-page-title {
    background: #4a4e69;
    height: 40px;
}
.single-ndgl_mot .qodef-page-title h1 {
    font-size: 45px;
    display: none;
}

.ndgl-related-card:hover .ndgl-related-card-more {
    color: var(--ndgl-accent-hover);
}

/* ── Retour au glossaire ─────────────────────────────────────────────── */

.ndgl-back-link {
margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: var(--ndgl-border);
    font-size: 1.9rem;
    border-bottom: var(--ndgl-border);
    padding-bottom: 1.5rem;
}

.ndgl-back-link a {
    color: var(--ndgl-dark);
    text-decoration: none;
    font-weight: 500;
}

.ndgl-back-link a:hover {
    color: var(--ndgl-accent);
}