/* PANACHES KNOWLEDGE — index des glossaires et parcours alphabétique ou thématique des termes. */

@layer components {
    .knowledge-directory-section {
        background:
            radial-gradient(
                circle at 100% 0,
                color-mix(in srgb, var(--amber) 10%, transparent),
                transparent 30rem
            ),
            var(--section-soft);
    }

    .knowledge-search-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 1rem;
        align-items: end;
        padding: 1.15rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: color-mix(in srgb, var(--white) 92%, transparent);
        box-shadow: var(--shadow-sm);
    }

    .knowledge-search-bar__field {
        display: grid;
        gap: 0.45rem;
    }

    .knowledge-search-bar__field label {
        color: var(--ink);
        font-size: 0.8rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .knowledge-search-bar__field input {
        width: 100%;
        min-height: 3.2rem;
        padding: 0.8rem 1rem;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--white);
        color: var(--ink);
        font: inherit;
    }

    .knowledge-search-bar__field input:focus {
        border-color: var(--mauve);
        outline: 3px solid color-mix(in srgb, var(--mauve) 18%, transparent);
        outline-offset: 1px;
    }

    .knowledge-search-bar__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.65rem;
    }

    .knowledge-results-heading {
        display: flex;
        justify-content: space-between;
        margin: 1.75rem 0 1rem;
        color: var(--muted);
    }

    .knowledge-results-heading p {
        margin: 0;
    }

    .knowledge-results-heading strong {
        color: var(--ink);
        font-size: 1.25rem;
    }

    .knowledge-library-invite {
        width: fit-content;
        max-width: 100%;
        padding: 0.65rem 0.85rem;
        margin: 0 0 1.25rem;
        border-left: 3px solid var(--mauve);
        border-radius: 0 var(--radius) var(--radius) 0;
        background: color-mix(in srgb, var(--mauve) 7%, var(--white));
        color: var(--muted);
        font-size: 0.88rem;
        line-height: 1.5;
    }

    .knowledge-library-invite p {
        margin: 0;
    }

    .knowledge-library-invite a {
        color: var(--ink);
        font-weight: 800;
        text-underline-offset: 0.18em;
    }

    .knowledge-library-invite a:hover,
    .knowledge-library-invite a:focus-visible {
        color: var(--mauve);
    }

    .knowledge-view-switcher {
        display: inline-flex;
        gap: 0.35rem;
        padding: 0.35rem;
        margin-top: 1rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--white);
        box-shadow: var(--shadow-sm);
    }

    .knowledge-view-switcher__link {
        padding: 0.62rem 1rem;
        border-radius: 999px;
        color: var(--muted);
        font-size: 0.85rem;
        font-weight: 800;
        text-decoration: none;
    }

    .knowledge-view-switcher__link:hover,
    .knowledge-view-switcher__link:focus-visible {
        color: var(--mauve);
    }

    .knowledge-view-switcher__link.is-active {
        color: var(--white);
        background: linear-gradient(135deg, var(--amber), var(--rose) 52%, var(--mauve));
        box-shadow: 0 16px 40px rgb(211, 34, 110, 0.24);
    }

    .glossaries-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
        gap: 1.25rem;
    }

    .knowledge-card--tone-1 {
        --knowledge-card-background: #f7e77a;
        --knowledge-card-foreground: #25216f;
        --knowledge-card-accent: #5a54be;
    }

    .knowledge-card--tone-2 {
        --knowledge-card-background: #bfe8fa;
        --knowledge-card-foreground: #183c67;
        --knowledge-card-accent: #1269d3;
    }

    .knowledge-card--tone-3 {
        --knowledge-card-background: #d6f1df;
        --knowledge-card-foreground: #174c42;
        --knowledge-card-accent: #168f7e;
    }

    .knowledge-card--tone-4 {
        --knowledge-card-background: #ead9fa;
        --knowledge-card-foreground: #4b166d;
        --knowledge-card-accent: #8b3db9;
    }

    .knowledge-card--tone-5 {
        --knowledge-card-background: #ffd9c7;
        --knowledge-card-foreground: #702f1b;
        --knowledge-card-accent: #d45b2f;
    }

    .knowledge-card--tone-6 {
        --knowledge-card-background: #dce3ff;
        --knowledge-card-foreground: #242f78;
        --knowledge-card-accent: #495bd4;
    }

    .knowledge-glossary-card {
        position: relative;
        display: grid;
        grid-template-rows: auto 1fr auto;
        min-height: 100%;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--knowledge-card-foreground) 18%, transparent);
        border-radius: var(--radius-lg);
        background: var(--knowledge-card-background);
        color: var(--knowledge-card-foreground);
        box-shadow: var(--shadow-sm);
        transition:
            box-shadow 180ms ease,
            transform 180ms ease;
    }

    .knowledge-glossary-card:hover,
    .knowledge-glossary-card:focus-within {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
    }

    .knowledge-glossary-card__media {
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: color-mix(
            in srgb,
            var(--knowledge-card-accent) 24%,
            var(--knowledge-card-background)
        );
    }

    .knowledge-glossary-card__media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .knowledge-glossary-card__monogram {
        display: grid;
        min-height: 8rem;
        padding: 1rem 1.35rem 0;
        color: color-mix(
            in srgb,
            var(--knowledge-card-accent) 78%,
            var(--knowledge-card-foreground)
        );
        font-family: var(--font-display);
        font-size: clamp(4.5rem, 10vw, 7.5rem);
        font-weight: 800;
        line-height: 0.9;
        place-items: end start;
    }

    .knowledge-glossary-card__content {
        display: grid;
        gap: 0.75rem;
        align-content: start;
        padding: 1.35rem 1.4rem 0.75rem;
    }

    .knowledge-glossary-card__meta {
        width: max-content;
        padding: 0.3rem 0.65rem;
        margin: 0;
        border: 1px solid currentcolor;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .knowledge-glossary-card__link {
        color: inherit;
        text-decoration: none;
    }

    .knowledge-glossary-card__link::after {
        position: absolute;
        content: '';
        inset: 0;
    }

    .knowledge-glossary-card__link:focus-visible {
        border-radius: var(--radius-sm);
        outline: 3px solid currentcolor;
        outline-offset: 4px;
    }

    .knowledge-glossary-card__summary {
        margin: 0;
        font-size: 1rem;
        line-height: 1.65;
    }

    .knowledge-glossary-card__footer {
        display: flex;
        justify-content: flex-end;
        padding: 0.75rem 1.4rem 1.25rem;
        font-size: 0.86rem;
    }

    /* --- Rubriques de KNOWLEDGE : même barre que CULTURE ---------------------------------- */
    .knowledge-section-navigation {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
        gap: 0.7rem;
        margin-bottom: 1rem;
    }

    .knowledge-section-navigation__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.9rem 1rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--white);
        color: var(--ink);
        text-decoration: none;
        transition:
            border-color 160ms ease,
            box-shadow 160ms ease;
    }

    .knowledge-section-navigation__item:hover,
    .knowledge-section-navigation__item:focus-visible {
        border-color: var(--mauve);
        box-shadow: var(--shadow-sm);
    }

    .knowledge-section-navigation__item strong {
        color: var(--mauve);
    }

    .knowledge-section-navigation__item.is-active {
        border-color: transparent;
        background: linear-gradient(135deg, var(--mauve), #ff8f3d);
        color: var(--white);
    }

    .knowledge-section-navigation__item.is-active strong {
        color: #16122b;
    }

    /* --- Sommaire des fiches genres --------------------------------------------------------- */
    .knowledge-genre-chapter {
        margin-top: 2.5rem;
    }

    /* Une carte seule dans son chapitre garde sa taille : `auto-fit` l'étirerait sur toute la largeur. */
    .knowledge-genre-chapter .glossaries-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    }

    /* Au-dessus du lien étiré de la carte : chaque sous-genre ouvre sa propre fiche. */
    .knowledge-genre-card__children {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin: 0.9rem 0 0;
        padding: 0;
        list-style: none;
    }

    .knowledge-genre-card__children a {
        display: inline-block;
        padding: 0.2rem 0.6rem;
        border: 1px solid color-mix(in srgb, var(--knowledge-card-foreground) 35%, transparent);
        border-radius: 999px;
        color: inherit;
        font-size: 0.82rem;
        text-decoration: none;
    }

    .knowledge-genre-card__children a:hover,
    .knowledge-genre-card__children a:focus-visible {
        background: color-mix(in srgb, var(--knowledge-card-foreground) 12%, transparent);
    }

    .knowledge-genre-card__footer {
        justify-content: space-between;
        gap: 0.75rem;
    }

    /* --- Fiche d'un genre ------------------------------------------------------------------- */
    .genre-sheet__cover {
        margin: 1.25rem 0 0;
        text-align: center;
    }

    .genre-sheet__cover img {
        max-width: 100%;
        max-height: 26rem;
        border-radius: var(--radius-lg);
    }

    .genre-sheet__cover figcaption {
        margin-top: 0.5rem;
        color: var(--muted);
        font-size: 0.82rem;
    }

    .genre-sheet__child-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
        gap: 0.9rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .genre-sheet__child-list li {
        padding: 0.9rem 1rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--white);
    }

    .genre-sheet__child-list a {
        font-weight: 800;
    }

    .genre-sheet__child-list p {
        margin: 0.35rem 0 0;
        font-size: 0.92rem;
        line-height: 1.5;
    }

    .genre-sheet__catalogue-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem 0.9rem;
        align-items: baseline;
        margin: 1.1rem 0 0;
    }

    .knowledge-term-card__sheet {
        margin: 0.6rem 0 0;
        font-weight: 700;
    }

    .knowledge-detail-hero__count {
        width: max-content;
        padding: 0.4rem 0.75rem;
        border: 1px solid color-mix(in srgb, var(--white) 40%, transparent);
        border-radius: 999px;
        font-size: 0.88rem;
    }

    .knowledge-alphabet {
        position: sticky;
        z-index: 5;
        top: calc(var(--site-header-height) + 0.875rem);
        display: flex;
        gap: 0.45rem;
        padding: 0.75rem;
        margin-bottom: 2.5rem;
        overflow-x: auto;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: color-mix(in srgb, var(--white) 94%, transparent);
        box-shadow: var(--shadow-sm);
        scrollbar-width: thin;
    }

    .knowledge-alphabet__link {
        display: grid;
        min-width: 2.9rem;
        min-height: 2.9rem;
        flex: 0 0 auto;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--white);
        color: var(--ink);
        font-weight: 900;
        line-height: 1;
        text-align: center;
        text-decoration: none;
        place-content: center;
    }

    .knowledge-alphabet__link small {
        margin-top: 0.25rem;
        color: var(--muted);
        font-size: 0.62rem;
        font-weight: 700;
    }

    .knowledge-alphabet__link:hover,
    .knowledge-alphabet__link:focus-visible {
        border-color: var(--mauve);
        background: var(--mauve);
        color: var(--white);
    }

    .knowledge-alphabet__link:hover small,
    .knowledge-alphabet__link:focus-visible small {
        color: inherit;
    }

    .knowledge-theme-toc {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
        margin-bottom: 3rem;
    }

    .knowledge-theme-toc__link {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.85rem;
        align-items: center;
        min-height: 5.5rem;
        padding: 1rem 1.1rem;
        border: 1px solid color-mix(in srgb, var(--knowledge-card-foreground) 18%, transparent);
        border-radius: var(--radius-md);
        background: var(--knowledge-card-background);
        color: var(--knowledge-card-foreground);
        text-decoration: none;
        transition:
            box-shadow 160ms ease,
            transform 160ms ease;
    }

    .knowledge-theme-toc__link:hover,
    .knowledge-theme-toc__link:focus-visible {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .knowledge-theme-toc__number {
        font-family: var(--font-display);
        font-size: 1.6rem;
        font-weight: 800;
    }

    .knowledge-theme-toc__link strong {
        line-height: 1.3;
    }

    .knowledge-theme-toc__link small {
        font-size: 0.72rem;
        font-weight: 800;
        white-space: nowrap;
    }

    .knowledge-terms {
        display: grid;
        gap: 3.5rem;
    }

    .knowledge-letter-section {
        display: grid;
        gap: 1.25rem;
        scroll-margin-top: calc(var(--site-header-height) + 6.125rem);
    }

    .knowledge-letter-section__heading {
        display: flex;
        gap: 1rem;
        align-items: end;
        padding-bottom: 0.85rem;
        border-bottom: 2px solid var(--ink);
    }

    .knowledge-letter-section__heading p {
        margin: 0;
        color: var(--muted);
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .knowledge-theme-section {
        display: grid;
        gap: 1.25rem;
        scroll-margin-top: calc(var(--site-header-height) + 2.625rem);
    }

    .knowledge-theme-section__heading {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 1rem;
        align-items: center;
        padding: 1.15rem 0;
        border-top: 2px solid var(--ink);
        border-bottom: 1px solid var(--line);
    }

    .knowledge-theme-section__heading > span {
        color: var(--mauve);
        font-family: var(--font-display);
        font-size: clamp(2.4rem, 5vw, 4.5rem);
        font-weight: 800;
        line-height: 1;
    }

    .knowledge-theme-section__heading p {
        margin: 0.4rem 0 0;
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .terms-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
        align-items: stretch;
    }

    .knowledge-term-card {
        position: relative;
        min-width: 0;
        padding: clamp(1.35rem, 2.4vw, 2rem);
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--knowledge-card-foreground) 18%, transparent);
        border-radius: var(--radius-lg);
        background: var(--knowledge-card-background);
        color: var(--knowledge-card-foreground);
        box-shadow: var(--shadow-sm);
        scroll-margin-top: calc(var(--site-header-height) + 6.125rem);
    }

    .knowledge-term-card::before {
        position: absolute;
        width: 0.5rem;
        background: var(--knowledge-card-accent);
        content: '';
        inset: 0 auto 0 0;
    }

    .knowledge-term-card__anchor-link {
        color: inherit;
        text-decoration: none;
    }

    .knowledge-term-card__anchor-link:hover,
    .knowledge-term-card__anchor-link:focus-visible {
        text-decoration: underline;
        text-decoration-thickness: 0.12em;
        text-underline-offset: 0.18em;
    }

    .knowledge-term-card__definition {
        max-width: 68ch;
        font-size: 1rem;
        line-height: 1.7;
    }

    .knowledge-term-card__definition :first-child {
        margin-top: 0;
    }

    .knowledge-term-card__definition :last-child {
        margin-bottom: 0;
    }

    .knowledge-term-card__permalink {
        position: absolute;
        top: 1rem;
        right: 1rem;
        display: grid;
        width: 2rem;
        height: 2rem;
        border: 1px solid color-mix(in srgb, var(--knowledge-card-foreground) 30%, transparent);
        border-radius: 50%;
        color: inherit;
        font-family: var(--font-mono);
        font-weight: 800;
        text-decoration: none;
        opacity: 0.7;
        place-items: center;
    }

    .knowledge-term-card__permalink:hover,
    .knowledge-term-card__permalink:focus-visible {
        background: var(--knowledge-card-foreground);
        color: var(--knowledge-card-background);
        opacity: 1;
    }

    .knowledge-term-card:target {
        outline: 4px solid var(--knowledge-card-accent);
        outline-offset: 4px;
    }

    .knowledge-term-card__library {
        margin-top: 1rem;
    }

    /* Rétroliens « Cité dans » : les articles qui emploient ce terme, discrets sous la définition. */
    .knowledge-term-card__backlinks {
        max-width: 68ch;
        margin: 0.8rem 0 0;
        padding-top: 0.6rem;
        border-top: 1px solid currentcolor;
        border-top-color: color-mix(in srgb, currentcolor 18%, transparent);
        font-size: 0.88rem;
        line-height: 1.5;
    }

    .knowledge-term-card__backlinks-label {
        margin-right: 0.25rem;
        font-weight: 700;
    }

    .knowledge-term-card__backlinks a {
        color: inherit;
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.17em;
    }
}

@layer overrides {
    @media (max-width: 960px) {
        .terms-grid,
        .knowledge-theme-toc {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    @media (max-width: 720px) {
        .knowledge-search-bar {
            grid-template-columns: minmax(0, 1fr);
        }

        .knowledge-search-bar__actions .button {
            flex: 1 1 auto;
        }

        .knowledge-alphabet {
            top: calc(var(--site-header-height) + 0.125rem);
            margin-inline: -0.5rem;
            border-radius: var(--radius);
        }

        .knowledge-theme-toc__link {
            grid-template-columns: auto minmax(0, 1fr);
        }

        .knowledge-theme-toc__link small {
            grid-column: 2;
        }
    }

    /* Téléphone : glossaires et termes au moins 2 par rangée, comme MEDIA, OUTILS et CULTURE
       (10 octobre 2026) — même réglage `--phone-card-min`/`--phone-card-gap` (public_site 01-tokens.css).
       Un glossaire compte jusqu'à ~820 termes : en 1 colonne, ~290 px de défilement par terme en 390 px,
       dont ~80 px pour le bouton bibliothèque. Les définitions restent courtes (55-180 caractères), elles
       tiennent en 5-7 lignes sur une demi-largeur. Placé après le bloc 960 px qui remet `.terms-grid` sur
       1 colonne. Titres et bouton : bloc hors couche en fin de fichier (règles concurrentes hors couche). */
    @media (max-width: 620px) {
        .glossaries-grid,
        .terms-grid {
            grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--phone-card-min)), 1fr));
            gap: var(--phone-card-gap);
        }

        .knowledge-terms {
            gap: 2.25rem;
        }

        .knowledge-letter-section,
        .knowledge-theme-section {
            gap: 0.9rem;
        }

        /* --- Carte de glossaire ------------------------------------------------------------- */
        .knowledge-glossary-card__monogram {
            min-height: 4.5rem;
            padding: 0.6rem 0.75rem 0;
            font-size: 2.8rem;
        }

        .knowledge-glossary-card__content {
            gap: 0.4rem;
            padding: 0.7rem 0.75rem 0.85rem;
        }

        .knowledge-glossary-card__meta {
            padding: 0.15rem 0.45rem;
            font-size: 0.6rem;
            letter-spacing: 0.04em;
        }

        .knowledge-glossary-card__summary {
            display: -webkit-box;
            overflow: hidden;
            font-size: 0.82rem;
            line-height: 1.45;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            line-clamp: 3;
        }

        /* « Voir le glossaire → » : la carte entière est le lien. */
        .knowledge-glossary-card__footer {
            display: none;
        }

        /* --- Carte de terme ----------------------------------------------------------------- */
        /* Colonne flexible : le bouton bibliothèque descend en bas de la carte, aligné avec sa voisine de
           rangée (les deux cartes d'une rangée ont la même hauteur, la plus courte gardait un vide dessous). */
        .knowledge-term-card {
            display: flex;
            flex-direction: column;
            padding: 0.7rem 0.7rem 0.75rem 0.95rem;
        }

        .knowledge-term-card::before {
            width: 0.3rem;
        }

        .knowledge-term-card__definition {
            font-size: 0.82rem;
            line-height: 1.45;
        }

        .knowledge-term-card__backlinks {
            margin-top: 0.5rem;
            padding-top: 0.4rem;
            font-size: 0.74rem;
            line-height: 1.4;
        }

        .knowledge-term-card__permalink {
            top: 0.45rem;
            right: 0.45rem;
            width: 1.5rem;
            height: 1.5rem;
            font-size: 0.75rem;
        }

        .knowledge-term-card__library {
            padding-top: 0.6rem;
            margin-top: auto;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .knowledge-glossary-card {
            transition: none;
        }

        .knowledge-glossary-card:hover,
        .knowledge-glossary-card:focus-within {
            transform: none;
        }
    }

    @media print {
        .knowledge-search-bar,
        .knowledge-view-switcher,
        .knowledge-alphabet,
        .knowledge-theme-toc,
        .knowledge-term-card__permalink {
            display: none;
        }

        .terms-grid {
            grid-template-columns: minmax(0, 1fr);
        }

        .knowledge-term-card {
            break-inside: avoid;
            box-shadow: none;
        }
    }
}

/* Titres KNOWLEDGE — hors couche, délibérément (10 octobre 2026). `.section h2/h3` (03-layout.css) est hors
   couche et gagne TOUJOURS contre une règle placée dans une @layer : écrites dans `@layer components`, ces
   règles étaient ignorées sans erreur — titres de glossaire à 3rem au lieu de 1.75rem, titres de thème à
   3rem au lieu de 2.15rem, grandes lettres de la vue alphabétique bridées à 3rem au lieu de 6rem, marge
   sous le titre de terme supprimée. Même piège que les cartes CULTURE (8 octobre 2026). Sélecteurs à deux
   classes (0,2,x) pour l'emporter sur `.section h2/h3` (0,1,1) quel que soit l'ordre de chargement. */
.knowledge-glossary-card .knowledge-glossary-card__content > h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    line-height: 1.2;
}

.knowledge-genre-card .knowledge-glossary-card__content > h3 {
    margin: 0;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    line-height: 1.2;
}

.knowledge-directory-section .knowledge-genre-chapter > h2 {
    margin: 0 0 1.1rem;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.2;
}

.knowledge-term-card .knowledge-term-card__title {
    padding-right: 2rem;
    margin: 0 0 0.9rem;
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    line-height: 1.2;
}

.knowledge-letter-section .knowledge-letter-section__heading h2 {
    margin: 0;
    color: var(--mauve);
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 8vw, 6rem);
    line-height: 0.78;
}

.knowledge-theme-section .knowledge-theme-section__heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.45rem, 2.6vw, 2.15rem);
    line-height: 1.2;
}

@media (max-width: 720px) {
    .knowledge-letter-section .knowledge-letter-section__heading h2 {
        font-size: 3.5rem;
    }
}

/* Téléphone, 2 cartes par rangée (voir le bloc `@layer overrides` ci-dessus) : tailles de titres, et bouton
   bibliothèque resserré — `.button` (04-components.css) est hors couche, une règle en couche ne pourrait
   réduire ni sa hauteur minimale ni ses marges internes. */
@media (max-width: 620px) {
    .knowledge-glossary-card .knowledge-glossary-card__content > h2 {
        overflow-wrap: anywhere;
        font-size: 0.98rem;
    }

    .knowledge-genre-card .knowledge-glossary-card__content > h3 {
        overflow-wrap: anywhere;
        font-size: 0.98rem;
    }

    /* Césure (langue de `<html lang>`) avant la coupe brute : « postsynchroni-sation », pas
       « postsynchronisati / on » dans une colonne de ~130 px. */
    .knowledge-term-card .knowledge-term-card__title {
        padding-right: 1.4rem;
        margin-bottom: 0.4rem;
        overflow-wrap: anywhere;
        font-size: 0.95rem;
        hyphens: auto;
    }

    .knowledge-term-card__library .button {
        width: 100%;
        min-height: 0;
        padding: 0.4rem 0.5rem;
        font-size: 0.68rem;
        line-height: 1.25;
    }
}