/* =====================================================================
 * FFVélo Kitcom — Super Navbar (modern CSS)
 *
 * Stack utilisé :
 * - CSS Nesting natif (Chrome 112+, Safari 16.5+, FF 117+)
 * - :is() / :where() pour gérer les deux systèmes de classes WP
 *   (.wp-block-navigation-item__content + .wp-block-pages-list__item__link)
 * - Custom properties scopées comme tokens de design
 * - Logical properties (padding-inline, margin-block-end, etc.)
 * - color-mix() pour les variantes de couleur
 * - IntersectionObserver côté JS (assets/js/header.js) pour data-elevated
 *
 * Inspiration : navbar officielle ffvelo.fr (height 6.625rem, breakpoint
 * desktop 1280px, underline primary 3px scaleY, burger rouge 56×56, etc.)
 * ===================================================================== */

/* Le sticky doit porter sur l'enveloppe du template-part : un élément
   sticky ne colle qu'à l'intérieur de son parent, or .ffv-site-header
   remplit exactement le sien (aucune marge pour coller). */
header.wp-block-template-part:has(> .ffv-site-header) {
    position: sticky;
    inset-block-start: 0;
    z-index: 1000;
}

.ffv-site-header {
    /* === Design tokens === */
    --ffv-h: 5rem;                          /* hauteur mobile */
    --ffv-h-desktop: 5.5rem;                /* hauteur desktop ≥1280px */
    --ffv-breakpoint: 1280px;
    --ffv-radius: 0.5rem;
    --ffv-radius-card: 0.75rem;
    --ffv-shadow-elevated:
        0 1px 0 rgb(41 38 117 / 0.04),
        0 8px 24px -12px rgb(41 38 117 / 0.22);
    --ffv-shadow-card:
        0 1px 2px rgb(27 25 90 / 0.04),
        0 12px 28px -8px rgb(27 25 90 / 0.18),
        0 4px 12px -6px rgb(27 25 90 / 0.10);
    --ffv-ease: cubic-bezier(0.215, 0.6, 0.27, 0.995);
    --ffv-ease-2: cubic-bezier(0.85, 0, 0.15, 1);
    --ffv-color-primary: var(--wp--preset--color--primary, #292675);
    --ffv-color-primary-dark: var(--wp--preset--color--primary-dark, #1B195A);
    --ffv-color-primary-pale: var(--wp--preset--color--primary-pale, #EDF0F9);
    --ffv-color-accent: var(--wp--preset--color--accent, #FB2726);
    --ffv-color-accent-dark: var(--wp--preset--color--accent-dark, #C81E1D);
    --ffv-color-surface: var(--wp--preset--color--surface, #fff);
    --ffv-color-border: var(--wp--preset--color--border, #E4E7EF);

    background: var(--ffv-color-surface);
    border-block-end: 1px solid transparent;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;

    /* État élevé : appliqué par JS dès que la page est scrollée */
    &[data-elevated="true"] {
        border-block-end-color: var(--ffv-color-border);
        box-shadow: var(--ffv-shadow-elevated);
    }

    /* === Conteneur intérieur === */
    & .ffv-site-header__inner {
        max-inline-size: var(--wp--style--global--wide-size, 1280px);
        margin-inline: auto;
        inline-size: 100%;
        min-block-size: var(--ffv-h);
        align-items: center;
        padding-block: 0;
        padding-inline: clamp(1rem, 3vw, 2rem);

        @media (min-width: 1280px) {
            min-block-size: var(--ffv-h-desktop);
        }
    }

    /* ================================================================
     *  BRAND : logo (wordmark FFVélo)
     * ================================================================ */

    & .ffv-site-header__brand {
        flex: 0 0 auto;
        min-inline-size: 0;
        align-items: center;
        gap: 0.85rem;

        /* Logo : dimensionné par la hauteur de l'en-tête, largeur fluide.
           Le wordmark (ratio ~4:1) reste net de mobile à desktop. */
        & .wp-block-site-logo {
            display: flex;
            align-items: center;
            line-height: 0;
        }

        & .wp-block-site-logo a {
            display: flex;
            align-items: center;
            transition: opacity 0.25s ease;

            &:hover {
                opacity: 0.85;
            }
        }

        & .wp-block-site-logo img {
            /* Plancher relevé (2.5rem) pour un logo plus présent sur mobile /
               tablette ; le plafond (2.75rem) reste identique sur desktop, donc
               seul le responsive est agrandi. */
            block-size: clamp(2.5rem, 2rem + 1.6vw, 2.75rem);
            inline-size: auto;
            max-inline-size: 100%;
            object-fit: contain;
            border-radius: 0;
        }
    }

    /* ================================================================
     *  RECHERCHE
     *
     *  Mobile (par défaut) : barre pleine largeur, placée EN HAUT,
     *  au-dessus de la ligne logo + menu (l'en-tête passe en flex-wrap).
     *  Desktop (≥1280px) : champ compact, à DROITE du menu.
     * ================================================================ */

    /* Autorise le retour à la ligne pour faire passer la recherche en haut. */
    & .ffv-site-header__inner.is-nowrap {
        flex-wrap: wrap;
        row-gap: 0.55rem;
    }

    & .ffv-site-header__search {
        order: -1;
        flex: 1 1 100%;
        margin: 0;

        & .wp-block-search__inside-wrapper {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.2rem 0.2rem 0.2rem 0.95rem;
            background: var(--ffv-color-surface);
            border: 1px solid var(--ffv-color-border);
            border-radius: 9999px;
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }

        & .wp-block-search__inside-wrapper:focus-within {
            border-color: var(--ffv-color-primary);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--ffv-color-primary) 18%, transparent);
        }

        & .wp-block-search__input {
            flex: 1 1 auto;
            min-inline-size: 0;
            inline-size: 100%;
            margin: 0;
            padding: 0.4rem 0;
            border: 0;
            background: transparent;
            font-size: 0.95rem;
            color: var(--ffv-color-primary);
            outline: none;
        }

        & .wp-block-search__input::placeholder {
            color: color-mix(in srgb, var(--ffv-color-primary) 55%, transparent);
        }

        & .wp-block-search__button {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 0.45rem;
            border: 0;
            border-radius: 9999px;
            background: var(--ffv-color-primary);
            color: var(--ffv-color-surface);
            cursor: pointer;
            transition: background-color 0.25s ease;
        }

        & .wp-block-search__button:hover,
        & .wp-block-search__button:focus-visible {
            background: var(--ffv-color-accent);
        }

        & .wp-block-search__button svg {
            fill: currentColor;
            inline-size: 1.15rem;
            block-size: 1.15rem;
        }
    }

    @media (min-width: 1280px) {
        & .ffv-site-header__inner.is-nowrap {
            flex-wrap: nowrap;
            row-gap: 0;
        }

        & .ffv-site-header__search {
            order: 0;
            flex: 0 0 auto;
            margin-inline-start: 0.5rem;

            & .wp-block-search__input {
                inline-size: 7.5rem;
                flex: 0 1 auto;
            }
        }
    }

    /* ================================================================
     *  NAV — wrappers communs (desktop + overlay)
     * ================================================================ */

    & .ffv-site-header__nav {
        flex: 0 1 auto;
        min-inline-size: 0;
        margin-inline-start: auto;

        &.wp-block-navigation,
        & .wp-block-navigation__container {
            flex-wrap: nowrap;
            align-items: center;
        }

        /* ============================================================
         *  DESKTOP (≥1280px) — items inline, underline primary scaleY
         * ============================================================ */

        @media (min-width: 1280px) {
            & .wp-block-navigation__container {
                gap: 0;
            }

            /* Marges fixes (pas de vw) : la zone intérieure est plafonnée à
               1280px, donc vw ne reflète pas la place réelle. Valeurs serrées
               pour que les 5 items + la recherche tiennent avec une marge
               confortable (~50px) face au logo, quel que soit l'écran. */
            & .wp-block-navigation-item {
                margin-inline: 0.45rem;
                flex-shrink: 0;
            }

            & :is(.wp-block-navigation-item__content, .wp-block-pages-list__item__link) {
                position: relative;
                display: inline-flex;
                align-items: center;
                gap: 0.3rem;
                font-size: 1.0625rem;
                font-weight: 500;
                line-height: 1.2;
                color: var(--ffv-color-primary);
                text-decoration: none;
                padding-block: 1.25rem 1.125rem;
                padding-inline: 0;
                white-space: nowrap;
                background: none;
                border-radius: 0;
                transition: color 0.25s ease;

                &::after {
                    content: '';
                    position: absolute;
                    inset-block-end: 0;
                    inset-inline: 0;
                    block-size: 0.1875rem;
                    background: var(--ffv-color-primary);
                    transform: scaleY(0);
                    transform-origin: bottom;
                    transition: transform 0.3s var(--ffv-ease);
                }
            }

            /* Underline déployé : hover, focus, page courante */
            & .wp-block-navigation-item:hover > :is(.wp-block-navigation-item__content, .wp-block-pages-list__item__link)::after,
            & :is(.wp-block-navigation-item__content, .wp-block-pages-list__item__link):focus-visible::after,
            & :is(.current-menu-item, .current_page_item, .current-menu-ancestor, .current-menu-parent) > :is(.wp-block-navigation-item__content, .wp-block-pages-list__item__link)::after {
                transform: scaleY(1);
            }

            /* Chevron submenu : chevron dessiné en masque (parfaitement centré
               dans une boîte carrée) pour que la rotation pivote sur place,
               sans « monter ». L'icône SVG native de WP est masquée. */
            & .wp-block-navigation__submenu-icon {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                margin-inline-start: 0.35rem;
                inline-size: 0.7rem;
                block-size: 0.7rem;
                line-height: 0;
                transform-origin: center center;
                transition: transform 0.25s ease;

                & svg {
                    display: none;
                }

                &::before {
                    content: '';
                    inline-size: 100%;
                    block-size: 100%;
                    background-color: currentColor;
                    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.5a1 1 0 0 1-.7-.29l-6-6a1 1 0 1 1 1.4-1.42L12 12.67l5.3-5.3a1 1 0 0 1 1.4 1.42l-6 6a1 1 0 0 1-.7.29Z'/%3E%3C/svg%3E") center / contain no-repeat;
                            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.5a1 1 0 0 1-.7-.29l-6-6a1 1 0 1 1 1.4-1.42L12 12.67l5.3-5.3a1 1 0 0 1 1.4 1.42l-6 6a1 1 0 0 1-.7.29Z'/%3E%3C/svg%3E") center / contain no-repeat;
                }
            }

            & .has-child:hover .wp-block-navigation__submenu-icon,
            & .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon {
                transform: rotate(180deg);
            }
        }

        /* ============================================================
         *  SOUS-MENU DESKTOP — carte blanche aérée
         *
         *  WP applique .has-primary-background-color sur les <li> enfants
         *  via le bloc parent. On override agressivement ici pour garantir
         *  un dropdown blanc lisible.
         * ============================================================ */

        & .wp-block-navigation__submenu-container {
            /* !important : depuis la conversion en blocs navigation-submenu, WP
               estampille le conteneur du sous-menu avec .has-primary-background-color
               (fond bleu, !important) et .has-surface-color (texte blanc) hérités
               des couleurs d'overlay. Sans !important, le dropdown desktop reste
               bleu et son texte invisible (bleu sur bleu). */
            background: var(--ffv-color-surface) !important;
            color: var(--ffv-color-primary) !important;
            border: 1px solid var(--ffv-color-border);
            border-radius: var(--ffv-radius-card);
            box-shadow: var(--ffv-shadow-card);
            padding: 0.5rem;
            min-inline-size: 240px;
            margin-block-start: 0.5rem;
            opacity: 0;
            transform: translateY(-6px);
            transition:
                opacity 0.2s ease,
                transform 0.2s ease,
                visibility 0.2s ease;
            pointer-events: none;
            visibility: hidden;

            /* Pont de survol invisible : comble le gap de 0.5rem entre l'item
               parent et le dropdown afin que le survol ne soit pas perdu en
               traversant le vide (sinon le menu se ferme avant le clic).
               Hérite de pointer-events:none tant que le dropdown est masqué,
               donc actif uniquement quand il est ouvert. Desktop uniquement. */
            @media (min-width: 1280px) {
                &::before {
                    content: '';
                    position: absolute;
                    inset-block-end: 100%;
                    inset-inline: 0;
                    block-size: 0.75rem;
                }
            }

            /* Reset des cascades WP sur les enfants.
               overlayBackgroundColor/overlayTextColor sur le bloc navigation
               (requis pour l'overlay mobile) estampille aussi les <li> avec
               .has-primary-background-color, appliqué en !important par le cœur
               de WordPress : sans !important ici, les items du dropdown desktop
               restent bleu marine sur la carte blanche (invisibles). */
            & :is(.wp-block-navigation-item, .wp-block-pages-list__item, .has-primary-background-color, .has-background) {
                margin: 0;
                padding: 0;
                background-color: transparent !important;
                color: var(--ffv-color-primary);
                list-style: none;
            }

            /* Lien : couvre les 2 systèmes WP en un :is() */
            & :is(.wp-block-navigation-item__content, .wp-block-pages-list__item__link, a) {
                display: block;
                inline-size: 100%;
                padding-block: 0.6rem;
                padding-inline: 0.85rem;
                font-size: 0.95rem;
                font-weight: 500;
                line-height: 1.3;
                color: var(--ffv-color-primary);
                text-align: start;
                text-decoration: none;
                background: transparent;
                border-radius: var(--ffv-radius);
                transition:
                    background-color 0.18s ease,
                    color 0.18s ease,
                    padding-inline-start 0.18s ease;

                &::after { display: none; }

                &:hover,
                &:focus-visible {
                    background: var(--ffv-color-primary-pale);
                    color: var(--ffv-color-primary-dark);
                    padding-inline-start: 1.1rem;
                }
            }

            /* Page courante dans le dropdown */
            & :is(.current-menu-item, .current_page_item) > :is(.wp-block-navigation-item__content, .wp-block-pages-list__item__link) {
                background: var(--ffv-color-primary-pale);
                color: var(--ffv-color-primary-dark);
                font-weight: 600;
            }
        }

        & .has-child:hover > .wp-block-navigation__submenu-container,
        & .has-child:focus-within > .wp-block-navigation__submenu-container {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
            visibility: visible;
        }

        /* ============================================================
         *  BURGER MOBILE — 3.5rem × 3.5rem fond rouge accent
         *  Calque sur .header-burger de ffvelo.fr
         * ============================================================ */

        & .wp-block-navigation__responsive-container-open {
            display: none;
            inline-size: 3.5rem;
            block-size: 3.5rem;
            padding: 0;
            background: var(--ffv-color-accent);
            color: var(--ffv-color-surface);
            border: none;
            border-radius: var(--ffv-radius);
            align-items: center;
            justify-content: center;
            transition: background 0.3s ease;

            &:hover {
                background: var(--ffv-color-accent-dark);
                color: var(--ffv-color-surface);
            }

            & svg {
                inline-size: 1.75rem;
                block-size: 1.75rem;
                fill: currentColor;
            }
        }

        /* Croix de fermeture : identique au burger (carré rouge 3.5rem) pour
           que la barre du haut de l'overlay soit visuellement la même qu'à
           l'état fermé (logo + bouton). Le positionnement haut-droite est géré
           plus bas dans la media query burger. */
        & .wp-block-navigation__responsive-container-close {
            display: flex;
            inline-size: 3.5rem;
            block-size: 3.5rem;
            margin: 0;
            padding: 0;
            color: var(--ffv-color-surface);
            background: var(--ffv-color-accent);
            border: none;
            border-radius: var(--ffv-radius);
            align-items: center;
            justify-content: center;
            transition: background 0.3s ease;

            &:hover {
                background: var(--ffv-color-accent-dark);
                color: var(--ffv-color-surface);
            }

            & svg {
                inline-size: 1.75rem;
                block-size: 1.75rem;
                fill: currentColor;
            }
        }

        /* ============================================================
         *  OVERLAY MOBILE — fullscreen fond primary, items left-aligned
         *
         *  Le bug racine du right-alignment venait du fait que les <ul>
         *  internes (submenus) n'avaient pas align-items:stretch — donc
         *  les <li> enfants prenaient leur largeur naturelle puis étaient
         *  alignés flex-end par le parent flex. La règle "tout en stretch
         *  + width:100%" résout définitivement le problème.
         * ============================================================ */

        & .wp-block-navigation__responsive-container.is-menu-open {
            /* Bande blanche de 5rem en haut (reproduit l'en-tête fermé derrière
               le logo et la croix) puis fond primary. Peinte ICI et non sur la
               marque : le bouton de fermeture vit dans le contexte d'empilement
               de ce conteneur (z 100000) et serait recouvert par une barre
               posée sur la marque (z 100001). */
            background: linear-gradient(to bottom, var(--ffv-color-surface) 0 5rem, var(--ffv-color-primary) 5rem 100%);
            /* La bande blanche défile avec le contenu du menu (pas de sticky) ;
               le bleu sous-jacent garantit qu'on ne voit jamais « à travers ». */
            background-attachment: local;
            background-color: var(--ffv-color-primary);
            color: var(--ffv-color-surface);
            /* 5rem = bande blanche du haut, puis un vrai espace avant la
               recherche (elle ne doit pas coller à la bande). Le ~2rem au-dessus
               de la recherche égale l'espace en dessous (marge basse de la
               recherche + padding haut du 1er item « Accueil »). */
            padding-block: calc(5rem + clamp(2rem, 4vw, 2.5rem)) clamp(2rem, 6vw, 3rem);
            padding-inline: clamp(1.5rem, 5vw, 3rem);

            /* Containers : tous en column flex + stretch (root du fix) */
            & :is(
                .wp-block-navigation__container,
                .wp-block-navigation__responsive-container-content,
                .wp-block-navigation__submenu-container
            ) {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                flex-wrap: nowrap;
                gap: 0;
                margin: 0;
                padding: 0;
                text-align: start;
            }

            /* Items : width 100%, alignement gauche, neutralisation WP.
               align-items:stretch est crucial : WP rend les <li> parents en
               flex column avec align-items:flex-end (hérité de justifyContent
               "right"), ce qui projetait les sous-menus à droite. */
            & :is(.wp-block-navigation-item, .wp-block-pages-list__item, .has-primary-background-color, .has-background) {
                inline-size: 100%;
                align-self: stretch;
                align-items: stretch;
                justify-content: flex-start;
                text-align: start;
                margin: 0;
                padding: 0;
                background: transparent;
                color: var(--ffv-color-surface);
                list-style: none;
            }

            & > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item {
                border-block-end: 1px solid rgb(255 255 255 / 0.10);

                &:last-child { border-block-end: none; }
            }

            /* La recherche est le 1er élément de l'overlay (order:-1) mais n'a
               pas de séparateur ni de padding bas comme les items. Sans marge,
               « Accueil » colle à la barre de recherche alors que l'espace
               entre items vaut ~2rem (somme des paddings). On rétablit le même
               rythme avec une marge basse. */
            & .ffv-site-header__search {
                margin-block-end: 1rem;
            }

            /* Label des items principaux : grand, gras, blanc */
            & :is(.wp-block-navigation-item__content, .wp-block-pages-list__item__link) {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 0.75rem;
                inline-size: 100%;
                padding-block: 1rem;
                padding-inline: 0;
                font-size: 1.25rem;
                font-weight: 600;
                line-height: 1.3;
                color: var(--ffv-color-surface);
                text-align: start;
                text-decoration: none;
                background: transparent;
                border-radius: 0;
                white-space: normal;

                &::after { display: none; }

                &:hover,
                &:focus-visible {
                    color: color-mix(in srgb, var(--ffv-color-surface) 85%, transparent);
                    background: transparent;
                }
            }

            /* Page courante : rouge accent */
            & :is(.current-menu-item, .current_page_item) > :is(.wp-block-navigation-item__content, .wp-block-pages-list__item__link) {
                color: var(--ffv-color-accent);
            }

            /* Chevron sous-menu : à droite, rotation au déploiement */
            & .wp-block-navigation-submenu__toggle {
                justify-content: space-between;

                & .wp-block-navigation__submenu-icon {
                    margin-inline-start: auto;
                    color: rgb(255 255 255 / 0.7);
                    transition: transform 0.25s ease;
                }

                &[aria-expanded="true"] .wp-block-navigation__submenu-icon {
                    transform: rotate(180deg);
                }
            }

            /* Sous-menu en overlay : indent gauche + bordure subtile */
            & .wp-block-navigation__submenu-container {
                background: transparent;
                border: none;
                border-inline-start: 2px solid rgb(255 255 255 / 0.15);
                box-shadow: none;
                margin-block-end: 0.5rem;
                margin-inline-start: 0.25rem;
                padding-block-end: 0.5rem;
                padding-inline-start: 1rem;
                min-inline-size: 0;
                inline-size: auto;
                position: static;
                opacity: 1;
                transform: none;
                pointer-events: auto;
                visibility: visible;
                border-radius: 0;

                & :is(.wp-block-navigation-item__content, .wp-block-pages-list__item__link) {
                    font-size: 1rem;
                    font-weight: 400;
                    padding-block: 0.5rem;
                    padding-inline: 0;
                    color: color-mix(in srgb, var(--ffv-color-surface) 82%, transparent);

                    &:hover,
                    &:focus-visible {
                        color: var(--ffv-color-surface);
                        padding-inline-start: 0.5rem;
                        background: transparent;
                    }
                }
            }
        }
    }
}

/* ========================================================================
 *  Bascule en mode burger jusqu'à 1280px (override de la media query WP)
 *  WP par défaut switche à 600px → on étend pour matcher ffvelo.fr
 * ======================================================================== */

@media (max-width: 1279.98px) {
    .ffv-site-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }

    .ffv-site-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
}

/* ========================================================================
 *  Logo épinglé en haut de l'overlay mobile ouvert
 *
 *  Le bloc navigation pose .is-menu-open / .has-modal-open sur le CONTENEUR
 *  responsive (#modal-x), pas sur <html>. La marque étant un frère du bloc
 *  navigation, on détecte l'ouverture via :has() au niveau du header, puis on
 *  promeut la marque au-dessus de l'overlay (z-index > 100000) dans une barre
 *  blanche pleine largeur, identique à l'en-tête fermé (le SVG du logo serait
 *  illisible sur le fond primary de l'overlay).
 * ======================================================================== */

@media (max-width: 1279.98px) {
    /* Barre du haut identique à l'état fermé : hauteur 5rem (= header fermé),
       items centrés verticalement, mêmes retraits latéraux (2rem) que le logo
       et le burger fermés (tous deux à 32px des bords du viewport). */
    .ffv-site-header:has(.wp-block-navigation__responsive-container.is-menu-open) .ffv-site-header__brand {
        position: fixed;
        inset-block-start: 0;
        inset-inline: 0;
        z-index: 100001;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        block-size: 5rem;
        padding-block: 0;
        /* Aligné EXACTEMENT sur le logo fermé : l'en-tête porte le global-padding
           WP (1rem) PUIS .ffv-site-header__inner ajoute son propre padding fluide.
           On additionne les deux pour que le logo ne bouge pas à l'ouverture. */
        padding-inline: calc(1rem + clamp(1rem, 3vw, 2rem));
        pointer-events: none;
    }

    .ffv-site-header:has(.wp-block-navigation__responsive-container.is-menu-open) .ffv-site-header__brand .wp-block-site-logo {
        pointer-events: auto;
    }

    /* Bouton de fermeture haut-droite, calé exactement sur le burger fermé.
       ABSOLUTE (et non fixed) : son bloc englobant est le conteneur overlay
       (scrollable) → la croix défile avec le contenu, comme la bande blanche.
       Le dialog interne repasse en static pour que la croix s'ancre bien sur
       le conteneur. */
    .ffv-site-header:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-dialog {
        position: static;
    }

    .ffv-site-header:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-close {
        position: absolute;
        /* Centre vertical à 40px (= centre du burger dans la barre de 5rem). */
        inset-block-start: 0.75rem;
        /* Même retrait droit que le burger fermé : global-padding WP (1rem) +
           padding fluide de l'inner → la croix tombe pile sur le burger. */
        inset-inline-end: calc(1rem + clamp(1rem, 3vw, 2rem));
        z-index: 100002;
    }

    /* Le bouton « ouvrir » reste dans le flux (display:flex en mobile) ; une fois
       l'overlay ouvert il ferait doublon derrière la croix : on le masque. */
    .ffv-site-header:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open {
        display: none !important;
    }

    /* Connecté (barre d'admin WP) : l'overlay et la marque démarrent SOUS la
       barre d'admin, pour que la bande blanche du menu ouvert coïncide
       exactement avec l'en-tête fermé (même hauteur, même position). On
       neutralise le décalage que le core applique au dialog (margin-top),
       devenu redondant. */
    body.admin-bar .ffv-site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
        inset-block-start: var(--wp-admin--admin-bar--height, 32px);
    }

    body.admin-bar .ffv-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
        margin-block-start: 0 !important;
    }

    body.admin-bar .ffv-site-header:has(.wp-block-navigation__responsive-container.is-menu-open) .ffv-site-header__brand {
        inset-block-start: var(--wp-admin--admin-bar--height, 32px);
    }
}

/* ========================================================================
 *  Polish responsive sur très petits écrans
 * ======================================================================== */

@media (max-width: 30rem) {
    .ffv-site-header__brand {
        gap: 0.5rem;
    }
}

/* ========================================================================
 *  La recherche est un bloc enfant du menu de navigation (ref 4) : elle
 *  apparaît donc dans l'overlay mobile et à droite du menu en desktop.
 *  Ce même menu est réutilisé dans le pied de page (« Liens utiles ») où la
 *  recherche n'a pas sa place : on l'y masque.
 * ======================================================================== */

.site-footer .wp-block-search {
    display: none;
}

/* ========================================================================
 *  Compense le sticky pour les ancres internes
 * ======================================================================== */

:where(:target) {
    scroll-margin-block-start: calc(var(--ffv-h-desktop, 5.5rem) + 1rem);
}