/* En-tête de Careevia — composant gbl/header : marque, sections métier, profil, et le panneau unique
   qui sert les trois sections. */

@layer components {
    .header {
        position: relative;
        z-index: 20;
    }
    .header-inner {
        max-width: var(--local-width-wide);
        margin: 0 auto;
        padding: var(--canon-space-3) var(--canon-space-4);
        display: flex;
        align-items: center;
        gap: var(--canon-space-6);
    }
    .header-brand {
        display: inline-flex;
        align-items: center;
        gap: var(--canon-space-2);
    }
    .header-brand img {
        height: var(--local-height-brand);
        width: auto;
        display: block;
    }
    .header-toggle {
        display: none;
        margin-left: auto;
    }
    .header-nav {
        display: flex;
        align-items: center;
        gap: var(--canon-space-2);
    }
    .header-panel {
        position: absolute;
        inset: 100% 0 auto;
        z-index: 10;
        overflow: hidden;
    }
    .header-panel-inner {
        max-width: var(--local-width-wide);
        margin: 0 auto;
        padding: var(--canon-space-6) var(--canon-space-4) var(--canon-space-8);
    }
    .header-panel-title {
        margin: 0 0 var(--canon-space-4);
    }
    .header-links {
        display: grid;
        gap: var(--canon-space-2);
    }
    .header-links a,
    .header-account-menu a {
        min-height: var(--canon-size-icon-target);
        display: flex;
        align-items: center;
        padding-inline: var(--canon-space-3);
    }
    .header-groups {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--canon-space-6);
    }
    .header-groups h3 {
        margin: 0 0 var(--canon-space-2);
        padding-inline: var(--canon-space-3);
    }
    .header-account {
        position: relative;
        margin-left: auto;
    }
    .header-icon {
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
    }
    .header-account-menu {
        position: absolute;
        top: calc(100% + var(--canon-space-2));
        right: 0;
        z-index: 20;
        width: 18rem;
        padding: var(--canon-space-2);
    }
    .header-account-identity {
        padding: var(--canon-space-2) var(--canon-space-3);
    }
    .header-account-menu .divider {
        margin-block: var(--canon-space-2);
    }
    .header-account-menu a {
        gap: var(--canon-space-3);
    }
    /* Deux classes : le bouton serré du canon pose son propre remplissage, et l'action du menu
       s'aligne sur les liens qui la précèdent, icône comprise. */
    .header-account-menu .header-account-action {
        width: 100%;
        justify-content: flex-start;
        gap: var(--canon-space-3);
        padding-inline: var(--canon-space-3);
    }
    @media (max-width: 800px) {
        .header-inner {
            gap: var(--canon-space-3);
            flex-wrap: wrap;
        }
        .header-toggle {
            display: inline-flex;
        }
        .header-account {
            margin-left: 0;
        }
        .header-nav {
            flex: 1 0 100%;
            order: 4;
            align-items: stretch;
        }
        .header-nav-trigger {
            flex: 1 1 0;
        }
        .header-inner[data-header-open="false"] .header-nav {
            display: none;
        }
        .header-panel-inner {
            padding-block: var(--canon-space-4) var(--canon-space-6);
        }
        .header-groups {
            grid-template-columns: 1fr;
            gap: var(--canon-space-4);
        }
        .header-account-menu {
            width: min(18rem, calc(100vw - (2 * var(--canon-space-4))));
        }
    }

    .header {
        background-color: var(--canon-theme-surface);
        border-bottom: var(--canon-line-width) solid var(--canon-theme-line);
    }
    .header-nav-trigger {
        border-radius: var(--local-radius-small);
    }
    .header-nav-trigger[data-header-current="true"],
    .header-nav-trigger[aria-expanded="true"] {
        background-color: var(--canon-theme-surface-selected);
        box-shadow: var(--local-shadow-current);
    }
    .header-panel {
        background-color: var(--local-color-decor-overlay);
        border-bottom: var(--canon-line-width) solid var(--canon-theme-line);
    }
    .header-links a,
    .header-account-menu a {
        border-radius: var(--local-radius-small);
    }
    .header-links a:hover,
    .header-account-menu a:hover {
        background-color: var(--canon-theme-surface-selected);
    }
    .header-links a[aria-current="page"],
    .header-account-menu a[aria-current="page"] {
        box-shadow: var(--local-shadow-marker);
    }
    .header-account-trigger[data-header-current="true"],
    .header-account-trigger[aria-expanded="true"] {
        background-color: var(--canon-theme-surface-selected);
    }
    .header-icon {
        background-color: currentColor;
        -webkit-mask: center / contain no-repeat;
        mask: center / contain no-repeat;
    }
    .header-icon--account {
        -webkit-mask-image: url("/assets/icons/circle-user-round.svg");
        mask-image: url("/assets/icons/circle-user-round.svg");
    }
    .header-icon--settings {
        -webkit-mask-image: url("/assets/icons/cog.svg");
        mask-image: url("/assets/icons/cog.svg");
    }
    .header-icon--context {
        -webkit-mask-image: url("/assets/icons/message-square-quote.svg");
        mask-image: url("/assets/icons/message-square-quote.svg");
    }
    .header-account-menu {
        border: var(--canon-line-width) solid var(--canon-theme-line);
        border-radius: var(--canon-radius-control);
        background-color: var(--local-color-decor-overlay);
    }

    .header-brand {
        text-decoration: none;
    }
    .header-nav-trigger[data-header-current="true"],
    .header-nav-trigger[aria-expanded="true"] {
        font-weight: var(--canon-weight-title);
    }
    .header-panel-title {
        font-family: var(--canon-font-figura);
        font-size: var(--canon-size-title);
        line-height: var(--canon-leading-title);
        font-weight: var(--canon-weight-title);
    }
    .header-links,
    .header-groups {
        list-style: none;
    }
    .header-links a,
    .header-account-menu a {
        color: var(--canon-theme-ink);
        text-decoration: none;
        font-size: var(--canon-size-control);
        line-height: var(--canon-leading-body);
    }
    .header-links a[aria-current="page"],
    .header-account-menu a[aria-current="page"] {
        font-weight: var(--canon-weight-title);
    }
    .header-groups h3 {
        font-family: var(--canon-font-figura);
        font-size: var(--canon-size-body);
        line-height: var(--canon-leading-body);
        font-weight: var(--canon-weight-title);
    }
}