/* ===== tokens ===== */
@font-face {
    font-display: swap;
    font-family: "Lato Desk";
    font-style: normal;
    font-weight: 400;
    src: url("/vault/prose-400.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Lato Desk";
    font-style: normal;
    font-weight: 600 700;
    src: url("/vault/prose-700.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Lato Bold Desk";
    font-style: normal;
    font-weight: 700 900;
    src: url("/vault/prose-900.woff2") format("woff2");
}

:root {
    --lead: #97ed0d;
    --key: #c5ff08;
    --key-active: #9ed102;
    --page: #2f1a08;
    --panel: #3d2410;
    --reading: #ffffff;
    --text-muted: #c1c0c0;
    --edge: #4d3016;
    --border-strong: #6d4a22;
    --gradient-light: #e0fe7f;
    --blend-b: #d6fe36;
    --caution: #8b1e3f;
    --ink: #23180a;
    --deep: #1d1206;

    --g-hair: 3px;
    --g-tiny: 10px;
    --g-snug: 18px;
    --g-base: 28px;
    --g-wide: 44px;
    --g-roomy: 60px;
    --g-vast: 88px;
    --g-huge: 128px;

    --pill: 9999px;
    --dot: 50%;
    --r-hair: 1px;
    --r-tiny: 2px;
    --r-snug: 8px;
    --r-base: 14px;
    --r-wide: 22px;
    --r-roomy: 28px;
    --r-vast: 34px;
    --r-huge: 44px;

    --title: "Lato Bold Desk", "Lato Desk", system-ui, sans-serif;
    --text: "Lato Desk", system-ui, sans-serif;

    --display-1: 36px;
    --xl-2: 26px;
    --sub: 20px;
    --md-2: 17px;
    --h5: 14px;
    --h6: 12px;
    --body: 14px;
    --small: 12px;
    --micro: 11px;

    --snug: 1.15;
    --regular: 1.45;
    --open: 1.6;

    --plain: 400;
    --demi: 600;
    --black: 700;

    --close: -0.01em;
    --default: 0;
    --airy: 0.06em;

    --d-hair: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    --d-tiny: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    --d-snug: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    --d-base: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    --d-wide: 0 16px 48px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    --d-roomy: 0 20px 56px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    --d-vast: 0 24px 64px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    --d-huge: 0 32px 80px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;

    --short: 183ms;
    --steady: 400ms;
    --easy: 602ms;
    --out: cubic-bezier(0.12, 0.92, 0.42, 0.95);
    --enter: cubic-bezier(0.42, 0, 1, 1);
    --swing: cubic-bezier(0.7, 0.02, 0.5, 0.9);
    --bounce: cubic-bezier(0.39, 1.7, 0.5, 1.05);

    --main: 1160px;
    --v-text: 1160px;
    --v-narrow: 470px;
    --edge-wide: 24px;
    --edge-mid: 32px;
    --edge-narrow: 16px;

    --hair: 1px;
    --medium: 2px;
    --strong: 3px;

    --height-desktop: 110px;
    --h-short: 96px;
    --shell-h: 110px;
    --sec-y: var(--g-wide);
}

/* ===== narrow-screen token overrides ===== */
@media (max-width: 780px) {
    :root {
        --display-1: 26px;
        --xl-2: 22px;
        --sub: 18px;
        --md-2: 16px;
        --h5: 13px;
        --h6: 11px;
        --body: 14px;
        --small: 12px;
        --micro: 10px;
        --edge-wide: 16px;
        --shell-h: 96px;
    }
}

/* ===== reset / base ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overflow-x: clip;
}

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

body {
    background: var(--page);
    color: var(--reading);
    display: flex;
    flex-direction: column;
    font-family: var(--text);
    font-size: var(--body);
    font-weight: var(--plain);
    line-height: var(--regular);
    margin: 0;
    margin-block-start: var(--shell-h);
    min-height: 100vh;
}

main,
.page {
    display: block;
    flex: 1 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: anywhere;
    margin: 0;
}

h1 {
    font-family: var(--title);
    font-size: clamp(26px, 3.4vw, var(--display-1));
    font-weight: var(--black);
    letter-spacing: var(--close);
    line-height: var(--snug);
}

h2 {
    font-family: var(--title);
    font-size: clamp(22px, 2.4vw, var(--xl-2));
    font-weight: var(--black);
    letter-spacing: var(--close);
    line-height: var(--snug);
}

h3 {
    font-family: var(--text);
    font-size: var(--sub);
    font-weight: var(--black);
    letter-spacing: var(--default);
    line-height: var(--snug);
}

p {
    margin-block: 0 var(--g-snug);
}

p:last-child {
    margin-block-end: 0;
}

img {
    max-width: 100%;
}

a {
    color: var(--key);
}

a:hover {
    color: var(--key-active);
}

strong {
    font-weight: var(--black);
}

em {
    font-style: italic;
}

blockquote {
    margin: 0;
}

section[id],
div[id],
aside[id] {
    scroll-margin-block-start: calc(var(--shell-h) + var(--g-snug));
}

/* ===== a11y / motion ===== */
.skipHop {
    background: var(--key);
    color: var(--ink);
    font-weight: var(--black);
    inset-inline-start: var(--g-snug);
    padding: var(--g-tiny) var(--g-snug);
    position: fixed;
    top: var(--g-tiny);
    z-index: 200;
}

.skipHop:not(:focus) {
    top: -200px !important;
}

.is-live [data-visible] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--steady) var(--out), transform var(--steady) var(--out);
}

.is-live [data-visible].is-open {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .is-live [data-visible] {
        opacity: 1;
        transform: none;
    }
}

/* ===== header (HEAD-UTIL, hide on scroll down) ===== */
.bureau {
    background: var(--page);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    inset-inline: 0;
    position: fixed;
    top: 0;
    transition: transform var(--steady) var(--out);
    z-index: 100;
}

.bureau.is-away {
    transform: translateY(-100%);
}

.bureau-hold {
    margin-inline: auto;
    max-width: calc(var(--main) + 2 * var(--edge-wide));
    padding-inline: var(--g-base);
    width: 100%;
}

.bureau-strip {
    background: var(--panel);
    border-block-end: var(--hair) solid var(--edge);
    color: var(--text-muted);
}

.bureau-strip .bureau-hold {
    align-items: center;
    display: flex;
    gap: var(--g-snug);
    justify-content: space-between;
    min-height: 32px;
}

.bureau-desk {
    background: var(--panel);
    color: var(--text-muted);
    font-size: var(--micro);
    letter-spacing: var(--airy);
    text-transform: none;
}

.bureau-tools {
    display: flex;
    flex-shrink: 0;
    gap: var(--g-snug);
}

.bureau-anchorQuiet {
    background: var(--panel);
    color: var(--gradient-light);
    font-size: var(--micro);
    letter-spacing: var(--airy);
    text-decoration: none;
    white-space: nowrap;
}

.bureau-anchorQuiet:hover {
    background: var(--panel);
    color: var(--reading);
    text-decoration: underline;
}

.bureau-row {
    position: relative;
}

.bureau-holdRow {
    align-items: center;
    display: flex;
    gap: var(--g-snug);
    min-height: 54px;
    padding-block: var(--g-tiny);
}

.bureau-logo {
    display: inline-flex;
    flex-shrink: 0;
    order: 1;
}

.bureau-logo,
.bureau-logo img {
    flex-shrink: 0;
}

.bureau-logo img {
    background: var(--panel);
    border: var(--hair) solid var(--edge);
    border-radius: var(--r-snug);
    height: 60px;
    padding: var(--g-hair) var(--g-tiny);
    width: auto;
}

.bureau-shot {
    display: block;
}

.bureau-nav {
    order: 2;
}

.bureau-list {
    align-items: center;
    display: flex;
    gap: var(--g-hair);
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

.bureau-unit {
    align-items: center;
    display: inline-flex;
}

.bureau-unit + .bureau-unit::before {
    color: var(--border-strong);
    content: "|";
    font-size: var(--micro);
    margin-inline-end: var(--g-tiny);
}

.bureau-anchor {
    background: var(--page);
    color: var(--reading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: var(--default);
    text-decoration: none;
    white-space: nowrap;
}

.bureau-anchor:hover {
    background: var(--page);
    color: var(--gradient-light);
    text-decoration: underline;
}

.bureau-anchor[aria-current="page"] {
    background: var(--page);
    color: var(--key);
    font-weight: 900;
}

.bureau-deck {
    display: inline-flex;
    flex-shrink: 0;
    margin-inline-start: auto;
    order: 3;
}

.bureau-button {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    min-height: 40px;
    padding-inline: var(--g-base);
    text-decoration: none;
    white-space: nowrap;
}

.bureau-toggle {
    align-items: center;
    background: var(--panel);
    border: var(--hair) solid var(--border-strong);
    border-radius: var(--pill);
    color: var(--reading);
    cursor: pointer;
    display: none;
    gap: var(--g-tiny);
    margin-inline-start: auto;
    min-height: 44px;
    order: 4;
    padding: var(--g-tiny) var(--g-snug);
}

.bureau-toggle:hover {
    background: var(--edge);
    color: var(--reading);
}

.bureau-grille {
    background-image: radial-gradient(currentColor 42%, transparent 44%);
    background-position: 0 0;
    background-size: 5px 5px;
    display: block;
    height: 15px;
    width: 15px;
}

.bureau-label {
    font-size: var(--small);
    font-weight: var(--demi);
    letter-spacing: var(--airy);
}

.bureau-slide {
    background: var(--panel);
    border-block-end: var(--medium) solid var(--key);
    display: none;
    inset-inline: 0;
    max-height: 72vh;
    overflow-y: auto;
    position: absolute;
    top: 100%;
    z-index: 99;
}

.bureau-slide.is-open {
    display: block;
}

.bureau-listFlat {
    display: block;
    overflow: visible;
    padding-block: var(--g-tiny);
}

.bureau-listFlat .bureau-unit {
    display: block;
}

.bureau-listFlat .bureau-unit + .bureau-unit::before {
    content: none;
    margin: 0;
}

.bureau-listFlat .bureau-anchor {
    background: var(--panel);
    display: block;
    font-size: var(--md-2);
    padding: var(--g-snug) var(--g-base);
}

.bureau-listFlat .bureau-anchor:hover {
    background: var(--edge);
    color: var(--gradient-light);
}

@media (max-width: 1260px) {
    .bureau-hold {
        padding-inline: var(--g-snug);
    }

    .bureau-list {
        gap: var(--g-hair);
    }

    .bureau-anchor {
        font-size: 12px;
    }

    .bureau-unit + .bureau-unit::before {
        margin-inline-end: var(--g-hair);
    }

    .bureau-logo img {
        height: 48px;
    }

    .bureau-button {
        font-size: var(--micro);
        padding-inline: var(--g-snug);
    }
}

@media (max-width: 1024px) {
    .bureau-nav {
        display: none;
    }

    .bureau-toggle {
        display: inline-flex;
    }

    .bureau-logo img {
        height: 52px;
    }

    .bureau-desk {
        display: none;
    }
}

@media (max-width: 620px) {
    .bureau-holdRow {
        gap: var(--g-tiny);
    }

    .bureau-label {
        display: none;
    }

    .bureau-toggle {
        padding-inline: var(--g-snug);
    }

    .bureau-logo img {
        height: 44px;
    }

    .bureau-button {
        font-size: 10px;
        letter-spacing: 0.2px;
        padding-inline: var(--g-tiny);
    }
}

/* ===== responsible gaming band (RG-03) ===== */
.balise {
    margin-block: var(--g-snug);
    margin-inline: auto;
    max-width: calc(var(--main) + 2 * var(--edge-wide));
    padding-inline: var(--edge-wide);
    width: 100%;
}

.balise-line {
    align-items: center;
    background: var(--caution);
    border-radius: var(--r-base);
    color: var(--reading);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--small);
    gap: var(--g-tiny);
    justify-content: center;
    line-height: var(--regular);
    margin: 0;
    padding: var(--g-tiny) var(--g-snug);
    text-align: center;
}

.balise-age {
    background: var(--reading);
    border-radius: var(--r-tiny);
    color: var(--caution);
    font-weight: var(--black);
    padding: 2px 6px;
}

.balise-say {
    color: var(--reading);
}

.balise-anchor {
    background: var(--caution);
    color: var(--reading);
    text-decoration: underline;
}

.balise-anchor:hover {
    background: var(--caution);
    color: var(--gradient-light);
}

@media (max-width: 620px) {
    .balise-say {
        display: none;
    }
}

/* ===== hero (HERO-04 crossfading crops) ===== */
.socle {
    background: var(--page);
    overflow: hidden;
    padding-block: var(--sec-y);
    position: relative;
}

.socle-stage {
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.socle-track {
    inset: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
}

.socle-frame {
    background-color: var(--deep);
    background-image: url("/vault/tableau.webp");
    background-repeat: no-repeat;
    display: none;
    inset: 0;
    position: absolute;
}

.socle-frame.is-open {
    display: block;
}

.socle-shotA {
    background-position: 22% 46%;
    background-size: 118% auto;
}

.socle-shotB {
    background-position: 66% 38%;
    background-size: 128% auto;
}

.socle-shotC {
    background-position: 48% 74%;
    background-size: 112% auto;
}

.socle-veil {
    background-color: rgba(29, 18, 6, 0.72);
    background-image: linear-gradient(100deg, #1d1206 12%, rgba(29, 18, 6, 0.62) 58%, rgba(29, 18, 6, 0.3) 100%);
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.socle-tag {
    background: var(--deep);
    border-radius: var(--r-tiny);
    color: var(--gradient-light);
    inset-block-start: var(--g-snug);
    font-size: var(--micro);
    inset-inline-end: var(--g-snug);
    letter-spacing: var(--airy);
    padding: 4px var(--g-tiny);
    position: absolute;
    text-transform: uppercase;
}

.socle-inner {
    margin-inline: auto;
    max-width: calc(var(--main) + 2 * var(--edge-wide));
    padding-inline: var(--edge-wide);
    position: relative;
}

.socle-inside {
    display: flex;
    flex-direction: column;
    gap: var(--g-snug);
    justify-content: center;
    min-height: clamp(340px, 42vh, 460px);
    padding-block: var(--g-snug);
}

.socle-over {
    color: var(--key);
    font-size: var(--h6);
    font-weight: var(--black);
    letter-spacing: var(--airy);
    text-transform: uppercase;
}

.socle-lede {
    color: var(--reading);
    max-width: 22ch;
}

.socle-under {
    color: var(--text-muted);
    font-size: var(--md-2);
    line-height: var(--open);
    margin: 0;
    max-width: var(--v-narrow);
}

.socle-deck {
    display: block;
}

.socle-call {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
}

.socle-fine {
    color: var(--text-muted);
    display: block;
    font-size: var(--micro);
    max-width: var(--v-narrow);
}

.socle-rule {
    align-items: center;
    display: flex;
    gap: var(--g-snug);
    justify-content: flex-start;
    padding-block-start: var(--g-snug);
}

.socle-step {
    background: var(--panel);
    border: var(--hair) solid var(--border-strong);
    border-radius: var(--dot);
    color: var(--reading);
    cursor: pointer;
    font-size: var(--md-2);
    height: 38px;
    line-height: 1;
    width: 38px;
}

.socle-step:hover {
    background: var(--edge);
    color: var(--gradient-light);
}

.socle-dots {
    display: inline-flex;
    gap: var(--g-tiny);
}

.socle-dot {
    background: var(--border-strong);
    border: 0;
    border-radius: var(--dot);
    cursor: pointer;
    height: 10px;
    padding: 0;
    width: 10px;
}

.socle-dot[aria-current="true"] {
    background: var(--key);
}

@media (max-width: 780px) {
    .socle-step {
        display: none;
    }

    .socle-lede {
        max-width: none;
    }
}

/* ===== page header (PHEAD-02) ===== */
.buffet {
    background: var(--page);
    padding-block: var(--sec-y);
}

.buffet-inner {
    margin-inline: auto;
    max-width: calc(var(--main) + 2 * var(--edge-wide));
    padding-inline: var(--edge-wide);
}

.buffet-inside {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--g-snug);
    text-align: center;
}

.buffet-over {
    color: var(--key);
    font-size: var(--h6);
    font-weight: var(--black);
    letter-spacing: var(--airy);
    text-transform: uppercase;
}

.buffet-lede {
    color: var(--reading);
}

.buffet-rule {
    background: var(--key);
    display: block;
    height: 2px;
    margin-inline: auto;
    width: 64px;
}

.buffet-under {
    color: var(--text-muted);
    font-size: var(--md-2);
    line-height: var(--open);
    margin: 0;
    max-width: var(--v-narrow);
}

.buffet-deck {
    display: block;
}

.buffet-call {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
}

.buffet-fine {
    color: var(--text-muted);
    font-size: var(--micro);
    max-width: var(--v-narrow);
}

/* ===== prose (PROSE-08) ===== */
.comptoir {
    background: var(--page);
    padding-block: var(--sec-y);
}

.comptoir-inner {
    margin-inline: auto;
    max-width: calc(var(--main) + 2 * var(--edge-wide));
    padding-inline: var(--edge-wide);
}

.comptoir-inside {
    display: flex;
    flex-direction: column;
    gap: var(--g-wide);
}

.comptoir-part {
    display: block;
}

.comptoir-lede {
    color: var(--reading);
    margin-block: 0 var(--g-snug);
}

.comptoir-words {
    color: var(--text-muted);
    font-size: var(--body);
    line-height: var(--open);
    margin-inline-start: var(--g-base);
    max-width: var(--v-text);
}

.comptoir-words p {
    margin-block: 0 var(--g-snug);
}

.comptoir-anchor {
    background-color: var(--page);
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 2px;
    color: var(--key);
    text-decoration: none;
    transition: background-size var(--short) var(--out);
}

.comptoir-anchor:hover {
    background-color: var(--page);
    background-size: 100% 2px;
    color: var(--key);
}

.comptoir-list {
    color: var(--text-muted);
    margin-block: 0 var(--g-snug);
    margin-inline-start: var(--g-base);
    max-width: var(--v-text);
    padding-inline-start: var(--g-base);
}

.comptoir-unit {
    line-height: var(--open);
    margin-block-end: var(--g-tiny);
}

.comptoir-plate {
    margin: var(--g-base) 0 0 var(--g-base);
}

.comptoir-shot {
    border: var(--hair) solid var(--edge);
    border-radius: var(--r-base);
    display: block;
    height: auto;
    margin-inline: auto;
    max-height: 430px;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

.comptoir-shotTall {
    max-height: 480px;
    max-width: 340px;
}

.comptoir-note {
    color: var(--text-muted);
    font-size: var(--micro);
    letter-spacing: var(--airy);
    padding-block-start: var(--g-tiny);
    text-align: center;
}

@media (max-width: 1024px) {
    .comptoir-words,
    .comptoir-list {
        margin-inline-start: var(--g-snug);
    }

    .comptoir-plate {
        margin-inline-start: var(--g-snug);
    }
}

@media (max-width: 540px) {
    .comptoir-words,
    .comptoir-list {
        margin-inline-start: 0;
    }

    .comptoir-plate {
        margin-inline-start: 0;
    }
}

/* ===== inline hook (INLINE-CTA-03) ===== */
.coupole {
    display: block;
    padding-block: var(--g-base);
    text-align: center;
}

.coupole-line {
    font-size: var(--md-2);
    line-height: var(--regular);
    margin: 0;
}

.coupole-line strong {
    color: var(--reading);
    font-weight: var(--black);
}

.coupole-anchor {
    text-decoration: none;
}

.coupole .coupole-anchor.vignette-pick,
.coupole .coupole-anchor {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--key);
    display: inline;
    font-size: var(--md-2);
    letter-spacing: var(--default);
    min-height: 0;
    padding: 0;
    text-decoration: underline;
    text-transform: none;
}

.coupole .coupole-anchor.vignette-pick:hover,
.coupole .coupole-anchor:hover {
    background: transparent;
    color: var(--key-active);
    text-decoration-thickness: 3px;
}

/* ===== items grid (GRID-07) ===== */
.rosace {
    background: var(--page);
    padding-block: var(--sec-y);
}

.rosace-inner {
    margin-inline: auto;
    max-width: calc(var(--main) + 2 * var(--edge-wide));
    padding-inline: var(--edge-wide);
}

.rosace-lede {
    color: var(--reading);
    margin-block: 0 var(--g-base);
}

.rosace-inside {
    display: flex;
    flex-direction: column;
    gap: var(--g-wide);
}

.rosace-unit {
    display: block;
    transition: transform var(--short) var(--out);
}

.rosace-unit:hover {
    transform: translateY(-3px);
}

.rosace-top {
    align-items: center;
    color: var(--reading);
    display: flex;
    gap: var(--g-tiny);
}

.rosace-said {
    display: inline-block;
}

.rosace-mark {
    fill: var(--key);
    flex-shrink: 0;
    height: 22px;
    width: 22px;
}

.rosace-rule {
    background: var(--key);
    display: block;
    height: 2px;
    margin-block: var(--g-tiny);
    width: 60px;
}

.rosace-words {
    color: var(--text-muted);
    font-size: var(--body);
    line-height: var(--open);
    margin: 0;
    max-width: var(--v-text);
}

/* ===== reviews (REV-03 rail) ===== */
.fenetre {
    background: var(--page);
    padding-block: var(--sec-y);
}

.fenetre-inner {
    margin-inline: auto;
    max-width: calc(var(--main) + 2 * var(--edge-wide));
    padding-inline: var(--edge-wide);
}

.fenetre-lede {
    color: var(--reading);
    margin-block: 0 var(--g-base);
}

.fenetre-rail {
    display: flex;
    gap: var(--g-snug);
    list-style: none;
    margin: 0;
    overflow-x: auto;
    padding: 0 0 var(--g-snug);
    scroll-snap-type: x mandatory;
}

.fenetre-brick {
    background: var(--panel);
    border: var(--hair) solid var(--edge);
    border-radius: var(--r-base);
    box-shadow: var(--d-snug);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: var(--g-snug);
    min-height: 230px;
    padding: var(--g-base);
    scroll-snap-align: start;
    width: 340px;
}

.fenetre-brickCall {
    align-items: center;
    background: var(--deep);
    border-color: var(--key);
    justify-content: center;
}

.fenetre-row {
    align-items: baseline;
    display: flex;
    gap: var(--g-tiny);
    justify-content: space-between;
}

.fenetre-author {
    color: var(--reading);
    font-weight: var(--black);
}

.fenetre-when {
    color: var(--text-muted);
    font-size: var(--micro);
}

.fenetre-score {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fenetre-num {
    color: var(--key);
    font-size: var(--small);
    font-weight: var(--black);
    letter-spacing: var(--airy);
}

.fenetre-bar {
    background: var(--edge);
    border-radius: var(--pill);
    display: block;
    height: 4px;
    width: 60%;
}

.fenetre-fill {
    background: var(--key);
    border-radius: var(--pill);
    display: block;
    height: 4px;
}

.fenetre-words {
    color: var(--text-muted);
    font-size: var(--body);
    line-height: var(--open);
}

.fenetre-dots {
    display: flex;
    gap: var(--g-tiny);
    justify-content: center;
    padding-block-start: var(--g-tiny);
}

.fenetre-dot {
    background: var(--border-strong);
    border: 0;
    border-radius: var(--dot);
    cursor: pointer;
    height: 8px;
    padding: 0;
    width: 8px;
}

.fenetre-dot[aria-current="true"] {
    background: var(--key);
}

@media (max-width: 540px) {
    .fenetre-brick {
        width: 86vw;
    }
}

/* ===== data table (TABLE-03) ===== */
.arche {
    background: var(--page);
    padding-block: var(--sec-y);
}

.arche-inner {
    margin-inline: auto;
    max-width: calc(var(--main) + 2 * var(--edge-wide));
    padding-inline: var(--edge-wide);
}

.arche-lede {
    color: var(--reading);
    margin-block: 0 var(--g-base);
}

.arche-scroll {
    overflow-x: auto;
}

.arche-plate {
    border-collapse: collapse;
    width: 100%;
}

.arche-head {
    display: table-header-group;
}

.arche-body {
    display: table-row-group;
}

.arche-row {
    display: table-row;
}

.arche-top {
    background: var(--lead);
    color: var(--ink);
    font-size: var(--small);
    font-weight: var(--black);
    letter-spacing: var(--airy);
    padding: var(--g-tiny) var(--g-snug);
    text-align: start;
    text-transform: uppercase;
}

.arche-slot {
    background: var(--panel);
    border-block-end: var(--hair) solid var(--edge);
    color: var(--reading);
    font-size: var(--body);
    padding: var(--g-snug);
    vertical-align: top;
}

@media (max-width: 780px) {
    .arche-plate,
    .arche-body,
    .arche-row,
    .arche-slot {
        display: block;
    }

    .arche-head {
        display: none;
    }

    .arche-row {
        background: var(--panel);
        border: var(--hair) solid var(--edge);
        border-radius: var(--r-base);
        margin-block-end: var(--g-snug);
        padding: var(--g-snug);
    }

    .arche-slot {
        border-block-end: 0;
        display: flex;
        gap: var(--g-tiny);
        justify-content: space-between;
        padding: 6px 0;
    }

    .arche-slot::before {
        color: var(--text-muted);
        content: attr(data-label);
        font-size: var(--micro);
        font-weight: var(--black);
        letter-spacing: var(--airy);
        text-transform: uppercase;
    }
}

/* ===== faq (FAQ-09) ===== */
.cahier {
    background: var(--page);
    padding-block: var(--sec-y);
}

.cahier-inner {
    margin-inline: auto;
    max-width: calc(var(--main) + 2 * var(--edge-wide));
    padding-inline: var(--edge-wide);
}

.cahier-lede {
    color: var(--reading);
    margin-block: 0 var(--g-base);
}

.cahier-inside {
    display: flex;
    flex-direction: column;
    gap: var(--g-base);
}

.cahier-unit {
    display: block;
}

.cahier-quest {
    cursor: default;
    display: block;
    list-style: none;
}

.cahier-quest::-webkit-details-marker {
    display: none;
}

.cahier-top {
    align-items: baseline;
    color: var(--reading);
    display: flex;
    font-family: var(--title);
    font-size: var(--md-2);
    font-style: italic;
    font-weight: var(--black);
    gap: var(--g-tiny);
}

.cahier-mark {
    color: var(--key);
    flex-shrink: 0;
    font-family: var(--title);
    font-size: var(--h5);
    font-weight: var(--black);
}

.cahier-said {
    display: inline-block;
}

.cahier-reply {
    align-items: baseline;
    color: var(--text-muted);
    display: flex;
    font-size: var(--body);
    gap: var(--g-tiny);
    line-height: var(--open);
    margin-block: var(--g-tiny) 0;
    max-width: var(--v-text);
}

.cahier-reply .cahier-mark {
    color: var(--lead);
}

/* ===== cta block (CTA-07) ===== */
.brochure {
    background: var(--page);
    padding-block: var(--sec-y);
}

.brochure-inner {
    margin-inline: auto;
    max-width: calc(var(--main) + 2 * var(--edge-wide));
    padding-inline: var(--edge-wide);
}

.brochure-brick {
    align-items: center;
    background: var(--deep);
    border: var(--medium) solid var(--key);
    border-radius: var(--r-wide);
    display: flex;
    flex-direction: column;
    gap: var(--g-snug);
    padding: var(--g-roomy) var(--g-base);
    text-align: center;
}

.brochure-num {
    color: var(--key);
    font-family: var(--title);
    font-size: clamp(34px, 5vw, 60px);
    font-weight: var(--black);
    letter-spacing: var(--close);
    line-height: 1;
}

.brochure-lede {
    color: var(--reading);
}

.brochure-words {
    color: var(--text-muted);
    font-size: var(--md-2);
    line-height: var(--open);
    margin: 0;
    max-width: var(--v-narrow);
}

.brochure-deck {
    display: block;
}

.brochure-call {
    align-items: center;
    background: var(--key);
    border-radius: var(--pill);
    color: var(--ink);
    display: inline-flex;
    font-weight: var(--black);
    justify-content: center;
    letter-spacing: var(--airy);
    min-height: 46px;
    padding-inline: var(--g-base);
    text-decoration: none;
    text-transform: uppercase;
}

.brochure-call:hover {
    background: var(--key-active);
    color: var(--ink);
}

.brochure-fine {
    color: var(--text-muted);
    font-size: var(--micro);
}

/* ===== legal (LEGAL-05) ===== */
.enseigne {
    background: var(--page);
    padding-block: var(--sec-y);
}

.enseigne-inner {
    margin-inline: auto;
    max-width: calc(var(--main) + 2 * var(--edge-wide));
    padding-inline: var(--edge-wide);
}

.enseigne-intro {
    color: var(--reading);
    font-size: var(--md-2);
    line-height: var(--open);
    max-width: var(--v-text);
}

.enseigne-facts {
    color: var(--text-muted);
    font-size: var(--micro);
    letter-spacing: var(--airy);
    padding-block-end: var(--g-snug);
    text-transform: uppercase;
}

.enseigne-book {
    margin: 0;
}

.enseigne-term {
    color: var(--reading);
    font-family: var(--title);
    font-size: var(--md-2);
    font-weight: var(--black);
    margin-block: var(--g-wide) var(--g-tiny);
}

.enseigne-term::before {
    background: var(--key);
    content: "";
    display: block;
    height: 2px;
    margin-block-end: var(--g-tiny);
    width: 30px;
}

.enseigne-def {
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    font-size: var(--body);
    gap: var(--g-snug);
    line-height: var(--open);
    margin-block-end: var(--g-base);
    margin-inline-start: 0;
    max-width: var(--v-text);
}

.enseigne-words {
    display: block;
}

.enseigne-anchor {
    color: var(--key);
}

.enseigne-list {
    color: var(--text-muted);
    line-height: var(--open);
    margin-block: var(--g-base);
    max-width: var(--v-text);
    padding-inline-start: var(--g-base);
}

.enseigne-unit {
    margin-block-end: var(--g-tiny);
}

.enseigne-fine {
    background: var(--panel);
    border-inline-start: var(--strong) solid var(--caution);
    border-radius: var(--r-snug);
    color: var(--text-muted);
    font-size: var(--small);
    line-height: var(--open);
    margin-block-start: var(--g-base);
    max-width: var(--v-text);
    padding: var(--g-snug) var(--g-base);
}

/* ===== author card (AUTH-01) ===== */
.registre {
    background: var(--page);
    padding-block: var(--sec-y);
}

.registre-inner {
    margin-inline: auto;
    max-width: calc(var(--main) + 2 * var(--edge-wide));
    padding-inline: var(--edge-wide);
}

.registre-brick {
    background: var(--panel);
    border-radius: var(--r-wide);
    box-shadow: var(--d-snug);
    display: grid;
    gap: var(--g-roomy);
    grid-template-columns: 160px minmax(0, 1fr);
    padding: var(--g-roomy) var(--g-wide);
}

.registre-face {
    block-size: 160px;
    border: var(--medium) solid var(--key);
    border-radius: var(--dot);
    display: block;
    inline-size: 160px;
    overflow: hidden;
}

.registre-shot {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    width: 100%;
}

.registre-inside {
    display: flex;
    flex-direction: column;
    gap: var(--g-snug);
}

.registre-duty {
    color: var(--key);
    font-size: var(--small);
    font-weight: var(--demi);
    letter-spacing: var(--airy);
    text-transform: uppercase;
}

.registre-author {
    color: var(--reading);
}

.registre-words {
    color: var(--text-muted);
    font-size: var(--body);
    line-height: var(--open);
    margin: 0;
    max-width: var(--v-text);
}

.registre-tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-tiny);
}

.registre-chip {
    background: var(--lead);
    border-radius: var(--pill);
    color: var(--ink);
    font-size: var(--micro);
    font-weight: var(--demi);
    letter-spacing: var(--airy);
    padding: var(--g-hair) var(--g-snug);
    text-transform: uppercase;
}

.registre-shelf {
    padding-block-start: var(--g-wide);
}

.registre-top {
    color: var(--reading);
    margin-block-end: var(--g-snug);
}

.registre-list {
    display: grid;
    gap: var(--g-snug);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.registre-unit {
    background: var(--panel);
    border: var(--hair) solid var(--edge);
    border-radius: var(--r-base);
    padding: var(--g-snug) var(--g-base);
}

.registre-anchor {
    background: var(--panel);
    color: var(--gradient-light);
    font-weight: var(--demi);
    text-decoration: none;
}

.registre-anchor:hover {
    background: var(--panel);
    color: var(--reading);
    text-decoration: underline;
}

@media (max-width: 780px) {
    .registre-brick {
        gap: var(--g-base);
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        padding: var(--g-base);
        text-align: center;
    }

    .registre-face {
        block-size: 120px;
        inline-size: 120px;
    }

    .registre-tools {
        justify-content: center;
    }
}

/* ===== byline (BYLINE-03) ===== */
.tableau {
    background: var(--page);
    border-block-end: var(--hair) solid var(--edge);
}

.tableau-inner {
    align-items: center;
    display: flex;
    gap: var(--g-tiny);
    margin-inline: auto;
    max-width: calc(var(--main) + 2 * var(--edge-wide));
    padding-block: var(--g-snug);
    padding-inline: var(--edge-wide);
}

.tableau-face {
    border-radius: var(--dot);
    flex-shrink: 0;
    height: 30px;
    object-fit: cover;
    object-position: center top;
    width: 30px;
}

.tableau-facts {
    color: var(--text-muted);
    font-size: var(--small);
}

.tableau-author {
    background: var(--page);
    color: var(--key);
    text-decoration: none;
}

.tableau-author:hover {
    background: var(--page);
    color: var(--key);
    text-decoration: underline;
}

.tableau-duty {
    color: var(--text-muted);
}

.tableau-when {
    color: var(--text-muted);
}

/* ===== contact form (FORM-07) ===== */
.tympan {
    background: var(--page);
    padding-block: var(--sec-y);
}

.tympan-inner {
    margin-inline: auto;
    max-width: calc(var(--main) + 2 * var(--edge-wide));
    padding-inline: var(--edge-wide);
}

.tympan-brick {
    border-radius: var(--r-wide);
    overflow: hidden;
}

.tympan-crest {
    background: var(--key);
    display: block;
    height: 8px;
}

.tympan-inside {
    background: var(--panel);
    color: var(--reading);
    padding: var(--g-roomy) var(--g-wide);
}

.tympan-lede {
    color: var(--reading);
    margin-block-end: var(--g-snug);
}

.tympan-intro {
    color: var(--text-muted);
    line-height: var(--open);
    max-width: var(--v-text);
}

.tympan-book {
    display: flex;
    flex-direction: column;
    gap: var(--g-snug);
    max-width: 640px;
}

.tympan-slot {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tympan-label {
    color: var(--reading);
    font-size: var(--small);
    font-weight: var(--demi);
    letter-spacing: var(--airy);
}

.tympan-box {
    background: var(--deep);
    border: var(--hair) solid var(--border-strong);
    border-radius: var(--r-snug);
    color: var(--reading);
    font-family: var(--text);
    font-size: var(--body);
    min-height: 44px;
    padding: var(--g-tiny) var(--g-snug);
    width: 100%;
}

.tympan-box:focus {
    border-color: var(--key);
    outline: var(--medium) solid var(--key-active);
}

.tympan-boxTall {
    min-height: 130px;
    resize: vertical;
}

.tympan-deck {
    display: flex;
    justify-content: center;
}

.tympan-send {
    background: var(--key);
    border: 0;
    border-radius: var(--pill);
    color: var(--ink);
    cursor: pointer;
    font-family: var(--text);
    font-size: var(--h5);
    font-weight: var(--black);
    letter-spacing: var(--airy);
    min-height: 46px;
    padding-inline: var(--g-wide);
    text-transform: uppercase;
    transition: transform var(--short) var(--out);
}

.tympan-send:hover {
    background: var(--key-active);
    color: var(--ink);
}

.tympan-send:active {
    transform: scale(0.97);
}

.tympan-done {
    background: var(--deep);
    border: var(--hair) solid var(--key);
    border-radius: var(--r-snug);
    color: var(--gradient-light);
    line-height: var(--open);
    margin-block-start: var(--g-snug);
    padding: var(--g-snug) var(--g-base);
}

.tympan-facts {
    color: var(--text-muted);
    font-size: var(--small);
    padding-block-start: var(--g-snug);
}

.tympan-anchor {
    background: var(--panel);
    color: var(--key);
}

@media (max-width: 540px) {
    .tympan-inside {
        padding: var(--g-base) var(--g-snug);
    }
}

/* ===== error block (ERR-06) ===== */
.etabli {
    background: var(--page);
    padding-block: var(--g-roomy);
}

.etabli-inside {
    align-items: center;
    background: var(--panel);
    border: var(--medium) solid var(--key);
    border-radius: var(--r-wide);
    box-shadow: var(--d-base);
    display: flex;
    flex-direction: column;
    gap: var(--g-snug);
    margin-inline: auto;
    max-width: var(--v-narrow);
    padding: var(--g-roomy) var(--g-base);
    text-align: center;
}

.etabli-num {
    color: var(--key);
    font-family: var(--title);
    font-size: 54px;
    font-weight: var(--black);
    letter-spacing: var(--close);
    line-height: 1;
}

.etabli-lede {
    color: var(--reading);
}

.etabli-words {
    color: var(--text-muted);
    line-height: var(--open);
    margin: 0;
}

.etabli-goto {
    align-items: center;
    background: var(--key);
    border-radius: var(--pill);
    color: var(--ink);
    display: inline-flex;
    font-weight: var(--black);
    justify-content: center;
    letter-spacing: var(--airy);
    min-height: 46px;
    padding-inline: var(--g-base);
    text-decoration: none;
    text-transform: uppercase;
}

.etabli-goto:hover {
    background: var(--key-active);
    color: var(--ink);
}

/* ===== footer (FOOT-08 masthead) ===== */
.mur {
    background: var(--deep);
    border-block-start: var(--medium) solid var(--edge);
    padding-block: var(--g-roomy);
}

.mur-hold {
    margin-inline: auto;
    max-width: calc(var(--main) + 2 * var(--edge-wide));
    padding-inline: var(--edge-wide);
}

.mur-masthead {
    align-items: center;
    border-block: 4px solid var(--reading);
    display: flex;
    flex-direction: column;
    gap: var(--g-tiny);
    padding-block: var(--g-base);
    text-align: center;
}

.mur-logo {
    display: inline-flex;
}

.mur-shot {
    display: block;
    height: 56px;
    width: auto;
}

.mur-issue {
    color: var(--text-muted);
    font-size: var(--micro);
    letter-spacing: var(--airy);
    margin: 0;
    text-transform: uppercase;
}

.mur-grid {
    display: grid;
    gap: var(--g-base);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-block: var(--g-wide);
}

.mur-strip {
    display: block;
}

.mur-top {
    color: var(--reading);
    font-family: var(--title);
    font-size: var(--h5);
    letter-spacing: var(--airy);
    margin-block-end: var(--g-snug);
    text-transform: uppercase;
}

.mur-list {
    display: flex;
    flex-direction: column;
    gap: var(--g-tiny);
    list-style: none;
    margin: 0;
    padding: 0;
}

.mur-unit {
    display: block;
}

.mur-anchor {
    background: var(--deep);
    color: var(--text-muted);
    font-size: var(--small);
    text-decoration: none;
    word-break: break-word;
}

.mur-anchor:hover {
    background: var(--deep);
    color: var(--gradient-light);
    text-decoration: underline;
}

.mur-bottom {
    align-items: center;
    border-block-start: var(--hair) solid var(--edge);
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-tiny);
    justify-content: space-between;
    padding-block-start: var(--g-snug);
}

.mur-words {
    color: var(--text-muted);
    font-size: var(--micro);
}

.mur-goto {
    background: var(--deep);
    color: var(--gradient-light);
    font-size: var(--micro);
    letter-spacing: var(--airy);
    text-decoration: none;
    text-transform: uppercase;
}

.mur-goto:hover {
    background: var(--deep);
    color: var(--reading);
    text-decoration: underline;
}

@media (max-width: 780px) {
    .mur-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--g-base);
    }
}

/* ===== cookie toast (COOK-13) ===== */
.pignon {
    inset-block-end: var(--g-wide);
    inset-inline-end: var(--g-wide);
    max-width: 320px;
    position: fixed;
    z-index: 90;
}

.pignon.is-gone {
    display: none;
}

.pignon-hold {
    background: var(--panel);
    border: var(--hair) solid var(--border-strong);
    border-radius: var(--r-wide);
    box-shadow: var(--d-base);
    color: var(--reading);
    display: grid;
    gap: var(--g-tiny);
    grid-template-columns: 20px minmax(0, 1fr);
    padding: var(--g-snug);
}

.pignon-chip {
    background: var(--key);
    border-radius: var(--dot);
    display: block;
    height: 20px;
    position: relative;
    width: 20px;
}

.pignon-chip::before {
    background: var(--ink);
    border-radius: var(--dot);
    box-shadow: 6px 5px 0 var(--ink), -1px 8px 0 var(--ink);
    content: "";
    height: 4px;
    inset-block-start: 4px;
    inset-inline-start: 4px;
    position: absolute;
    width: 4px;
}

.pignon-copy {
    color: var(--text-muted);
    font-size: var(--micro);
    line-height: var(--regular);
    margin: 0;
}

.pignon-tools {
    display: flex;
    gap: var(--g-tiny);
    grid-column: 1 / -1;
}

.pignon-ok {
    background: var(--key);
    border: 0;
    border-radius: var(--pill);
    color: var(--ink);
    cursor: pointer;
    font-family: var(--text);
    font-size: var(--small);
    font-weight: var(--black);
    min-height: 36px;
    padding-inline: var(--g-snug);
}

.pignon-ok:hover {
    background: var(--key-active);
    color: var(--ink);
}

.pignon-reject {
    background: var(--panel);
    border: 0;
    color: var(--gradient-light);
    cursor: pointer;
    font-family: var(--text);
    font-size: var(--small);
    min-height: 36px;
    padding-inline: var(--g-tiny);
    text-decoration: underline;
}

.pignon-reject:hover {
    background: var(--panel);
    color: var(--reading);
}

@media (max-width: 700px) {
    .pignon {
        inset-block-end: var(--g-snug);
        inset-inline: var(--g-snug);
        max-width: none;
    }

    .pignon-hold {
        font-size: 13px;
        gap: 8px;
        line-height: 1.35;
        padding: 12px 14px;
    }

    .pignon-ok,
    .pignon-reject {
        flex: 1 1 auto;
        font-size: 12px;
        min-height: 36px;
        padding: 8px 14px;
    }
}

/* ===== offer button ===== */
.vignette-pick {
    align-items: center;
    border-radius: var(--pill);
    display: inline-flex;
    font-weight: var(--black);
    justify-content: center;
    letter-spacing: var(--airy);
    min-height: 46px;
    padding: 0 var(--g-base);
}

.vignette-pick {
    background: #059669;
    color: #1D1206;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    transition: background var(--short) var(--out);
}

.vignette-pick.vignette-pick {
    color: #1D1206;
    text-decoration: none;
}

.vignette-pick:hover {
    animation: none;
    background: #047857;
    color: #FFFFFF;
}

.vignette-pick.vignette-pick:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.vignette-pick:hover::after {
    animation: none;
}

.vignette-pick:active {
    background: #065F46;
    color: #FFFFFF;
}

.vignette-pick:focus-visible {
    outline: 3px solid #1D1206;
    outline-offset: 3px;
}

@keyframes vignette-pulse {
    0% {
        box-shadow: 0 0 0 0 currentColor;
        opacity: 0.55;
    }

    70%,
    100% {
        box-shadow: 0 0 0 3px transparent;
        opacity: 0;
    }
}

.vignette-pick::after {
    animation: vignette-pulse 1.8s var(--out) infinite;
    border-radius: inherit;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

@media (prefers-reduced-motion: reduce) {
    .vignette-pick,
    .vignette-pick::after {
        animation: none !important;
        transition: none !important;
    }
}

/* offer button inside the tight mobile header row and the inline hook */
.bureau-holdRow .bureau-button {
    padding-inline: var(--g-base);
}

@media (max-width: 1260px) {
    .bureau-holdRow .bureau-button {
        font-size: var(--micro);
        padding-inline: var(--g-snug);
    }
}

@media (max-width: 620px) {
    .bureau-holdRow .bureau-button {
        font-size: 10px;
        letter-spacing: 0.2px;
        min-height: 40px;
        padding-inline: var(--g-tiny);
    }
}

/* offer button drops to its own header row on phones */
@media (max-width: 460px) {
    .bureau-holdRow {
        flex-wrap: wrap;
        padding-block: var(--g-hair);
        row-gap: var(--g-tiny);
    }

    .bureau-deck {
        margin-inline-start: 0;
        order: 5;
        width: 100%;
    }

    .bureau-logo img {
        height: 40px;
    }

    .bureau-holdRow .bureau-button {
        font-size: 11px;
        min-height: 40px;
        width: 100%;
    }
}

@media (max-width: 1039px) {
  .bureau-nav { display: none !important; }
  .bureau-toggle { display: flex !important; }
}