/* ===== En-tête de page (commun) ===== */

.site-header {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border-bottom: 0.1rem solid var(--color-border);
}

.site-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--layout-gutter-x);

    /*@media (max-width: 50em) {
        padding: var(--spacing-sm) var(--layout-gutter-x-sm);
    }*/
}

.site-header__logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs2);

    & img {
        height: 2.5rem;
        width: auto;
    }

    & a {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs2);
        border-radius: var(--border-radius-sm);
        text-decoration: none;
    }
}

/* ===== Boutons header =====
   Rendu visuel (couleurs, padding, radius, police) fourni par le système de boutons
   centralisé (Visa/css/components/buttons.css : .btn, .btn--primary, .btn--secondary).
   Les classes .site-header__btn--filled / .site-header__auth-link ne servent plus ici
   qu'à cibler la mise en page (masquage mobile, dropdown) — voir plus bas. */

/* Bannière informative */
.info-banner {
    background-color: var(--color-info-bg);
    color: var(--color-text-primary);
    padding: var(--spacing-sm2) var(--layout-gutter-x);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    text-align: left;
    overflow-wrap: break-word;

    @media (max-width: 50em) {
        padding: var(--spacing-sm) var(--layout-gutter-x-sm);
        font-size: var(--font-size-sm);
    }
}

/* Bouton compte */
.site-header__user-menu {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs4);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs3);

    & svg {
        width: 1.3rem;
        height: 1.3rem;
        color: var(--color-text-primary);
    }
}

/* Wrapper cercle autour de l'icône user uniquement */
.site-header__user-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Mode connecté : cercle bleu autour de #icon-user seulement */
.site-header--connected .site-header__user-icon {
    background: var(--color-user-menu-bg);
    padding: var(--spacing-xs4);

    & svg {
        color: var(--color-white);
    }
}

.site-header__user-menu-chevron {
    width: 1.6rem;
    height: 1.6rem;
    transition: transform var(--transition-fast);

    [aria-expanded="true"] > & {
        transform: rotate(180deg);
    }
}

/* Icône burger de substitution (mobile, non connecté) — masquée par défaut,
   voir @media (max-width: 50em) plus bas pour son activation. */
.site-header__user-menu-burger-icon {
    display: none;
    width: 2.4rem;
    height: 2.4rem;
}

/* ===== Non connecté : liens auth =====
   Rendu (couleurs/taille) fourni par .btn.btn--secondary ("Me connecter") et
   .btn.btn--primary ("Créer un compte") — voir Visa/css/components/buttons.css.
   Focus géré par la règle globale :focus-visible dans Default/css/base/utilities.css. */

/*
 * Desktop : les liens auth sont affichés directement dans le header comme des boutons.
 * Le bouton user + chevron et le dropdown sont masqués.
 */

/* Desktop : les icônes des liens auth ont été supprimées du markup */

/* Desktop (non connecté) : le dropdown ne s'ouvre pas, les liens sont visibles dans le flux */
.site-header__actions:has(.site-header__auth-link) {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm2);
    min-width: auto;
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;

    &[hidden] {
        display: flex;
    }
}

/* Desktop (non connecté) : masquer le bouton user + chevron */
.site-header__actions:has(.site-header__auth-link) ~ .site-header__user-menu,
.site-header__user-menu-wrapper:has(.site-header__auth-link) > .site-header__user-menu {
    display: none;
}

/*
 * Mobile : les liens auth passent en mode dropdown (comme "Mon compte"/"Déconnexion").
 * Le bouton user + chevron devient visible.
 */
/* 800px ÷ 16 = 50em */
@media (max-width: 50em) {
    .site-header__auth-link {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm2);
        padding: var(--spacing-sm) var(--spacing-md2);
        height: auto;
        font-size: var(--font-size-base);
        font-family: var(--font-family-base);
        font-weight: var(--font-weight-normal);
        color: var(--color-text-primary);
        background: none;
        border: none;
        border-radius: var(--border-radius-sm);
        transition: background var(--transition-fast);
        white-space: nowrap;
        text-decoration: none;
        justify-content: flex-start;
        line-height: normal;
        transform: none;
        box-shadow: none;
    }

    .site-header__auth-link:first-child,
    .site-header__auth-link:last-child {
        color: var(--color-text-primary);
        background: none;
        border: none;

        &:hover {
            background: var(--color-primary-light);
            transform: none;
            box-shadow: none;
        }
    }

    /* Mobile (non connecté) : restaurer le comportement dropdown */
    .site-header__actions:has(.site-header__auth-link) {
        position: absolute;
        flex-direction: column;
        align-items: stretch;
        min-width: 20rem;
        background: var(--color-white);
        border-radius: var(--border-radius-md);
        box-shadow: var(--shadow-dropdown);
        padding: var(--spacing-xs2);
        gap: 0.2rem;

        &[hidden] {
            display: none;
        }
    }

    /* Mobile (non connecté) : afficher le bouton user */
    .site-header__actions:has(.site-header__auth-link) ~ .site-header__user-menu,
    .site-header__user-menu-wrapper:has(.site-header__auth-link) > .site-header__user-menu {
        display: flex;
    }

    /* Mobile (non connecté) : le bouton prend le design d'un burger — le sous-menu
       (liens de connexion/création de compte) reste inchangé, seule l'icône change. */
    .site-header__user-menu-wrapper:has(.site-header__auth-link) .site-header__user-icon,
    .site-header__user-menu-wrapper:has(.site-header__auth-link) .site-header__user-menu-chevron {
        display: none;
    }

    .site-header__user-menu-wrapper:has(.site-header__auth-link) .site-header__user-menu-burger-icon {
        display: block;
    }
}

/* Conteneur droit du header : bouton CTA + menu user */
.site-header__right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md2);

    /* 800px ÷ 16 = 50em */
    @media (max-width: 50em) {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--spacing-xs2);
    }
}

.site-header__user-menu-wrapper {
    position: relative;
}

/* Dropdown liens (mode connecté) */
.site-header__dropdown-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm2);
    padding: var(--spacing-sm) var(--spacing-md2);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    transition: background var(--transition-fast);
    white-space: nowrap;

    & svg {
        width: 2rem;
        height: 2rem;
        flex-shrink: 0;
        color: var(--color-text-secondary);
    }

    &:hover {
        background: var(--color-primary-light);
    }

}

/* Dropdown panel (mode connecté) */
.site-header__actions {
    position: absolute;
    top: calc(100% + 0.8rem);
    right: 0;
    flex-direction: column;
    align-items: stretch;
    min-width: 20rem;
    background: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-dropdown);
    padding: var(--spacing-xs2);
    z-index: 100;
    gap: 0.2rem;
    display: flex;

    &[hidden] {
        display: none;
    }
}

/* Navigation principale — pas de padding sur le conteneur : le texte du premier lien doit
   être aligné avec --layout-gutter-x (même repère que le logo dans .site-header__top), pas
   avec gutter + le padding propre du lien (voir .site-header__nav-link:first-child). */
.site-header__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;

    @media (max-width: 50em) {
        overflow-x: auto;
    }
}

.site-header__nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--spacing-md) var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family-base);
    color: var(--color-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 0.2rem solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);

    &:hover {
        color: var(--color-primary);
    }
}

/* Le premier lien ("Accueil") aligne son TEXTE sur --layout-gutter-x plutôt que sur le
   padding générique (1.5rem) des autres liens. */
.site-header__nav-link:first-child {
    padding-left: var(--layout-gutter-x);
}

.site-header__nav-link--active {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    border-bottom-color: var(--color-primary);
}

/* Badge notification (point rouge) */
.site-header__nav-link--badge::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--color-danger);
    border-radius: 50%;
    margin-left: var(--spacing-xs4);
    flex-shrink: 0;
}

/* ===== Burger menu mobile (mode connecté) ===== */

.site-header__burger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs4);
    border-radius: var(--border-radius-sm);
    position: relative;
    align-items: center;
    justify-content: center;

    & svg {
        width: 2.4rem;
        height: 2.4rem;
        color: var(--color-text-primary);
    }
}

/* Point rouge sur le burger quand des sinistres nécessitent une action (.badge-dot, utilities.css) */
.site-header__burger-badge {
    display: none;
    position: absolute;
    top: 0.7rem;
    right: 0.4rem;
    width: 0.8rem;
    height: 0.8rem;
    border: 0.0625rem solid var(--color-white); /* 1px — même liseré que .claims-exchange-badge */
}

.site-header__burger-badge--visible {
    display: block;
}

/* Overlay du menu burger */
.site-header__mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-overlay-bg);
    z-index: var(--z-index-modal);
}

.site-header__mobile-menu[aria-hidden="false"] {
    display: block;
}

.site-header__mobile-menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 28rem;
    max-width: 85vw;
    height: 100%;
    background: var(--color-white);
    box-shadow: var(--shadow-drawer);
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg) 0;
    overflow-y: auto;
}

.site-header__mobile-menu-close {
    align-self: flex-end;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs2) var(--spacing-md2);
    border-radius: var(--border-radius-sm);

    & svg {
        width: 2.4rem;
        height: 2.4rem;
        color: var(--color-text-primary);
    }
}

.site-header__mobile-menu-nav {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-xs2) 0;
}

.site-header__mobile-menu-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm2);
    padding: var(--spacing-sm2) var(--spacing-lg2);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    transition: background var(--transition-fast);

    &:hover {
        background: var(--color-primary-light);
    }
}

/* Badge point rouge dans le menu mobile (.badge-dot, utilities.css) */
.site-header__mobile-menu-badge {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
}

.site-header__mobile-menu-separator {
    border: none;
    border-top: 0.1rem solid var(--color-border);
    margin: var(--spacing-xs2) var(--spacing-lg2);
}

/* 650px ÷ 16 = 40.625em */
@media (max-width: 40.625em) {
    /* Masquer la nav desktop et le bouton CTA header */
    .site-header--connected .site-header__nav,
    .site-header--connected .site-header__btn--filled,
    .site-header--connected .site-header__user-menu-wrapper {
        display: none;
    }

    /* Afficher le burger */
    .site-header--connected .site-header__burger {
        display: flex;
    }
}

/* ===== Bannière maintenance ===== */

.maintenance-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm2);
    padding: var(--spacing-sm2) var(--layout-gutter-x);
    background: var(--color-warning-bg);
    border-bottom: 0.1rem solid var(--color-warning);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    line-height: var(--line-height-base);
    overflow-wrap: break-word;

    @media (max-width: 50em) {
        padding: var(--spacing-sm2) var(--layout-gutter-x-sm);
    }
}

.maintenance-banner__icon {
    flex-shrink: 0;
    font-size: var(--font-size-lg);
    line-height: 1;
    color: var(--color-warning);
}

.maintenance-banner__text {
    flex: 1;
}

.maintenance-banner__close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-xl);
    line-height: 1;
    color: var(--color-text-secondary);
    padding: var(--spacing-xs3);
    transition: color var(--transition-fast);

    &:hover {
        color: var(--color-text-primary);
    }
}