/* ════════════════════════════════════════════════
   HEADER FLOTTANT — commun à toutes les pages
   Design repris de INSPIRATIONS (pilule flottante, menu mobile en carte).
   Typographie du site : Outfit (titres et texte).
   Règles en !important pour passer devant les styles de header de project.css et global.css.
════════════════════════════════════════════════ */

:root {
    --hd-bg: var(--surface);
    --hd-page: var(--bg);
    --hd-ink: var(--ink);
    --hd-accent: var(--accent);
    --hd-accent-hover: color-mix(in srgb, var(--accent) 82%, var(--ink));
    --hd-ink-soft: color-mix(in srgb, var(--ink) 68%, var(--bg));
    --hd-line: color-mix(in srgb, var(--ink) 14%, var(--bg));
    --hd-line-strong: color-mix(in srgb, var(--ink) 28%, var(--bg));
}

header.floating-header {
    position: fixed !important;
    top: 16px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    width: min(calc(100% - 32px), 1040px) !important;
    height: 64px !important;
    margin: 0 auto !important;
    padding: 0 8px 0 24px !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    background: var(--hd-bg) !important;
    border: 1px solid var(--hd-line) !important;
    border-radius: 24px;
    box-shadow: none;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible;
    transition: border-color .32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .32s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

header.floating-header::before {
    display: none !important;
}

/* Marque : cube isométrique + nom, en titre du site */
.floating-header .logo {
    grid-column: 1;
    justify-self: start;
    display: inline-flex !important;
    align-items: center;
    gap: 0.6rem;
    max-width: none;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.03em;
    color: var(--hd-ink);
    text-decoration: none;
}

.floating-header nav {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 !important;
}

.floating-header .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.95rem;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--hd-ink-soft);
    transition: color .18s cubic-bezier(0.22, 1, 0.36, 1);
}

.floating-header .nav-link::after {
    content: "";
    position: absolute;
    left: 0.95rem;
    right: 0.95rem;
    bottom: 9px;
    height: 2px;
    background: var(--hd-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .32s cubic-bezier(0.22, 1, 0.36, 1);
}

.floating-header .nav-link:hover,
.floating-header .nav-link.active {
    color: var(--hd-ink);
}

.floating-header .nav-link:hover::after,
.floating-header .nav-link.active::after {
    transform: scaleX(1);
}

.floating-header .btn-contact {
    grid-column: 3;
    justify-self: end;
    min-height: 48px;
}

/* Bouton burger : pastille noire, deux traits qui deviennent une croix */
.floating-header .menu-burger {
    display: none !important;
}

.floating-header .menu-burger {
    grid-column: 3;
    justify-self: end;
    position: relative;
    width: 48px !important;
    height: 48px !important;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 50% !important;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--surface) 94%, var(--ink)) 0%,
        var(--surface) 50%,
        color-mix(in srgb, var(--surface) 95%, var(--ink)) 100%) !important;
    background-size: 200% 200% !important;
    background-position: 0% 0% !important;
    box-shadow: inset 1px 1px 0 var(--surface),
        0 2px 8px -4px color-mix(in srgb, var(--ink) 25%, transparent);
    transition: background-position .6s ease-out;
    color: var(--ink);
    cursor: pointer;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: background-color .32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .32s;
}

/* Bascule desktop / mobile à 880px, comme INSPIRATIONS */
@media (max-width: 879px) {
    header.floating-header {
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        grid-template-columns: 1fr auto;
    }

    /* Mobile : seuls le logo et le burger restent dans la pilule */
    .floating-header nav,
    .floating-header .btn-contact {
        display: none !important;
    }

    .floating-header .logo {
        white-space: nowrap;
    }

    .floating-header .menu-burger {
        display: flex !important;
        grid-column: 2;
        align-items: center;
        justify-content: center;
    }

    .mobile-overlay {
        display: none !important;
    }

    /* Panneau mobile : carte blanche sous le header */
}

/* Burger : trois barres, la croix apparaît instantanément (pas d'animation) */
.floating-header .menu-burger span {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    width: 20px !important;
    height: 2px !important;
    margin: -1px 0 0 !important;
    background: var(--ink) !important;
    border-radius: 2px !important;
    opacity: 1 !important;
    transform: translateY(-7px);
    transition: none !important;
}

.floating-header .menu-burger span:nth-child(2) {
    transform: translateY(0);
}

.floating-header .menu-burger span:nth-child(3) {
    transform: translateY(7px);
}

.floating-header .menu-burger.active span:nth-child(1) {
    transform: translateY(0) rotate(45deg);
}

.floating-header .menu-burger.active span:nth-child(2) {
    opacity: 0 !important;
}

.floating-header .menu-burger.active span:nth-child(3) {
    transform: translateY(0) rotate(-45deg);
}

/* Menu mobile plein écran : liens empilés à gauche, « Me contacter » en bas */
@media (max-width: 879px) {
    .mobile-sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-height: none;
        padding: 112px 24px 32px;
        background: var(--hd-bg);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: none;
        transition: opacity .3s ease, visibility 0s linear .3s;
        z-index: 99;
    }

    .mobile-sidebar.active {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    .mobile-sidebar::before {
        display: none;
    }

    .mobile-sidebar-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    .mobile-sidebar nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex: 1;
        gap: 0;
        padding: 0;
    }

    .mobile-sidebar .nav-link {
        display: block;
        min-height: 0;
        padding: 18px 0;
        border-bottom: 1px solid var(--hd-line);
        font-family: var(--font-title);
        font-size: 1.9rem;
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 1.1;
        text-align: left;
        color: var(--hd-ink);
    }

    .mobile-sidebar .btn-contact {
        display: flex !important;
        width: 100%;
        margin-top: auto;
        height: 56px;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }
}

/* Balayage de lumière au survol du burger, comme les boutons argentés */
.floating-header .menu-burger:hover {
    background-position: 100% 100% !important;
}

/* Logo : image logoMR.svg, 32px de haut */
.floating-header .logo img {
    display: block;
    height: 32px;
    width: auto;
}