/* Dépliant — modèle canonique ; son emploi : canon_disclosure.md. */

@layer components {
    .disclosure[data-disclosure-motion] {
        overflow: clip;
    }
    .disclosure-summary {
        display: flex;
        align-items: center;
        justify-content: var(--disclosure-summary-justify, space-between);
        gap: var(--disclosure-space, var(--canon-space-2));
        padding: var(--disclosure-summary-padding, var(--canon-space-2) 0);
    }
    .disclosure-summary::-webkit-details-marker {
        display: none;
    }
    .disclosure-summary::after {
        flex: none;
        order: var(--disclosure-marker-position, 0);
        width: var(--disclosure-marker-size, 0.75em);
        height: calc(var(--disclosure-marker-size, 0.75em) / 2 + var(--disclosure-marker-weight, 2px) * 1.4142);
        margin-inline: var(--disclosure-marker-space, 0 0.25em);
    }
    .disclosure-content {
        padding: var(--disclosure-content-padding, 0 0 var(--canon-space-3));
    }

    .disclosure {
        border-block-end: var(--disclosure-line-width, 0px) solid var(--disclosure-line, var(--canon-theme-line));
    }
    .disclosure-summary::after {
        background-color: var(--disclosure-marker-ink, currentColor);
        clip-path: polygon(0 0, 50% calc(100% - var(--disclosure-marker-weight, 2px) * 1.4142), 100% 0, 100% calc(var(--disclosure-marker-weight, 2px) * 1.4142), 50% 100%, 0 calc(var(--disclosure-marker-weight, 2px) * 1.4142));
    }
    [open]:not([data-disclosure-motion="close"]) > .disclosure-summary::after {
        clip-path: polygon(0 calc(100% - var(--disclosure-marker-weight, 2px) * 1.4142), 50% 0, 100% calc(100% - var(--disclosure-marker-weight, 2px) * 1.4142), 100% 100%, 50% calc(var(--disclosure-marker-weight, 2px) * 1.4142), 0 100%);
    }

    .disclosure-summary {
        list-style: none;
        font-size: inherit;
        font-style: var(--disclosure-italic, normal);
        font-weight: var(--disclosure-weight, var(--canon-weight-label));
        color: var(--disclosure-ink,);
    }
    .disclosure-summary:hover {
        color: var(--disclosure-ink-hover, var(--disclosure-ink,));
    }
    .disclosure-content {
        font-size: inherit;
    }
    .disclosure-summary::after {
        content: "";
    }

    .disclosure-summary {
        cursor: pointer;
    }
    .disclosure-summary::after {
        transition: clip-path 250ms cubic-bezier(0.37, 0, 0.63, 1);
    }
}

@layer components {
    .disclosure--style-frame {
        border: var(--canon-line-width) solid var(--disclosure-line, var(--canon-theme-line));
        border-radius: var(--disclosure-radius, var(--canon-radius-control));
        background-color: var(--disclosure-surface, var(--canon-theme-raised));
    }
    .disclosure--style-frame > .disclosure-summary {
        border-radius: var(--disclosure-radius, var(--canon-radius-control));
    }
    .disclosure--style-frame > .disclosure-summary:hover {
        background-color: var(--disclosure-summary-surface-hover, transparent);
    }
    .disclosure--style-frame > .disclosure-content {
        border-block-start: var(--canon-line-width) solid var(--disclosure-line, var(--canon-theme-line));
    }
}

@layer components {
    .disclosure--style-nested {
        padding-inline-start: var(--disclosure-nested-indent, var(--canon-space-3));
    }

    .disclosure--style-nested {
        border-inline-start: var(--disclosure-nested-line-width, 2px) solid var(--disclosure-line, var(--canon-theme-line));
    }
}

/* Part locale — les réglages que l'app pose sur cet objet, contexte par contexte. */

@layer components {
    .disclosure {
        --disclosure-summary-justify: flex-start;
        --disclosure-space: 10px;
        --disclosure-marker-position: -1;
        --disclosure-marker-size: 9px;
        --disclosure-marker-ink: rgb(0 0 0 / 0.7);
    }
    .essay-fields {
        --disclosure-summary-padding: 10px 14px;
        --disclosure-content-padding: 0;
    }
    [data-essay-dark] .disclosure {
        --disclosure-marker-ink: rgb(255 255 255 / 0.7);
    }
    .faq-items .disclosure {
        --disclosure-summary-padding: 16px 0;
        --disclosure-content-padding: 0 0 16px;
        --disclosure-line: rgb(0 0 0 / 0.25);
        --disclosure-line-width: 1px;
    }
    .header-drawer-menu-accordion .disclosure {
        --disclosure-summary-padding: 20px 0;
        --disclosure-content-padding: 0 0 20px 16px;
        --disclosure-line: rgb(0 0 0 / 0.1);
        --disclosure-line-width: 1px;
        --disclosure-weight: 700;
        --disclosure-ink: rgb(0 0 0 / 0.7);
    }
    .glossary-term {
        --disclosure-summary-padding: 0 0 0 16px;
        --disclosure-space: 12px;
        --disclosure-content-padding: 0;
        --disclosure-marker-ink: rgb(255 255 255);
    }
    .essays-group {
        --disclosure-summary-padding: 0.9rem 0.5rem;
        --disclosure-content-padding: 0.5rem 0 0.5rem 1.5rem;
    }
    .essays-item {
        --disclosure-summary-padding: 0.6rem 0.5rem;
        --disclosure-content-padding: 0.5rem 0 1rem 1.5rem;
    }
    .levels-item {
        --disclosure-summary-padding: 14px 40px;
        --disclosure-content-padding: 0 4px 18px 22px;
        --disclosure-marker-size: 10px;
        --disclosure-marker-ink: rgb(0 0 0 / 0.6);
        --disclosure-line: rgb(0 0 0 / 0.1);
        --disclosure-line-width: 1px;
    }
    .levels-example {
        --disclosure-summary-padding: 4px 0;
        --disclosure-content-padding: 6px 0 0;
        --disclosure-space: 8px;
        --disclosure-marker-size: 8px;
        --disclosure-marker-weight: 1.5px;
        --disclosure-marker-ink: rgb(0 0 0 / 0.5);
        --disclosure-line-width: 0px;
        --disclosure-nested-indent: 14px;
        --disclosure-nested-line-width: 2px;
    }
    [data-essay-dark] .levels-item {
        --disclosure-marker-ink: rgb(255 255 255 / 0.6);
        --disclosure-line: hsl(220 5% 20%);
    }
    [data-essay-dark] .levels-example {
        --disclosure-marker-ink: rgb(255 255 255 / 0.5);
    }
    @media (max-width: 800px) {
        .essays-group {
            --disclosure-content-padding: 0.5rem 0 0.5rem 1rem;
        }
        .essays-item {
            --disclosure-content-padding: 0.5rem 0 1rem 1rem;
        }
    }
    @media (max-width: 600px) {
        .essays-group {
            --disclosure-summary-padding: 0.7rem 0.25rem;
            --disclosure-content-padding: 0.5rem 0 0.5rem 0.5rem;
        }
        .essays-item {
            --disclosure-summary-padding: 0.5rem 0.25rem;
            --disclosure-content-padding: 0.5rem 0 1rem;
        }
    }
}