/* tokens */
:root {
    --paint-lead: #11141c;
    --paint-brand-hot: #04c2fc;
    --paint-key-active: #00a9cf;
    --paint-sheet: #101219;
    --paint-bg-elevated: #171b25;
    --paint-glyph: #ffffff;
    --paint-muted: #c1c1c1;
    --paint-line: rgba(255, 255, 255, 0.12);
    --paint-rule-bold: rgba(255, 255, 255, 0.26);
    --paint-blend-a: #fedc00;
    --paint-ramp-end: #1d2030;
    --paint-rg-banner: #b02a37;

    --stack-2xs: 5px;
    --stack-xs: 10px;
    --stack-sm: 15px;
    --stack-md: 25px;
    --stack-lg: 40px;
    --stack-xl: 60px;
    --stack-2xl: 90px;
    --stack-3xl: 140px;

    --corner-2xs: 1px;
    --corner-xs: 2px;
    --corner-sm: 6px;
    --corner-md: 8px;
    --corner-lg: 14px;
    --corner-xl: 18px;
    --corner-2xl: 24px;
    --corner-3xl: 30px;
    --corner-pill: 9999px;
    --corner-orb: 50%;

    --type-head: "Fira Sans", system-ui, sans-serif;
    --type-text: "Fira Sans", system-ui, sans-serif;

    --fs-xxl: clamp(28px, 6.2vw, 60px);
    --fs-display-2: clamp(24px, 3.1vw, 34px);
    --fs-h3: clamp(19px, 2.1vw, 24px);
    --fs-display-4: clamp(17px, 1.7vw, 19px);
    --fs-sm-2: clamp(14px, 1.4vw, 16px);
    --fs-xs-2: clamp(12px, 1.2vw, 14px);
    --fs-base: clamp(15px, 1.3vw, 16px);
    --fs-caption: clamp(12px, 1.1vw, 13px);
    --fs-legal: clamp(9px, 0.9vw, 10px);

    --line-dense: 1.1;
    --line-default: 1.5;
    --line-open: 1.65;

    --boldness-normal: 400;
    --boldness-mid: 600;
    --boldness-thick: 800;

    --ls-tight: -0.02em;
    --ls-default: 0;
    --ls-spread: 0.06em;

    --depth-2xs: 0 1px 1px rgba(0, 0, 0, 0.04);
    --depth-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --depth-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --depth-md: 0 4px 10px rgba(0, 0, 0, 0.1);
    --depth-lg: 0 8px 20px rgba(0, 0, 0, 0.14);
    --depth-xl: 0 14px 30px rgba(0, 0, 0, 0.2);
    --depth-2xl: 0 20px 44px rgba(0, 0, 0, 0.26);
    --depth-3xl: 0 28px 60px rgba(0, 0, 0, 0.32);

    --tempo-quick: 217ms;
    --tempo-normal: 410ms;
    --tempo-calm: 651ms;
    --glide-settle: cubic-bezier(0.32, 0.56, 0.32, 0.92);
    --glide-launch: cubic-bezier(0.58, 0, 0.52, 0.89);
    --glide-in-out: cubic-bezier(0.58, 0, 0.52, 0.89);
    --glide-elastic: cubic-bezier(0.21, 1.15, 0.72, 1);

    --shell-main: 1440px;
    --shell-narrow: 650px;
    --shell-inset-desktop: 24px;
    --shell-edge-mid: 32px;
    --shell-pad-sm: 16px;

    --border-light: 1px;
    --border-even: 2px;
    --border-thick: 3px;

    --topbar-size-desktop: 68px;
    --topbar-height-mobile: 60px;
    --util-size: 34px;
    --rg-height: 40px;
    --step-indent: var(--stack-sm);
}

/* self-hosted faces */
@font-face {
    font-family: "Fira Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/display/fira-400.woff2") format("woff2");
}

@font-face {
    font-family: "Fira Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/display/fira-600.woff2") format("woff2");
}

@font-face {
    font-family: "Fira Sans";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/display/fira-800.woff2") format("woff2");
}

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

html,
body {
    overflow-x: clip;
}

body {
    margin: 0;
    padding-bottom: var(--rg-height);
    background: var(--paint-sheet);
    color: var(--paint-glyph);
    font-family: var(--type-text);
    font-size: var(--fs-base);
    font-weight: var(--boldness-normal);
    line-height: var(--line-default);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
}

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

h1 {
    font-family: var(--type-head);
    font-size: var(--fs-xxl);
    font-weight: var(--boldness-thick);
    line-height: var(--line-dense);
    letter-spacing: var(--ls-tight);
    text-transform: uppercase;
}

h2 {
    font-family: var(--type-head);
    font-size: var(--fs-display-2);
    font-weight: var(--boldness-mid);
    line-height: var(--line-dense);
    letter-spacing: var(--ls-default);
}

h3 {
    font-family: var(--type-text);
    font-size: var(--fs-h3);
    font-weight: var(--boldness-mid);
    line-height: var(--line-dense);
}

h4 {
    font-family: var(--type-text);
    font-size: var(--fs-display-4);
    font-weight: var(--boldness-mid);
}

h5,
h6 {
    font-family: var(--type-text);
    font-size: var(--fs-sm-2);
    font-weight: var(--boldness-mid);
    letter-spacing: var(--ls-spread);
    text-transform: uppercase;
}

p {
    margin: 0 0 var(--stack-sm);
    overflow-wrap: anywhere;
}

ul,
ol,
dl {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    color: var(--paint-brand-hot);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--tempo-quick) var(--glide-settle);
}

a:hover {
    color: var(--paint-key-active);
    text-decoration-thickness: 2px;
}

button {
    font: inherit;
    cursor: pointer;
}

:focus-visible {
    outline: var(--border-even) solid var(--paint-blend-a);
    outline-offset: 2px;
}

/* a11y helpers */
.skiplink {
    position: fixed;
    left: var(--stack-sm);
    z-index: 200;
    padding: var(--stack-xs) var(--stack-sm);
    border-radius: var(--corner-sm);
    background: var(--paint-blend-a);
    color: var(--paint-lead);
    font-weight: var(--boldness-thick);
    text-decoration: none;
}

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

.skiplink:focus {
    top: var(--stack-sm);
}

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

/* shared section frame */
.bordure-bas-wrap,
.bordure-bas-util-wrap,
.oriflamme-voile-wrap,
.preau-lumineux-wrap,
.peristyle-prime-wrap,
.jube-dru-wrap,
.parterre-haut-wrap,
.sentinelle-haut-wrap,
.veilleuse-haut-wrap,
.vigile-fluide-wrap,
.ciboire-bas-wrap,
.enceinte-fluide-wrap,
.presbytere-voile-wrap,
.verriere-haut-wrap,
.ambon-dru-wrap,
.chapelle-vif-wrap,
.parure-pur-wrap,
.garde-corps-pur-wrap,
.rg-band-wrap {
    display: block;
    width: 100%;
    max-width: calc(var(--shell-main) + 2 * var(--shell-inset-desktop));
    margin-inline: auto;
    padding-inline: var(--shell-pad-sm);
}

.preau-lumineux,
.peristyle-prime,
.jube-dru,
.parterre-haut,
.sentinelle-haut,
.veilleuse-haut,
.vigile-fluide,
.ciboire-bas,
.enceinte-fluide,
.presbytere-voile,
.verriere-haut,
.ambon-dru {
    padding-block: var(--stack-lg);
}

/* reveal */
[data-inview] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--tempo-normal) var(--glide-settle), transform var(--tempo-normal) var(--glide-settle);
}

[data-inview].in-view {
    opacity: 1;
    transform: translateY(0);
}

/* header — HEAD-UTIL */
.bordure-bas {
    position: relative;
    z-index: 60;
    background: var(--paint-lead);
    box-shadow: var(--depth-md);
}

.bordure-bas-util {
    border-bottom: var(--border-light) solid var(--paint-line);
    background: var(--paint-ramp-end);
}

.bordure-bas-util-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--stack-sm);
    min-height: var(--util-size);
}

.bordure-bas-util-mark {
    display: inline-flex;
    align-items: center;
    gap: var(--stack-2xs);
    color: var(--paint-muted);
    font-size: var(--fs-legal);
    font-weight: var(--boldness-mid);
    letter-spacing: var(--ls-spread);
    text-transform: uppercase;
}

.bordure-bas-util-mark strong {
    padding: 1px var(--stack-2xs);
    border: var(--border-light) solid var(--paint-rule-bold);
    border-radius: var(--corner-xs);
    color: var(--paint-glyph);
}

.bordure-bas-util-links {
    display: flex;
    align-items: center;
    gap: var(--stack-sm);
}

.bordure-bas-util-anchor {
    color: var(--paint-muted);
    font-size: var(--fs-legal);
    font-weight: var(--boldness-mid);
    letter-spacing: var(--ls-spread);
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.bordure-bas-util-anchor:hover {
    color: var(--paint-glyph);
}

.bordure-bas-main {
    background: var(--paint-lead);
}

.bordure-bas-wrap {
    display: flex;
    align-items: center;
    gap: var(--stack-sm);
    min-height: var(--topbar-size-desktop);
}

.bordure-bas-logo {
    order: 1;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: var(--stack-2xs) var(--stack-xs);
    border: var(--border-light) solid var(--paint-line);
    border-radius: var(--corner-sm);
    background: rgba(255, 255, 255, 0.04);
    text-decoration: none;
}

.bordure-bas-image {
    display: block;
    flex-shrink: 0;
    width: auto;
    height: 60px;
}

.bordure-bas-links {
    order: 2;
    display: none;
    flex: 1 1 auto;
    min-width: 0;
}

.bordure-bas-list {
    display: flex;
    align-items: center;
    gap: var(--stack-xs);
    flex-wrap: nowrap;
}

.bordure-bas-one {
    display: flex;
    align-items: center;
}

.bordure-bas-one + .bordure-bas-one::before {
    content: "";
    width: var(--border-light);
    height: 14px;
    margin-right: var(--stack-xs);
    background: var(--paint-rule-bold);
}

.bordure-bas-one.is-tucked {
    display: none;
}

.bordure-bas-anchor {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--paint-glyph);
    font-size: 16px;
    font-weight: 600;
    font-variant-caps: small-caps;
    text-decoration: none;
    white-space: nowrap;
}

.bordure-bas-anchor::after {
    content: "";
    position: absolute;
    inset-inline: 50%;
    bottom: 8px;
    height: var(--border-even);
    background: var(--paint-brand-hot);
    transition: inset-inline var(--tempo-quick) var(--glide-settle);
}

.bordure-bas-anchor:hover::after {
    inset-inline: 0;
}

.bordure-bas-anchor:hover {
    color: var(--paint-glyph);
}

.bordure-bas-anchor.is-current {
    color: var(--paint-brand-hot);
}

.bordure-bas-more {
    order: 3;
    position: relative;
    display: none;
    flex-shrink: 0;
}

.bordure-bas-more-knob {
    display: inline-flex;
    align-items: center;
    gap: var(--stack-2xs);
    min-height: 44px;
    padding-inline: var(--stack-xs);
    border: 0;
    background: transparent;
    color: var(--paint-glyph);
    font-size: 16px;
    font-weight: 600;
    font-variant-caps: small-caps;
    white-space: nowrap;
}

.bordure-bas-more-knob[hidden] {
    display: none;
}

.bordure-bas-more-knob[aria-expanded="true"] {
    color: var(--paint-brand-hot);
}

.bordure-bas-more-list {
    position: absolute;
    top: calc(100% + var(--stack-2xs));
    right: 0;
    z-index: 70;
    display: none;
    min-width: 220px;
    max-height: 70vh;
    padding: var(--stack-xs);
    border: var(--border-light) solid var(--paint-line);
    border-radius: var(--corner-md);
    background: var(--paint-ramp-end);
    box-shadow: var(--depth-lg);
    overflow-y: auto;
}

.bordure-bas-more-list.is-open {
    display: block;
}

.bordure-bas-more-anchor {
    display: block;
    padding: var(--stack-xs) var(--stack-sm);
    border-radius: var(--corner-sm);
    color: var(--paint-glyph);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.bordure-bas-more-anchor:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--paint-brand-hot);
}

.bordure-bas-keys {
    order: 4;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--stack-xs);
    margin-left: auto;
}

.bordure-bas-quiet-btn {
    display: none;
    align-items: center;
    flex-shrink: 0;
    min-height: 40px;
    padding-inline: var(--stack-md);
    border: var(--border-light) solid var(--paint-rule-bold);
    border-radius: var(--corner-2xs);
    background: transparent;
    color: var(--paint-glyph);
    font-family: var(--type-head);
    font-size: var(--fs-caption);
    font-weight: var(--boldness-thick);
    letter-spacing: var(--ls-spread);
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background var(--tempo-quick) var(--glide-settle), color var(--tempo-quick) var(--glide-settle);
}

.bordure-bas-quiet-btn:hover {
    background: var(--paint-glyph);
    color: var(--paint-lead);
}

.bordure-bas-btn {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 44px;
    padding-inline: var(--stack-md);
    border-radius: var(--corner-2xs);
    font-family: var(--type-head);
    font-size: var(--fs-caption);
    font-weight: var(--boldness-thick);
    letter-spacing: var(--ls-spread);
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.bordure-bas-menu-knob {
    order: 5;
    display: inline-flex;
    align-items: center;
    gap: var(--stack-2xs);
    min-height: 44px;
    margin-left: auto !important;
    padding-inline: var(--stack-xs);
    border: 0;
    background: transparent;
    color: var(--paint-glyph);
    font-family: var(--type-head);
    font-size: var(--fs-caption);
    font-weight: var(--boldness-thick);
    letter-spacing: var(--ls-spread);
    text-transform: uppercase;
}

.bordure-bas-knob-icon {
    display: block;
    width: 18px;
    height: 14px;
    border-top: var(--border-even) solid currentColor;
    border-bottom: var(--border-even) solid currentColor;
}

.bordure-bas-knob-icon::before {
    content: "";
    display: block;
    height: var(--border-even);
    margin-top: 4px;
    background: currentColor;
}

.bordure-bas-sheet {
    visibility: hidden;
    position: absolute;
    inset-inline: 0;
    z-index: 65;
    max-height: 70vh;
    padding-block: var(--stack-xs) var(--stack-md);
    border-bottom: var(--border-light) solid var(--paint-line);
    background: var(--paint-ramp-end);
    box-shadow: var(--depth-lg);
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    overflow-y: auto;
    transition: opacity var(--tempo-quick) var(--glide-settle), transform var(--tempo-quick) var(--glide-settle), visibility var(--tempo-quick);
}

.bordure-bas-sheet.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.bordure-bas-sheet-list {
    display: block;
    width: 100%;
    max-width: calc(var(--shell-main) + 2 * var(--shell-inset-desktop));
    margin-inline: auto;
    padding-inline: var(--shell-pad-sm);
}

.bordure-bas-sheet-one {
    display: block;
}

.bordure-bas-sheet-anchor {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-bottom: var(--border-light) solid var(--paint-line);
    color: var(--paint-glyph);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.bordure-bas-sheet-anchor.is-current {
    color: var(--paint-brand-hot);
}

.bordure-bas-sheet-cta {
    display: inline-flex;
    width: 100%;
    margin-block-start: var(--stack-md);
}

/* breadcrumbs — BREAD-06 */
.oriflamme-voile {
    background: var(--paint-bg-elevated);
}

.oriflamme-voile-wrap {
    padding-block: var(--stack-sm);
}

.oriflamme-voile-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--stack-2xs);
    font-size: var(--fs-caption);
}

.oriflamme-voile-one + .oriflamme-voile-one::before {
    content: "›";
    margin-right: var(--stack-2xs);
    color: var(--paint-muted);
}

.oriflamme-voile-anchor {
    color: var(--paint-muted);
    text-decoration: none;
}

.oriflamme-voile-anchor:hover {
    color: var(--paint-brand-hot);
}

.oriflamme-voile-current {
    color: var(--paint-glyph);
}

/* hero — HERO-06 */
.preau-lumineux {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--paint-ramp-end), var(--paint-sheet) 62%);
}

.preau-lumineux-wrap {
    position: relative;
}

.preau-lumineux-matter {
    position: relative;
    z-index: 2;
    padding-block: var(--stack-md) var(--stack-lg);
}

.preau-lumineux-second {
    max-width: var(--shell-narrow);
    margin-block: var(--stack-md);
    color: var(--paint-muted);
    font-size: var(--fs-sm-2);
    line-height: var(--line-open);
}

.preau-lumineux-figure {
    margin: 0;
    border-radius: var(--corner-lg);
    overflow: hidden;
    box-shadow: var(--depth-lg);
}

.preau-lumineux-image {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}

.preau-lumineux-note {
    max-width: var(--shell-narrow);
    margin-block-start: var(--stack-sm);
    color: var(--paint-muted);
    font-size: var(--fs-caption);
    line-height: var(--line-default);
}

/* page-header — PHEAD-08 */
.peristyle-prime-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--stack-xs);
    margin-block-end: var(--stack-sm);
}

.peristyle-prime-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--stack-2xs) var(--stack-sm);
    border-radius: var(--corner-pill);
    background: var(--paint-lead);
    color: var(--paint-glyph);
    font-size: var(--fs-legal);
    font-weight: var(--boldness-mid);
    letter-spacing: var(--ls-spread);
    text-transform: uppercase;
}

.peristyle-prime-second {
    max-width: var(--shell-narrow);
    margin-block-start: var(--stack-sm);
    color: var(--paint-muted);
    line-height: var(--line-open);
}

.peristyle-prime-detail {
    margin-block-start: var(--stack-xs);
    color: var(--paint-muted);
    font-size: var(--fs-caption);
}

/* prose — PROSE-28 (ступенчатые отступы) */
.sentinelle-haut-matter > h2 {
    margin-block: var(--stack-md) var(--stack-sm);
}

.sentinelle-haut-matter > h2:first-child {
    margin-block-start: 0;
}

.sentinelle-haut-matter > p {
    line-height: var(--line-open);
    color: var(--paint-muted);
}

.sentinelle-haut-matter > p:nth-of-type(2) {
    padding-inline-start: var(--step-indent);
}

.sentinelle-haut-matter > p:nth-of-type(3) {
    padding-inline-start: calc(2 * var(--step-indent));
}

.sentinelle-haut-matter > p:nth-of-type(n + 4) {
    padding-inline-start: calc(3 * var(--step-indent));
}

.sentinelle-haut-matter strong {
    color: var(--paint-glyph);
    font-weight: var(--boldness-mid);
}

.sentinelle-haut-list {
    margin-block: var(--stack-sm) var(--stack-md);
    padding-inline-start: var(--step-indent);
}

.sentinelle-haut-list li {
    position: relative;
    padding-inline-start: var(--stack-md);
    margin-block-end: var(--stack-xs);
    color: var(--paint-muted);
    line-height: var(--line-open);
}

.sentinelle-haut-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: var(--stack-xs);
    height: var(--border-even);
    background: var(--paint-brand-hot);
}

/* items-grid — GRID-04 */
.jube-dru-heading {
    margin-block-end: var(--stack-md);
}

.jube-dru-list {
    display: grid;
    gap: var(--stack-md);
    grid-template-columns: 1fr;
}

.jube-dru-one {
    padding: var(--stack-lg);
    border: var(--border-light) solid var(--paint-line);
    border-radius: var(--corner-md);
    background: var(--paint-bg-elevated);
    transition: transform var(--tempo-normal) var(--glide-settle), border-color var(--tempo-normal) var(--glide-settle);
}

.jube-dru-one:hover {
    transform: translateX(5px);
    border-color: var(--paint-brand-hot);
}

.jube-dru-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-block-end: var(--stack-md);
    border-radius: var(--corner-orb);
    background: var(--paint-brand-hot);
    color: var(--paint-lead);
}

.jube-dru-icon {
    display: block;
    width: 26px;
    height: 26px;
}

.jube-dru-labelline {
    margin-block-end: var(--stack-sm);
    font-size: var(--fs-display-4);
    font-weight: var(--boldness-thick);
}

.jube-dru-body {
    margin: 0;
    color: var(--paint-muted);
    line-height: var(--line-default);
}

/* data-table — TABLE-08 (floating cards, no <table>) */
.parterre-haut-heading {
    margin-block-end: var(--stack-md);
}

.parterre-haut-list {
    display: grid;
    gap: var(--stack-md);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.parterre-haut-plate {
    display: flex;
    flex-direction: column;
    gap: var(--stack-sm);
    padding: var(--stack-lg);
    border: var(--border-light) solid var(--paint-line);
    border-radius: var(--corner-md);
    background: var(--paint-bg-elevated);
}

.parterre-haut-control {
    display: flex;
    flex-direction: column;
    gap: var(--stack-2xs);
}

.parterre-haut-chip {
    color: var(--paint-muted);
    font-size: var(--fs-legal);
    font-weight: var(--boldness-mid);
    letter-spacing: var(--ls-spread);
    text-transform: uppercase;
}

.parterre-haut-readout {
    color: var(--paint-glyph);
    font-size: var(--fs-base);
    font-weight: var(--boldness-mid);
}

/* faq — FAQ-01 */
.veilleuse-haut-list {
    display: block;
    border-top: var(--border-light) solid var(--paint-line);
}

.veilleuse-haut-heading {
    margin-block-end: var(--stack-md);
}

.veilleuse-haut-one {
    border-bottom: var(--border-light) solid var(--paint-line);
}

.veilleuse-haut-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--stack-sm);
    padding-block: var(--stack-md);
    cursor: pointer;
    list-style: none;
}

.veilleuse-haut-question::-webkit-details-marker {
    display: none;
}

.veilleuse-haut-question h3 {
    margin: 0;
    font-size: var(--fs-sm-2);
    font-weight: var(--boldness-thick);
    color: var(--paint-glyph);
    transition: color var(--tempo-quick) var(--glide-settle);
}

.veilleuse-haut-question:hover h3 {
    color: var(--paint-brand-hot);
}

.veilleuse-haut-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--paint-brand-hot);
    font-size: 24px;
    line-height: 1;
    text-align: center;
    transition: transform var(--tempo-normal) var(--glide-settle);
}

.veilleuse-haut-one[open] .veilleuse-haut-icon {
    transform: rotate(45deg);
}

.veilleuse-haut-answer {
    display: grid;
    grid-template-rows: 1fr;
    padding-block-end: var(--stack-md);
}

.veilleuse-haut-body {
    color: var(--paint-muted);
    line-height: var(--line-open);
}

/* reviews — REV-05 */
.vigile-fluide-heading {
    margin-block-end: var(--stack-md);
}

.vigile-fluide-list {
    border-left: var(--border-light) solid var(--paint-brand-hot);
}

.vigile-fluide-one {
    position: relative;
    margin-block-end: var(--stack-lg);
    padding-inline-start: var(--stack-lg);
}

.vigile-fluide-one:last-child {
    margin-block-end: 0;
}

.vigile-fluide-dot {
    position: absolute;
    left: -8px;
    top: 8px;
    width: 16px;
    height: 16px;
    border-radius: var(--corner-orb);
    background: var(--paint-brand-hot);
}

.vigile-fluide-detail {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--stack-xs);
    color: var(--paint-muted);
    font-size: var(--fs-caption);
}

.vigile-fluide-titleline {
    color: var(--paint-glyph);
    font-weight: var(--boldness-mid);
}

.vigile-fluide-stars {
    color: var(--paint-blend-a);
    letter-spacing: var(--ls-spread);
}

.vigile-fluide-body {
    margin: var(--stack-xs) 0 0;
    padding: 0;
    border: 0;
    color: var(--paint-muted);
    font-style: normal;
    line-height: var(--line-default);
}

/* cta-block — CTA-02 */
.ciboire-bas-box {
    max-width: var(--shell-narrow);
    margin-inline: auto;
    padding: var(--stack-lg);
    border: var(--border-light) solid var(--paint-line);
    border-radius: var(--corner-lg);
    background: var(--paint-bg-elevated);
    text-align: center;
}

.ciboire-bas-labelline {
    font-size: var(--fs-display-2);
    font-family: var(--type-head);
    font-weight: var(--boldness-thick);
}

.ciboire-bas-body {
    margin-block: var(--stack-md);
    color: var(--paint-muted);
    line-height: var(--line-open);
}

.ciboire-bas-note {
    margin-block-start: var(--stack-sm);
    color: var(--paint-muted);
    font-size: var(--fs-caption);
}

/* legal-section — LEGAL-01 */
.enceinte-fluide-intro {
    margin-block-end: var(--stack-lg);
    font-size: var(--fs-sm-2);
    line-height: var(--line-default);
}

.enceinte-fluide-stamp {
    margin-block-end: var(--stack-lg);
    color: var(--paint-muted);
    font-size: var(--fs-legal);
    letter-spacing: var(--ls-spread);
    text-transform: uppercase;
}

.enceinte-fluide-section {
    padding-block-start: var(--stack-md);
    border-top: var(--border-light) solid var(--paint-line);
}

.enceinte-fluide-section:first-of-type {
    padding-block-start: 0;
    border-top: 0;
}

.enceinte-fluide-section h3 {
    margin-block: var(--stack-md) var(--stack-sm);
    font-family: var(--type-head);
    font-weight: var(--boldness-thick);
}

.enceinte-fluide-body {
    margin-block-end: var(--stack-sm);
    color: var(--paint-muted);
    line-height: var(--line-open);
}

.enceinte-fluide-contacts {
    margin-block-start: var(--stack-lg);
    padding: var(--stack-lg);
    border-radius: var(--corner-md);
    background: var(--paint-bg-elevated);
}

.enceinte-fluide-contacts-heading {
    margin-block-end: var(--stack-sm);
}

.enceinte-fluide-list li {
    margin-block-end: var(--stack-xs);
    color: var(--paint-muted);
    line-height: var(--line-default);
}

.enceinte-fluide-note {
    margin-block-start: var(--stack-lg);
    padding: var(--stack-md);
    border-left: var(--border-thick) solid var(--paint-rg-banner);
    border-radius: var(--corner-xs);
    background: rgba(176, 42, 55, 0.12);
    color: var(--paint-muted);
    font-size: var(--fs-caption);
}

/* contact-form — FORM-01 */
.presbytere-voile-intro {
    margin-block-end: var(--stack-lg);
    color: var(--paint-muted);
    line-height: var(--line-open);
}

.presbytere-voile-done {
    display: none;
    margin-block-end: var(--stack-md);
    padding: var(--stack-md);
    border: var(--border-light) solid rgba(34, 197, 94, 0.35);
    border-radius: var(--corner-md);
    background: rgba(34, 197, 94, 0.12);
    color: var(--paint-glyph);
}

.presbytere-voile-done.is-visible {
    display: block;
}

.presbytere-voile-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--stack-md);
    padding: var(--stack-lg);
    border-radius: var(--corner-md);
    background: var(--paint-bg-elevated);
    box-shadow: var(--depth-sm);
}

.presbytere-voile-control {
    display: flex;
    flex-direction: column;
    gap: var(--stack-xs);
}

.presbytere-voile-chip {
    color: var(--paint-glyph);
    font-size: var(--fs-caption);
    font-weight: var(--boldness-mid);
    letter-spacing: var(--ls-spread);
    text-transform: uppercase;
}

.presbytere-voile-input,
.presbytere-voile-area {
    width: 100%;
    padding: var(--stack-sm) var(--stack-md);
    border: var(--border-light) solid var(--paint-line);
    border-radius: var(--corner-md);
    background: var(--paint-sheet);
    color: var(--paint-glyph);
    font-family: var(--type-text);
    font-size: var(--fs-base);
}

.presbytere-voile-input {
    height: 48px;
}

.presbytere-voile-area {
    min-height: 120px;
    resize: vertical;
}

.presbytere-voile-input:focus,
.presbytere-voile-area:focus {
    border-color: var(--paint-brand-hot);
    outline: none;
}

.presbytere-voile-send {
    align-self: flex-start;
    min-height: 48px;
    padding-inline: var(--stack-lg);
    border: 0;
    border-radius: var(--corner-md);
    background: var(--paint-brand-hot);
    color: var(--paint-lead);
    font-family: var(--type-head);
    font-weight: var(--boldness-thick);
    letter-spacing: var(--ls-spread);
    text-transform: uppercase;
}

.presbytere-voile-send:hover {
    background: var(--paint-key-active);
    color: var(--paint-lead);
}

/* author-card — AUTH-02 */
.verriere-haut-wrap {
    text-align: center;
}

.verriere-haut-photo {
    display: block;
    width: 140px;
    height: 140px;
    margin: 0 auto var(--stack-lg);
    border-radius: var(--corner-orb);
    object-fit: cover;
}

.verriere-haut-position {
    color: var(--paint-brand-hot);
    font-size: var(--fs-caption);
    font-weight: var(--boldness-mid);
    letter-spacing: var(--ls-spread);
    text-transform: uppercase;
}

.verriere-haut-titleline {
    margin-block: var(--stack-xs) var(--stack-md);
}

.verriere-haut-bio {
    max-width: var(--shell-narrow);
    margin-inline: auto;
    margin-block-end: var(--stack-md);
    color: var(--paint-muted);
    line-height: var(--line-open);
}

.verriere-haut-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--stack-xs);
}

.verriere-haut-tag {
    padding: var(--stack-2xs) var(--stack-sm);
    border: var(--border-light) solid var(--paint-line);
    border-radius: var(--corner-pill);
    color: var(--paint-muted);
    font-size: var(--fs-caption);
}

.verriere-haut-articles {
    margin-block-start: var(--stack-lg);
    padding-block-start: var(--stack-md);
    border-top: var(--border-light) solid var(--paint-line);
}

.verriere-haut-articles-heading {
    margin-block-end: var(--stack-sm);
}

.verriere-haut-articles-list {
    display: grid;
    gap: var(--stack-xs);
}

.verriere-haut-articles-anchor {
    color: var(--paint-brand-hot);
}

/* author-byline — BYLINE-04 */
.ambon-dru-wrap {
    max-width: var(--shell-narrow);
    text-align: center;
}

.ambon-dru-quote {
    position: relative;
    margin: 0;
    padding-block-start: var(--stack-md);
    color: var(--paint-glyph);
    font-family: var(--type-head);
    font-size: var(--fs-display-4);
    font-style: italic;
    line-height: var(--line-default);
}

.ambon-dru-quote::before {
    content: "\201C";
    display: block;
    color: var(--paint-brand-hot);
    font-size: var(--fs-display-2);
    line-height: 0.6;
}

.ambon-dru-attr {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--stack-xs);
    margin-block-start: var(--stack-md);
}

.ambon-dru-photo {
    width: 32px;
    height: 32px;
    border-radius: var(--corner-orb);
    object-fit: cover;
}

.ambon-dru-titleline {
    font-style: normal;
    font-weight: var(--boldness-thick);
}

.ambon-dru-position {
    color: var(--paint-muted);
    font-size: var(--fs-caption);
    font-style: italic;
}

.ambon-dru-posted {
    color: var(--paint-muted);
    font-size: var(--fs-caption);
}

/* error-block — ERR-04 */
.chapelle-vif {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 70vh;
    background-image: linear-gradient(180deg, rgba(16, 18, 25, 0.55), rgba(0, 0, 0, 0.82)), url("/display/masthead-alt.webp");
    background-position: center;
    background-size: cover;
}

.chapelle-vif-matter {
    max-width: var(--shell-narrow);
    padding-block: var(--stack-xl);
}

.chapelle-vif-body {
    margin-block: var(--stack-md);
    color: var(--paint-glyph);
    line-height: var(--line-open);
}

.chapelle-vif-btn {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding-inline: var(--stack-lg);
    border-radius: var(--corner-md);
    background: var(--paint-brand-hot);
    color: var(--paint-lead);
    font-family: var(--type-head);
    font-weight: var(--boldness-thick);
    letter-spacing: var(--ls-spread);
    text-decoration: none;
    text-transform: uppercase;
}

.chapelle-vif-btn:hover {
    background: var(--paint-key-active);
    color: var(--paint-lead);
}

/* footer — FOOT-05 */
.garde-corps-pur-strip {
    display: block;
}

.garde-corps-pur {
    background: var(--paint-lead);
    padding-block: var(--stack-lg);
}

.garde-corps-pur-grid {
    display: grid;
    gap: var(--stack-lg);
    grid-template-columns: 1fr;
}

.garde-corps-pur-logo {
    display: inline-block;
}

.garde-corps-pur-image {
    display: block;
    width: auto;
    height: 60px;
}

.garde-corps-pur-second {
    margin-block-start: var(--stack-sm);
    color: var(--paint-muted);
    font-size: var(--fs-caption);
    line-height: var(--line-default);
}

.garde-corps-pur-heading {
    margin-block-end: var(--stack-md);
    font-family: var(--type-head);
    font-size: var(--fs-caption);
    font-weight: var(--boldness-thick);
    letter-spacing: var(--ls-spread);
    text-transform: uppercase;
}

.garde-corps-pur-list {
    display: grid;
    gap: var(--stack-xs);
}

.garde-corps-pur-anchor {
    color: var(--paint-muted);
    font-size: var(--fs-caption);
    text-decoration: none;
}

.garde-corps-pur-anchor:hover {
    color: var(--paint-brand-hot);
}

.garde-corps-pur-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block-start: var(--stack-md);
    padding-inline: var(--stack-md);
    border-radius: var(--corner-2xs);
    font-family: var(--type-head);
    font-size: var(--fs-caption);
    font-weight: var(--boldness-thick);
    letter-spacing: var(--ls-spread);
    text-decoration: none;
    text-transform: uppercase;
}

.garde-corps-pur-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--stack-sm);
    margin-block-start: var(--stack-lg);
    padding-block-start: var(--stack-md);
    border-top: var(--border-light) solid var(--paint-line);
}

.garde-corps-pur-copy {
    color: var(--paint-muted);
    font-size: var(--fs-legal);
    letter-spacing: var(--ls-spread);
    text-transform: uppercase;
}

/* cookie-banner — COOK-02 */
.parure-pur {
    position: fixed;
    right: 0;
    bottom: var(--rg-height);
    left: 0;
    z-index: 100;
    border-top: var(--border-light) solid var(--paint-line);
    background: var(--paint-lead);
    transform: translateY(0);
    transition: transform var(--tempo-normal) var(--glide-settle), opacity var(--tempo-normal) var(--glide-settle);
}

.parure-pur.is-hidden {
    opacity: 0;
    transform: translateY(200%);
    pointer-events: none;
}

.parure-pur-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--stack-md);
    padding-block: var(--stack-sm);
}

.parure-pur-note {
    flex: 1 1 auto;
    color: var(--paint-muted);
    font-size: var(--fs-caption);
    line-height: var(--line-default);
}

.parure-pur-keys {
    display: flex;
    flex-shrink: 0;
    gap: var(--stack-xs);
}

.parure-pur-allow,
.parure-pur-decline {
    min-height: 40px;
    padding-inline: var(--stack-md);
    border-radius: var(--corner-sm);
    font-family: var(--type-head);
    font-size: var(--fs-caption);
    font-weight: var(--boldness-thick);
    letter-spacing: var(--ls-spread);
    text-transform: uppercase;
}

.parure-pur-allow {
    border: 0;
    background: var(--paint-brand-hot);
    color: var(--paint-lead);
}

.parure-pur-allow:hover {
    background: var(--paint-key-active);
    color: var(--paint-lead);
}

.parure-pur-decline {
    border: var(--border-light) solid var(--paint-rule-bold);
    background: transparent;
    color: var(--paint-glyph);
}

.parure-pur-decline:hover {
    background: var(--paint-glyph);
    color: var(--paint-lead);
}

/* rg-banner — RG-06 */
.rg-band {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 95;
    background: var(--paint-rg-banner);
    color: var(--paint-glyph);
}

.rg-band-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--stack-xs);
    min-height: var(--rg-height);
    padding-block: var(--stack-2xs);
    font-size: var(--fs-caption);
    line-height: var(--line-default);
    text-align: center;
}

.rg-band-anchor {
    color: var(--paint-glyph);
    font-weight: var(--boldness-mid);
    text-underline-offset: 2px;
}

.rg-band-anchor:hover {
    color: var(--paint-glyph);
}

/* offer buttons — base geometry (colour + motion appended by cta-style) */
.offer-cta {
    justify-content: center;
    text-align: center;
}

.preau-lumineux-cta {
    margin-block-start: var(--stack-sm);
}

.ciboire-bas-btn {
    margin-block-start: var(--stack-xs);
}

/* ≥ 520px */
@media (min-width: 520px) {
    .bordure-bas-wrap,
    .bordure-bas-util-wrap,
    .bordure-bas-sheet-list,
    .oriflamme-voile-wrap,
    .preau-lumineux-wrap,
    .peristyle-prime-wrap,
    .jube-dru-wrap,
    .parterre-haut-wrap,
    .sentinelle-haut-wrap,
    .veilleuse-haut-wrap,
    .vigile-fluide-wrap,
    .ciboire-bas-wrap,
    .enceinte-fluide-wrap,
    .presbytere-voile-wrap,
    .verriere-haut-wrap,
    .ambon-dru-wrap,
    .chapelle-vif-wrap,
    .parure-pur-wrap,
    .garde-corps-pur-wrap,
    .rg-band-wrap {
        padding-inline: var(--shell-edge-mid);
    }

    .jube-dru-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .garde-corps-pur-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ≥ 820px — desktop shell */
@media (min-width: 820px) {
    .bordure-bas-wrap {
        gap: var(--stack-md);
    }

    .bordure-bas-links {
        display: block;
    }

    .bordure-bas-more {
        display: block;
    }

    .bordure-bas-menu-knob {
        display: none;
    }

    .bordure-bas-sheet {
        display: none;
    }

    .preau-lumineux-matter {
        width: 52%;
        padding-block: var(--stack-lg);
    }

    .preau-lumineux-figure {
        position: absolute;
        top: -40px;
        right: 0;
        width: 44%;
        height: calc(100% + 80px);
        border-radius: var(--corner-lg);
        transform: rotate(2deg);
        transition: transform var(--tempo-calm) var(--glide-settle);
    }

    .preau-lumineux-figure:hover {
        transform: rotate(0deg) scale(1.02);
    }

    .preau-lumineux-image {
        height: 100%;
        max-height: none;
    }

    .jube-dru-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .garde-corps-pur-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: var(--stack-md);
    }

    .garde-corps-pur-bottom {
        justify-content: space-between;
    }

    .chapelle-vif-matter {
        padding-block: var(--stack-2xl);
    }
}

/* ≥ 1180px */
@media (min-width: 1180px) {
    .bordure-bas-wrap,
    .bordure-bas-util-wrap,
    .bordure-bas-sheet-list,
    .oriflamme-voile-wrap,
    .preau-lumineux-wrap,
    .peristyle-prime-wrap,
    .jube-dru-wrap,
    .parterre-haut-wrap,
    .sentinelle-haut-wrap,
    .veilleuse-haut-wrap,
    .vigile-fluide-wrap,
    .ciboire-bas-wrap,
    .enceinte-fluide-wrap,
    .presbytere-voile-wrap,
    .verriere-haut-wrap,
    .ambon-dru-wrap,
    .chapelle-vif-wrap,
    .parure-pur-wrap,
    .garde-corps-pur-wrap,
    .rg-band-wrap {
        padding-inline: var(--shell-inset-desktop);
    }

    .bordure-bas-list {
        gap: var(--stack-sm);
    }

    .bordure-bas-quiet-btn {
        display: inline-flex;
    }
}

/* narrow screens — compact header row */
@media (max-width: 519px) {
    .bordure-bas-util-links {
        display: none;
    }

    .bordure-bas-keys {
        display: none;
    }
}

@media (min-width: 520px) {
    .bordure-bas-sheet-cta {
        display: none;
    }
}

/* Tablet: Angebotsknopf und Menütaste bleiben als Gruppe am rechten Rand */
@media (min-width: 520px) and (max-width: 819px) {
    .bordure-bas-menu-knob {
        margin-left: var(--stack-xs) !important;
    }
}

@media (max-width: 819px) {
    .bordure-bas-wrap {
        min-height: var(--topbar-height-mobile);
    }

    .bordure-bas-image {
        height: 48px;
    }
}

/* narrow screens — PROSE-28 steps off, cookie compact */
@media (max-width: 720px) {
    .sentinelle-haut-matter > p:nth-of-type(2),
    .sentinelle-haut-matter > p:nth-of-type(3),
    .sentinelle-haut-matter > p:nth-of-type(n + 4) {
        padding-inline-start: 0;
    }

    .parure-pur-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 8px !important;
        padding-block: 12px;
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    .parure-pur-note {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    .parure-pur-keys {
        justify-content: flex-end;
    }

    .parure-pur-allow,
    .parure-pur-decline {
        min-height: 36px !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
}

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

    [data-inview] {
        opacity: 1;
        transform: none;
    }

    .preau-lumineux-figure:hover {
        transform: rotate(2deg);
    }
}
/* Offer CTA */
.qbbf-act{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 34px;border:2px solid #101219;border-radius:4px;
  background:#C026D3;color:#FFFFFF;text-decoration:none;
  font-size:13px;font-weight:600;letter-spacing:1.4px;
  box-shadow:3px 3px 0 #101219;transition:background .12s ease,color .12s ease,transform .12s ease,box-shadow .12s ease}
.qbbf-act:hover{background:#A21CAF;color:#FFFFFF;box-shadow:1px 1px 0 #101219;animation:none}
.qbbf-act:hover::after{animation:none}
.qbbf-act:active{background:#86198F;color:#FFFFFF}
.qbbf-act:focus-visible{outline:3px solid #101219;outline-offset:3px}
.qbbf-act{animation:breathe_qbbf 4.15s linear infinite}
@keyframes breathe_qbbf{0%{transform:scale(1);animation-timing-function:cubic-bezier(.25,.8,.35,1)}10.843%{transform:scale(1.08);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}32.530%,100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.qbbf-act,.qbbf-act::after{animation:none!important;transition:none!important}}

@media (max-width: 855px) {
  .bordure-bas-util-anchor,
  .bordure-bas-links,
  .bordure-bas-list,
  .bordure-bas-anchor,
  .bordure-bas-more,
  .bordure-bas-keys,
  .bordure-bas-quiet-btn,
  .bordure-bas-btn { display: none !important; }
  .bordure-bas-menu-knob { display: flex !important; }
}

.sentinelle-haut-page-figure {
	margin-block: var(--fs-display-2);
}

.sentinelle-haut-page-figure img {
	display: block;
	max-width: 100%;
	max-height: 56vh;
	width: auto;
	height: auto;
	margin-inline: auto;
}

.jube-dru-page-figure {
	margin-block: var(--fs-display-2);
}

.jube-dru-page-figure img {
	display: block;
	max-width: 100%;
	max-height: 56vh;
	width: auto;
	height: auto;
	margin-inline: auto;
}