/**
 * En-tête du site.
 *
 * Préfixe : .lenain-header
 * Le markup vient de parts/header.html (blocs `acf/site-logo`, `acf/site-nav`,
 * `acf/site-cta` du thème parent) : on ne style ici que leur mise en page.
 */

/*
 * C'est l'élément de modèle qui colle, pas la barre elle-même : un élément
 * collant ne peut pas dépasser les limites de son parent, et la barre remplit
 * exactement le sien — elle n'aurait aucune marge pour se décoller.
 */
.lenain-site-header {
    position: sticky;
    top: 0;
    z-index: 20;
}

/*
 * Voile du menu déroulant, posé par assets/js/custom.js le temps de
 * l'ouverture. Il est TRANSPARENT : son rôle n'est pas de teinter la page mais
 * d'intercepter le geste de fermeture. Sans lui, refermer le menu en touchant
 * la page suivait le lien qui se trouvait sous le doigt — on se retrouvait
 * redirigé pour avoir voulu fermer un menu.
 *
 * Sous l'en-tête dans l'empilement, au-dessus de tout le reste : la barre et
 * son panneau restent donc cliquables.
 */
.lenain-header__voile {
    position: fixed;
    inset: 0;
    z-index: 15;
    /* Le geste ne doit pas non plus faire défiler la page derrière. */
    touch-action: none;
}

/* La hauteur de barre est déclarée dans custom.css : elle sert aussi à la page
   entière, pour poser les ancres sous l'en-tête collant. */
.lenain-header {
    background: var(--wp--preset--color--anthracite);
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

/*
 * Hauteur ferme, et non minimale : la plaque du logo est plus haute que la
 * barre, et c'est ce qui lui permet de déborder en dessous. Une hauteur
 * minimale la laisserait au contraire étirer la barre à sa propre taille.
 */
.lenain-header__inner {
    /* Écart entre les blocs de la barre ; resserré quand la place manque. */
    --lp-header-gap: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lp-header-gap);
    height: var(--lp-header-hauteur);
    /* La plaque du logo dépasse sous la barre : rien ne doit la rogner. */
    overflow: visible;
}

/*
 * Plaque du logo.
 *
 * État de base — celui que voient tous les navigateurs : une plaque alignée
 * sur la hauteur de la barre. Les navigateurs qui savent animer au défilement
 * (`animation-timeline: scroll()`) la reçoivent plus haute et débordante en
 * haut de page, puis la voient se réduire jusqu'à cet état de base.
 * Rien ne dépend de JavaScript : sans le support, le rendu est simplement fixe.
 */
.lenain-header__logo {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    /*
     * La plaque est un élément flexible de la barre : sans cette règle elle se
     * laisse comprimer quand la place manque, et comme son image a une hauteur
     * ferme, c'est la largeur seule qui cède — le logo se retrouve écrasé.
     * Le rapport du logo prime donc sur la place disponible.
     */
    flex: 0 0 auto;
    height: 76px;
    /* Alignée sur l'axe du contenu : la plaque ne déborde plus dans la gouttière. */
    padding: 0 28px;
    margin-left: 0;
    background: var(--wp--preset--color--anthracite);
    border-radius: 0;
    /* Elle passe devant la page, sur laquelle elle déborde. */
    position: relative;
    z-index: 1;
}

/* Toute la plaque est cliquable, pas seulement l'image qu'elle porte. */
.lenain-header__logo .leb-site-logo-link {
    display: flex;
    align-items: center;
    height: 100%;
}

.lenain-header__logo :where(img) {
    display: block;
    /* La largeur se déduit de la hauteur : le rapport reste exact. */
    width: auto;
    height: 54px;
    /* Même raison que la plaque : l'image ne se comprime pas. */
    flex: 0 0 auto;
}

/*
 * La plaque débordante n'a de sens qu'en grand écran : sur mobile, elle
 * mangerait une bonne part de la hauteur utile. En dessous du seuil du menu
 * (1200px), elle reste donc à l'état compact, sans animation.
 */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 1201px) {
        .lenain-header__logo {
            height: 120px;
            border-radius: 0 0 14px 14px;
            animation: lenain-logo-plate linear both;
            animation-timeline: scroll();
            animation-range: 0 160px;
        }

        .lenain-header__logo :where(img) {
            height: 72px;
            animation: lenain-logo-mark linear both;
            animation-timeline: scroll();
            animation-range: 0 160px;
        }
    }
}

@keyframes lenain-logo-plate {
    to {
        height: 76px;
        border-radius: 0;
    }
}

@keyframes lenain-logo-mark {
    to {
        height: 54px;
    }
}

.lenain-header__panel {
    display: flex;
    align-items: center;
    gap: 32px;
}

/* ------------------------------------------------------------ Navigation */

.lenain-header__nav :where(ul) {
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lenain-header__nav :where(a) {
    display: inline-block;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    color: rgb(255 255 255 / 0.85);
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.lenain-header__nav :where(a):hover {
    color: var(--wp--preset--color--white);
}

/*
 * Soulignement rose qui se déploie de la gauche au survol. Le trait est un
 * pseudo-élément : rien à ajouter dans le menu côté client.
 */
.lenain-header__nav :where(li) {
    position: relative;
}

.lenain-header__nav :where(li)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--wp--preset--color--rose);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--lp-ease);
}

.lenain-header__nav :where(li):hover::after,
.lenain-header__nav :where(li):focus-within::after {
    transform: scaleX(1);
}

/* La page courante garde son trait : pas de double soulignement. */
.lenain-header__nav :where(.current-menu-item, .current_page_item, .current-menu-ancestor)::after {
    content: none;
}

/* Page courante : libellé blanc, souligné de rose. */
.lenain-header__nav :where(.current-menu-item, .current_page_item, .current-menu-ancestor) > a {
    border-bottom-color: var(--wp--preset--color--rose);
    color: var(--wp--preset--color--white);
    font-weight: 600;
}

/* ------------------------------------------------------------ Bouton contact */

/*
 * Le bouton du menu n'a pas la pastille des autres : c'est une pilule pleine,
 * suivie d'une enveloppe qui s'incline au survol. La pastille s'efface donc, et
 * la flèche cède sa place — l'`::after` du bouton devient l'enveloppe et
 * revient dans le flux, après le libellé.
 */
.lenain-header__cta {
    gap: 12px;
    padding: 10px 18px 10px 24px;
    font-size: var(--wp--preset--font-size--xxs);
}

.lenain-header__cta::before {
    display: none;
}

.lenain-header__cta::after {
    position: static;
    width: 22px;
    height: 22px;
    background-color: var(--wp--preset--color--white);
    -webkit-mask: url("../img/icon-envelope-cta.svg") center / contain no-repeat;
            mask: url("../img/icon-envelope-cta.svg") center / contain no-repeat;
    transform: none;
    transform-origin: bottom left;
    transition: transform 0.3s ease;
}

.lenain-header__cta:hover::after,
.lenain-header__cta:focus-visible::after {
    transform: rotate(-8deg);
}

/* ---------------------------------------------------------------- Burger */

.lenain-header__burger {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--wp--preset--color--white);
    cursor: pointer;
}

/*
 * Trois barres : la médiane est l'élément, les deux autres ses pseudo-éléments.
 * À l'ouverture, la médiane s'efface et les extrêmes se croisent.
 */
.lenain-header__burger-bars,
.lenain-header__burger-bars::before,
.lenain-header__burger-bars::after {
    position: absolute;
    left: 11px;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform 0.3s var(--lp-ease), opacity 0.2s ease;
}

.lenain-header__burger-bars {
    top: calc(50% - 1px);
}

.lenain-header__burger-bars::before,
.lenain-header__burger-bars::after {
    content: "";
    left: 0;
}

.lenain-header__burger-bars::before {
    transform: translateY(-7px);
}

.lenain-header__burger-bars::after {
    transform: translateY(7px);
}

.lenain-header__burger[aria-expanded="true"] .lenain-header__burger-bars {
    background: transparent;
}

.lenain-header__burger[aria-expanded="true"] .lenain-header__burger-bars::before {
    transform: rotate(45deg);
}

.lenain-header__burger[aria-expanded="true"] .lenain-header__burger-bars::after {
    transform: rotate(-45deg);
}

/* --------------------------------------------------- Jusqu'à 1200px inclus */

/*
 * Seuil du menu mobile. Mesuré, et non choisi : en une seule ligne, la barre
 * demande 1191px (40 de gouttière + 254 de plaque + 24 + 601 de menu + 32 +
 * 199 d'actions + 40). En dessous, les libellés se cassent — « Qui sommes-
 * nous ? » part sur plusieurs lignes. On bascule donc dès 1200px, la valeur
 * ronde immédiatement sous ce plancher.
 * (Une media query n'accepte pas de variable CSS : ce seuil est écrit en dur,
 * ici et dans les deux autres blocs du fichier calés dessus.)
 */
@media (max-width: 1200px) {
    .lenain-header__burger {
        display: block;
    }

    /*
     * Le retrait latéral de la plaque n'a plus lieu d'être : cette place-là
     * revient au logo, qui garde ainsi sa taille pleine jusqu'à 320px.
     */
    .lenain-header__logo {
        padding-inline: 0;
    }

    /* Barre resserrée : de quoi loger le logo entier sur les plus petits écrans. */
    .lenain-header__inner {
        --lp-header-gap: 12px;
    }

    .lenain-header__panel {
        position: absolute;
        inset: 100% 0 auto;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 24px var(--lp-container-padding) 32px;
        background: var(--wp--preset--color--anthracite);
        border-bottom: 1px solid rgb(255 255 255 / 0.08);
        /*
         * Un menu plus long que l'écran doit rester consultable en entier : il
         * défile alors dans sa propre boîte, sous la barre qui reste visible.
         * `dvh` et non `vh` — sur téléphone la barre d'adresse mange la
         * différence, et `vh` renverrait une hauteur qui n'existe pas.
         * `contain` empêche le geste de se propager à la page derrière une fois
         * le panneau arrivé en butée.
         *
         * La barre d'administration, quand elle est là, descend l'en-tête
         * d'autant : WordPress en publie la hauteur, et le repli à zéro couvre
         * le cas du visiteur, qui ne la voit pas.
         */
        max-height: calc(
            100dvh - var(--lp-header-hauteur) - var(--wp-admin--admin-bar--height, 0px)
        );
        overflow-y: auto;
        overscroll-behavior: contain;
        /* Replié : invisible et hors du flux de tabulation. */
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.25s ease, transform 0.25s var(--lp-ease), visibility 0.25s;
    }

    .lenain-header__panel.is-open {
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    .lenain-header__nav :where(ul) {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .lenain-header__nav :where(a) {
        padding: 12px 0;
        border-bottom: 1px solid rgb(255 255 255 / 0.12);
        font-size: var(--wp--preset--font-size--md);
    }

    .lenain-header__nav :where(.current-menu-item, .current_page_item, .current-menu-ancestor) > a {
        border-bottom-color: rgb(255 255 255 / 0.12);
    }

    .lenain-header__cta {
        align-self: flex-start;
        margin-top: 16px;
    }
}

/* ------------------------------------------------------ Appel direct */

/*
 * Le duo d'actions : le CTA Contact et la pastille d'appel, serrés au pas
 * interne des CTA (12px) pour se lire d'un seul geste.
 */
.lenain-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/*
 * Le picto téléphone : une pastille ronde blanche au combiné rose — la
 * famille des pastilles de CTA — qui s'inverse au survol, comme la croix
 * des visionneuses. Deux instances (voir blocks/header-phone/render.php) :
 * une seule se montre à la fois. Surface tactile de 44px.
 */
.lenain-header__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--rose);
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.lenain-header__phone svg {
    display: block;
    width: 22px;
    height: 22px;
}

.lenain-header__phone:hover,
.lenain-header__phone:focus-visible {
    background: var(--wp--preset--color--rose);
    color: var(--wp--preset--color--white);
    box-shadow: 0 0 0 2px var(--wp--preset--color--white);
}

/* Un tap = un appel : l'instance mobile vit hors du menu replié. */
.lenain-header__phone--mobile {
    display: none;
}

@media (max-width: 1200px) {
    .lenain-header__phone--desktop {
        display: none;
    }

    .lenain-header__phone--mobile {
        display: inline-flex;
        /* Poussé à droite, contre le burger. */
        margin-inline-start: auto;
    }
}