/* Panneau — modèle canonique ; son emploi : canon_panel.md. */

@layer components {
    .panel {
        display: flex;
        flex-direction: column;
        gap: var(--panel-space, var(--canon-space-4));
        padding: var(--panel-padding, var(--canon-space-6));
    }

    .panel {
        border: var(--canon-line-width) solid var(--panel-line, var(--canon-theme-line));
        border-inline-start: var(--panel-accent-width, var(--canon-line-width)) solid var(--panel-accent, var(--panel-line, var(--canon-theme-line)));
        border-radius: var(--panel-radius, var(--canon-radius-card));
        background-color: var(--panel-surface, var(--canon-theme-surface));
        box-shadow: var(--panel-shadow, none);
        backdrop-filter: var(--panel-backdrop, none);
    }
}

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

@layer components {
    .panel {
        --panel-padding: 32px;
    }
    .assembly {
        --panel-padding: 12px;
        --panel-radius: var(--canon-radius-control);
        --panel-surface: var(--canon-theme-canvas);
    }
    @media (max-width: 600px) {
        .panel {
            --panel-padding: 24px 16px;
        }
    }
}