/* ==========================================================================
   Aston Le Taureau: "La livrée d'Aston"
   Single hand-maintained stylesheet, no build step (see AGENTS.md).
   The site wears Aston's show livery: bordeaux cloth, gold piping,
   the horned "A" monogram. Display type: Gloock. Text type: Libre Franklin.
   Selectors are kept to one class where possible; cascade layers order the
   blocks so later layers win without specificity fights or !important.
   ========================================================================== */

/* Fonts: self-hosted (SIL OFL 1.1, licences next to the files). */
@font-face {
    font-family: "Gloock";
    src: url("../fonts/gloock-latin-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Libre Franklin";
    src: url("../fonts/libre-franklin-latin-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Metric-matched local fallbacks: limit layout shift while the web fonts load. */
@font-face {
    font-family: "Gloock fallback";
    src: local("Times New Roman"), local("Liberation Serif"), local("Tinos");
    size-adjust: 113%;
    ascent-override: 86%;
    descent-override: 20%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Franklin fallback";
    src: local("Arial"), local("Liberation Sans"), local("Arimo");
    size-adjust: 102%;
    ascent-override: 95%;
    descent-override: 24%;
    line-gap-override: 0%;
}

@layer reset, tokens, base, layout, components, utilities;

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
@layer tokens {
    :root {
        /* Colour: sampled from the show livery, the logo and the arena. */
        --c-livree: #6B1D2F;        /* bordeaux saddlecloth */
        --c-livree-fonce: #4A1220;  /* deep bordeaux */
        --c-galon: #D1A86E;         /* gold piping / horn: decoration and text on bordeaux only */
        --c-galon-fonce: #7A5627;   /* gold on light backgrounds (6.6:1 on white) */
        --c-sable: #F0E6D6;         /* arena sand */
        --c-creme: #F8F1E6;         /* Charolais cream: text on bordeaux */
        --c-cuir: #2E2320;          /* leather: body text */
        --c-poussiere: #6B5D55;     /* secondary text */
        --c-trait: #E2D3BB;         /* decorative hairlines only */
        --c-blanc: #FFFFFF;

        --font-display: "Gloock", "Gloock fallback", "Times New Roman", serif;
        --font-text: "Libre Franklin", "Franklin fallback", Arial, sans-serif;

        /* Type scale (Bringhurst: 14 16 18 21 24 28/36 36/60 48/72). */
        --step--1: 0.875rem;
        --step-0a: 1rem;
        --step-0: 1.125rem;
        --step-1: 1.3125rem;
        --step-2: 1.5rem;
        --step-3: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
        --step-4: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
        --step-5: clamp(3rem, 2rem + 5vw, 4.5rem);
        --step-tagline: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);

        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.5rem;
        --space-6: 2rem;
        --space-7: 3rem;
        --space-8: 4rem;
        --space-9: 6rem;
        --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
        --section-space: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
        --container: 72rem;
        --measure: 36rem;

        --radius-s: 6px;
        --radius-m: 12px;
        --radius-tapis: clamp(1.75rem, 1rem + 4vw, 4rem);

        --shadow-object: 0 1px 1px rgb(46 35 32 / 0.12), 0 18px 32px -14px rgb(46 35 32 / 0.45);

        --ease-out: cubic-bezier(0.22, 0.8, 0.24, 1);
        --dur-1: 150ms;
        --dur-2: 240ms;
        --dur-3: 700ms;

        --header-h: 4rem;
        --utility-h: 2.25rem;
    }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body, h1, h2, h3, p, figure, dl, dd, ul, ol {
        margin: 0;
    }

    img, svg, iframe {
        display: block;
        max-width: 100%;
    }

    img {
        height: auto;
    }

    button {
        font: inherit;
        color: inherit;
    }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
@layer base {
    html {
        color-scheme: light;
        scroll-padding-top: calc(var(--header-h) + 1rem);
    }

    body {
        font-family: var(--font-text);
        font-size: var(--step-0);
        line-height: 1.6;
        color: var(--c-cuir);
        background: var(--c-blanc);
        overflow-wrap: break-word;
    }

    h1, h2, h3 {
        line-height: 1.1;
        text-wrap: balance;
    }

    h1, h2 {
        font-family: var(--font-display);
        font-weight: 400;
        color: var(--c-livree);
    }

    h2 {
        font-size: var(--step-3);
        letter-spacing: -0.005em;
    }

    h3 {
        font-size: var(--step-1);
        font-weight: 600;
    }

    p, li, dd {
        text-wrap: pretty;
    }

    b, strong {
        font-weight: 600;
    }

    a {
        color: var(--c-livree);
        text-decoration-thickness: 1px;
        text-underline-offset: 0.18em;
    }

    a:hover {
        text-decoration-thickness: 2px;
    }

    :focus-visible {
        outline: 3px solid var(--c-livree);
        outline-offset: 3px;
    }

    main:focus {
        outline: none;
    }

    ::selection {
        background: var(--c-livree);
        color: var(--c-creme);
    }

    a, button {
        -webkit-tap-highlight-color: rgb(107 29 47 / 0.15);
    }

    .icon {
        width: 1.125em;
        height: 1.125em;
        flex: none;
    }

    @media (max-width: 40em) {
        p {
            hyphens: auto;
        }
    }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
@layer layout {
    .container {
        width: min(100% - 2 * var(--gutter), var(--container));
        margin-inline: auto;
    }

    .section {
        padding-block: var(--section-space) 0;
    }

    /* Pages without a closing band (legal notice, 404) still leave room before the footer. */
    main > .section:last-child {
        padding-block-end: var(--section-space);
    }

    /* Vertical rhythm inside text blocks. */
    .flow > * + * {
        margin-block-start: var(--space-4);
    }

    .flow > h2 + * {
        margin-block-start: var(--space-5);
    }

    .flow > * + h3 {
        margin-block-start: var(--space-6);
    }

    .flow > h3 + * {
        margin-block-start: var(--space-3);
    }

    .flow {
        max-inline-size: var(--measure);
    }

    .container.flow {
        max-inline-size: none;
    }

    .container.flow > * {
        max-inline-size: var(--measure);
    }

    .split {
        display: grid;
        gap: var(--space-6) var(--space-8);
    }

    .split__media {
        margin: 0;
        max-inline-size: 34rem; /* the native width of the split photos: no upscaling at tablet widths */
    }

    .split__media img {
        width: 100%;
        border-radius: var(--radius-m);
    }

    .split__media--portrait img {
        aspect-ratio: 4 / 5;
        object-fit: cover;
        max-inline-size: 26rem;
    }

    .split__media--natural img {
        width: auto;
    }

    /* The section right after the hero leaves room for the portrait badge. */
    .hero + .section {
        padding-block-start: calc(var(--section-space) + 1.25rem);
    }

    @media (min-width: 64em) {
        .split {
            grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
            align-items: start;
        }

        .split--reverse {
            grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
        }

        .split--reverse > .split__media {
            order: -1;
        }

        .split > .flow {
            padding-block-start: var(--space-2);
        }

        .split--center {
            align-items: center;
        }
    }

    .lede {
        font-size: var(--step-1);
        line-height: 1.5;
    }
}

/* --------------------------------------------------------------------------
   Components
   -------------------------------------------------------------------------- */
@layer components {

    /* Skip link ----------------------------------------------------------- */
    .skip-link {
        position: absolute;
        top: var(--space-3);
        left: var(--space-3);
        z-index: 100;
        padding: 0.75rem 1rem;
        border-radius: var(--radius-s);
        background: var(--c-livree);
        color: var(--c-creme);
        font-weight: 600;
        text-decoration: none;
        translate: 0 -300%;
    }

    .skip-link:focus {
        translate: 0 0;
        outline: 2px solid var(--c-galon);
        outline-offset: -6px;
    }

    /* Header -------------------------------------------------------------- */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 20;
        background: var(--c-blanc);
        border-block-end: 1px solid var(--c-trait);
    }

    .utility {
        display: none;
        background: var(--c-livree-fonce);
        color: var(--c-creme);
        font-size: var(--step--1);
    }

    .utility__inner {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: var(--space-6);
        height: var(--utility-h);
    }

    .utility a {
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
        min-height: 1.75rem;
        color: inherit;
        text-decoration: none;
    }

    .utility a:hover {
        text-decoration: underline;
    }

    .utility a:focus-visible {
        outline-color: var(--c-galon);
        outline-offset: 1px;
    }

    .site-header__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        min-height: var(--header-h);
    }

    .brand {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        padding-block: var(--space-2);
        color: var(--c-livree);
        font-family: var(--font-display);
        font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
        line-height: 1.1;
        text-decoration: none;
    }

    .brand__badge {
        display: grid;
        place-items: center;
        flex: none;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background: var(--c-livree);
        box-shadow: inset 0 0 0 2px var(--c-livree), inset 0 0 0 3px var(--c-galon);
    }

    .brand__badge img {
        width: 1.55rem;
        height: auto;
    }

    .brand__badge--large {
        width: 4rem;
        height: 4rem;
        box-shadow: inset 0 0 0 3px var(--c-livree-fonce), inset 0 0 0 4px var(--c-galon);
        background: var(--c-livree);
    }

    .brand__badge--large img {
        width: 2.5rem;
    }

    /* Navigation ----------------------------------------------------------
       Default (no JS, or no Popover API): the menu is a plain visible list
       that wraps under the brand. With `html.js-popover` (set by a one-line
       script in <head>), narrow screens get a "Menu" button that opens the
       list as a native popover (Esc, light dismiss and focus return come
       from the browser). From 72em the list is always inline on one row. */
    .site-nav {
        display: flex;
        align-items: center;
    }

    .menu-toggle {
        display: none;
        align-items: center;
        gap: 0.5rem;
        min-height: 2.75rem;
        padding: 0.5rem 0.875rem;
        border: 1.5px solid var(--c-livree);
        border-radius: var(--radius-s);
        background: transparent;
        color: var(--c-livree);
        font-weight: 600;
        cursor: pointer;
    }

    .menu-toggle .icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .menu-toggle__close {
        display: none;
    }

    .menu-toggle[aria-expanded="true"] .menu-toggle__open,
    .site-nav:has(.menu-panel:popover-open) .menu-toggle__open {
        display: none;
    }

    .menu-toggle[aria-expanded="true"] .menu-toggle__close,
    .site-nav:has(.menu-panel:popover-open) .menu-toggle__close {
        display: block;
    }

    .menu,
    .menu-panel__contact {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Static list (fallback, and the base for the desktop row). */
    .menu-panel {
        display: block;
        position: static;
        inset: auto;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: inherit;
        overflow: visible;
    }

    .menu {
        display: flex;
        flex-wrap: wrap;
        column-gap: var(--space-4);
    }

    .menu a {
        position: relative;
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        color: var(--c-cuir);
        font-size: var(--step-0a);
        font-weight: 500;
        text-decoration: none;
    }

    .menu a[aria-current="page"] {
        color: var(--c-livree);
        font-weight: 600;
        text-decoration: underline;
        text-decoration-thickness: 3px;
        text-underline-offset: 0.45em;
    }

    .menu-panel__contact {
        display: none;
    }

    @media (max-width: 71.99em) {
        /* Without the popover enhancement the list sits on its own row. */
        html:not(.js-popover) .site-header__bar {
            flex-wrap: wrap;
            padding-block-end: var(--space-2);
        }

        html:not(.js-popover) .site-nav {
            flex-basis: 100%;
        }

        .js-popover .menu-toggle {
            display: inline-flex;
        }

        /* Closed: hidden (the browser also hides a closed popover). */
        .js-popover .menu-panel:not(:popover-open) {
            display: none;
        }

        /* Open: a bordeaux sheet under the header bar. */
        .js-popover .menu-panel:popover-open {
            position: fixed;
            inset: var(--header-h) 0 auto 0;
            width: 100%;
            max-height: calc(100dvh - var(--header-h));
            overflow-y: auto;
            padding: var(--space-2) var(--gutter) var(--space-6);
            background: var(--c-livree);
            color: var(--c-creme);
            /* Dim the page below the sheet only; the header (and its toggle) stays bright.
               The transparent ::backdrop still catches taps for light dismiss. */
            box-shadow: 0 0 0 100vmax rgb(46 35 32 / 0.45);
            clip-path: inset(0 0 -100vmax 0);
        }

        .menu-panel::backdrop {
            background: transparent;
        }

        .js-popover .menu-panel:popover-open .menu {
            display: block;
        }

        .js-popover .menu-panel:popover-open .menu a {
            display: flex;
            min-height: 3rem;
            padding-block: 0.25rem;
            border-block-end: 1px solid rgb(248 241 230 / 0.14);
            color: var(--c-creme);
            font-family: var(--font-display);
            font-size: var(--step-2);
            font-weight: 400;
        }

        .js-popover .menu-panel:popover-open .menu a[aria-current="page"] {
            color: var(--c-galon);
            text-decoration: none;
        }

        .js-popover .menu-panel:popover-open .menu a[aria-current="page"]::after {
            content: "";
            width: 0.5rem;
            height: 0.5rem;
            margin-inline-start: 0.75rem;
            background: var(--c-galon);
            rotate: 45deg;
        }

        .js-popover .menu-panel:popover-open .menu-panel__contact {
            display: block;
            margin-block-start: var(--space-4);
        }

        .menu-panel__contact a {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            min-height: 2.75rem;
            color: var(--c-creme);
            text-decoration: none;
        }

        .menu-panel :focus-visible {
            outline-color: var(--c-galon);
        }
    }

    @media (min-width: 72em) {
        .utility {
            display: block;
        }

        .site-header {
            top: calc(-1 * var(--utility-h));
        }

        html {
            scroll-padding-top: calc(var(--header-h) + 1.5rem);
        }

        .site-header__bar {
            min-height: 4.5rem;
        }

        .menu {
            flex-wrap: nowrap;
            align-items: center;
            column-gap: clamp(0.75rem, 2vw - 0.75rem, 1.25rem);
        }

        .menu a::after {
            content: "";
            position: absolute;
            inset-inline: 0;
            bottom: 0.45rem;
            height: 2px;
            background: var(--c-galon-fonce);
            transform: scaleX(0);
            transform-origin: left;
        }

        .menu a:hover::after {
            transform: scaleX(1);
        }

        /* Every item reserves the width of its bold (current) state, so the
           row never shifts from one page to the next. The hidden copy of the
           label is excluded from the accessible name (visibility + alt text). */
        .menu a {
            flex-direction: column;
            justify-content: center;
            vertical-align: top; /* the zero-height ::before must not become the baseline */
        }

        .menu a::before {
            content: attr(data-label);
            content: attr(data-label) / "";
            height: 0;
            overflow: hidden;
            visibility: hidden;
            font-weight: 600;
            pointer-events: none;
            user-select: none;
        }

        .menu a[aria-current="page"]::after {
            display: none;
        }

        .menu__item--contact a {
            padding-inline: 1rem;
            margin-inline-start: var(--space-2);
            border: 1.5px solid var(--c-livree);
            border-radius: var(--radius-s);
            color: var(--c-livree);
            font-weight: 600;
        }

        .menu__item--contact a::after {
            display: none;
        }

        .menu__item--contact a:hover {
            background: var(--c-livree);
            color: var(--c-creme);
        }
    }

    /* Hero: the saddlecloth band --------------------------------------------
       Square top flush under the header, rounded bottom corners, a gold
       piping cord inset all around, portrait badge sewn over the bottom edge. */
    .hero {
        --hero-pad: clamp(1.75rem, 1rem + 3vw, 3rem);
        position: relative;
        isolation: isolate;
        width: min(100% - 2 * var(--space-2), var(--container) + 2 * var(--hero-pad));
        margin-inline: auto;
        padding: clamp(2rem, 1.25rem + 2.5vw, 3rem) var(--hero-pad) clamp(2.75rem, 2rem + 2.5vw, 3.5rem);
        border-radius: 0 0 var(--radius-tapis) var(--radius-tapis);
        background: var(--c-livree);
        color: var(--c-creme);
    }

    .hero::after {
        content: "";
        position: absolute;
        inset: var(--space-3);
        z-index: -1;
        border: 2px solid var(--c-galon);
        border-radius: 0 0 calc(var(--radius-tapis) - var(--space-3)) calc(var(--radius-tapis) - var(--space-3));
        pointer-events: none;
    }

    .hero :focus-visible {
        outline-color: var(--c-galon);
    }

    .hero__title {
        max-inline-size: 20ch;
        color: var(--c-creme);
        font-size: var(--step-4);
        line-height: 1.02;
        letter-spacing: -0.01em;
        hyphens: auto;
    }

    .hero__intro {
        max-inline-size: 42ch;
        margin-block-start: var(--space-3);
        color: var(--c-sable);
        font-size: var(--step-1);
        line-height: 1.45;
    }

    .hero__badge {
        position: absolute;
        right: calc(var(--radius-tapis) + var(--space-4));
        bottom: 0;
        width: clamp(3.5rem, 2.75rem + 2vw, 4.75rem);
        aspect-ratio: 1;
        border-radius: 50%;
        translate: 0 50%;
        box-shadow: 0 0 0 3px var(--c-livree), 0 0 0 5px var(--c-galon), var(--shadow-object);
    }

    /* Home variant. */
    .hero--home {
        padding-block: clamp(2rem, 1rem + 3vw, 4rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
    }

    .hero--home .hero__inner {
        display: grid;
        gap: var(--space-6) var(--space-8);
        align-items: center;
    }

    .hero__portrait {
        width: clamp(6rem, 4rem + 6vw, 9.5rem);
        aspect-ratio: 1;
        margin-block-end: var(--space-5);
        border-radius: 50%;
        box-shadow: 0 0 0 4px var(--c-livree), 0 0 0 6px var(--c-galon), var(--shadow-object);
    }

    .hero--home .hero__title {
        max-inline-size: 10ch;
        font-size: var(--step-5);
        line-height: 0.95;
    }

    .hero__tagline {
        max-inline-size: 18ch;
        margin-block-start: var(--space-4);
        color: var(--c-galon);
        font-family: var(--font-display);
        font-size: var(--step-tagline);
        line-height: 1.15;
        text-wrap: balance;
    }

    .hero--home .video__note {
        color: var(--c-sable);
    }

    @media (min-width: 64em) {
        .hero--home .hero__inner {
            grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        }
    }

    /* Feature list: CSS diamond studs (real list markers keep list semantics). */
    .feature-list {
        list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5z' fill='%237A5627'/%3E%3C/svg%3E");
        padding-inline-start: 1.25em;
    }

    .feature-list > li + li {
        margin-block-start: var(--space-2);
    }

    @media (min-width: 40em) {
        .feature-list--columns {
            columns: 2 14rem;
            column-gap: var(--space-7);
        }

        .feature-list--columns > li {
            break-inside: avoid;
        }

        .feature-list--columns > li + li {
            margin-block-start: 0;
        }

        .feature-list--columns > li {
            margin-block-end: var(--space-2);
        }
    }

    /* Lists of links (404 page): each link gets a 44px target. */
    .feature-list--links > li > a {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        font-weight: 600;
    }

    .feature-list--links > li + li,
    .feature-list--links > li {
        margin-block: 0;
    }

    /* Legal notice: term / value rows (Éditeur, Hébergeur). */
    .legal-list > div {
        display: grid;
        gap: 0 var(--space-5);
        padding-block: var(--space-2);
        border-block-end: 1px solid var(--c-trait);
    }

    .legal-list dt {
        color: var(--c-poussiere);
        font-size: var(--step--1);
        font-weight: 600;
    }

    @media (min-width: 40em) {
        .legal-list > div {
            grid-template-columns: 12rem minmax(0, 1fr);
            align-items: baseline;
        }
    }

    .page-updated {
        color: var(--c-poussiere);
        font-size: var(--step--1);
    }

    /* Biography timeline (chronological paragraphs). */
    .timeline {
        position: relative;
        padding-inline-start: var(--space-5);
        border-inline-start: 2px solid var(--c-galon);
    }

    .timeline > p {
        position: relative;
    }

    .timeline > p + p {
        margin-block-start: var(--space-4);
    }

    .timeline > p::before {
        content: "";
        position: absolute;
        top: 0.55em;
        left: calc(-1 * var(--space-5) - 6px);
        width: 0.625rem;
        height: 0.625rem;
        background: var(--c-galon-fonce);
        rotate: 45deg;
        box-shadow: 0 0 0 3px var(--c-blanc);
    }

    /* Book cover. */
    .book img {
        max-inline-size: 20rem;
        border-radius: 0;
        box-shadow: var(--shadow-object);
    }

    /* NB-4 · Book pull-quote: the cover subtitle, piped like the livery. No box, fill or
       shadow; the 2px gold piping carries a diamond stud like the timeline's. */
    .pullquote {
        position: relative;
        margin-block: var(--space-6);
        padding-block-start: var(--space-5);
        border-block-start: 2px solid var(--c-galon); /* decoration only */
    }

    .pullquote::before {
        content: "";
        position: absolute;
        top: calc(-0.3125rem - 1px); /* centred on the 2px rule */
        left: 0;
        width: 0.625rem;
        height: 0.625rem;
        background: var(--c-galon-fonce);
        rotate: 45deg;
        box-shadow: 0 0 0 3px var(--c-blanc);
    }

    .pullquote__quote {
        margin: 0;
        padding-inline-start: 0.56em; /* width of "«" + U+00A0 in Gloock */
        font-family: var(--font-display);
        font-size: var(--step-2); /* one step below h2 */
        line-height: 1.3;
        color: var(--c-livree);
        text-wrap: balance;
    }

    .pullquote__quote > p {
        text-indent: -0.56em; /* the opening « hangs */
        hyphens: manual;
    }

    .pullquote__source {
        margin-block-start: var(--space-3);
        padding-inline-start: calc(0.56 * var(--step-2)); /* aligns with the quote text */
        font-size: var(--step-0a);
        font-weight: 500;
        color: var(--c-poussiere);
    }

    .pullquote__source cite {
        font-style: normal;
    }

    /* Galleries ------------------------------------------------------------ */
    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
        gap: var(--space-3);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .gallery img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: var(--radius-m);
    }

    @media (min-width: 48em) {
        .gallery--feature {
            grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        }

        .gallery--feature > :first-child {
            grid-row: span 2;
        }

        .gallery--feature > :first-child img {
            height: 100%;
            aspect-ratio: auto;
        }
    }

    /* Three equal 4:3 tiles from 40em (Spectacles). */
    @media (min-width: 40em) {
        .gallery--three {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    /* Two large photos, then three: 6-column grid. */
    @media (min-width: 48em) {
        .gallery--two-three {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }

        .gallery--two-three > li {
            grid-column: span 2;
        }

        .gallery--two-three > li:nth-child(-n + 2) {
            grid-column: span 3;
        }
    }

    /* Video: click-to-load facade ------------------------------------------- */
    .video {
        margin: 0;
    }

    .video__frame {
        position: relative;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border-radius: var(--radius-m);
        background: var(--c-cuir);
    }

    .video--4x3 {
        max-inline-size: 30rem; /* the poster's native 480px */
    }

    .video--4x3 .video__frame {
        aspect-ratio: 4 / 3;
    }

    .video__frame iframe,
    .video__facade {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    .video__facade {
        display: block;
        color: var(--c-creme);
        text-decoration: none;
    }

    .video__facade img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .video__facade::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgb(46 35 32 / 0.9), rgb(46 35 32 / 0.6) 45%, rgb(46 35 32 / 0) 80%);
    }

    .video__play {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        display: grid;
        place-items: center;
        width: clamp(3.5rem, 2.5rem + 3vw, 4.75rem);
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--c-livree);
        box-shadow: inset 0 0 0 3px var(--c-livree), inset 0 0 0 5px var(--c-galon), 0 8px 24px rgb(46 35 32 / 0.4);
        translate: -50% -50%;
    }

    .video__play .icon {
        width: 42%;
        height: 42%;
        fill: currentColor;
        translate: 6% 0;
    }

    .video__label {
        position: absolute;
        inset-inline: var(--space-4);
        bottom: var(--space-3);
        z-index: 1;
        font-weight: 600;
        line-height: 1.3;
        text-wrap: balance;
        text-shadow: 0 1px 2px rgb(46 35 32 / 0.6);
    }

    @media (max-width: 40em) {
        .video__label {
            font-size: var(--step-0a);
        }

        .video__play {
            top: 42%; /* clears the two-line label */
        }
    }

    .video__facade:hover .video__play {
        background: var(--c-livree-fonce);
        box-shadow: inset 0 0 0 3px var(--c-livree-fonce), inset 0 0 0 5px var(--c-galon), 0 8px 24px rgb(46 35 32 / 0.4);
    }

    /* The frame clips its content, so the focus ring is drawn on the frame itself. */
    .video__facade:focus-visible {
        outline: none;
    }

    .video__frame:has(.video__facade:focus-visible) {
        outline: 3px solid var(--c-livree);
        outline-offset: 3px;
    }

    .hero .video__frame:has(.video__facade:focus-visible) {
        outline-color: var(--c-galon);
    }

    .video__note {
        margin-block-start: var(--space-2);
        color: var(--c-poussiere);
        font-size: var(--step--1);
    }

    /* Buttons --------------------------------------------------------------- */
    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.6em;
        min-height: 3rem;
        padding: 0.75rem 1.375rem;
        border-radius: var(--radius-s);
        background: var(--c-livree);
        color: var(--c-creme);
        font-size: var(--step-0);
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        box-shadow: inset 0 0 0 3px var(--c-livree), inset 0 0 0 4px var(--c-galon);
    }

    .button:hover {
        background: var(--c-livree-fonce);
        box-shadow: inset 0 0 0 3px var(--c-livree-fonce), inset 0 0 0 4px var(--c-galon);
    }

    .button:active {
        translate: 0 1px;
    }

    .button--secondary {
        background: transparent;
        color: var(--c-livree);
        box-shadow: inset 0 0 0 1.5px var(--c-livree);
    }

    .button--secondary:hover {
        background: var(--c-livree);
        color: var(--c-creme);
        box-shadow: inset 0 0 0 3px var(--c-livree), inset 0 0 0 4px var(--c-galon);
    }

    /* Forced colors drop backgrounds and box-shadows: give buttons a real border. */
    @media (forced-colors: active) {
        .button {
            border: 2px solid ButtonText;
        }
    }

    /* Inline links with an external-tab icon. */
    a > .icon--external {
        display: inline-block;
        width: 0.85em;
        height: 0.85em;
        margin-inline-start: 0.3em;
        vertical-align: -0.05em;
    }

    .button > .icon--external {
        margin-inline-start: 0;
    }

    .link-more {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        font-weight: 600;
    }

    /* Home hub ------------------------------------------------------------- */
    .hub__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
        gap: var(--space-7) var(--space-6);
        margin: var(--space-6) 0 0;
        padding: 0;
        list-style: none;
    }

    .hub-card {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .hub-card h3 {
        color: var(--c-livree);
        font-family: var(--font-display);
        font-size: var(--step-2);
        font-weight: 400;
    }

    .hub-card p {
        color: var(--c-poussiere);
        font-size: var(--step-0a);
        line-height: 1.5;
    }

    .hub-card__media {
        order: -1;
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: var(--radius-m);
    }

    .hub-card__links {
        display: flex;
        flex-wrap: wrap;
        gap: 0 var(--space-5);
        margin: auto 0 0;
        padding: 0;
        list-style: none;
    }

    .hub-card__links a {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        font-weight: 600;
    }

    /* Boutique ------------------------------------------------------------- */
    .shop {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-5) var(--space-7);
    }

    .shop__logo {
        width: 7.5rem;
        border-radius: 50%;
    }

    /* Closing band: infos pratiques + calls to action + related ------------- */
    .closing {
        margin-block-start: var(--section-space);
        padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem) var(--space-5);
        background: var(--c-sable);
    }

    .closing__grid {
        display: grid;
        gap: var(--space-6) var(--space-8);
        align-items: end;
    }

    /* Infos pratiques: the facts in a grid (1 column on phones, 3 from 48em, 2 × 2 for exactly
       four facts, 3 + 2 for five with the 4th spanning two columns); the lead and buttons always sit underneath (closing__grid is one column). */
    .infos dl {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3) var(--space-6);
        margin-block-start: var(--space-4);
    }

    @media (min-width: 48em) {
        .infos dl {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: var(--space-5) var(--space-6);
        }

        .infos:has(.infos__item:nth-child(4):last-child) dl {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        /* Five facts: 3 + 2, the 4th spanning two columns so the last row has no gap. */
        .infos:has(.infos__item:nth-child(5):last-child) .infos__item:nth-child(4) {
            grid-column: span 2;
        }
    }

    .infos dt {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--c-poussiere);
        font-size: var(--step--1);
        font-weight: 600;
    }

    .infos dt .icon {
        width: 1.25rem;
        height: 1.25rem;
        color: var(--c-galon-fonce);
    }

    .infos dd {
        margin-block-start: 0.125rem;
        font-size: var(--step-0);
        font-weight: 600;
    }

    @media (min-width: 48em) {
        .infos dd {
            font-size: var(--step-1);
        }
    }

    .closing__lead {
        max-inline-size: 44ch;
        font-size: var(--step-1);
        line-height: 1.45;
    }

    .closing__lead + .closing__actions,
    .closing__lead + .closing__lead {
        margin-block-start: var(--space-3);
    }

    .closing__lead + .closing__actions {
        margin-block-start: var(--space-5);
    }

    .closing__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .closing__actions > .button {
        flex: 1 1 auto;
    }

    @media (min-width: 40em) {
        .closing__actions > .button {
            flex: 0 1 auto;
        }
    }

    .related {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 var(--space-4);
        margin-block-start: var(--space-6);
        padding-block-start: var(--space-3);
        border-block-start: 1px solid rgb(107 29 47 / 0.18);
        font-size: var(--step-0a);
    }

    .related__label {
        color: var(--c-poussiere);
    }

    .related__links {
        display: flex;
        flex-wrap: wrap;
        gap: 0 var(--space-5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .related__links a {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        font-weight: 600;
    }

    /* NB-1 · Atelier ou EquiGame ? -------------------------------------- */
    .compare {
        display: grid;
        gap: var(--space-4);
        max-inline-size: 56rem;
        margin-block-start: var(--space-5);
    }

    .compare__card {
        display: grid;
        align-content: start;
        row-gap: var(--space-4);
        padding: var(--space-4);
        border: 1px solid var(--c-trait);
        border-radius: var(--radius-m);
        background: var(--c-blanc);
    }

    /* The page you are on: crème card with a bordeaux top edge, and no link. */
    .compare__card--current {
        border-color: var(--c-creme);
        background: var(--c-creme);
        box-shadow: inset 0 4px 0 var(--c-livree);
    }

    .compare__name {
        color: var(--c-livree);
        font-family: var(--font-display);
        font-size: var(--step-2);
        font-weight: 400;
    }

    .compare__rows {
        display: grid;
        row-gap: var(--space-3);
    }

    .compare__rows dt {
        color: var(--c-poussiere);
        font-size: var(--step--1);
        font-weight: 600;
    }

    .compare__rows dd {
        font-size: var(--step-0a);
        line-height: 1.45;
    }

    .compare__more {
        margin: 0;
    }

    .compare__note {
        max-inline-size: var(--measure);
        margin-block-start: var(--space-4);
        color: var(--c-poussiere);
        font-size: var(--step-0a);
    }

    @media (min-width: 40em) {
        .compare {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .compare__card {
            padding: var(--space-5);
        }
    }

    /* Row-by-row alignment across the two cards (name + 6 rows + link = 8 tracks). */
    @supports (grid-template-rows: subgrid) {
        @media (min-width: 40em) {
            .compare {
                grid-template-rows: repeat(8, auto);
                row-gap: 0;
            }

            .compare__card {
                grid-row: span 8;
                grid-template-rows: subgrid;
            }

            .compare__rows {
                grid-row: span 6;
                grid-template-rows: subgrid;
            }
        }
    }

    /* NB-6 · Le livret d’Aston ------------------------------------------- */
    .livret {
        max-inline-size: 44rem;
        padding: 0.375rem;
        border-radius: calc(var(--radius-m) + 0.375rem);
        background: var(--c-livree);
        box-shadow: var(--shadow-object);
    }

    .livret__pages {
        display: grid;
        grid-template-columns: 6.5rem minmax(0, 1fr);
        grid-template-areas: "photo title" "rows rows" "note note";
        gap: var(--space-5) var(--space-4);
        padding: var(--space-5);
        border-radius: var(--radius-m);
        background: var(--c-creme);
    }

    .livret__photo {
        grid-area: photo;
        margin: 0;
    }

    .livret__id {
        position: relative;
        display: block;
    }

    .livret__id img {
        width: 100%;
        aspect-ratio: 7 / 9;
        object-fit: cover;
        border: 3px solid var(--c-blanc);
        border-radius: var(--radius-s);
        box-shadow: 0 1px 3px rgb(46 35 32 / 0.25);
    }

    /* Ink stamp: the horned "A" in bordeaux, double ring, slightly askew. */
    .livret__stamp {
        position: absolute;
        right: -1.75rem;
        bottom: -1.25rem;
        display: grid;
        place-items: center;
        width: 3.25rem;
        aspect-ratio: 1;
        border-radius: 50%;
        color: var(--c-livree);
        box-shadow: inset 0 0 0 2px currentColor, inset 0 0 0 4px var(--c-creme), inset 0 0 0 5px currentColor;
        rotate: -14deg;
    }

    .livret__stamp::before {
        content: "";
        width: 58%;
        aspect-ratio: 692 / 755; /* monogramme.svg viewBox */
        background: currentColor;
        mask: url("../../images/monogramme.svg") center / contain no-repeat;
    }

    .livret__title {
        grid-area: title;
        align-self: center;
    }

    .livret__rows {
        grid-area: rows;
    }

    .livret__rows > div {
        display: grid;
        grid-template-columns: 6.5rem minmax(0, 1fr);
        column-gap: var(--space-4);
        align-items: baseline;
        padding-block: var(--space-2);
        border-block-end: 1px dashed color-mix(in srgb, var(--c-poussiere) 45%, transparent);
    }

    .livret__rows dt {
        color: var(--c-poussiere);
        font-size: var(--step--1);
        font-weight: 600;
    }

    .livret__rows dd {
        font-weight: 500;
    }

    .livret__detail {
        display: block;
        color: var(--c-poussiere);
        font-size: var(--step--1);
        font-weight: 400;
    }

    .livret__note {
        grid-area: note;
        color: var(--c-poussiere);
        font-size: var(--step--1);
    }

    /* Narrow phones: term above value, so long values keep a readable measure. */
    @media (max-width: 29.99em) {
        .livret__pages {
            padding: var(--space-4);
        }

        .livret__rows > div {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    @media (min-width: 48em) {
        .livret__pages {
            grid-template-columns: 14rem minmax(0, 1fr);
            grid-template-rows: auto auto 1fr;
            grid-template-areas: "photo title" "photo rows" "photo note";
            gap: 0;
            padding: 0;
        }

        /* Left page: the ID photo; the fold is the line on its right edge. */
        .livret__photo {
            display: grid;
            place-items: start center;
            padding: var(--space-6);
            border-inline-end: 1px solid var(--c-trait);
            box-shadow: inset -14px 0 14px -14px rgb(46 35 32 / 0.22);
        }

        .livret__id {
            width: 9.5rem;
        }

        .livret__title {
            padding: var(--space-6) var(--space-6) 0;
        }

        .livret__rows {
            padding: var(--space-4) var(--space-6) 0;
        }

        .livret__rows > div {
            grid-template-columns: 7.5rem minmax(0, 1fr);
        }

        .livret__note {
            padding: var(--space-4) var(--space-6) var(--space-6);
        }
    }

    /* Footer --------------------------------------------------------------- */
    .site-footer {
        position: relative;
        padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) var(--space-6);
        background: var(--c-livree-fonce);
        color: var(--c-creme);
        font-size: var(--step-0a);
    }

    /* Gold hem line. */
    .site-footer::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        top: var(--space-3);
        border-block-start: 2px solid var(--c-galon);
    }

    .site-footer a {
        color: var(--c-creme);
        text-decoration: none;
    }

    .site-footer a:hover {
        text-decoration: underline;
    }

    .site-footer :focus-visible {
        outline-color: var(--c-galon);
    }

    .site-footer__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
        gap: var(--space-7) var(--space-6);
    }

    /* Explicit columns from tablets up: 2 + 2, then 4 (never a lone 3 + 1 row). */
    @media (min-width: 40em) {
        .site-footer__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 75em) {
        .site-footer__grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    .site-footer__name {
        margin-block-start: var(--space-4);
        font-family: var(--font-display);
        font-size: var(--step-2);
        line-height: 1.1;
    }

    .site-footer__tagline {
        margin-block-start: var(--space-2);
        color: var(--c-galon);
        font-family: var(--font-display);
        font-size: var(--step-1);
        line-height: 1.2;
    }

    /* NB-3 · Service area, footer brand column --------------------------- */
    .site-footer__area {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 0.5rem;
        max-inline-size: 22rem;
        margin-block-start: var(--space-5);
        color: var(--c-sable);
        font-size: var(--step--1);
        line-height: 1.5;
    }

    .site-footer__area .icon {
        grid-row: span 2;
        width: 1.125rem;
        height: 1.125rem;
        margin-block-start: 0.1em;
        color: var(--c-galon);
    }

    .site-footer__area > span {
        grid-column: 2;
    }

    .site-footer h2 {
        color: var(--c-galon);
        font-size: var(--step-2);
    }

    .site-footer h3 {
        margin-block-start: var(--space-3);
        color: var(--c-sable);
        font-size: var(--step--1);
        font-weight: 600;
    }

    .site-footer__list {
        margin: var(--space-2) 0 0;
        padding: 0;
        list-style: none;
    }

    .site-footer h3 + .site-footer__list {
        margin-block-start: 0;
    }

    .site-footer__list a {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        min-height: 2.75rem;
    }

    /* The e-mail address may only wrap at its <wbr> (after "@"), never mid-word. */
    .site-footer__list a > span,
    .menu-panel__contact a > span {
        min-width: 0;
    }

    .site-footer__list--inline {
        display: flex;
        flex-wrap: wrap;
        gap: 0 var(--space-5);
    }

    .social .icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .social a {
        min-inline-size: 2.75rem; /* short names such as "X" still get a 44px target */
    }

    /* Two columns on phones; the rem-based minimum falls back to one column
       when the visitor enlarges the text (no overlapping names). */
    @media (max-width: 40em) {
        .social {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
            column-gap: var(--space-5);
        }
    }

    .site-footer__bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 0 var(--space-5);
        margin-block-start: var(--space-7);
        padding-block-start: var(--space-2);
        border-block-start: 1px solid rgb(248 241 230 / 0.16);
        color: var(--c-sable);
        font-size: var(--step--1);
    }

    .site-footer__bottom a {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }

    .site-footer__bottom a[aria-current="page"] {
        text-decoration: underline;
    }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
@layer utilities {
    /* Keeps a phrase on one line, e.g. the place name in the footer service area. */
    .nowrap {
        white-space: nowrap;
    }

    .visually-hidden {
        position: absolute !important;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
}

/* --------------------------------------------------------------------------
   Motion: only when the visitor has not asked for reduced motion.
   One orchestrated moment (the gold piping is "stitched" around the home
   saddlecloth), plus small responses to hover and to opening the menu.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 180ms;
    }

    .site-header {
        view-transition-name: site-header;
    }

    @keyframes stitch {
        from {
            clip-path: inset(0 100% 0 0);
        }

        to {
            clip-path: inset(0 0 0 0);
        }
    }

    .hero--home::after {
        animation: stitch var(--dur-3) var(--ease-out) 150ms both;
    }

    .menu a::after {
        transition: transform var(--dur-1) var(--ease-out);
    }

    .button,
    .menu__item--contact a,
    .video__play {
        transition: background-color var(--dur-1), color var(--dur-1);
    }

    .js-popover .menu-panel:popover-open {
        transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out);
    }

    @starting-style {
        .js-popover .menu-panel:popover-open {
            opacity: 0;
            translate: 0 -0.5rem;
        }
    }
}