/* En-tête — modèle canonique ; son emploi : canon_header.md. */

@layer components {
    .header-bar .button--style-quiet {
        --button-quiet-ink: var(--header-bar-ink, var(--header-ink, var(--canon-theme-ink)));
        --button-quiet-ink-hover: var(--header-bar-ink-hover, var(--header-bar-ink, var(--header-ink, var(--canon-theme-ink))));
    }

    .header {
        position: var(--header-position, static);
        inset-block-start: 0;
        inset-inline: 0;
        z-index: var(--canon-plane-header);
    }
    .header-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--canon-space-2) var(--header-space, var(--canon-space-6));
        max-width: var(--header-width, none);
        min-height: var(--header-height, var(--canon-height-header, auto));
        margin-inline: auto;
        padding-block: var(--header-padding, var(--canon-space-3));
        padding-inline: max(var(--header-edge, var(--canon-space-edge)), var(--header-edge-ratio, 0%));
    }
    .header-brand {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: var(--canon-space-2);
    }
    .header-brand > img {
        width: auto;
        height: var(--header-brand-height, 28px);
    }
    .header-nav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--canon-space-1) var(--header-nav-space, var(--canon-space-5));
    }
    .header-nav[hidden] {
        display: none;
    }
    .header-link {
        padding-block: var(--header-link-padding, var(--canon-space-1));
    }
    .header-end {
        display: flex;
        align-items: center;
        gap: var(--header-end-space, var(--canon-space-3));
        margin-inline-start: auto;
    }
    .header-toggle {
        display: none;
    }
    @media (max-width: 800px) {
        .header-nav {
            flex: 1 0 100%;
            flex-direction: column;
            align-items: flex-start;
            order: 1;
        }
        .header-toggle {
            display: inline-flex;
        }
    }

    .header {
        border-block-end: var(--header-line-width, var(--canon-line-width)) solid var(--header-line, var(--canon-theme-line));
        background-color: var(--header-surface, var(--canon-theme-surface));
        box-shadow: var(--header-shadow, none);
        backdrop-filter: var(--header-backdrop, none);
    }
    .header-bar {
        border-image: conic-gradient(var(--header-bar-surface, transparent) 0 0) fill 0 / / 0 100vmax;
    }
    .header-link {
        border-block-end: var(--header-link-line-width, 2px) solid transparent;
    }
    .header-link:is([aria-current="page"], [aria-current="location"]) {
        border-block-end-color: var(--header-link-line, var(--canon-theme-action));
    }

    .header {
        color: var(--header-ink, var(--canon-theme-ink));
    }
    .header-bar {
        color: var(--header-bar-ink, inherit);
    }
    .header-brand {
        font-family: var(--canon-font-figura);
        font-size: var(--header-brand-size, var(--canon-size-subtitle));
        font-weight: var(--header-brand-weight, var(--canon-weight-title));
        letter-spacing: var(--header-brand-tracking, 0);
        text-decoration-line: none;
        color: inherit;
    }
    .header-link {
        font-size: var(--header-link-size, var(--canon-size-control));
        font-weight: var(--header-link-weight, var(--canon-weight-body));
        letter-spacing: var(--header-link-tracking, 0);
        text-transform: var(--header-link-case, none);
        text-decoration-line: none;
        white-space: nowrap;
        color: var(--header-link-ink, var(--canon-theme-muted));
    }
    .header-brand:hover {
        text-decoration-line: var(--header-brand-decoration, none);
    }
    .header-link:hover {
        text-decoration-line: var(--header-link-decoration, none);
        color: var(--header-link-ink-hover, var(--canon-theme-ink));
    }
    .header-link:is([aria-current="page"], [aria-current="location"]) {
        font-weight: var(--header-link-weight-current, var(--header-link-weight, var(--canon-weight-body)));
        color: var(--header-link-ink-current, var(--header-link-ink-hover, var(--canon-theme-ink)));
    }

    .header-link {
        transition: color var(--canon-duration-state), border-color var(--canon-duration-state);
    }
}

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

@layer components {
    .header {
        --header-surface: var(--canon-theme-canvas);
        --header-space: var(--canon-space-10);
        --header-brand-decoration: underline;
        --header-link-padding: 0px;
        --header-link-weight: var(--canon-weight-label);
        --header-link-ink: var(--canon-theme-action);
        --header-link-ink-hover: var(--canon-theme-action-hover);
        --header-link-decoration: underline;
        --header-link-line-width: 0px;
    }
}