@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/stele/os-latin-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/stele/os-latin-ext-400.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/stele/os-latin-600.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/stele/os-latin-ext-600.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/stele/os-latin-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/stele/os-latin-ext-700.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --prime: #1aef74;
    --focus: #f9a200;
    --accent-strong: #d28b01;
    --back: #070606;
    --card: #151110;
    --deep: #100c0c;
    --type: #ffffff;
    --dim: #bebcbc;
    --hairline: #2b2422;
    --border-strong: #4a3f39;
    --blend-a: #ffd97b;
    --fade-bottom: #ffc235;
    --caution: #96281b;
    --ink: #0a0908;

    --g-1: 2px;
    --g-2: 6px;
    --g-3: 10px;
    --g-4: 14px;
    --g-5: 20px;
    --g-6: 28px;
    --g-7: 48px;
    --g-8: 72px;
    --sec-y: 28px;

    --stadium: 9999px;
    --dot: 50%;
    --r-1: 0;
    --r-2: 0;
    --r-3: 4px;
    --r-4: 12px;
    --r-5: 24px;
    --r-6: 28px;
    --r-7: 34px;
    --r-8: 40px;

    --heading: "Open Sans", "Segoe UI", Arial, sans-serif;
    --copy: "Open Sans", "Segoe UI", Arial, sans-serif;

    --xxl: 30px;
    --head: 24px;
    --display-3: 20px;
    --md-2: 17px;
    --h5: 15px;
    --xs-2: 13px;
    --body: 16px;
    --sm: 13px;
    --micro: 11px;

    --snug: 1.15;
    --base: 1.55;
    --roomy: 1.7;
    --regular: 400;
    --half: 500;
    --heavy: 700;
    --close: 0;
    --e-base: 0;
    --open: 0.02em;

    --d-1: 0 1px 0 rgba(0, 0, 0, 0.1);
    --d-2: 0 1px 0 rgba(0, 0, 0, 0.14);
    --d-3: 0 2px 8px rgba(0, 0, 0, 0.07);
    --d-4: 0 6px 16px rgba(0, 0, 0, 0.1);
    --d-5: 0 12px 32px rgba(0, 0, 0, 0.14);
    --d-6: 0 18px 44px rgba(0, 0, 0, 0.2);
    --d-7: 0 24px 56px rgba(0, 0, 0, 0.26);
    --d-8: 0 32px 72px rgba(0, 0, 0, 0.32);

    --brisk: 201ms;
    --mid: 370ms;
    --long: 663ms;
    --out: cubic-bezier(0.17, 0.56, 0.4, 0.95);
    --start: cubic-bezier(0.4, 0.14, 0.83, 0.67);
    --smooth: cubic-bezier(0.59, 0.1, 0.37, 0.94);
    --pop: cubic-bezier(0.37, 0.95, 0.59, 1.2);

    --max: 1140px;
    --inner: 1140px;
    --brief: 460px;
    --pad-lg: 64px;
    --padding-tablet: 32px;
    --pad-sm: 20px;
    --slim: 1px;
    --medium: 2px;
    --thick: 4px;
    --size-desktop: 58px;
    --short: 52px;
    --shell-h: 132px;
}

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

html,
body { overflow-x: clip; }

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

body {
    margin: 0;
    margin-block-start: var(--shell-h);
    background: var(--back);
    color: var(--type);
    font-family: var(--copy);
    font-size: var(--body);
    font-weight: var(--regular);
    line-height: var(--base);
    letter-spacing: var(--e-base);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.tribune {
    display: block;
    flex: 1 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading);
    line-height: var(--snug);
    letter-spacing: var(--close);
    overflow-wrap: anywhere;
    margin-block: 0 var(--g-4);
}

h1 { font-size: var(--xxl); font-weight: var(--heavy); }
h2 { font-size: var(--head); font-weight: var(--heavy); }
h3 { font-size: var(--display-3); font-weight: var(--half); }
h4 { font-size: var(--md-2); font-weight: var(--half); }

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

img { max-width: 100%; }

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

a:hover { color: var(--blend-a); }

ul,
ol { margin-block: 0 var(--g-4); }

[id] { scroll-margin-block-start: calc(var(--shell-h) + 16px); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-hop {
    position: absolute;
    inset-inline-start: var(--g-4);
    z-index: 200;
    background: var(--focus);
    color: var(--ink);
    padding: var(--g-3) var(--g-5);
    border-radius: var(--r-3);
    font-weight: var(--half);
    text-decoration: none;
}

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

.skip-hop:focus { top: var(--g-3); }

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

/* header — HEAD-UTIL */
.balise {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 120;
    background: var(--back);
    box-shadow: var(--d-5);
    transition: transform var(--mid) var(--out);
}

.balise.is-away { transform: translateY(-102%); }

.balise-shell {
    display: block;
    background: var(--back);
}

.balise-utility {
    background: var(--deep);
    color: var(--dim);
    border-block-end: var(--slim) solid var(--hairline);
}

.balise-utility-hold {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-4);
    font-size: var(--micro);
    letter-spacing: var(--open);
}

.balise-desk {
    background: var(--deep);
    color: var(--dim);
}

.balise-note {
    display: none;
    background: var(--deep);
    color: var(--dim);
}

.balise-strip {
    background: var(--back);
    min-height: 58px;
}

.balise-strip-hold {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: var(--g-4);
}

.balise-switch {
    order: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--r-3);
    background: var(--card);
    color: var(--type);
    cursor: pointer;
    transition: background var(--brisk) var(--out);
}

.balise-switch:hover { background: var(--hairline); color: var(--type); }

.balise-bar {
    position: relative;
    display: block;
    width: 20px;
    height: var(--medium);
    background: var(--type);
    border-radius: var(--stadium);
}

.balise-bar::before,
.balise-bar::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: var(--medium);
    background: var(--type);
    border-radius: var(--stadium);
}

.balise-bar::before { inset-block-start: -6px; }

.balise-bar::after { inset-block-start: 6px; }

.balise-mark {
    order: 2;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.balise-mark-shot {
    flex-shrink: 0;
    display: block;
    height: 38px;
    width: auto;
}

.balise-guide {
    order: 3;
    display: none;
    margin-inline-start: auto;
    min-width: 0;
}

.balise-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--g-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.balise-piece {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.balise-piece + .balise-piece::before {
    content: "\00B7";
    color: var(--border-strong);
    background: var(--back);
    margin-inline-end: var(--g-3);
}

.balise-hop {
    position: relative;
    display: inline-block;
    padding-block: var(--g-3);
    color: var(--type);
    background: var(--back);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: var(--open);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--brisk) var(--out);
}

.balise-hop:hover {
    color: var(--focus);
    background: var(--back);
    text-decoration: underline;
    text-underline-offset: 5px;
}

.balise-hop[aria-current="page"] { color: var(--focus); background: var(--back); }

.balise-hop[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-block-end: 2px;
    inset-inline-start: 50%;
    width: 5px;
    height: 5px;
    margin-inline-start: -2px;
    border-radius: var(--dot);
    background: var(--focus);
}

.balise-deck {
    order: 4;
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--g-3);
    flex-shrink: 0;
}

.balise-push {
    flex-shrink: 0;
    white-space: nowrap;
}

.balise-caution {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--g-2);
    margin: 0;
    padding: var(--g-2) var(--pad-sm);
    background: var(--caution);
    color: var(--type);
    font-size: var(--micro);
    line-height: 1.35;
    text-align: center;
}

.balise-caution-age {
    background: var(--caution);
    color: var(--type);
    font-weight: var(--heavy);
    letter-spacing: var(--open);
}

.balise-say {
    display: none;
    background: var(--caution);
    color: var(--type);
}

.balise-caution-hop {
    background: var(--caution);
    color: var(--type);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.balise-caution-hop:hover { color: var(--blend-a); background: var(--caution); }

.balise-drawer {
    display: none;
    background: var(--deep);
    border-block-start: var(--slim) solid var(--hairline);
    max-height: calc(100vh - var(--shell-h));
    overflow-y: auto;
}

.balise-drawer.is-open { display: block; }

.balise-drawer-guide { display: block; }

.balise-drawer-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.balise-drawer-piece { display: block; }

.balise-drawer-hop {
    display: block;
    padding: var(--g-4) var(--pad-sm);
    border-block-end: var(--slim) solid var(--hairline);
    background: var(--deep);
    color: var(--type);
    font-size: var(--h5);
    font-weight: var(--half);
    letter-spacing: var(--open);
    text-transform: uppercase;
    text-decoration: none;
}

.balise-drawer-hop:hover { color: var(--focus); background: var(--card); }

.balise-drawer-hop[aria-current="page"] { color: var(--focus); background: var(--deep); }

/* hero — HERO-04 */
.affiche {
    position: relative;
    background: var(--ink);
    border-block-end: var(--slim) solid var(--hairline);
}

.affiche-track {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

.affiche-slide {
    grid-column: 1;
    grid-row: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background-color: var(--ink);
    background-image: linear-gradient(105deg, rgba(7, 6, 6, 0.94) 0%, rgba(7, 6, 6, 0.78) 46%, rgba(7, 6, 6, 0.45) 100%), url("/pictures/focus-swift.webp");
    background-size: cover;
    background-position: 62% 50%;
    background-repeat: no-repeat;
    transition: opacity var(--long) var(--smooth);
}

.affiche-slide[data-slide="2"] { background-position: 20% 62%; }

.affiche-slide[data-slide="3"] { background-position: 88% 38%; }

.affiche-slide.is-live {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.affiche-wrap {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
    padding-block: var(--g-7);
    min-height: clamp(340px, 46vh, 460px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.affiche-banner {
    margin-block: 0 var(--g-4);
    color: var(--type);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.affiche-banner--sub {
    font-family: var(--heading);
    font-size: var(--xxl);
    font-weight: var(--heavy);
    line-height: var(--snug);
}

.affiche-lead {
    margin-block: 0 var(--g-5);
    color: var(--type);
    font-size: var(--md-2);
    line-height: var(--base);
    max-width: var(--brief);
}

.affiche-deck { display: flex; }

.affiche-pilot {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
    padding-block: var(--g-3) var(--g-5);
    display: flex;
    align-items: center;
    gap: var(--g-3);
}

.affiche-step {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: var(--slim) solid var(--border-strong);
    border-radius: var(--dot);
    background: var(--card);
    color: var(--type);
    cursor: pointer;
    font-size: var(--h5);
    transition: border-color var(--brisk) var(--out), color var(--brisk) var(--out);
}

.affiche-step:hover { border-color: var(--focus); color: var(--focus); background: var(--card); }

.affiche-dots {
    display: flex;
    align-items: center;
    gap: var(--g-3);
}

.affiche-dot {
    width: 32px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: var(--stadium);
    background: var(--border-strong);
    color: var(--type);
    cursor: pointer;
    transition: background var(--brisk) var(--out);
}

.affiche-dot[aria-selected="true"] { background: var(--focus); color: var(--ink); }

/* page-header — PHEAD-01 */
.registre {
    background: var(--back);
    border-block-end: var(--slim) solid var(--hairline);
    padding-block: var(--sec-y);
}

.registre-wrap {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
    display: flex;
    flex-direction: column;
    gap: var(--g-4);
}

.registre-chip {
    background: var(--back);
    color: var(--focus);
    font-family: var(--copy);
    font-size: var(--sm);
    font-weight: var(--half);
    letter-spacing: var(--open);
    text-transform: uppercase;
}

.registre-banner {
    margin: 0;
    color: var(--type);
}

.registre-rule {
    width: 60px;
    height: var(--medium);
    background: var(--focus);
}

.registre-para {
    margin: 0;
    color: var(--dim);
    font-size: var(--md-2);
    line-height: var(--base);
}

.registre-deck { display: flex; }

/* prose — PROSE-23 */
.retable {
    background: var(--back);
    padding-block: var(--sec-y);
}

.retable-wrap {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
}

.retable-banner {
    margin-block: 0 var(--g-4);
    color: var(--type);
}

.retable-lead {
    margin-block: 0 var(--g-5);
    padding: var(--g-5);
    background: var(--card);
    border-bottom: var(--thick) solid var(--focus);
    border-radius: var(--r-4) var(--r-4) 0 0;
    color: var(--type);
    font-size: var(--md-2);
    line-height: var(--base);
}

.retable-para {
    margin-block: 0 var(--g-4);
    color: var(--dim);
}

.retable-list,
.retable-rank {
    margin-block: 0 var(--g-5);
    padding-inline-start: var(--g-6);
    color: var(--dim);
}

.retable-piece { margin-block-end: var(--g-3); }

.retable-hop {
    color: var(--focus);
    background: var(--back);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.retable-hop:hover { color: var(--blend-a); background: var(--back); }

.retable strong { color: var(--type); font-weight: var(--heavy); }

.retable em { color: var(--type); }

/* items — GRID-01 */
.placard {
    background: var(--back);
    padding-block: var(--sec-y);
}

.placard-wrap {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
}

.placard-top {
    margin-block: 0 var(--g-5);
    color: var(--type);
}

.placard-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--g-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.placard-piece {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--g-2);
    padding: var(--g-5);
    background: var(--card);
    border: var(--slim) solid var(--hairline);
    border-radius: var(--r-4);
    transition: border-color var(--mid) var(--out), transform var(--mid) var(--out);
}

.placard-piece:hover {
    border-color: var(--focus);
    transform: translateY(-4px);
}

.placard-sign {
    width: 26px;
    height: 26px;
    fill: var(--focus);
    flex-shrink: 0;
}

.placard-piece-banner {
    margin: 0;
    color: var(--type);
    font-family: var(--heading);
    font-size: var(--md-2);
    font-weight: var(--heavy);
    line-height: var(--snug);
}

.placard-piece-para {
    color: var(--dim);
    font-size: var(--sm);
    line-height: var(--base);
}

/* data-table — TABLE-03 */
.nef {
    background: var(--back);
    padding-block: var(--sec-y);
}

.nef-wrap {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
}

.nef-top {
    margin-block: 0 var(--g-5);
    color: var(--type);
}

.nef-scroll { display: block; }

.nef-grid {
    width: 100%;
    border-collapse: collapse;
    background: var(--back);
    color: var(--type);
    font-size: var(--sm);
}

.nef-grid thead { display: none; }

.nef-strip { display: block; }

.nef-grid tbody .nef-strip {
    margin-block-end: var(--g-4);
    padding: var(--g-4);
    background: var(--card);
    border: var(--slim) solid var(--hairline);
    border-radius: var(--r-4);
}

.nef-grid td {
    display: block;
    padding-block: var(--g-2);
    background: var(--card);
    color: var(--type);
    overflow-wrap: anywhere;
}

.nef-grid td::before {
    content: attr(data-chip) ": ";
    display: block;
    color: var(--dim);
    background: var(--card);
    font-size: var(--micro);
    letter-spacing: var(--open);
    text-transform: uppercase;
}

.nef-grid th {
    background: var(--deep);
    color: var(--type);
    font-weight: var(--heavy);
    text-align: start;
}

/* faq — FAQ-07 */
.secteur {
    background: var(--back);
    padding-block: var(--sec-y);
}

.secteur-wrap {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
}

.secteur-top {
    margin-block: 0 var(--g-5);
    color: var(--type);
}

.secteur-list {
    display: flex;
    flex-direction: column;
    gap: var(--g-3);
}

.secteur-piece {
    padding: var(--g-4) var(--g-5);
    background: var(--card);
    border: var(--slim) solid var(--hairline);
    border-radius: var(--r-3);
}

.secteur-ask {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--g-4);
    cursor: pointer;
    list-style: none;
}

.secteur-ask::-webkit-details-marker { display: none; }

.secteur-banner {
    margin: 0;
    color: var(--type);
    font-family: var(--copy);
    font-size: var(--sm);
    font-weight: var(--half);
    line-height: var(--base);
}

.secteur-sign {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.secteur-sign::before,
.secteur-sign::after {
    content: "";
    position: absolute;
    inset-block-start: 6px;
    inset-inline-start: 0;
    width: 14px;
    height: var(--medium);
    background: var(--focus);
    transition: transform var(--brisk) var(--out);
}

.secteur-sign::after { transform: rotate(90deg); }

.secteur-piece[open] .secteur-sign::after { transform: rotate(0deg); }

.secteur-meat {
    padding-block-start: var(--g-3);
    animation: secteur-open var(--mid) var(--out);
}

.secteur-para {
    margin: 0;
    color: var(--dim);
    font-size: var(--sm);
    line-height: var(--base);
}

@keyframes secteur-open {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* reviews — REV-04 */
.coffre {
    background: var(--back);
    padding-block: var(--sec-y);
}

.coffre-wrap {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
}

.coffre-top {
    margin-block: 0 var(--g-5);
    color: var(--type);
}

.coffre-lead-brick {
    margin-block-end: var(--g-6);
    padding: var(--g-6) var(--g-5);
    background: var(--card);
    border-radius: var(--r-5);
    border: var(--slim) solid var(--hairline);
}

.coffre-quote {
    margin: 0 0 var(--g-4);
    padding: 0;
}

.coffre-quote .coffre-para {
    color: var(--type);
    font-size: var(--md-2);
    font-style: italic;
    line-height: var(--base);
    margin: 0;
}

.coffre-by {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--g-3);
}

.coffre-cite {
    background: var(--card);
    color: var(--type);
    font-style: normal;
    font-weight: var(--heavy);
    font-size: var(--sm);
}

.coffre-stars {
    background: var(--card);
    color: var(--focus);
    font-size: var(--md-2);
    letter-spacing: 2px;
    white-space: nowrap;
}

.coffre-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--g-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.coffre-piece {
    padding-block-start: var(--g-4);
    border-block-start: var(--slim) solid var(--hairline);
}

.coffre-piece .coffre-cite,
.coffre-piece .coffre-stars { background: var(--back); }

.coffre-piece .coffre-para {
    margin-block-start: var(--g-2);
    color: var(--dim);
    font-size: var(--sm);
    line-height: var(--base);
}

/* cta — CTA-05 */
.tableau {
    background: var(--ink);
    border-block: var(--slim) solid var(--hairline);
    padding-block: var(--sec-y);
}

.tableau-wrap {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
}

.tableau-banner {
    margin-block: 0 var(--g-4);
    color: var(--type);
}

.tableau-para {
    margin-block: 0 var(--g-5);
    color: var(--dim);
    max-width: var(--brief);
}

.tableau-deck {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--g-4);
}

.tableau-go--quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--g-3) var(--g-5);
    border: var(--slim) solid var(--border-strong);
    border-radius: var(--r-4);
    background: var(--ink);
    color: var(--type);
    font-size: var(--h5);
    font-weight: var(--half);
    text-decoration: none;
    transition: border-color var(--brisk) var(--out), background var(--brisk) var(--out);
}

.tableau-go--quiet:hover {
    border-color: var(--type);
    background: var(--card);
    color: var(--type);
}

.tableau-fine {
    margin-block-start: var(--g-4);
    color: var(--dim);
    font-size: var(--micro);
}

/* legal — LEGAL-07 */
.cahier {
    background: var(--back);
    padding-block: var(--sec-y);
}

.cahier-wrap {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
}

.cahier-intro {
    margin-block: 0 var(--g-6);
    color: var(--type);
    font-family: var(--heading);
    font-size: var(--md-2);
    font-style: italic;
    line-height: var(--base);
}

.cahier-piece { margin-block-end: var(--g-6); }

.cahier-banner {
    margin-block: 0 var(--g-3);
    color: var(--type);
    font-family: var(--heading);
    font-size: var(--display-3);
    font-style: italic;
    font-weight: var(--heavy);
}

.cahier-rule {
    width: 80px;
    height: var(--medium);
    margin: 0 0 var(--g-4);
    border: 0;
    background: var(--focus);
}

.cahier-para {
    margin-block: 0 var(--g-4);
    color: var(--dim);
}

.cahier-para--open::first-letter {
    float: inline-start;
    margin-inline-end: var(--g-3);
    color: var(--focus);
    font-family: var(--heading);
    font-size: 3em;
    font-weight: var(--heavy);
    line-height: 0.9;
}

.cahier-list {
    margin-block: 0 var(--g-4);
    padding-inline-start: var(--g-6);
    color: var(--dim);
}

.cahier-cell { margin-block-end: var(--g-3); }

.cahier-note {
    margin: 0;
    padding: var(--g-5);
    background: var(--card);
    border-radius: var(--r-4);
    color: var(--dim);
    font-size: var(--sm);
}

/* contact-form — FORM-03 */
.oriel {
    background: var(--back);
    padding-block: var(--sec-y);
}

.oriel-wrap {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
}

.oriel-para {
    margin-block: 0 var(--g-5);
    color: var(--dim);
}

.oriel-form {
    display: flex;
    flex-direction: column;
    gap: var(--g-4);
}

.oriel-box {
    display: flex;
    flex-direction: column;
    gap: var(--g-2);
}

.oriel-chip {
    background: var(--back);
    color: var(--type);
    font-size: var(--sm);
    font-weight: var(--half);
}

.oriel-entry {
    width: 100%;
    padding: var(--g-3) var(--g-4);
    border: var(--slim) solid var(--border-strong);
    border-radius: var(--r-1);
    background: var(--card);
    color: var(--type);
    font-family: var(--copy);
    font-size: var(--body);
    min-height: 46px;
}

.oriel-entry:focus { border-color: var(--focus); outline: none; }

.oriel-entry--tall {
    min-height: 130px;
    resize: vertical;
}

.oriel-go {
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: var(--stadium);
    background: var(--prime);
    color: var(--ink);
    font-family: var(--copy);
    font-size: var(--h5);
    font-weight: var(--heavy);
    cursor: pointer;
    transition: background var(--brisk) var(--out);
}

.oriel-go:hover { background: var(--blend-a); color: var(--ink); }

.oriel-note {
    margin: 0;
    padding: var(--g-4);
    background: var(--card);
    border-inline-start: var(--thick) solid var(--prime);
    color: var(--type);
    font-size: var(--sm);
}

/* author-card — AUTH-06 */
.cloche {
    background: linear-gradient(135deg, #0d2a1a 0%, var(--back) 68%);
    padding-block: var(--g-7);
}

.cloche-wrap {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--g-6);
    align-items: start;
}

.cloche-frame {
    width: 200px;
    max-width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--r-5);
    box-shadow: var(--d-6);
    background: var(--card);
}

.cloche-headshot {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 22%;
    display: block;
}

.cloche-meat { display: block; }

.cloche-chip {
    display: block;
    margin-block-end: var(--g-3);
    background: transparent;
    color: var(--focus);
    font-family: var(--copy);
    font-size: var(--sm);
    letter-spacing: var(--open);
    text-transform: uppercase;
}

.cloche-banner {
    margin-block: 0 var(--g-4);
    color: var(--type);
    font-size: clamp(30px, 6vw, 56px);
}

.cloche-para {
    margin-block: 0 var(--g-5);
    color: var(--type);
    font-size: var(--h5);
    line-height: var(--base);
}

.cloche-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-3);
}

.cloche-cell {
    padding: var(--g-2) var(--g-4);
    background: var(--card);
    border: var(--slim) solid var(--hairline);
    border-radius: var(--stadium);
    color: var(--dim);
    font-size: var(--sm);
}

.cloche-articles {
    background: var(--back);
    padding-block: var(--sec-y);
}

.cloche-articles-hold {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
}

.cloche-articles-top {
    margin-block: 0 var(--g-4);
    color: var(--type);
    font-family: var(--heading);
    font-size: var(--head);
    font-weight: var(--heavy);
}

.cloche-articles-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--g-3);
}

.cloche-articles-piece { display: block; }

.cloche-articles-hop {
    display: block;
    padding: var(--g-4);
    background: var(--card);
    border: var(--slim) solid var(--hairline);
    border-radius: var(--r-4);
    color: var(--type);
    text-decoration: none;
    transition: border-color var(--mid) var(--out);
}

.cloche-articles-hop:hover { border-color: var(--focus); color: var(--focus); background: var(--card); }

/* byline — BYLINE-06 */
.porte {
    display: block;
    background: var(--back);
    padding-block: var(--g-5);
}

.porte-hold {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
    display: flex;
    align-items: center;
    gap: var(--g-4);
    border-block-start: var(--slim) solid var(--hairline);
    padding-block-start: var(--g-5);
}

.porte-para {
    flex: 1 1 auto;
    margin: 0;
    color: var(--dim);
    font-size: var(--sm);
    font-style: italic;
}

.porte-chip {
    background: var(--back);
    color: var(--dim);
}

.porte-banner {
    background: var(--back);
    color: var(--focus);
    font-style: normal;
    font-weight: var(--half);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.porte-banner:hover { color: var(--blend-a); background: var(--back); text-decoration-thickness: 2px; }

.porte-slash { color: var(--dim); background: var(--back); }

.porte-duty { color: var(--dim); background: var(--back); }

.porte-headshot {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--dot);
    object-fit: cover;
    object-position: 50% 20%;
}

/* error — ERR-08 */
.buffet {
    background: var(--back);
    padding-block: var(--g-8);
}

.buffet-wrap {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
    text-align: center;
}

.buffet-banner {
    margin-block: 0 var(--g-4);
    margin-inline: auto;
    max-width: var(--brief);
    color: var(--type);
}

.buffet-para {
    margin-block: 0 var(--g-5);
    color: var(--dim);
}

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

.buffet-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: var(--g-3) var(--g-6);
    border-radius: var(--stadium);
    background: var(--prime);
    color: var(--ink);
    font-weight: var(--heavy);
    text-decoration: none;
    transition: background var(--brisk) var(--out);
}

.buffet-go:hover { background: var(--blend-a); color: var(--ink); }

.buffet-hints {
    display: block;
    background: var(--back);
    padding-block: 0 var(--g-7);
}

.buffet-hints-hold {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
}

.buffet-hints-top {
    margin-block: 0 var(--g-4);
    color: var(--type);
    font-family: var(--heading);
    font-size: var(--display-3);
    font-weight: var(--heavy);
    text-align: center;
}

.buffet-hints-list {
    margin: 0;
    padding: var(--g-5);
    background: var(--card);
    border-radius: var(--r-4);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--g-4);
}

.buffet-hints-piece { display: block; }

.buffet-hints-hop {
    background: var(--card);
    color: var(--focus);
    text-decoration: none;
}

.buffet-hints-hop:hover { color: var(--blend-a); background: var(--card); text-decoration: underline; }

/* page figure */
.cadre {
    background: var(--back);
    padding-block: var(--sec-y) 0;
}

.cadre-hold {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
}

.cadre-frame {
    margin: 0;
    display: flex;
    justify-content: center;
}

.cadre-shot {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 420px;
    border-radius: var(--r-4);
    display: block;
}

.cadre--tall .cadre-shot { max-height: 460px; }

/* footer — FOOT-07 */
.galerie {
    background: var(--prime);
    color: var(--ink);
    padding-block: var(--g-7);
}

.galerie-hold {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    padding-inline: var(--pad-sm);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--g-6);
}

.galerie-meat {
    display: flex;
    flex-direction: column;
    gap: var(--g-5);
}

.galerie-mark { display: inline-flex; line-height: 0; }

.galerie-mark-shot {
    height: 44px;
    width: auto;
    display: block;
}

.galerie-guide { display: block; }

.galerie-top {
    margin-block: 0 var(--g-3);
    background: var(--prime);
    color: var(--ink);
    font-family: var(--heading);
    font-size: var(--sm);
    font-weight: var(--heavy);
    letter-spacing: var(--open);
    text-transform: uppercase;
}

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

.galerie-piece { display: block; }

.galerie-hop {
    background: var(--prime);
    color: var(--ink);
    font-size: var(--sm);
    text-decoration: none;
}

.galerie-hop:hover { color: var(--ink); background: var(--prime); text-decoration: underline; }

.galerie-guide--rule { border-block-start: var(--slim) solid rgba(7, 6, 6, 0.25); padding-block-start: var(--g-5); }

.galerie-small {
    display: block;
    background: var(--prime);
    color: var(--ink);
    font-size: var(--micro);
    line-height: var(--base);
}

.galerie-sign {
    display: block;
    margin-block-start: var(--g-2);
    background: var(--prime);
    color: var(--ink);
    font-weight: var(--heavy);
}

.galerie-flare {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--g-6) var(--g-5);
    background: var(--focus);
    border-radius: var(--r-4);
}

.galerie-flare-chip {
    background: var(--focus);
    color: var(--ink);
    font-family: var(--heading);
    font-size: var(--head);
    font-weight: var(--heavy);
    letter-spacing: var(--close);
    text-transform: uppercase;
    text-align: center;
}

/* cookie — COOK-02 */
.pupitre {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 90;
    background: var(--prime);
    border-block-start: var(--slim) solid rgba(255, 255, 255, 0.08);
    padding: var(--g-4) var(--pad-sm);
    clip-path: inset(0 0 0 0);
    transition: clip-path var(--long) var(--out), opacity var(--long) var(--out);
}

.pupitre.is-hidden {
    clip-path: inset(100% 0 0 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.pupitre-hold {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad-lg));
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--g-3);
}

.pupitre-note {
    flex: 1 1 auto;
    margin: 0;
    background: var(--prime);
    color: var(--ink);
    font-size: var(--sm);
    line-height: 1.4;
}

.pupitre-deck {
    flex-shrink: 0;
    display: flex;
    gap: var(--g-3);
}

.pupitre-grant,
.pupitre-refuse {
    flex: 1 1 auto;
    min-height: 40px;
    padding: var(--g-2) var(--g-5);
    border-radius: var(--stadium);
    font-family: var(--copy);
    font-size: var(--sm);
    font-weight: var(--heavy);
    cursor: pointer;
    transition: background var(--brisk) var(--out);
}

.pupitre-grant {
    border: 0;
    background: var(--ink);
    color: var(--type);
}

.pupitre-grant:hover { background: var(--card); color: var(--type); }

.pupitre-refuse {
    border: var(--slim) solid var(--ink);
    background: var(--prime);
    color: var(--ink);
}

.pupitre-refuse:hover { background: var(--blend-a); color: var(--ink); }

/* ≥ 560px */
@media (min-width: 560px) {
    .pupitre-hold {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--g-4);
    }

    .pupitre-deck { flex: 0 0 auto; }

    .pupitre-grant,
    .pupitre-refuse { flex: 0 0 auto; }

    .balise-say { display: inline; }

    .placard-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .cloche-articles-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ≥ 820px */
@media (min-width: 820px) {
    :root {
        --xxl: 52px;
        --head: 32px;
        --display-3: 24px;
        --md-2: 19px;
        --h5: 16px;
        --xs-2: 14px;
        --body: 17px;
        --sm: 14px;
        --micro: 12px;
        --sec-y: 48px;
    }

    .balise-utility-hold,
    .balise-strip-hold,
    .affiche-wrap,
    .affiche-pilot,
    .registre-wrap,
    .retable-wrap,
    .placard-wrap,
    .nef-wrap,
    .secteur-wrap,
    .coffre-wrap,
    .tableau-wrap,
    .cahier-wrap,
    .oriel-wrap,
    .cloche-wrap,
    .cloche-articles-hold,
    .porte-hold,
    .buffet-wrap,
    .buffet-hints-hold,
    .cadre-hold,
    .galerie-hold { padding-inline: var(--padding-tablet); }

    .pupitre { padding-inline: var(--padding-tablet); }

    .balise-mark-shot { height: 48px; }

    .balise-caution { font-size: var(--micro); }

    .affiche-wrap { min-height: clamp(400px, 52vh, 520px); }

    .affiche-step { display: inline-flex; }

    .placard-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-5); }

    .coffre-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-6); }

    .nef-grid { font-size: var(--sm); }

    .nef-grid thead { display: table-header-group; }

    .nef-grid tbody { background: var(--card); }

    .nef-strip { display: table-row; }

    .nef-grid tbody .nef-strip {
        margin: 0;
        padding: 0;
        border: 0;
        border-block-end: var(--slim) solid var(--hairline);
        border-radius: 0;
    }

    .nef-grid td,
    .nef-grid th { display: table-cell; padding: var(--g-4); }

    .nef-grid td { background: var(--card); }

    .nef-grid td::before { display: none; }

    .cloche-wrap { grid-template-columns: 240px minmax(0, 1fr); gap: var(--g-7); }

    .cloche-frame { width: 240px; }

    .cloche-articles-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .galerie-hold { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--g-7); }

    .galerie-meat {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--g-5) var(--g-6);
        align-items: start;
    }

    .galerie-mark { grid-column: 1 / -1; }

    .galerie-mark-shot { height: 52px; }

    .galerie-small { grid-column: 1 / -1; }

    .galerie-guide--rule { border-block-start: 0; padding-block-start: 0; }

    .galerie-flare-chip {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        letter-spacing: var(--open);
    }

    .porte-headshot { width: 48px; height: 48px; }

    .buffet-hints-list { gap: var(--g-6); }
}

/* ≥ 1080px — меню в строку */
@media (min-width: 1080px) {
    .balise-guide { display: block; }

    .balise-guide + .balise-deck { margin-inline-start: var(--g-5); }

    .balise-switch { display: none; }

    .balise-drawer,
    .balise-drawer.is-open { display: none; }

    .balise-note { display: inline; }

    .balise-mark-shot { height: 56px; }

    .balise-list { gap: var(--g-4); }

    .balise-piece + .balise-piece::before { margin-inline-end: var(--g-4); }
}

/* ≥ 1180px */
@media (min-width: 1180px) {
    .balise-utility-hold,
    .balise-strip-hold,
    .affiche-wrap,
    .affiche-pilot,
    .registre-wrap,
    .retable-wrap,
    .placard-wrap,
    .nef-wrap,
    .secteur-wrap,
    .coffre-wrap,
    .tableau-wrap,
    .cahier-wrap,
    .oriel-wrap,
    .cloche-wrap,
    .cloche-articles-hold,
    .porte-hold,
    .buffet-wrap,
    .buffet-hints-hold,
    .cadre-hold,
    .galerie-hold { padding-inline: var(--pad-lg); }

    .pupitre { padding-inline: var(--pad-lg); }

    .affiche-wrap { min-height: clamp(440px, 56vh, 560px); }
}

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

    .affiche-slide { transition: none !important; }
}

/* offer button — scripts/cta-style.mjs (домен arescasino.biz) */
.alcove-act {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--g-3) var(--g-5);
    min-height: 44px;
    border-radius: var(--r-4);
    border: var(--slim) solid var(--border-strong);
    font-family: var(--copy);
    font-size: var(--h5);
    font-weight: var(--half);
    background: #0284C7;
    color: #070606;
    text-decoration: none;
    transition: background var(--brisk) var(--out), transform var(--brisk) var(--out);
}

.alcove-act.alcove-act { color: #070606; text-decoration: none; }

.alcove-act::after {
    content: "";
    position: absolute;
    inset-inline: 12%;
    inset-block-end: 6px;
    block-size: 0;
    border-block-end: 2px solid currentColor;
    opacity: 0.5;
    transform-origin: left;
    animation: alcove-wake 1.9s var(--smooth) infinite;
}

.alcove-act:hover { background: #0369A1; color: #FFFFFF; animation: none; }

.alcove-act.alcove-act:hover { color: #FFFFFF; text-decoration: none; }

.alcove-act:hover::after { animation: none; }

.alcove-act:active { background: #075985; color: #FFFFFF; }

.alcove-act:focus-visible { outline: 3px solid var(--type); outline-offset: 3px; }

@keyframes alcove-wake {
    0%, 100% { transform: scaleX(0); }
    40%, 60% { transform: scaleX(1); }
}

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

/* offer buttons in blocks */
.affiche-go,
.registre-go,
.tableau-go {
    flex-shrink: 0;
    max-inline-size: 100%;
}

/* очень узкие экраны: строка шапки в одну линию */
@media (max-width: 420px) {
    .balise-strip-hold {
        padding-inline: var(--g-3);
        gap: var(--g-2);
    }

    .balise-utility-hold,
    .balise-caution { padding-inline: var(--g-3); }

    .balise-switch { width: 40px; height: 40px; }

    .balise-mark-shot { height: 30px; }

    .balise-push.alcove-act {
        min-height: 40px;
        padding-inline: var(--g-3);
        font-size: 12px;
        letter-spacing: 0;
    }
}

@media (max-width: 1107px) {
  .balise-guide,
  .balise-list,
  .balise-hop { display: none !important; }
  .balise-switch { display: flex !important; }
}