.site-header{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid transparent;transition:background var(--transition),border-color var(--transition),box-shadow var(--transition)}.site-header.is-scrolled{border-color:var(--line);background:rgba(246,244,241,.96);box-shadow:0 10px 30px rgba(15,45,55,.06);backdrop-filter:blur(14px)}.header-inner{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:34px}.brand{display:inline-flex;align-items:center;text-decoration:none}.brand-logo{display:block;width:238px;height:auto;filter:brightness(0) invert(1);transition:filter var(--transition),opacity var(--transition)}.site-header.is-scrolled .brand-logo{filter:none}.primary-nav{display:flex;align-items:center;gap:20px}.primary-nav a{position:relative;color:rgba(255,255,255,.9);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-decoration:none;text-transform:uppercase;transition:color var(--transition)}.primary-nav a:not(.nav-contact):after{content:"";position:absolute;right:0;bottom:-7px;left:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--transition)}.primary-nav a:hover:after,.primary-nav a:focus-visible:after{transform:scaleX(1)}.site-header.is-scrolled .primary-nav a{color:var(--petrol)}.primary-nav a:hover,.primary-nav a:focus-visible{color:var(--sage)}

.primary-nav .nav-contact {
    padding: 10px 17px;
    border: 1px solid var(--sage);
    border-radius: var(--radius-sm);
    background: var(--sage);
    color: var(--petrol);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.primary-nav .nav-contact:hover,
.primary-nav .nav-contact:focus-visible {
    background: var(--white);
    border-color: var(--white);
    color: var(--petrol);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
    transform: translateY(-1px);
}

/* Header après scroll */
.site-header.is-scrolled .primary-nav .nav-contact {
    background: transparent;
    border-color: var(--sage);
    color: var(--petrol);
    box-shadow: none;
}

.site-header.is-scrolled .primary-nav .nav-contact:hover,
.site-header.is-scrolled .primary-nav .nav-contact:focus-visible {
    background: var(--sage);
    border-color: var(--sage);
    color: var(--petrol);
    transform: translateY(-1px);
}

.nav-toggle{display:none;width:44px;height:44px;padding:8px;border:0;color:var(--white);background:transparent;cursor:pointer}.site-header.is-scrolled .nav-toggle{color:var(--petrol)}.nav-toggle span:not(.sr-only){display:block;height:2px;margin:5px 0;background:currentColor}

/* ==========================================================
   HEADER PAGES INTERNES
   ========================================================== */

.site-header--inner {
    border-color: var(--line);
    background: rgba(246, 244, 241, .96);
    box-shadow: 0 10px 30px rgba(15, 45, 55, .06);
    backdrop-filter: blur(14px);
}

.site-header--inner .brand-logo {
    filter: none;
}

.site-header--inner .primary-nav > a,
.site-header--inner .nav-dropdown > summary {
    color: var(--petrol);
}

.site-header--inner .nav-toggle {
    color: var(--petrol);
}


/* ==========================================================
   MENU EXPERTISES
   ========================================================== */

.nav-dropdown {
    position: relative;
}

.nav-dropdown > summary {
    position: relative;

    display: flex;
    align-items: center;
    gap: 6px;

    color: rgba(255, 255, 255, .9);

    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;

    cursor: pointer;
    list-style: none;

    transition: color var(--transition);
}

.nav-dropdown > summary::-webkit-details-marker {
    display: none;
}

.site-header.is-scrolled .nav-dropdown > summary {
    color: var(--petrol);
}

.nav-dropdown > summary:hover,
.nav-dropdown > summary:focus-visible,
.nav-dropdown.is-current > summary {
    color: var(--sage);
}

.nav-dropdown-arrow {
    display: inline-block;

    font-size: .85em;

    transition: transform var(--transition);
}

.nav-dropdown[open] .nav-dropdown-arrow {
    transform: rotate(180deg);
}


/* Petit trait comme les autres éléments du menu */

.nav-dropdown > summary::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -7px;
    left: 0;

    height: 1px;

    background: currentColor;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform var(--transition);
}

.nav-dropdown > summary:hover::after,
.nav-dropdown > summary:focus-visible::after,
.nav-dropdown[open] > summary::after,
.nav-dropdown.is-current > summary::after {
    transform: scaleX(1);
}


/* Sous-menu */

.nav-dropdown-menu {
    position: absolute;

    top: calc(100% + 22px);
    left: 50%;

    width: 330px;

    padding: 10px;

    background: var(--offwhite);

    border: 1px solid var(--line);
    border-radius: var(--radius-sm);

    box-shadow:
        0 18px 45px rgba(15, 45, 55, .14);

    transform: translateX(-50%);
}

.nav-dropdown-menu::before {
    content: "";

    position: absolute;

    top: -23px;
    right: 0;
    left: 0;

    height: 23px;
}

.nav-dropdown-menu a {
    display: block;

    padding: 13px 15px;

    color: var(--petrol) !important;

    text-decoration: none;
    text-transform: none;

    border-radius: 3px;

    transition:
        background var(--transition),
        color var(--transition);
}

.nav-dropdown-menu a::after {
    display: none !important;
}

.nav-dropdown-menu a span {
    display: block;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
}

.nav-dropdown-menu a small {
    display: block;

    margin-top: 3px;

    color: rgba(15, 45, 55, .62);

    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
    background: rgba(168, 176, 154, .16);
}

.nav-dropdown-menu a[aria-current="page"] {
    background: rgba(168, 176, 154, .20);
}

.nav-dropdown-menu a[aria-current="page"] span {
    color: var(--sage-dark, #78866d);
}


/* État contact sur page interne */

.site-header--inner .primary-nav .nav-contact {
    background: transparent;
    border-color: var(--sage);
    color: var(--petrol);
    box-shadow: none;
}

.site-header--inner .primary-nav .nav-contact:hover,
.site-header--inner .primary-nav .nav-contact:focus-visible {
    background: var(--sage);
    border-color: var(--sage);
    color: var(--petrol);
}