/*
 | L'en-tête — deux rangées sur un même fond sombre.
 |
 | Relevé dans le Figma : bandeau `#2d3e46`, rangée haute de 90 px en
 | `padding 8 24`, rangée basse de 68 px en `padding 16 24`, liens de navigation
 | en Familjen Grotesk SemiBold 16 dans une pastille de rayon 224 px — c'est-à-dire
 | une gélule, que l'on écrit `999px`.
 */

.bt-entete {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bt-fond-sombre);
    color: var(--bt-white);
}

/* ── Rangée haute ────────────────────────────────────────────────────────── */

.bt-entete-haut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 90px;
    padding: 8px 24px;
}

/*
 | Les trois blocs pèsent le même poids de chaque côté, ce qui pose le logo au
 | milieu de la barre — et non au milieu de ce qui reste entre la langue et le
 | bouton, qui n'ont pas la même largeur.
 */
.bt-langues,
.bt-entete-actions {
    display: flex;
    flex: 1 1 0;
    gap: 8px;
    align-items: center;
}

.bt-entete-actions {
    justify-content: flex-end;
}

.bt-langue {
    color: var(--bt-neutral-200);
    font-size: var(--bt-corps-sm);
    font-weight: 600;
    letter-spacing: var(--bt-corps-lettres);
    text-decoration: none;
}

/* La langue courante est en blanc plein ; l'autre, en gris clair. */
.bt-langue.is-active {
    color: var(--bt-white);
}

.bt-langues-trait {
    width: 1px;
    height: 12px;
    background: currentColor;
    opacity: 0.5;
}

.bt-marque {
    display: flex;
    flex: none;
    align-items: center;
    text-decoration: none;
}

.bt-logo svg,
.bt-logo img {
    display: block;
    width: auto;
    height: 74px;
}

.bt-logo--texte {
    font-family: var(--bt-titre);
    font-size: var(--bt-h5);
}

/* ── Le bouton « Mon compte » ────────────────────────────────────────────── */

/*
 | Une gélule blanche sur le bandeau sombre : c'est l'inverse exact du reste de
 | l'en-tête, et c'est ce qui en fait la seule action qu'on voie du premier coup.
 */
.bt-compte {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    padding: 4px 20px 4px 4px;
    border-radius: 999px;
    background: var(--bt-white);
    color: var(--bt-neutral-900);
    font-family: var(--bt-texte);
    font-size: var(--bt-corps-md);
    font-weight: 500;
    letter-spacing: var(--bt-corps-lettres);
    text-decoration: none;
}

.bt-compte-rond {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bt-neutral-900);
    color: var(--bt-white);
}

/* ── Rangée basse : la navigation ────────────────────────────────────────── */

.bt-entete-bas {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    padding: 16px 24px;
}

.bt-nav-liste {
    display: flex;
    gap: 24px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bt-nav-liste a {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--bt-white);
    font-size: var(--bt-corps-md);
    font-weight: 600;
    letter-spacing: var(--bt-corps-lettres);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.bt-nav-liste a:hover,
.bt-nav-liste .current-menu-item > a {
    background: rgb(255 255 255 / 12%);
}

/* Le chevron d'un sous-menu — « Carte cadeau » en porte un dans la maquette. */
.bt-nav-liste .menu-item-has-children > a::after {
    width: 0;
    height: 0;
    border-top: 5px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: '';
}

/* ── Le bouton du menu, en petit écran ───────────────────────────────────── */

.bt-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.bt-burger-traits {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 22px;
}

.bt-burger-traits span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Ouvert, les trois traits deviennent une croix — le même bouton ferme. */
.bt-burger[aria-expanded="true"] .bt-burger-traits span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.bt-burger[aria-expanded="true"] .bt-burger-traits span:nth-child(2) {
    opacity: 0;
}

.bt-burger[aria-expanded="true"] .bt-burger-traits span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Le menu plein écran ─────────────────────────────────────────────────── */

.bt-menu-plein {
    position: fixed;
    inset: 90px 0 0;
    z-index: 49;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px var(--bt-gouttiere) 40px;
    overflow-y: auto;
    background: var(--bt-fond-sombre);
    color: var(--bt-white);
}

.bt-menu-plein-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bt-menu-plein-liste a {
    display: block;
    padding: 12px 0;
    color: inherit;
    font-family: var(--bt-titre);
    font-size: var(--bt-h4);
    letter-spacing: var(--bt-titre-lettres);
    text-decoration: none;
}

.bt-menu-plein-pied {
    padding-top: 32px;
}

.bt-compte--plein {
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
}

/* Le défilement de la page est bloqué tant que le panneau est ouvert : sans
   cela, la page file derrière le menu au moindre geste. */
body.bt-menu-ouvert {
    overflow: hidden;
}

/* ── Bascule ─────────────────────────────────────────────────────────────── */

/*
 | Au-dessus de la bascule, le panneau n'existe pas — le bouton qui l'ouvre est
 | cache, et rien ne doit pouvoir le faire apparaitre. La feuille le dit plutot
 | que de s'en remettre au script : une regle qui depend du JavaScript pour ne
 | pas casser la page n'est pas une regle.
 */
@media (min-width: 1101px) {
    .bt-menu-plein {
        display: none;
    }
}

@media (max-width: 1100px) {
    /*
     | La navigation quitte la rangée basse avant même le mobile : à cinq liens
     | de seize pixels, elle déborde bien avant 782 px. La bascule est donc posée
     | là où elle déborde, pas là où le Figma change de maquette.
     */
    .bt-entete-bas {
        display: none;
    }

    .bt-burger {
        display: flex;
    }
}

@media (max-width: 782px) {
    .bt-entete-haut {
        padding: 8px 24px;
    }

    .bt-logo svg,
    .bt-logo img {
        height: 58px;
    }

    /* Au doigt, le libellé prend une place qu'il ne vaut pas : le rond suffit,
       et le lien reste annoncé « Mon compte » par son texte caché. */
    .bt-compte {
        padding: 4px;
    }

    .bt-compte-mot {
        position: absolute !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .bt-compte--plein .bt-compte-mot {
        position: static !important;
        width: auto;
        height: auto;
        clip-path: none;
    }
}