/*
 * `C1` — the "Présentation du module" band, the only band a section screen still has (§ 2 of the
 * specifications). The table sits directly on the page now; it never had a band of its own.
 *
 * The maquette draws only the "Phrase promotionnelle" screen, which has no band, so the geometry
 * follows the one it does draw: the same white surface and the same 24px padding as the page body.
 *
 * The summary carries the whole click target — the whole width of the band, not the wording alone —
 * because a title of two words on a 1920px canvas is a very small thing to aim at. Its background
 * matches the table header's own grid (`.mo-admin-table__head`) and its radius is the table's, so
 * the two read as the same kind of header.
 */

.mo-collapsible {
    margin: 0;
    border-radius: var(--mo-radius-md);
    background-color: var(--mo-surface-default-white);
}

.mo-collapsible__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: var(--mo-spacing-sm) var(--mo-spacing-md);
    background-color: var(--mo-surface-default);
    border-radius: var(--mo-radius-sm);
    cursor: pointer;
    gap: var(--mo-spacing-xs);
    list-style: none;
}

/* The default disclosure triangle, in the two shapes browsers draw it. The chevron replaces it. */
.mo-collapsible__summary::-webkit-details-marker {
    display: none;
}

.mo-collapsible__summary::marker {
    content: '';
}

.mo-collapsible__summary:focus-visible {
    outline: 2px solid var(--mo-border-action);
    outline-offset: 2px;
}

.mo-collapsible__title {
    color: var(--mo-text-heading);
    font-size: var(--mo-font-size-h3);
    font-weight: var(--mo-font-weight-semibold);
    line-height: var(--mo-line-height-h3);
}

.mo-collapsible__chevron {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--mo-text-heading);
    transition: transform 150ms ease;
}

.mo-collapsible[open] > .mo-collapsible__summary .mo-collapsible__chevron {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .mo-collapsible__chevron {
        transition: none;
    }
}

/* A little more air above the field than below it and the summary: the summary already carries its
 * own vertical padding, so a body flush against it would read as glued to the band above. */
.mo-collapsible__body {
    padding: var(--mo-spacing-sm) var(--mo-spacing-md) var(--mo-spacing-md);
}