/* ==========================================================================
   EN-TÊTE, MENU MOBILE, SÉLECTEUR DE LANGUE
   ========================================================================== */

.entete {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-entete);
    color: var(--texte);
    view-transition-name: entete;
    transition: translate var(--dur-standard) var(--ease-entree);
}

/* Fond qui n'apparaît qu'une fois la page défilée (opacité seule). */
.entete::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--fond);
    border-bottom: 1px solid var(--filet);
    opacity: 0;
    transition: opacity var(--dur-rapide) linear;
}

/* Sans JS, pas de fond qui suit le défilement : l'en-tête défile avec la page. */
.no-js .entete {
    position: absolute;
}

.entete.est-defilee::before {
    opacity: 1;
}

.entete.est-cachee {
    translate: 0 -100%;
}

.entete__barre {
    display: flex;
    align-items: center;
    gap: var(--esp-s);
    width: 100%;
    max-width: var(--largeur-max);
    height: var(--hauteur-entete);
    margin-inline: auto;
    padding-inline: var(--marge);
}

.entete__marque {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-xs);
    min-height: 44px;
    margin-right: auto;
    text-decoration: none;
}

.entete__logo {
    --logo-trait: 24px;
    width: 2.5rem;
    height: 2.5rem;
}

.entete__nom {
    font-family: var(--f-display);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    max-width: 6.5em;
}

.entete__nom em {
    font-family: var(--f-italique);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
}

.nav {
    display: none;
}

.entete__actions {
    display: flex;
    align-items: center;
    gap: var(--esp-s);
}

.entete .entete__langues {
    display: none;
}

@media (min-width: 48em) {
    .entete .entete__langues {
        display: inline-flex;
    }
}

.entete__menu {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding-inline: 0.25rem;
    font-family: var(--f-mono);
    font-size: var(--fs-mono);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.entete__menu-icone {
    position: relative;
    display: grid;
    gap: 5px;
    width: 1.375rem;
}

.entete__menu-icone span {
    display: block;
    height: var(--trait);
    background: currentColor;
    transition: transform var(--dur-standard) var(--ease-entree);
}

[aria-expanded="true"] .entete__menu-icone span:first-child {
    transform: translateY(3.5px) rotate(45deg);
}

[aria-expanded="true"] .entete__menu-icone span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
}

@media (max-width: 23.99em) {           /* < 384 px : on garde le monogramme seul */
    .entete__nom {
        display: none;
    }
}

@media (min-width: 64em) {              /* ≥ 1024 px : navigation complète */
    .nav {
        display: block;
    }
    .nav__liste {
        display: flex;
        gap: clamp(1rem, 0.2rem + 1.5vw, 2.25rem);
    }
    .nav__lien {
        padding-block: 0.75rem;
        font-family: var(--f-mono);
        font-size: var(--fs-mono);
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    .nav__lien::after {
        bottom: 0.55rem;
    }
    .entete__menu {
        display: none;
    }
    .entete__barre {
        gap: clamp(1rem, 0.2rem + 1.6vw, 2.5rem);
    }
}

/* --- Sélecteur de langue : un curseur jaune glisse sous la langue active --- */
.langues {
    position: relative;
    display: inline-flex;
    isolation: isolate;
    border: 1px solid var(--filet);
}

.langues__lien {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    font-family: var(--f-mono);
    font-size: var(--fs-mono);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: color var(--dur-rapide) linear;
}

.langues__lien.est-actif {
    color: var(--bouton-texte);
}

.langues__indicateur {
    position: absolute;
    inset: 0 auto 0 0;
    width: 50%;
    background: var(--bouton-fond);
    transform-origin: 0 50%;
    transition: transform var(--dur-standard) var(--ease-entree);
}

.langues:has(.langues__lien:last-of-type.est-actif) .langues__indicateur {
    transform: translateX(100%);
    transform-origin: 100% 50%;
}

/* Au survol de l'autre langue, l'indicateur s'étire vers elle. */
.langues:has(.langues__lien:last-of-type:not(.est-actif):hover) .langues__indicateur {
    transform: scaleX(1.18);
}

.langues:has(.langues__lien:first-of-type:not(.est-actif):hover) .langues__indicateur {
    transform: translateX(100%) scaleX(1.18);
}

/* Langue en cours de changement (clic) : l'indicateur part vers elle. */
.langues.va-vers-2 .langues__indicateur {
    transform: translateX(100%);
}

.langues.va-vers-1 .langues__indicateur {
    transform: translateX(0);
}

/* --- Menu mobile (JS uniquement ; sans JS, « Menu » mène au plan du site) -- */
.menu-mobile {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    display: grid;
    color: var(--c-encre);
    --fond: var(--c-jaune);
    --texte: var(--c-encre);
    --accent: var(--c-encre);
    --filet: rgb(20 18 16 / 0.28);
    --bouton-fond: var(--c-encre);
    --bouton-texte: var(--c-jaune);
}

.menu-mobile__fond {
    position: absolute;
    inset: 0;
    background: var(--c-jaune);
    transform-origin: 50% 0;
}

.menu-mobile__contenu {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--esp-l);
    min-height: 100%;
    padding: calc(var(--hauteur-entete) + var(--esp-l)) var(--marge) calc(var(--esp-l) + env(safe-area-inset-bottom));
    overflow-y: auto;
}

.menu-mobile__lien {
    display: flex;
    align-items: baseline;
    gap: var(--esp-s);
    padding-block: 0.15em;
    font-family: var(--f-display);
    font-size: clamp(2.75rem, 1.6rem + 6vw, 5rem);
    font-weight: 900;
    line-height: 0.95;
    text-transform: uppercase;
    text-decoration: none;
}

.menu-mobile__lien[aria-current="page"] .menu-mobile__mot {
    font-family: var(--f-italique);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
}

.menu-mobile__num {
    color: var(--c-brun-jaune);
    translate: 0 -0.4em;
}

.menu-mobile__bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-m);
}

/* L'en-tête passe au-dessus du menu ouvert (le bouton devient « Fermer »). */
.menu-est-ouvert .entete {
    z-index: calc(var(--z-menu) + 1);
    --fond: var(--c-jaune);
    --texte: var(--c-encre);
    --filet: transparent;
    --bouton-fond: var(--c-encre);
    --bouton-texte: var(--c-jaune);
    color: var(--c-encre);
    translate: none;
}

.menu-est-ouvert .entete::before {
    opacity: 0;
}

@media (min-width: 64em) {
    .menu-mobile {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .entete,
    .langues__indicateur,
    .entete__menu-icone span {
        transition-duration: 0.01s;
    }
}