/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* FaceIT.Web — scope: main layout only
   Author      : Philippe Ryf — assisted by Hermes web-coder
   Created     : 2026-10-14
   Revisions   : 2026-10-14 initial
                 2026-10-14 sticky header, wrapping anchor navigation, four-column footer
                 2026-10-14 fixed top/bottom control, rail gutter, 44 px navigation targets,
                            language codes on phones
   Notes       : Component-scoped styles. Shared tokens live in wwwroot/app.css.
                 The anchor navigation wraps on narrow screens instead of scrolling
                 sideways, and no burger menu is needed: the site stays free of
                 JavaScript. Every interactive target is at least 2.75rem (44px) tall,
                 which WCAG 2.2 requires for touch.
                 The fixed control is one markup at every width. On a wide screen it is a
                 rail on the right edge with a thumb that follows the scroll; where the
                 rail is dropped, the two buttons stay and never cover anything. Both
                 placements were measured, not chosen: the numbers are in the two
                 comments above .page-controls and .wrap. */

/* The two addresses of the fixed control. They must add no height and no line box to
   the page: a target is an address, nothing else. */
.anchor-target[b-0rudcmfjsc] {
    display: block;
    block-size: 0;
    overflow: hidden;
}

.site-header[b-0rudcmfjsc] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
}

.header-inner[b-0rudcmfjsc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding-block: var(--space-2);
}

.brand[b-0rudcmfjsc] {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-2);
    align-items: center;
    /* The name and the mark together measured 25.6 px tall on a phone: a tap target that
       a thumb misses. The link now reaches 2.75rem even with the tagline hidden. */
    min-block-size: 2.75rem;
    text-decoration: none;
    color: var(--ink);
}

/* The mark takes the accent of the theme in force: one SVG, four blocks, no bitmap. */
.brand-mark[b-0rudcmfjsc] {
    /* Two rows: the mark is as tall as the name and the tagline together, and follows the
       theme through currentColor — one file, four palettes. */
    grid-row: span 2;
    align-self: stretch;
    display: block;
    width: auto;
    height: 100%;
    color: var(--accent);
}

.brand-text[b-0rudcmfjsc] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.brand-name[b-0rudcmfjsc] {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.brand-tagline[b-0rudcmfjsc] {
    font-size: 0.8125rem;
    color: var(--muted);
}

/* The fixed control: top, bottom, and the scroll position ---------------------------
   Phones first. Below 720 px the rail is dropped and what remains is the two buttons,
   which live here in the header rather than floating over the page. Why: measured on the
   live page at 320, 360 and 390 px, every heading, every paragraph, every card and every
   field of the contact form runs the full width of the column — there is no empty strip
   on a phone, so a fixed pair would be lying on the copy or on a field. The header is
   sticky, which is what the control needs (always in sight), and it is its own surface:
   the buttons sit on the header and never on the text. */
.page-controls[b-0rudcmfjsc] {
    display: flex;
    order: 1;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
    /* The rail is 4rem tall and its thumb 1rem, so that the thumb has room to walk; the
       keyframes read these two, which is why they are declared on the control itself. */
    --rail-track-height: 4rem;
    --rail-thumb-height: 1rem;
}

.page-controls-link[b-0rudcmfjsc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44 x 44, the smallest a thumb hits: WCAG 2.2, and the rule of the house. */
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--accent);
    /* The layout draws its own line under a navigation link on hover; these two carry a
       chevron and a border instead, and the line would run inside the button. */
    background-image: none;
    text-decoration: none;
}

.page-controls-link:hover[b-0rudcmfjsc],
.page-controls-link:focus-visible[b-0rudcmfjsc] {
    background: var(--accent-tint);
    border-color: var(--accent-strong);
    color: var(--accent-strong);
}

.page-controls-link svg[b-0rudcmfjsc] {
    display: block;
    inline-size: 1.25rem;
    block-size: 1.25rem;
}

/* Dropped below 720 px: the two buttons are the whole control. */
.page-controls-track[b-0rudcmfjsc] {
    display: none;
}

/* Anchors first in the DOM order after the brand, and before the tools on every width:
   the menu is read before the language selector and before the call to action. A reader of
   the site said it plainly — "the language selector, with the button on the right, you see
   it before the main menu" — and this is the order that answers it. On a phone the row
   below the brand is the menu, and the language selector shares the row of the button under
   it, which is what keeps the sticky header at its measured height. */
.site-nav[b-0rudcmfjsc] {
    order: 2;
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-3);
    font-size: 0.9375rem;
}

.site-nav a[b-0rudcmfjsc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    /* "Pôles" measured 35 px wide: the box is padded to 44 so the thumb has something to
       hit, without touching the text it carries. */
    min-inline-size: 2.75rem;
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
}

.site-nav a:hover[b-0rudcmfjsc] {
    color: var(--accent);
    text-decoration: underline;
}

.header-tools[b-0rudcmfjsc] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.lang-switch[b-0rudcmfjsc] {
    display: flex;
    gap: 0;
    font-size: 0.875rem;
}

.lang-switch a[b-0rudcmfjsc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    min-inline-size: 2.75rem;
    padding-inline: 0.5rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--muted);
}

/* The code is for the phone, the full name for the wide screen; the accessible name is
   always the full name, carried by aria-label, so nothing is lost when the code is what
   a visitor sees. */
.lang-switch .lang-code[b-0rudcmfjsc] {
    display: none;
}

.lang-switch a:hover[b-0rudcmfjsc] {
    color: var(--accent);
    background: var(--accent-tint);
}

.lang-switch a[aria-current="true"][b-0rudcmfjsc] {
    color: var(--accent);
    font-weight: 600;
    background: var(--accent-tint);
}

.header-cta[b-0rudcmfjsc] {
    margin: 0;
}

@media (min-width: 48rem) {
    .header-inner[b-0rudcmfjsc] {
        gap: var(--space-4);
    }

    .site-nav[b-0rudcmfjsc] {
        order: 0;
        flex: 0 1 auto;
        margin-left: var(--space-4);
    }

    .header-tools[b-0rudcmfjsc] {
        order: 0;
    }

    .lang-switch[b-0rudcmfjsc] {
        order: 0;
        margin-left: var(--space-3);
    }
}

/* From 720 px up: the rail, centred on the right edge ---------------------------------
   It is fixed, so it is out of the flow of the header at this width and the two buttons
   are no longer part of a row: they become the ends of the rail. */
@media (min-width: 45rem) {
    .page-controls[b-0rudcmfjsc] {
        position: fixed;
        inset-block-start: 50%;
        inset-inline-end: var(--space-2);
        transform: translateY(-50%);
        z-index: 4;
        order: 0;
        flex-direction: column;
        margin: 0;
    }

    /* The rail itself is a decorative separator, drawn with the token that is allowed to
       sit under 3:1; the thumb that travels it is drawn in the accent, which reaches 4.5:1
       on every surface of every theme, so the marker is always the strongest line. */
    .page-controls-track[b-0rudcmfjsc] {
        display: block;
        position: relative;
        inline-size: 2px;
        block-size: var(--rail-track-height);
        margin-inline: auto;
        background: var(--rule);
        border-radius: 1px;
    }

    .page-controls-thumb[b-0rudcmfjsc] {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: 2px;
        block-size: var(--rail-thumb-height);
        background: var(--accent);
        border-radius: 1px;
    }

    @supports (animation-timeline: scroll()) {
        .page-controls-thumb[b-0rudcmfjsc] {
            /* A scroll-driven animation: the thumb walks from the top of the rail to its
               bottom as the document scrolls, and no script — not even a scroll listener —
               is needed. animation-duration: auto is what ties the animation to the
               timeline rather than to a clock. */
            animation-name: rail-thumb-b-0rudcmfjsc;
            animation-duration: auto;
            animation-timing-function: linear;
            animation-fill-mode: both;
            animation-timeline: scroll(root);
            animation-range: 0% 100%;
        }

        @keyframes rail-thumb-b-0rudcmfjsc {
            from {
                transform: translateY(0);
            }

            to {
                transform: translateY(calc(var(--rail-track-height) - var(--rail-thumb-height)));
            }
        }
    }
}

/* The rail, where it is drawn, stands in reserved space ---------------------------------
   Measured on the live page: at 720, 768, 900, 1000 and 1088 px the headings, the ledes,
   the card bodies and the header call to action all run to the right edge of the content
   column, so a rail on the edge would be lying on them. The layout therefore reserves the
   52 px the rail needs (2.75rem of control plus the 0.5rem inset) on the right of the
   centred column, up to 1216 px — above that the free margin beside the 68rem column is
   wider than the rail on its own, measured again at 1200 and 1280 px: nothing to reserve,
   nothing covered. */
@media (min-width: 45rem) and (max-width: 75.99rem) {
    .wrap[b-0rudcmfjsc] {
        padding-inline-end: calc(var(--space-4) + 2.75rem + var(--space-2));
    }
}

/* The rail under the two high-contrast themes -----------------------------------------
   There colour carries no meaning, and a pale rail could not be told from a pale thumb.
   The rail is drawn in the ink of the theme and the thumb cuts the surface out of it, so
   both read: black rail, white marker on the light theme; white rail, black marker on the
   dark one. The chevrons themselves keep the accent of the theme and their border keeps
   --rule-strong, which those themes hold at 21:1. */
:root[data-theme="light-hc"] .page-controls-track[b-0rudcmfjsc],
:root[data-theme="dark-hc"] .page-controls-track[b-0rudcmfjsc] {
    background: var(--ink);
}

:root[data-theme="light-hc"] .page-controls-thumb[b-0rudcmfjsc],
:root[data-theme="dark-hc"] .page-controls-thumb[b-0rudcmfjsc] {
    background: var(--surface);
}

.site-footer[b-0rudcmfjsc] {
    margin-top: var(--space-6);
    border-top: 1px solid var(--rule);
    background: var(--surface-alt);
    padding-block: var(--space-5) var(--space-3);
    font-size: 0.9375rem;
}

.footer-grid[b-0rudcmfjsc] {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
    .footer-grid[b-0rudcmfjsc] {
        grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    }
}

.footer-brand[b-0rudcmfjsc] {
    font-weight: 600;
    color: var(--ink);
    margin-block: 0 var(--space-2);
}

.footer-title[b-0rudcmfjsc] {
    margin-block: 0 var(--space-2);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.site-footer ul[b-0rudcmfjsc] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer li[b-0rudcmfjsc] {
    margin-bottom: var(--space-1);
    color: var(--muted);
}

.site-footer a[b-0rudcmfjsc] {
    color: var(--accent);
}

/* Every footer link is a tap target too: the text alone measured 36 x 19 px for "Pôles"
   and 57 x 24 px for the language links, both below the 44 x 44 the house asks for. */
.site-footer li a[b-0rudcmfjsc],
.footer-line nav a[b-0rudcmfjsc] {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    min-inline-size: 2.75rem;
}

.footer-line[b-0rudcmfjsc] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--rule);
}

.footer-line p[b-0rudcmfjsc] {
    margin: 0;
    color: var(--muted);
}

.footer-line nav[b-0rudcmfjsc] {
    display: flex;
    gap: var(--space-2);
}

/* Phone widths -------------------------------------------------------------------------
   The sticky header is what keeps a call to action on screen at all times, so it stays —
   but it may not eat a third of the screen. Measured on a 390x844 viewport before this
   block: 274 px, 32 % of the height. The tagline and the generous padding go first, the
   brand name shrinks, and the language switcher gets smaller so that it shares a row with
   the button instead of pushing it onto a row of its own. */
@media (max-width: 47.99rem) {
    .brand-tagline[b-0rudcmfjsc] {
        display: none;
    }

    .brand-name[b-0rudcmfjsc] {
        font-size: 1rem;
    }

    /* The mark keeps the height it has always had on a phone: what grew to 44 px is the
       tap target around it. A mark stretched to the height of the row would take 44 px of
       width, which is exactly the width the two buttons of the fixed control need on the
       same row — measured at 320 px, the row then overflowed and the buttons wrapped. */
    .brand-mark[b-0rudcmfjsc] {
        max-block-size: 1.625rem;
        align-self: center;
    }

    .header-inner[b-0rudcmfjsc] {
        padding-block: var(--space-2);
        gap: var(--space-2);
    }

    .header-tools[b-0rudcmfjsc] {
        /* The language codes and the call to action together measure 283 px: they share a
           row at 360 px, and stack at 320 px rather than scroll the page sideways. */
        order: 3;
    }

    /* The three-letter codes of the brief, in place of the full names: on a phone the
       names took 340 px of a 305 px row, which is what pushed the call to action out of
       the viewport and gave the page a horizontal scrollbar. */
    .lang-switch .lang-name[b-0rudcmfjsc] {
        display: none;
    }

    .lang-switch .lang-code[b-0rudcmfjsc] {
        display: inline;
    }

    .site-nav[b-0rudcmfjsc] {
        font-size: 0.9375rem;
        gap: var(--space-1) var(--space-2);
    }

    .lang-switch[b-0rudcmfjsc] {
        font-size: 0.875rem;
    }

    .lang-switch a[b-0rudcmfjsc] {
        padding: 0.25rem;
    }

    /* The button label must not break into three lines inside a wrapped flex row: that was
       the second defect found at 390 px, next to the header height. */
    .header-tools .button[b-0rudcmfjsc] {
        padding: var(--space-2);
        font-size: 0.875rem;
        white-space: nowrap;
    }
}

/* Below 360 px the brand name and the two buttons would not share a row: the name steps
   down one size, which is the difference between a two-line and a three-line header. */
@media (max-width: 22.49rem) {
    .brand-name[b-0rudcmfjsc] {
        font-size: 0.875rem;
    }
}

/* The visitor who asked for no motion. The thumb of the rail is a movement: it is stopped
   at the top of the rail, where it does not pretend to be anywhere in particular, and the
   two buttons keep doing all the work — they are what actually moves the page. */
@media (prefers-reduced-motion: reduce) {
    .page-controls-thumb[b-0rudcmfjsc] {
        animation: none !important;
    }
}