/* Menu mobile

   L'implementation d'origine (panneau plein ecran vert, sous-menus replies en
   max-height:0, texte blanc 24px, filtre colore sur le bouton) a ete retiree :
   elle decrivait un tout autre pattern que la maquette SMB et sa specificite
   primait sur les surcharges. Le menu mobile SMB est en fin de fichier.
   Sauvegarde de la version precedente conservee hors depot. */


/* Menu */

.header {
    position: fixed;
    transition: var(--transition);
    z-index: 1000;
    width: 100%;

    &.home {
        &:not(.scrolling) {
            .header__logo {
                img {
                    filter: brightness(0) invert(1);
                }
            }
        }

        &.scrolling {
            .menu__main {
                .menu-item {
                    &>a {
                        &:after {
                            filter: brightness(0) saturate(100%) invert(6%) sepia(59%) saturate(4889%) hue-rotate(202deg) brightness(94%) contrast(106%) !important;
                        }
                    }
                }
            }
        }
    }

    &:not(.home) {
        .menu__main {
            .menu-item {
                &::marker {
                    display: none !important;
                    list-style: none !important;
                }

                &>a {
                    &:after {
                        filter: brightness(0) saturate(100%) invert(6%) sepia(59%) saturate(4889%) hue-rotate(202deg) brightness(94%) contrast(106%) !important;
                    }
                }
            }
        }
    }

    &.scrolling {
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(5px);

        .menu {
            border: 1px solid rgba(0, 75, 175, 0.33) !important;
            background: transparent !important;

            .menu__main {
                &>.menu-item {
                    &>.sub-menu {
                        top: 73px !important;
                        border-radius: 0 0 16px 16px !important;
                    }
                }

                .menu-item {

                    &>a,
                    &>span {
                        &:not(:hover) {
                            color: var(--dark-blue) !important;
                        }
                    }
                }
            }
        }
    }

    @media (min-width: 992px) {

        &:not(.home) {
            .menu {
                .menu__main {
                    li:not(.img_left, .img_right) {

                        a,
                        a span {
                            &:not(:hover) {
                                color: var(--dark-blue);
                            }
                        }
                    }
                }
            }
        }
    }

    .header__main {
        align-items: center;
        display: flex;
        justify-content: space-between;
        transition: all 0.3s;
        width: 100%;

        @media (min-width: 992px) {
            padding: 24px 0px;
        }

        &.container {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .header__logo {
                align-self: center;
                display: block;
                position: relative;
                min-width: 192px;
                min-height: 48px;
                z-index: 9999;

                &:after {
                    opacity: 0;
                    transition: var(--transition);
                    transform: translateX(100%);
                }

                img {
                    transition: all 0.3s;
                }

                @media (min-width: 992px) {
                    &:hover {
                        img {
                            opacity: 0.7;
                        }
                    }
                }
            }

            .cta {
                &:before {
                    background-image: url('../img/contact_expert.svg') !important;
                }
            }
        }

        @media (min-width: 992px) {
            .menu {
                flex-direction: row;
                overflow: visible;
                gap: 24px;
                margin-top: 0;
                padding: 0 16px;
                height: 48px;
                display: flex;
                position: static;
                background: rgba(255, 255, 255, 0.08);
                border-radius: var(--border-radius-cta);
                backdrop-filter: blur(4px);
                border: 1px solid rgba(255, 255, 255, 0.16);

                &.open i {
                    transform: rotate(180deg);
                }

                &.open .sub-menu {
                    border-color: var(--light-blue);
                    max-height: 500px;
                }

                .menu__main {
                    position: static;
                    display: flex;
                    margin: 0;
                    padding: 0;
                    align-items: center;
                    order: -1;
                    overflow: visible;

                    li {
                        list-style: none;
                    }

                    &>li {
                        &:before {
                            display: none;
                        }
                    }

                    &>.menu-item {
                        overflow: hidden;
                        height: fit-content;
                        padding: 30px 0;
                        width: auto;
                        position: unset;

                        &:hover {
                            overflow: visible;

                            .sub-menu {
                                opacity: 1;
                                max-height: unset;
                                visibility: visible;
                            }

                            &>a,
                            &>span {
                                color: var(--light-blue);

                                &:after {
                                    transform: rotate(180deg);
                                    filter: brightness(0) saturate(100%) invert(6%) sepia(59%) saturate(4889%) hue-rotate(202deg) brightness(94%) contrast(106%) !important;
                                }
                            }
                        }

                        &>a,
                        &>span {
                            padding: 16px;
                            align-items: center;
                            transition: all 0.3s;
                            color: #fff;
                            font-family: var(--main-font);
                            font-size: 16px;
                            line-height: 16px;
                            font-weight: var(--bold);
                        }

                        &.menu-item-has-children {
                            &>a {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                position: relative;

                                &:after {
                                    content: '';
                                    background-image: url(../../img/chevron_down.svg);
                                    width: 12px;
                                    height: 12px;
                                    display: inline-block;
                                    background-size: cover;
                                    background-repeat: no-repeat;
                                    transition: var(--transition);
                                    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(268deg) brightness(103%) contrast(101%);
                                    margin-left: 5px;
                                }
                            }
                        }

                        /**********************A supprimer **********************/

                        &>.sub-menu {
                            visibility: hidden;
                            max-height: 0;
                            opacity: 0;
                            margin: 0;
                            padding: 0;
                            position: absolute;
                            overflow: hidden;
                            background-color: var(--white);
                            /* left: -343px; */
                            top: 100%;
                            display: grid;
                            padding: 32px 48px;
                            grid-template-columns: repeat(2, minmax(auto, 328px));
                            width: max-content;
                            border-radius: var(--border-radius);
                            /* box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.3); */
                            box-shadow: 0px 30px 30px 0px rgba(0, 0, 0, 0.16);
                            left: 46%;
                            transform: translateX(-50%);

                            @media (min-width: 992px) {
                                gap: 47px 30px;
                            }

                            @media (min-width: 1200px) {
                                gap: 30px;
                            }


                            &.four_col {
                                grid-template-columns: repeat(4, minmax(auto, 190px));

                            }

                            &>.menu-item {
                                min-height: 50px;

                                &:not(:has(>.sub-menu)) {
                                    &:hover {
                                        a {
                                            color: var(--light-blue) !important;

                                            span {
                                                color: var(--light-blue) !important;
                                            }
                                        }
                                    }
                                }

                                &>a {
                                    display: flex;
                                    flex-direction: column;
                                    gap: 12px;
                                    transition: var(--transition);

                                    &:has(+ .sub-menu) {
                                        span {
                                            &:not(.desc) {
                                                border-bottom: 1px solid var(--dark-grey);
                                                padding-bottom: 12px;
                                            }
                                        }
                                    }

                                    span {
                                        color: var(--dark-blue);
                                        transition: var(--transition);

                                        &:not(.desc) {
                                            font-weight: var(--bold);

                                            &:has(+ .desc) {
                                                border-bottom: 1px solid var(--dark-grey);
                                                padding-bottom: 12px;
                                            }
                                        }
                                    }

                                    img {
                                        width: 20px;
                                        height: 20px;
                                        object-fit: contain;
                                    }
                                }

                                &:has(>.sub-menu) {
                                    &>.sub-menu {
                                        padding: 12px 0 0 0;

                                        &>li {
                                            display: flex;
                                            align-items: center;
                                            transition: var(--transition);

                                            &:not(:last-child) {
                                                margin-bottom: 16px;
                                            }

                                            &>a {
                                                color: var(--dark-blue);
                                                transition: var(--transition);

                                                span {
                                                    color: var(--dark-blue);
                                                    transition: var(--transition);
                                                }
                                            }

                                            &:hover {
                                                a {
                                                    color: var(--light-blue);

                                                    span {
                                                        color: var(--light-blue);
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }

                                /* Habillage de la vignette : voir la surcharge SMB en fin de fichier.
                                   Les regles d'origine (280px de large, padding 40px, decalage
                                   -50px, degrade bleu fonce, titre 36px, pointer-events: none)
                                   avaient une specificite superieure et primaient dessus. */
                            }
                        }
                    }
                }
            }

            .menu_mobile,
            .menu__toggle {
                display: none;
            }
        }
    }
}

@media (min-width: 992px) {
    @keyframes fadeInFromTop {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    .menu .menu__main>.menu-item:hover>.sub-menu {
        animation: fadeInFromTop 0.3s ease-out;
    }
}

/* =============================================================================
   SMB — en-tête et menu principal

   Couche de surcharge posée après les règles historiques du thème, qui restent
   en place pour ne rien casser. Les sélecteurs reprennent volontairement leur
   niveau d'imbrication afin d'avoir la spécificité suffisante.
   ============================================================================= */

/* L'en-tête reste fixe. « sticky » ne tiendrait pas : html et body portent
   overflow-x: hidden (css/base/reset.css), ce qui crée un conteneur de
   défilement et neutralise le collage au viewport. */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-white);
    box-shadow: none;
    transition: box-shadow 0.3s ease;
}

/* L'en-tête étant hors flux, le contenu est décalé d'autant. */
main {
    padding-top: var(--header-height);
}

.header.scrolling {
    background: var(--color-white);
    box-shadow: 0 0 30px hsl(var(--hsl-ink) / 0.1);
    backdrop-filter: none;
}

.header .header__main.container {
    height: var(--header-height);
    gap: var(--space-md);
    padding-top: 0;
    padding-bottom: 0;
}

.header .header__main.container .header__logo {
    min-width: 0;
    min-height: 0;
}

.header .header__main.container .header__logo img {
    width: auto;
    height: 48px;
    filter: none;
}

/* ------------------------------ Niveau 1 ---------------------------------- */

/* Cadre et fond hérités du thème : neutralisés en desktop uniquement, le
   panneau mobile ayant besoin de son propre fond blanc. */
@media (min-width: 992px) {
    .header .header__main.container .menu {
        border: 0 !important;
        background: transparent !important;
    }
}

.header .header__main.container .menu .menu__main {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    margin: 0;
    padding: 0;
}

.header .header__main.container .menu .menu__main>.menu-item>a {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--border-radius-full);
    color: var(--color-text) !important;
    font-size: var(--fs-sm);
    font-weight: var(--medium);
    transition: var(--transition);
}

.header .header__main.container .menu .menu__main>.menu-item>a>span {
    color: inherit !important;
}

.header .header__main.container .menu .menu__main>.menu-item:hover>a,
.header .header__main.container .menu .menu__main>.menu-item.current-menu-item>a,
.header .header__main.container .menu .menu__main>.menu-item.current-page-ancestor>a,
.header .header__main.container .menu .menu__main>.menu-item:hover>a>span,
.header .header__main.container .menu .menu__main>.menu-item.current-menu-item>a>span,
.header .header__main.container .menu .menu__main>.menu-item.current-page-ancestor>a>span {
    color: var(--color-primary) !important;
}

/* Chevron sur les entrées qui ouvrent un sous-menu */
.header .header__main.container .menu .menu__main>.menu-item:has(.sub-menu)>a::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("../../img/chevron_down.svg") no-repeat center / contain;
    mask: url("../../img/chevron_down.svg") no-repeat center / contain;
    filter: none !important;
    transition: transform 0.3s ease;

    @media (max-width: 991px) {
        display: none;
    }
}

.header .header__main.container .menu .menu__main>.menu-item:has(.sub-menu):hover>a::after {
    transform: rotate(180deg);
}

/* ------------------------------ Mega menu --------------------------------- */
@media (min-width: 992px) {

    .header .header__main.container .menu .menu__main>.menu-item>.sub-menu {
        display: grid;
        grid-template-columns: 320px repeat(2, 1fr);
        align-items: stretch;
        width: min(1280px, calc(100vw - var(--gutter-x)));
        max-width: none;
        padding: 0;

        /* La carte reste une boîte simple : position normale sous l'en-tête,
           arrondi plein sur les quatre coins. Le recouvrement du survol est
           assuré par un pseudo-élément (voir ::before), pas par une bordure
           transparente — celle-ci réduisait le rayon intérieur à zéro et
           tronquait les coins hauts. */
        top: var(--header-height) !important;
        margin-top: var(--space-xs);
        border: 0;
        border-radius: var(--border-radius-xl) !important;
        background-color: var(--color-white);
        box-shadow: 0 10px 30px -10px hsl(var(--hsl-ink) / 0.12);

        /* Doit rester visible pour ne pas rogner le pont ci-dessous. Les
           angles de la vignette sont gérés sur la vignette elle-même. */
        overflow: visible;
    }

    /* Pont invisible entre l'entrée et le panneau.
       Il part du bord haut de la carte et remonte à l'intérieur de l'en-tête,
       sur toute la largeur du panneau : dès que le curseur descend sous cette
       ligne il est déjà dans le panneau, quelle que soit sa position
       horizontale. Plus aucune zone morte en diagonale. */
    .header .header__main.container .menu .menu__main>.menu-item>.sub-menu::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: calc(var(--space-xs) + 28px);
    }

    /* Chaque entrée occupe toute la hauteur de l'en-tête : son bord bas
       touche le haut du panneau, sans zone morte.

       overflow doit rester visible en permanence. Le thème le mettait à
       hidden hors survol et ne le libérait que sur :hover de l'entrée : dès
       que le curseur quittait celle-ci pour aller vers le panneau, ce dernier
       se retrouvait rogné, donc inatteignable. */
    .header .header__main.container .menu .menu__main>.menu-item {
        display: flex;
        align-items: center;
        height: var(--header-height);
        padding: 0;
        overflow: visible;
    }

    /* Ouverture du panneau.

       Elle n'est plus pilotée par :hover mais par une classe posée en JS
       (js/_menu.js). Le survol seul ne peut pas fonctionner : l'entrée est
       une pilule étroite, le panneau fait toute la largeur. En diagonale, le
       curseur sort de l'entrée avant d'atteindre le panneau et traverse une
       bande qui n'appartient ni à l'une ni à l'autre.

       Un pont en ::after n'y répond pas : pour couvrir cette bande il devrait
       s'étendre sur toute la largeur de l'en-tête, donc passer sous les
       entrées voisines et maintenir plusieurs panneaux ouverts à la fois.
       Un simple délai de fermeture ne marche pas non plus : les panneaux
       s'attardent quand on balaie la barre, ce qui produit un clignotement.

       Le JS ferme après un court sursis, annulé dès que le curseur entre dans
       le panneau — qui est un descendant DOM de l'entrée. C'est la mécanique
       du composant Lovable (openMenu / scheduleClose). */
    .header .header__main.container .menu .menu__main>.menu-item>.sub-menu {
        transition: opacity 0.2s ease;
    }

    /* Neutralise l'ouverture au survol héritée du thème, ainsi que son
       animation d'entrée : celle-ci se rejouait à chaque changement d'état
       de :hover, ce qui saccadait le passage d'une entrée à l'autre. */
    .header .header__main.container .menu .menu__main>.menu-item:hover>.sub-menu {
        opacity: 0;
        visibility: hidden;
        animation: none;
    }

    .header .header__main.container .menu .menu__main>.menu-item.is-open>.sub-menu,
    .header .header__main.container .menu .menu__main>.menu-item:focus-within>.sub-menu {
        opacity: 1;
        visibility: visible;
        max-height: unset;
    }

    .header .header__main.container .menu .menu__main>.menu-item>.sub-menu.four_col {
        grid-template-columns: 320px repeat(3, 1fr);
    }

    /* Vignette pleine hauteur.
       C'est elle qui porte l'arrondi de son côté, le panneau n'étant plus en
       overflow: hidden. */
    .header .header__main.container .menu .menu__main .sub-menu>li.img_left,
    .header .header__main.container .menu .menu__main .sub-menu>li.img_right {
        position: relative;
        width: auto !important;
        min-height: 260px;
        padding: 0;
        overflow: hidden;
        background-size: cover;
        background-position: center;
        pointer-events: auto;
    }

    .header .header__main.container .menu .menu__main .sub-menu>li.img_left {
        border-radius: var(--border-radius-xl) 0 0 var(--border-radius-xl);
    }

    .header .header__main.container .menu .menu__main .sub-menu>li.img_right {
        order: 2;
        border-radius: 0 var(--border-radius-xl) var(--border-radius-xl) 0;
    }

    /* Voile de lecture. La déclaration doit être complète : le bloc du thème
       qui la portait a été retiré, sans « content » le pseudo-élément
       n'existerait pas et le titre resterait à nu sur l'image. */
    .header .header__main.container .menu .menu__main .sub-menu>li.img_left::after,
    .header .header__main.container .menu .menu__main .sub-menu>li.img_right::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to top,
                hsl(var(--hsl-ink) / 0.8) 0%,
                hsl(var(--hsl-ink) / 0.3) 50%,
                transparent 100%);
    }

    .header .header__main.container .menu .menu__main .sub-menu>li.img_left>a,
    .header .header__main.container .menu .menu__main .sub-menu>li.img_right>a {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: start;
        justify-content: end;
        height: 100%;
        padding: 20px;
        color: var(--color-text-invert) !important;
        font-family: var(--font-body);
        font-size: var(--fs-lg);
        line-height: var(--lh-snug);
        font-weight: var(--semibold);
    }

    .header .header__main.container .menu .menu__main .sub-menu>li.img_left>a>span,
    .header .header__main.container .menu .menu__main .sub-menu>li.img_right>a>span {
        color: var(--color-text-invert) !important;
    }

    /* Cartes thématiques */
    .header .header__main.container .menu .menu__main .sub-menu>li:not(.img_left):not(.img_right) {
        padding: var(--space-md) var(--space-2xs);
    }

    .header .header__main.container .menu .menu__main .sub-menu>li:not(.img_left):not(.img_right):nth-child(2) {
        padding-left: var(--space-md);
    }

    .header .header__main.container .menu .menu__main .sub-menu>li:not(.img_left):not(.img_right):last-child {
        padding-right: var(--space-md);
    }

    .header .header__main.container .menu .menu__main .sub-menu>li:not(.img_left):not(.img_right)>a {
        display: block;
        height: 100%;
        padding: var(--space-sm);
        border-radius: var(--border-radius);
        color: var(--color-text) !important;
        transition: var(--transition);
    }

    .header .header__main.container .menu .menu__main .sub-menu>li:not(.img_left):not(.img_right)>a:hover {
        background: var(--color-cream);
    }

    /* Pastille du pictogramme.
       Le picto est un masque posé sur ::before, et non l'image elle-même :
       un filter de recoloration appliqué à l'élément qui porte le fond
       repeindrait aussi ce fond. */
    .header .header__main.container .menu .menu__main .sub-menu>li:not(.img_left):not(.img_right)>a>.menu__picto {
        display: flex;
        width: 48px;
        height: 48px;
        border-radius: var(--border-radius-md);
        background-color: var(--color-cream);
        transition: var(--transition);
    }

    .header .header__main.container .menu .menu__main .sub-menu>li:not(.img_left):not(.img_right)>a>.menu__picto::before {
        content: '';
        display: block;
        width: 24px;
        height: 24px;
        margin: auto;
        background-color: var(--color-primary);
        -webkit-mask: var(--picto-url) no-repeat center / contain;
        mask: var(--picto-url) no-repeat center / contain;
        transition: var(--transition);
    }

    .header .header__main.container .menu .menu__main .sub-menu>li:not(.img_left):not(.img_right)>a:hover>.menu__picto {
        background-color: var(--color-primary);
    }

    .header .header__main.container .menu .menu__main .sub-menu>li:not(.img_left):not(.img_right)>a:hover>.menu__picto::before {
        background-color: var(--color-white);
    }

    .header .header__main.container .menu .menu__main .sub-menu>li:not(.img_left):not(.img_right)>a>span {
        display: block;
        margin-top: var(--space-xs);
        color: var(--color-text) !important;
        font-size: var(--fs-sm);
        font-weight: var(--semibold);
        line-height: var(--lh-snug);
        transition: var(--transition);
    }

    .header .header__main.container .menu .menu__main .sub-menu>li:not(.img_left):not(.img_right)>a:hover>span:not(.desc) {
        color: var(--color-primary) !important;
    }

    .header .header__main.container .menu .menu__main .sub-menu>li:not(.img_left):not(.img_right)>a>span.desc {
        margin-top: var(--space-3xs);
        color: var(--color-text-muted) !important;
        font-size: var(--fs-xs);
        font-weight: var(--regular);
        line-height: var(--lh-relaxed);
    }
}


/* =============================================================================
   Recherche du menu
   ============================================================================= */

.header .header__main.container .header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.header__search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: var(--border-radius-full);
    background: var(--color-cream);
    cursor: pointer;
    transition: var(--transition);
}

.header__search-toggle:hover {
    background: var(--color-primary);
}

.header__search-icon {
    display: block;
    width: 16px;
    height: 16px;
    background-color: var(--color-ink);
    -webkit-mask: url("../../img/icon_search.svg") no-repeat center / contain;
    mask: url("../../img/icon_search.svg") no-repeat center / contain;
    transition: var(--transition);
}

.header__search-toggle:hover .header__search-icon {
    background-color: var(--color-white);
}

/* ------------------------------- Overlay ---------------------------------- */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 96px var(--space-sm) var(--space-sm);
    background: hsl(var(--hsl-ink) / 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
    visibility: hidden;
}

.search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.search-overlay__panel {
    width: 100%;
    max-width: 672px;
    padding: var(--space-md);
    border-radius: var(--border-radius);
    background: var(--color-white);
    box-shadow: var(--shadow-2xl);
    transform: scale(0.96);
    transition: transform 0.3s var(--ease-out-expo);
}

.search-overlay.is-open .search-overlay__panel {
    transform: scale(1);
}

.search-overlay__form {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid hsl(var(--hsl-ink) / 0.1);
    transition: border-color 0.3s ease;
}

.search-overlay__form:focus-within {
    border-bottom-color: var(--color-primary);
}

.search-overlay__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-color: var(--color-primary);
    -webkit-mask: url("../../img/icon_search.svg") no-repeat center / contain;
    mask: url("../../img/icon_search.svg") no-repeat center / contain;
}

.search-overlay__input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    font-weight: var(--regular);
    line-height: var(--lh-snug);
}

.search-overlay__input:focus-visible {
    outline: none;
}

.search-overlay__input::placeholder {
    color: var(--color-text-muted);
}

.search-overlay__close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: var(--border-radius-full);
    background: none;
    cursor: pointer;
    transition: var(--transition);
}

.search-overlay__close:hover {
    background: var(--color-cream);
}

.search-overlay__close span {
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--color-text-muted);
    -webkit-mask: url("../../img/icon_close.svg") no-repeat center / contain;
    mask: url("../../img/icon_close.svg") no-repeat center / contain;
}

.search-overlay__hint {
    margin: var(--space-sm) 0 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.search-overlay__hint kbd {
    padding: 2px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-cream);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
}

/* Le défilement de la page est neutralisé pendant la recherche */
body.search-open {
    overflow: hidden;
}

@media (min-width: 576px) {
    .search-overlay {
        padding-top: 128px;
    }
}



/* =============================================================================
   Menu mobile

   Panneau déroulant sous l'en-tête, sous-menus dépliés. La vignette pleine
   hauteur et les pictogrammes du mega-menu n'ont pas de sens ici : ils sont
   masqués, seuls restent les libellés.
   ============================================================================= */

.header .header__main.container .menu_mobile {
    display: none;
}

.menu__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: var(--border-radius-full);
    background: var(--color-cream);
    cursor: pointer;
    transition: var(--transition);
}

.menu__toggle:hover {
    background: var(--color-primary);
}

.menu__toggle>span {
    display: block;
    width: 18px;
    height: 18px;
    background-color: var(--color-ink);
    -webkit-mask: url("../../img/menu_burger.svg") no-repeat center / contain;
    mask: url("../../img/menu_burger.svg") no-repeat center / contain;
    transition: var(--transition);
}

.menu__toggle:hover>span {
    background-color: var(--color-white);
}

.menu__toggle[aria-expanded="true"]>span {
    -webkit-mask-image: url("../../img/icon_close.svg");
    mask-image: url("../../img/icon_close.svg");
}

@media (min-width: 992px) {
    .menu__accordeon {
        display: none;
    }
}

@media (max-width: 991px) {

    .header .header__main.container .menu_mobile {
        display: block;
    }

    /* Le panneau se déploie sous la barre, sans masquer la page */
    .header .header__main.container .menu {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        height: calc(100vh - var(--header-height));
        height: calc(100dvh - var(--header-height));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0;
        border-top: 1px solid var(--color-border);
        background: var(--color-white);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    }

    .header .header__main.container .menu.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .header .header__main.container .menu .menu__main {
        display: block;
        width: min(1280px, 100%);
        margin: 0 auto;
        padding: var(--space-sm) var(--space-md);
    }

    .header .header__main.container .menu .menu__main>.menu-item {
        display: block;
        height: auto;
        margin: 0 0 var(--space-3xs);
        list-style: none;
    }

    /* Ligne d'entete : le lien reste cliquable, l'accordeon est un bouton a part */
    .header .header__main.container .menu .menu__main>.menu-item.has-accordeon {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .header .header__main.container .menu .menu__main>.menu-item.has-accordeon>.sub-menu {
        grid-column: 1 / -1;
    }

    .header .header__main.container .menu .menu__main>.menu-item::before {
        display: none;
    }

    /* Entrée de premier niveau */
    .header .header__main.container .menu .menu__main>.menu-item>a {
        display: block;
        padding: var(--space-xs) var(--space-sm);
        border-radius: var(--border-radius-md);
        color: var(--color-text) !important;
        font-size: var(--fs-base);
        font-weight: var(--medium);
    }

    .header .header__main.container .menu .menu__main>.menu-item>a>span {
        color: inherit !important;
    }

    .header .header__main.container .menu .menu__main>.menu-item>a:hover {
        background: var(--color-cream);
    }

    .header .header__main.container .menu .menu__main>.menu-item.current-menu-item>a,
    .header .header__main.container .menu .menu__main>.menu-item.current-page-ancestor>a {
        background: var(--color-primary);
        color: var(--color-text-invert) !important;
    }

    .header .header__main.container .menu .menu__main>.menu-item.current-menu-item>a>span,
    .header .header__main.container .menu .menu__main>.menu-item.current-page-ancestor>a>span {
        color: var(--color-text-invert) !important;
    }

    /* Pas de chevron : les sous-menus sont déjà dépliés */
    .header .header__main.container .menu .menu__main>.menu-item>a::after {
        display: none;
    }

    /* Bouton d'accordéon, injecté par js/_menu.js */
    .menu__accordeon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: var(--border-radius-md);
        background: none;
        cursor: pointer;
        transition: var(--transition);
    }

    .menu__accordeon:hover {
        background: var(--color-cream);
    }

    .menu__accordeon::before {
        content: '';
        display: block;
        width: 16px;
        height: 16px;
        background-color: var(--color-text);
        -webkit-mask: url('../../img/chevron_down.svg') no-repeat center / contain;
        mask: url('../../img/chevron_down.svg') no-repeat center / contain;
        transition: transform 0.3s ease;
    }

    .menu-item.is-ouvert>.menu__accordeon::before {
        transform: rotate(180deg);
    }

    /* Sous-menu replié par défaut, déplié par l'accordéon */
    .header .header__main.container .menu .menu__main>.menu-item.has-accordeon>.sub-menu {
        display: none;
    }

    .header .header__main.container .menu .menu__main>.menu-item.has-accordeon.is-ouvert>.sub-menu {
        display: block;
    }

    /* Sous-menu */
    .header .header__main.container .menu .menu__main .sub-menu {
        display: block;
        position: static;
        width: auto;
        max-width: none;
        margin: var(--space-3xs) 0 var(--space-2xs) var(--space-sm);
        padding: 0 0 0 var(--space-xs);
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        animation: none;
    }

    .header .header__main.container .menu .menu__main .sub-menu,
    .header .header__main.container .menu .menu__main .sub-menu>li,
    .header .header__main.container .menu .menu__main>.menu-item {
        list-style: none;
    }

    .header .header__main.container .menu .menu__main .sub-menu>li {
        margin: 0 0 var(--space-3xs);
        min-height: 0;
        padding: 0;
        background: none !important;
    }

    .header .header__main.container .menu .menu__main .sub-menu>li::before,
    .header .header__main.container .menu .menu__main .sub-menu>li::after {
        display: none;
    }

    /* La vignette pleine hauteur ferait doublon avec l'entrée parente */
    .header .header__main.container .menu .menu__main .sub-menu>li.img_left,
    .header .header__main.container .menu .menu__main .sub-menu>li.img_right {
        display: none;
    }

    .header .header__main.container .menu .menu__main .sub-menu>li>a {
        display: block;
        height: auto;
        border-radius: var(--border-radius-sm);
        color: var(--color-text-muted) !important;
        font-size: var(--fs-sm);
        font-weight: var(--regular);
    }

    .header .header__main.container .menu .menu__main .sub-menu>li>a:hover {
        background: var(--color-cream);
        color: var(--color-primary) !important;
    }

    .header .header__main.container .menu .menu__main .sub-menu>li>a>span {
        display: inline;
        margin: 0;
        color: inherit !important;
        font-size: inherit;
        font-weight: inherit;
    }

    /* Pictogrammes et descriptions : réservés au mega-menu */
    .header .header__main.container .menu .menu__main .sub-menu>li>a>.menu__picto,
    .header .header__main.container .menu .menu__main .sub-menu>li>a>span.desc {
        display: none;
    }

    body.menu-open {
        overflow: hidden;
    }
}

/* =============================================================================
   Branche active du menu principal

   WordPress ne pose pas la même classe selon le type d'entrée :

     - entrée personnalisée sans URL (« Nos compétences », href="#")
         → current-menu-ancestor, current-menu-parent
     - entrée liée à une page, parente de la page courante
         → current-page-ancestor, current-page-parent
     - entrée exacte de la page courante
         → current-menu-item, current_page_item

   Les règles plus haut ne visaient que current-menu-item et
   current-page-ancestor : sur une page profonde ouverte depuis une entrée
   personnalisée, aucun parent n'était mis en avant. Toute la branche active —
   parents et enfant — passe désormais en corail.

   Les six classes sont réunies dans un :is() : sa spécificité vaut celle de son
   argument le plus fort, soit une seule classe, ce qui garde des sélecteurs
   comparables à ceux qu'ils surchargent.
   ============================================================================= */

@media (min-width: 992px) {

    /* ---------------------- Entrée de premier niveau ----------------------- */
    /* Le chevron est un masque peint en background-color: currentColor
       (cf. « Chevron sur les entrées qui ouvrent un sous-menu ») : il suit la
       couleur du lien, sans règle supplémentaire. */
    .header .header__main.container .menu .menu__main>.menu-item:is(.current-menu-item:not(.img_left), .current_page_item:not(.img_left), .current-menu-ancestor:not(.img_left), .current-menu-parent:not(.img_left), .current-page-ancestor:not(.img_left), .current-page-parent:not(.img_left))>a,
    .header .header__main.container .menu .menu__main>.menu-item:is(.current-menu-item:not(.img_left), .current_page_item:not(.img_left), .current-menu-ancestor:not(.img_left), .current-menu-parent:not(.img_left), .current-page-ancestor:not(.img_left), .current-page-parent:not(.img_left))>a>span {
        color: var(--color-accent) !important;
    }

    /* ------------------- Carte thématique du méga-menu --------------------- */
    .header .header__main.container .menu .menu__main .sub-menu>li:not(.img_left):not(.img_right):is(.current-menu-item:not(.img_left), .current_page_item:not(.img_left), .current-menu-ancestor:not(.img_left), .current-menu-parent:not(.img_left), .current-page-ancestor:not(.img_left), .current-page-parent:not(.img_left))>a>span:not(.desc) {
        color: var(--color-accent) !important;
    }

    /* La pastille reprend le traitement du survol, en corail */
    .header .header__main.container .menu .menu__main .sub-menu>li:not(.img_left):not(.img_right):is(.current-menu-item:not(.img_left), .current_page_item:not(.img_left), .current-menu-ancestor:not(.img_left), .current-menu-parent:not(.img_left), .current-page-ancestor:not(.img_left), .current-page-parent:not(.img_left))>a>.menu__picto {
        background-color: var(--color-accent);
    }

    .header .header__main.container .menu .menu__main .sub-menu>li:not(.img_left):not(.img_right):is(.current-menu-item:not(.img_left), .current_page_item:not(.img_left), .current-menu-ancestor:not(.img_left), .current-menu-parent:not(.img_left), .current-page-ancestor:not(.img_left), .current-page-parent:not(.img_left))>a>.menu__picto::before {
        background-color: var(--color-white);
    }

    /* ------------------------- Vignette illustrée -------------------------- */
    /* Le libellé y est blanc sur un voile sombre : le corail y reste lisible. */
    .header .header__main.container .menu .menu__main .sub-menu>li:is(.img_left, .img_right):is(.current-menu-item:not(.img_left), .current_page_item:not(.img_left), .current-menu-ancestor:not(.img_left), .current-menu-parent:not(.img_left), .current-page-ancestor:not(.img_left), .current-page-parent:not(.img_left))>a,
    .header .header__main.container .menu .menu__main .sub-menu>li:is(.img_left, .img_right):is(.current-menu-item:not(.img_left), .current_page_item:not(.img_left), .current-menu-ancestor:not(.img_left), .current-menu-parent:not(.img_left), .current-page-ancestor:not(.img_left), .current-page-parent:not(.img_left))>a>span {
        color: var(--color-accent) !important;
    }
}

@media (max-width: 991px) {

    /* Le premier niveau garde sa pastille pleine, en corail au lieu du vert */
    .header .header__main.container .menu .menu__main>.menu-item:is(.current-menu-item, .current_page_item, .current-menu-ancestor, .current-menu-parent, .current-page-ancestor, .current-page-parent)>a {
        background: var(--color-accent);
        color: var(--color-text-invert) !important;
    }

    .header .header__main.container .menu .menu__main>.menu-item:is(.current-menu-item, .current_page_item, .current-menu-ancestor, .current-menu-parent, .current-page-ancestor, .current-page-parent)>a>span {
        color: var(--color-text-invert) !important;
    }

    /* Le chevron est ici un <button> injecté par js/_menu.js, frère du lien et
       hors de la pastille : il ne peut pas hériter de sa couleur. */
    .header .header__main.container .menu .menu__main>.menu-item:is(.current-menu-item, .current_page_item, .current-menu-ancestor, .current-menu-parent, .current-page-ancestor, .current-page-parent)>.menu__accordeon::before {
        background-color: var(--color-accent);
    }

    /* Enfant courant dans le sous-menu déplié */
    .header .header__main.container .menu .menu__main .sub-menu>li:is(.current-menu-item, .current_page_item, .current-menu-ancestor, .current-menu-parent, .current-page-ancestor, .current-page-parent)>a,
    .header .header__main.container .menu .menu__main .sub-menu>li:is(.current-menu-item, .current_page_item, .current-menu-ancestor, .current-menu-parent, .current-page-ancestor, .current-page-parent)>a>span {
        color: var(--color-accent) !important;
        font-weight: var(--semibold);
    }
}