/* ──────────────────────────────────────────────────────────────────────────
   NO SAINTS — shared chrome: language switch, two-bar menu, overlay.
   Pages keep their own type and layout; this file only owns the controls.
   Colour comes from the page via the custom properties below, so a page only
   has to define --ink / --paper / --mute / --rule / --ember.
   ────────────────────────────────────────────────────────────────────────── */

.ui {
    display: inline-flex;
    align-items: center;
    gap: 1.1rem;
}

/* ── La marque ───────────────────────────────────────────────────────────── */
/* White artwork on transparent, so it needs no colour of its own. It has to
   read as the name of the house at a glance — at 14px it was a footnote — so
   it is sized against the bar rather than against the small caps beside it.
   The bar itself does not grow with it: see the nav rule in each page, which
   holds its height at 3.4rem because the hero is calc(100svh - 3.4rem). */

.mark { display: inline-flex; align-items: center; }
.mark img {
    display: block;
    height: 26px;
    width: auto;
}
@media (max-width: 34rem) {
    .mark img { height: 21px; }
}

/* ── Langue ──────────────────────────────────────────────────────────────── */

.lang {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mute);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.lang .on { color: var(--ink); }
.lang .sep { padding: 0 0.15em; }

/* ── Deux barres ─────────────────────────────────────────────────────────── */

.burger {
    background: none;
    border: 0;
    padding: 0.4rem 0;
    display: grid;
    gap: 5px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.burger span {
    display: block;
    width: 20px;
    height: 1px;
    background: var(--ink);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3px) rotate(-45deg); }

/* ── Overlay ─────────────────────────────────────────────────────────────── */

.menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6rem var(--gutter) 3rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
}
.menu.open { opacity: 1; visibility: visible; }

.menu-links { display: flex; flex-direction: column; gap: 0.1rem; margin: auto 0; }

.menu-links a {
    display: block;
    /* Display-sized OCR-B goes heavy on black and the overlay turned into a
       poster. Three words don't need the scale: small, widely tracked, spaced
       out — the page behind them stays the loud one. */
    padding: 0.85rem 0;
    font-size: clamp(0.92rem, 2vw, 1.1rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--ink);
    text-decoration: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease;
}
.menu.open .menu-links a { opacity: 1; transform: none; }
/* Staggered, so the list arrives rather than appears. */
.menu.open .menu-links a:nth-child(1) { transition-delay: 0.06s; }
.menu.open .menu-links a:nth-child(2) { transition-delay: 0.12s; }
.menu.open .menu-links a:nth-child(3) { transition-delay: 0.18s; }
.menu-links a:hover { color: var(--ember); }
.menu-links a[aria-current="page"] { color: var(--mute); }

.menu-foot {
    margin-top: auto;
    padding-top: 3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.6rem;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mute);
}
.menu-foot a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.menu-foot a:hover { border-bottom-color: var(--ink); }

body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .burger span, .menu, .menu-links a { transition: none; }
}