@layer components {
    /* ========================================================
       INDICE MENTIONS — STYLES PARTAGÉS
       indice-abstraction.html & indice-fondamentalite.html
       Niveaux et exemples : dépliants du canon (gbl_disclosure.css), réglés par leurs jetons dans
       gbl_tokens.css (exvae #45-mouvement/depliant-unique).
       ======================================================== */
    /* ===== TEXTE ===== */
    .levels-title {
        margin: 0 0 6px 0;
    }

    .levels-subtitle {
        margin: 0 0 32px 0;
    }

    .levels-item-title {
        margin: 0;
    }

    /* ===== LAYOUT GÉNÉRAL ===== */
    .levels-body {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 60vh;
        padding: 40px 0 80px 0;
    }

    .levels {
        max-width: 900px;
        width: 80vw;
    }

    /* ===== EN-TÊTE DE PAGE ===== */
    .levels-head {
        position: relative;
        padding: 80px 0 20px 0;
        display: flex;
        justify-content: center;
    }

    .levels-head-content {
        max-width: 900px;
        width: 80vw;
        padding: 20px;
    }

    /* ===== NIVEAUX ===== */
    .levels-items {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .levels-item-body {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .levels-item-detail {
        margin: 0;
    }

    .levels-example-content {
        margin: 0;
    }

    @media (max-width: 800px) {
        .levels {
            width: 92vw;

        }
    }

    @media (max-width: 800px) {
        .levels-head-content {
            width: 92vw;

        }
    }

    .levels-body {
        background: var(--essay-canvas);
    }

    .levels-head {
        background: var(--essay-canvas);
    }

    .levels-head-content {
        background-image: linear-gradient(45deg, var(--local-color-decor-levels-head-content-surface), var(--local-color-decor-levels-head-content-surface-2));
        border-radius: var(--local-radius-levels-head-content);
    }

    .levels-items {
        border-top: 1px solid var(--essay-line);
    }

    .levels-title {
        font-family: var(--canon-font-figura);
        font-size: var(--canon-size-headline);
        font-weight: 700;
        color: var(--raw-color-pearl-1);
    }

    .levels-subtitle {
        font-size: var(--canon-size-body);
        color: var(--raw-color-white-90);
        line-height: var(--canon-leading-body);
    }

    .levels-item-title {
        font-family: var(--canon-font-figura);
        font-size: var(--canon-size-title);
        font-weight: 700;
        color: var(--essay-ink);
        text-align: left;
    }

    .levels-item-detail, .levels-example-content {
        font-size: var(--canon-size-body);
        color: var(--essay-muted);
        line-height: var(--canon-leading-body);
    }

    .levels-example-title {
        font-size: var(--canon-size-body);
        font-weight: 600;
        font-style: italic;
        color: var(--essay-muted);
        text-align: left;
    }

    .levels-body {
        transition: background 0.3s ease;
    }

    .levels-head {
        transition: background 0.3s ease;
    }
}