/* ==========================================================================
   EN-TÊTE : logo, bouton pays, menu principal, fil d'ariane
   Reprise de #header_menu / #header_logo / #fil_ariane (site 2023,
   styles_site.css + styles_responsive.css). Le bandeau est dans banniere.css.
   ========================================================================== */

.siteHeader {
    width: min(var(--largeur-site), 100%);
    margin: 0 auto;
    /* En 2023, le lien d'évitement occupait une ligne au-dessus de l'en-tête :
       ce décalage fait partie du rendu d'origine. */
    padding-top: 1.9rem;
}

/* ----- Logo et bouton pays ----------------------------------------------- */
.siteHeader__haut {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 36px;
}

/* Logo en ligne, comme en 2023 : la ligne de texte qui le porte donne sa
   hauteur à la rangée, et donc la position du bouton pays. */
.siteHeader__logo img {
    width: 116px;
    height: auto;
}

/* Bouton pays : retour au sélecteur, remplissage jaune au survol. */
.siteHeader__pays {
    position: relative;
    z-index: 0;
    display: inline-block;
    padding: 6px 20px;
    border: 1px solid var(--color-primary-yellow);
    border-radius: 30px;
    color: var(--color-primary-white);
    font-family: "AvenirLTStd-Black", Arial, sans-serif;
    font-size: 1.6rem;
    transition: color 0.2s ease;
}

.siteHeader__pays::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    border-radius: 30px;
    background-color: var(--color-primary-yellow);
    transition: width 0.5s ease;
}

.siteHeader__pays:hover::before,
.siteHeader__pays:focus-visible::before {
    width: 100%;
}

/* ----- Menu principal ---------------------------------------------------- */
.siteNav__liste {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2.5rem;
}

.siteNav__item {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px 0 10px;
}

/* Puce jaune qui s'étire en surligneur au survol et sur la page active. */
.siteNav__item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50px;
    background-color: var(--color-primary-yellow);
    transform: translateY(-50%);
    transition: height 0.2s ease, width 0.7s 0.2s ease;
}

.siteNav__item:hover::before,
.siteNav__item:focus-within::before,
.siteNav__item.is-active::before {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.siteNav__item a {
    position: relative;
    color: var(--color-primary-white);
    font-family: "AvenirLTStd-Black", Arial, sans-serif;
    font-size: 1.6rem;
    transition: color 0.2s ease;
}

/* Bouton du menu mobile (trois traits jaunes, croix une fois ouvert). */
.siteNav__burger {
    display: none;
    position: relative;
    z-index: 1001;
    width: 80px;
    height: 80px;
}

.siteNav__burgerIcone,
.siteNav__burgerIcone::before,
.siteNav__burgerIcone::after {
    position: absolute;
    width: 50px;
    height: 6px;
    border-radius: 15px;
    background-color: var(--color-primary-yellow);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: 0.5s;
}

.siteNav__burgerIcone {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.siteNav__burgerIcone::before,
.siteNav__burgerIcone::after {
    content: "";
    left: 0;
}

.siteNav__burgerIcone::before {
    top: -16px;
}

.siteNav__burgerIcone::after {
    top: 16px;
}

.siteNav__burger[aria-expanded="true"] .siteNav__burgerIcone {
    background: transparent;
    box-shadow: none;
}

.siteNav__burger[aria-expanded="true"] .siteNav__burgerIcone::before {
    top: 0;
    transform: rotate(45deg);
}

.siteNav__burger[aria-expanded="true"] .siteNav__burgerIcone::after {
    top: 0;
    transform: rotate(135deg);
}

/* ----- Fil d'ariane (pages intérieures) ---------------------------------- */
.filAriane {
    position: relative;
    top: -1rem;
    width: min(var(--largeur-site), 100%);
    margin: 0 auto;
    padding: 1rem;
    background-color: var(--color-primary-yellow);
    color: var(--color-primary-blue);
    font-family: "AvenirLTStd-Roman", Arial, sans-serif;
    font-size: 1.3rem;
}

.filAriane li {
    display: inline-block;
    margin-left: 1px;
}

.filAriane a {
    color: var(--color-primary-blue);
    font-family: "AvenirLTStd-Black", Arial, sans-serif;
}

/* Contour de focus bleu : le jaune commun disparaît sur le fond du fil. */
.filAriane a:focus-visible {
    outline-color: var(--color-primary-blue);
}

/* ----- Adaptations (styles_responsive.css du legacy) --------------------- */
@media screen and (max-width: 1400px) {
    .siteHeader__haut > li {
        padding: 0 2rem;
    }
}

/* En allemand, les libellés longs (« DOKUMENTATION ») faisaient déborder le
   menu de 2023 de l'écran entre 771 et 841px : la taille réduite du palier
   suivant s'y applique dès 841px, pour cette langue seulement. */
@media screen and (max-width: 841px) {
    .siteNav__item a:lang(de) {
        font-size: 1.3rem;
    }
}

@media screen and (max-width: 770px) {
    .siteNav__item a {
        font-size: 1.3rem;
    }
}

@media screen and (max-width: 700px) {
    .siteNav__burger {
        display: block;
    }

    /* Menu plein écran, ouvert par le bouton (site.js). */
    .siteNav__liste {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 100;
        height: 100%;
        overflow-y: auto;
        padding: 1rem 2.5rem 0 10rem;
        background-color: var(--color-primary-blue);
    }

    .siteNav.is-open .siteNav__liste {
        display: block;
    }

    .siteNav__item {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 2.6rem;
        text-align: left;
    }
}