/* 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 {
    .account-pending {
        --panel-padding: 50px 40px;
    }
    .panel {
        --panel-padding: 20px;
        --panel-radius: 16px;
        --panel-surface: var(--raw-color-pearl-2);
        --panel-line: var(--raw-color-white-90);
    }
    .panel.hub-section {
        --panel-padding: 20px 60px;
        --panel-radius: 7px;
        --panel-shadow: 0 0 16px rgb(0 0 0 / 0.08);
        --panel-backdrop: blur(24px) brightness(1.1) saturate(5);
        --panel-surface: transparent;
        --panel-line: var(--raw-color-white-90);
    }
    @media (width > 800px) {
        .panel.hub-section {
            --panel-padding: 30px 80px;
            --panel-radius: 20px;
        }
    }
    @media (max-width: 800px) {
        .hub-section-reveal > .panel {
            --panel-padding: 20px 35px;
        }
    }
    @media (max-width: 600px) {
        .hub-section-reveal > .panel {
            --panel-padding: 20px;
        }
    }
}