/* ============================================
   HEADER & NAVIGATION
   Shared across all pages
   ============================================ */

.header {
    width: 100%;
    padding: var(--grid-margin) var(--grid-margin) var(--grid-margin) var(--grid-margin);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 var(--grid-gutter);
    align-items: center;
    z-index: 10;
    position: relative;
}

.header-logo {
    grid-column: 1 / 3;
    padding: 0 0.5556rem 0.5556rem;
    animation: enterFromTop 600ms var(--ease-out-quart) both;
}

.header-logo img {
    width: 13.8889rem;
    height: 3rem;
    object-fit: contain;
}

.nav-links {
    grid-column: 3 / 13;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(1.6667rem, 4.427vw, 4.7222rem);
    animation: enterFromTop 600ms var(--ease-out-quart) 80ms both;
}

.nav-links a {
    font-family: var(--font-heading);
    font-size: var(--fs-nav);
    font-weight: var(--fw-medium);
    line-height: var(--lh-nav);
    color: var(--cuivre);
    text-align: center;
    padding: 0.5556rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-link__mask {
    position: relative;
    display: inline-block;
    overflow: hidden;
    line-height: var(--lh-nav);
    height: var(--lh-nav);
    vertical-align: bottom;
}

.nav-link__text {
    position: relative;
    display: inline-block;
    transition: transform var(--dur-4) var(--ease-out-expo);
    will-change: transform;
}

.nav-link__text::after {
    content: attr(data-text);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    text-align: center;
    pointer-events: none;
}

/* Desktop nav hover: a discreet scale-up (not the drawer's clip-reveal swap).
   The shared mask must not clip the growing text here, and the duplicate
   text layer used by the reveal is dropped for the desktop nav. */
.nav-links .nav-link__mask { overflow: visible; height: auto; }
.nav-links .nav-link__text::after { content: none; }

.nav-links .nav-link__text {
    transition: transform var(--dur-2) ease;
}

.nav-links a:hover .nav-link__text,
.nav-links a:focus-visible .nav-link__text {
    transform: scale(1.06);
}

/* current page: italic to set it apart from the others */
.nav-links a.active .nav-link__text { font-style: italic; }

.header-line {
    width: 100%;
    height: 1px;
    background: var(--cuivre);
}

/* ---------- HAMBURGER (mobile toggle) ---------- */
.hamburger {
    grid-column: 12 / 13;
    justify-self: end;
    display: none;                 /* shown ≤768 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3333rem;
    width: 2.4444rem;
    height: 2.4444rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    animation: enterFromTop 600ms var(--ease-out-quart) 80ms both;
}

.hamburger span {
    display: block;
    width: 1.4444rem;
    height: 0.1111rem;
    border-radius: 0.1111rem;
    background: var(--cuivre);
    transition: transform var(--dur-3) var(--ease-in-out-cubic),
                opacity   var(--dur-2) ease,
                width     var(--dur-3) var(--ease-out-quart);
}

/* subtle resting asymmetry that settles on hover */
.hamburger:hover span:nth-child(1) { width: 1.1111rem; }
.hamburger:hover span:nth-child(3) { width: 1.2222rem; }

.hamburger.active span:nth-child(1) { transform: translateY(0.4444rem)  rotate(45deg);  width: 1.4444rem; }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-0.4444rem) rotate(-45deg); width: 1.4444rem; }

/* ---------- SUB-PAGE HEADER VARIANTS ---------- */
.page-header { position: relative; z-index: 100; width: 100%; }

/* Colour overrides live in styles.css (page-header--light).
   Teal theme accents (classes emitted by the component for theme="… teal" —
   shared across any teal page: kinésiologie, contact, …). !important overrides
   the base --cuivre colours set on .nav-links a / .hamburger span / .header-line. */
.nav-links--teal a    { color: var(--teal) !important; }
.hamburger--teal span { background: var(--teal) !important; }
.header-line--teal    { background: var(--teal) !important; }

/* ============================================
   MOBILE DRAWER  (portaled to <body>)
   ============================================ */

/* ---------- Scrim ---------- */
.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(35, 16, 14, 0.42);          /* warm ocre-derived veil */
    -webkit-backdrop-filter: blur(0.3889rem) saturate(108%);
    backdrop-filter: blur(0.3889rem) saturate(108%);
    opacity: 0;
    transition: opacity var(--dur-5) var(--ease-out-quart);
}

.nav-scrim.open { opacity: 1; }

/* ---------- Panel ---------- */
.nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    width: min(24.4444rem, 88vw);
    background: var(--ocre);
    color: var(--cuivre);
    overflow: hidden;
    transform: translateX(100%);
    box-shadow: -1.7778rem 0 5rem -1.7778rem rgba(0, 0, 0, 0.55);
    transition: transform var(--dur-5) var(--ease-out-expo);
}

.nav-drawer.open { transform: translateX(0); }

/* atmospheric depth — warm copper glow top-right, gold whisper bottom-left */
.nav-drawer__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 100% 0%,  rgba(191, 105, 84, 0.24), transparent 58%),
        radial-gradient(95% 65% at 0% 100%,    rgba(209, 199, 159, 0.10), transparent 70%);
}

.nav-drawer__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(1.3333rem, 6vw, 2.5556rem);
    padding-top: max(clamp(1.3333rem, 6vw, 2.5556rem), env(safe-area-inset-top, 0));
    padding-bottom: max(clamp(1.3333rem, 6vw, 2.5556rem), env(safe-area-inset-bottom, 0));
}

/* ---------- Top row ---------- */
.nav-drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-drawer__eyebrow {
    font-family: var(--font-heading);
    font-size: var(--fs-caption);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cuivre);
    opacity: 0.65;
}

.nav-drawer__close {
    position: relative;
    width: 2.4444rem;
    height: 2.4444rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background var(--dur-2) ease,
                transform  var(--dur-4) var(--ease-out-expo);
}

.nav-drawer__close:hover { background: rgba(191, 105, 84, 0.14); transform: rotate(90deg); }

/* keyboard-only focus rings (pointer users never see a stray outline) */
.nav-drawer__close:focus-visible,
.drawer-link:focus-visible,
.nav-drawer__contact a:focus-visible {
    outline: 0.1111rem solid currentColor;
    outline-offset: 0.2778rem;
    border-radius: 0.1667rem;
}
.nav-drawer__close:focus:not(:focus-visible),
.drawer-link:focus:not(:focus-visible),
.nav-drawer__contact a:focus:not(:focus-visible) { outline: none; }

.nav-drawer__close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.2222rem;
    height: 0.1111rem;
    border-radius: 0.1111rem;
    background: var(--cuivre);
}

.nav-drawer__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav-drawer__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- Nav ---------- */
.nav-drawer__nav {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0.3333rem, 2vh, 1.1111rem);
}

.drawer-link {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.8889rem;
    color: var(--cuivre);
    /* staggered reveal from-state */
    opacity: 0;
    transform: translateY(1.2222rem);
    transition: opacity   var(--dur-5) var(--ease-out-quart),
                transform var(--dur-5) var(--ease-out-expo);
}

.nav-drawer.open .drawer-link {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(130ms + var(--i) * 65ms);
}

/* sliding marker dot — appears on hover, persists on the active page */
.drawer-link::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 0.58em;
    width: 0.3889rem;
    height: 0.3889rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    transform: scale(0.3);
    transition: opacity var(--dur-3) ease,
                transform var(--dur-3) var(--ease-out-quart);
}

.drawer-link:hover::before,
.drawer-link:focus-visible::before,
.drawer-link.active::before { opacity: 1; transform: scale(1); }

.drawer-link__index {
    font-family: var(--font-heading);
    font-size: var(--fs-caption);
    color: currentColor;
    opacity: 0.5;
    min-width: 2ch;
    font-variant-numeric: tabular-nums;
    transition: opacity   var(--dur-3) ease,
                transform var(--dur-3) var(--ease-out-quart);
}

.drawer-link:hover .drawer-link__index,
.drawer-link.active .drawer-link__index { opacity: 1; transform: translateX(0.1667rem); }

/* big editorial link text — reuses the desktop clip-reveal mask, scaled up */
.nav-drawer .nav-link__mask {
    height: auto;
    line-height: 1.08;
}

.nav-drawer .nav-link__text {
    font-family: var(--font-heading);
    font-size: clamp(1.8889rem, 8.5vw, 2.8889rem);
    line-height: 1.08;
}

.drawer-link:hover .nav-link__text,
.drawer-link:focus-visible .nav-link__text { transform: translateY(-100%); }

/* current page set in italic — the Exposure cut is gorgeous here */
.drawer-link.active .nav-link__text { font-style: italic; }

/* ---------- Footer ---------- */
.nav-drawer__footer {
    opacity: 0;
    transform: translateY(0.8889rem);
    transition: opacity   var(--dur-5) var(--ease-out-quart),
                transform var(--dur-5) var(--ease-out-expo);
}

.nav-drawer.open .nav-drawer__footer {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(130ms + 5 * 65ms);    /* settles after the links */
}

.nav-drawer__rule {
    height: 1px;
    background: currentColor;
    opacity: 0.28;
    margin-bottom: 1.1111rem;
}

.nav-drawer__contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2222rem;
    margin-bottom: 0.7778rem;
}

.nav-drawer__contact a {
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    color: var(--cuivre);
    transition: opacity var(--dur-2) ease;
}

.nav-drawer__contact a:hover { opacity: 0.7; }

.nav-drawer__meta {
    font-family: var(--font-heading);
    font-size: var(--fs-caption);
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: var(--cuivre);
    opacity: 0.62;
}

/* ---------- Teal variant (kinésiologie) ---------- */
.nav-drawer--teal               { background: var(--teal); color: var(--or); }
.nav-drawer--teal .drawer-link,
.nav-drawer--teal .nav-drawer__eyebrow,
.nav-drawer--teal .nav-drawer__contact a,
.nav-drawer--teal .nav-drawer__meta   { color: var(--or); }
.nav-drawer--teal .nav-drawer__close span { background: var(--or); }
.nav-drawer--teal .nav-drawer__close:hover { background: rgba(209, 199, 159, 0.16); }
.nav-drawer--teal .nav-drawer__bg {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(209, 199, 159, 0.16), transparent 60%),
        radial-gradient(95% 70% at 0% 100%,  rgba(0, 0, 0, 0.18),        transparent 72%);
}

/* ---------- Body scroll-lock (set by the component) ---------- */
body.nav-locked {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
    .nav-links { gap: 2.2222rem; }
    .header    { padding: 1.6667rem var(--grid-margin) 0; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }

    .header          { padding: 1.3889rem 1.1111rem 0; }
    /* logo lives in a 2-col grid track; override the global img max-width:100%
       so the burger-menu logo can be sized freely (it has empty space to its right) */
    .header-logo img { width: clamp(10.5556rem, 50vw, 14.4444rem); max-width: none; height: auto; }
}