/* 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-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 rgba(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-serif);
        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 h2 {
        margin: 0;
        font-size: clamp(1.35rem, 2.2vw, 1.75rem);
        line-height: 1.2;
    }

    .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;
    }

    .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: 5.25rem;
        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-serif);
        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: 10.5rem;
    }

    .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 h2 {
        margin: 0;
        color: var(--mauve);
        font-family: var(--font-serif);
        font-size: clamp(3.5rem, 8vw, 6rem);
        line-height: 0.78;
    }

    .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: 7rem;
    }

    .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-serif);
        font-size: clamp(2.4rem, 5vw, 4.5rem);
        font-weight: 800;
        line-height: 1;
    }

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

    .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: 10.5rem;
    }

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

    .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-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;
    }
}

@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: 4.5rem;
            margin-inline: -0.5rem;
            border-radius: var(--radius);
        }

        .knowledge-letter-section__heading h2 {
            font-size: 3.5rem;
        }

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

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

    @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;
        }
    }
}