@layer page {

    /* ========================================================
       PHILOSOPHIE HUB — STYLES
       ======================================================== */
    /* ===== 1. SECTIONS & CONTAINERS ===== */
    .topic {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: calc(100vh - 210px);
        padding: 40px 0 80px 0;
    }

    .topic-content {
        max-width: 820px;
        width: 80vw;
        display: flex;
        flex-direction: column;
        gap: 36px;
    }

    /* ===== 2. TEXTE INTRODUCTIF ===== */
    .topic-intro {
        padding: 28px 36px;
    }

    .topic-intro h2 {
        margin: 0 0 12px 0;
    }

    .topic-intro p {
        margin: 0;
    }

    /* ===== 3. GRILLE DES BOX-LINK ===== */
    .topic-links {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* ===== 4. BOX-LINK ===== */
    .topic-card-body {
        padding: 24px 32px 20px;
    }

    .topic-card-body h2 {
        margin: 0 0 8px 0;
    }

    .topic-card-body p {
        margin: 0;
    }

    /* ===== 5. BANDE INFÉRIEURE (accentuation) ===== */
    .topic-card-foot {
        position: relative;
        width: 100%;
        height: 20px;
        overflow: hidden;
    }

    .topic-card-foot::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
    }

    .topic-card:hover .topic-card-foot::after {
        width: 100%;
    }

    /* ===== 6. RESPONSIVE ===== */
    @media (max-width: 800px) {
        .topic-content {
            width: 92vw;

        }
        .topic-intro {
            padding: 22px 24px;

        }
        .topic-card-body {
            padding: 20px 24px 16px;

        }
    }

    @media (max-width: 600px) {
        .topic-content {
            width: 95vw;
            gap: 24px;

        }
    }

    .topic {
        background: var(--raw-color-pearl-2);
    }

    .topic-intro {
        background: var(--raw-color-pearl-1);
        border: 1px solid var(--local-color-decor-essay-topic-intro-line);
        border-radius: var(--local-radius-essay-topic-intro);
    }

    /* Accent : Philosophie générale — rouge */
    .topic-card--essays .topic-card-foot {
        background-color: var(--local-color-decor-essay-topic-card-foot-surface-3);
    }

    /* Accent : Lexique — bleu-violet */
    .topic-card--essays .topic-card-foot::after {
        background-color: var(--local-color-decor-essay-topic-card-foot-surface);
    }

    .topic-card--glossary .topic-card-foot {
        background-color: var(--local-color-decor-essay-topic-card-foot-surface-4);
    }

    .topic-card--glossary .topic-card-foot::after {
        background-color: var(--local-color-decor-essay-topic-card-foot-surface-2);
    }

    .topic-intro h2 {
        font-family: var(--canon-font-figura);
        font-size: var(--canon-size-title);
        font-weight: 700;
        color: var(--raw-color-black-90);
    }

    .topic-intro p {
        font-family: var(--canon-font-oratio);
        font-size: var(--canon-size-body);
        color: var(--raw-color-black-70);
        line-height: var(--canon-leading-reading);
    }

    .topic-card-body h2 {
        font-family: var(--canon-font-figura);
        font-size: var(--canon-size-title);
        font-weight: 700;
        color: var(--raw-color-black-90);
    }

    .topic-card-body p {
        font-family: var(--canon-font-oratio);
        font-size: var(--canon-size-note);
        color: var(--raw-color-black-60);
        line-height: var(--canon-leading-body);
    }

    .topic-card-foot::after {
        content: "";
    }

    .topic-card-foot::after {
        transition: width 0.35s ease;
    }
}