/* ==========================================================================
   Cosmobet Casino — United Kingdom edition
   --------------------------------------------------------------------------
   Design tokens follow the build dictionary: colour, spacing, radius, type and
   motion names are the ones issued for this build, not the canonical library
   names. Rule blocks are ordered alphabetically by component root, preceded by
   the token sheet, the reset and the accessibility layer.

   Scales in use
     typography  TYPO-07  (airy generous, 19px reading size, loose leading)
     spacing     SPACE-10 (geometric, factor 1.5, 4 → 90px)
     container   CONT-07  (dual lane, 1340px shell)
     breakpoints BP-04    (540 / 880 / 1120 / 1440)
     geometry    GEO-02   (soft universal radii, 4 → 20px)
   Authoring is mobile-first: the base layer is the phone, wider layouts are
   added with min-width queries only, so no late block can outrank a narrower
   one further up the file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typefaces — self hosted. No external stylesheet is requested at runtime, so
   first paint does not wait on a third-party host.
   -------------------------------------------------------------------------- */
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('/glyphs/disp-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url('/glyphs/disp-600.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('/glyphs/body-400.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('/glyphs/body-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('/glyphs/body-600.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   Token sheet. Base values are the phone scale; the desktop scale is swapped
   in at the 880px step further down.
   -------------------------------------------------------------------------- */
:root {
    /* palette — values already carry the per-build shift */
    --col-lead: #04f3ff;
    --col-accent: #c90d40;
    --col-accent-pressed: #a50c34;
    --col-backdrop: #060606;
    --col-bg-elevated: #101016;
    --col-front: #ffffff;
    --col-quiet: #c1c1c1;
    --col-rule: rgba(255, 255, 255, 0.13);
    --col-stroke-heavy: rgba(255, 255, 255, 0.26);
    --col-ramp-start: #f66890;
    --col-grad-2: #f21954;
    --col-advisory: #8c1c13;
    /* derived surfaces — kept as tokens so no component invents its own */
    --col-veil: #0b0b10;
    --col-lead-soft: #7fd8e0;
    --col-lead-wash: rgba(4, 243, 255, 0.09);

    /* spacing — geometric, factor 1.5 */
    --sp-hair: 4px;
    --sp-tiny: 7px;
    --sp-snug: 11px;
    --sp-base: 17px;
    --sp-wide: 26px;
    --sp-roomy: 40px;
    --sp-vast: 60px;
    --sp-huge: 90px;

    /* radii + depth */
    --rd-hair: 2px;
    --rd-tiny: 4px;
    --rd-snug: 8px;
    --rd-base: 12px;
    --rd-wide: 20px;
    --rd-roomy: 28px;
    --rd-vast: 36px;
    --rd-huge: 48px;
    --rd-capsule: 9999px;
    --rd-round-full: 50%;
    --dep-hair: 0 1px 1px rgba(0, 0, 0, 0.04);
    --dep-tiny: 0 1px 2px rgba(0, 0, 0, 0.06);
    --dep-snug: 0 2px 6px rgba(0, 0, 0, 0.08);
    --dep-base: 0 6px 18px rgba(0, 0, 0, 0.12);
    --dep-wide: 0 12px 32px rgba(0, 0, 0, 0.16);
    --dep-roomy: 0 18px 44px rgba(0, 0, 0, 0.2);
    --dep-vast: 0 26px 60px rgba(0, 0, 0, 0.24);
    --dep-huge: 0 34px 80px rgba(0, 0, 0, 0.28);

    /* type */
    --ff-banner: 'Poppins', 'Trebuchet MS', sans-serif;
    --ff-text: 'Montserrat', 'Segoe UI', sans-serif;
    --ts-xxl: 32px;
    --ts-display-2: 26px;
    --ts-display-3: 22px;
    --ts-display-4: 19px;
    --ts-minor: 17px;
    --ts-h6: 15px;
    --ts-reading: 18px;
    --ts-sm: 15px;
    --ts-tiny: 13px;
    --ld-dense: 1.2;
    --ld-default: 1.7;
    --ld-airy: 2;
    --wg-base: 400;
    --wg-medium: 500;
    --wg-black: 600;
    --trk-packed: -0.01em;
    --trk-default: 0;
    --trk-airy: 0.02em;

    /* motion — durations and curves issued for this build */
    --spd-short: 159ms;
    --spd-base: 340ms;
    --spd-calm: 600ms;
    --bz-out: cubic-bezier(0.12, 0.59, 0.36, 0.98);
    --bz-take-off: cubic-bezier(0.42, 0, 1, 1);
    --bz-swing: cubic-bezier(0.57, 0.03, 0.52, 0.89);
    --bz-pop: cubic-bezier(0.27, 1.8, 0.55, 1.1);

    /* shell */
    --shl-full: 1340px;
    --shl-prose: 1340px;
    --shl-brief: 430px;
    --shl-pad-lg: 48px;
    --shl-inset-tablet: 24px;
    --shl-inset-mobile: 16px;
    --bd-light: 1px;
    --bd-regular: 2px;
    --bd-wide: 3px;
    --hd-tall: 64px;
    --hd-size-mobile: 56px;

    /* shell offsets: --pv-crown is the real masthead height at this width,
       --pv-shell is written by the script while the cookie strip is up */
    --pv-crown: 100px;
    --pv-shell: 0px;
}

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

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
    scroll-behavior: smooth;
}

body {
    background-color: var(--col-backdrop);
    background-image:
        radial-gradient(74rem 42rem at 82% -12%, rgba(4, 243, 255, 0.09), transparent 62%),
        radial-gradient(58rem 40rem at 6% 6%, rgba(201, 13, 64, 0.12), transparent 58%);
    background-repeat: no-repeat;
    color: var(--col-front);
    font-family: var(--ff-text);
    font-size: var(--ts-reading);
    font-weight: var(--wg-base);
    letter-spacing: var(--trk-default);
    line-height: var(--ld-airy);
    margin: 0;
    margin-block-start: var(--pv-shell);
    overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: var(--trk-packed);
    line-height: var(--ld-dense);
    margin: 0;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

h1,
h2 {
    font-family: var(--ff-banner);
    font-weight: var(--wg-black);
}

h3,
h4 {
    font-family: var(--ff-text);
    font-weight: var(--wg-black);
}

h5,
h6 {
    font-family: var(--ff-text);
    font-weight: var(--wg-medium);
}

p,
li,
dd,
dt,
td,
th,
figcaption {
    overflow-wrap: break-word;
}

p {
    margin: 0;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}

hr {
    border: 0;
    margin: 0;
}

main {
    display: block;
}

main section,
[id] {
    scroll-margin-block-start: calc(var(--pv-crown) + var(--sp-base));
}

table {
    border-collapse: collapse;
}

/* --------------------------------------------------------------------------
   Accessibility layer
   -------------------------------------------------------------------------- */
.skip-step {
    background: var(--col-lead);
    color: var(--col-backdrop);
    font-family: var(--ff-banner);
    font-size: var(--ts-h6);
    font-weight: var(--wg-black);
    inset-inline-start: var(--sp-base);
    padding: var(--sp-snug) var(--sp-base);
    position: fixed;
    top: var(--sp-base);
    z-index: 200;
}

.skip-step:not(:focus) {
    top: -240px !important;
}

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

:focus-visible {
    outline: var(--bd-regular) solid var(--col-lead);
    outline-offset: 3px;
}

[hidden] {
    display: none !important;
}

/* ==========================================================================
   .amphitheatre-leger — body copy (PROSE-16: rubric line above each heading,
   alignment to the start of the line, tight density, subtle rubric weight)
   ========================================================================== */
.amphitheatre-leger {
    padding-block: var(--sp-roomy);
}

.amphitheatre-leger-hold {
    margin-inline: auto;
    max-width: calc(var(--shl-full) + 2 * var(--shl-pad-lg));
    padding-inline: var(--shl-inset-mobile);
    width: 100%;
}

.amphitheatre-leger-rubric {
    color: var(--col-lead-soft);
    display: block;
    font-family: var(--ff-banner);
    font-size: var(--ts-tiny);
    font-weight: var(--wg-medium);
    letter-spacing: var(--trk-airy);
    margin-block-end: var(--sp-tiny);
    text-align: start;
    text-transform: uppercase;
}

.amphitheatre-leger-legend {
    font-size: var(--ts-display-2);
    margin-block-end: var(--sp-base);
    margin-block-start: 0;
    text-align: start;
}

.amphitheatre-leger-para {
    color: var(--col-quiet);
    margin-block-end: var(--sp-base);
}

.amphitheatre-leger-para:last-child {
    margin-block-end: 0;
}

.amphitheatre-leger-para strong {
    color: var(--col-front);
    font-weight: var(--wg-black);
}

.amphitheatre-leger-para em {
    color: var(--col-lead-soft);
    font-style: italic;
}

.amphitheatre-leger-run {
    color: var(--col-quiet);
    margin: 0 0 var(--sp-base);
    padding-inline-start: var(--sp-wide);
}

.amphitheatre-leger-entry {
    margin-block-end: var(--sp-tiny);
}

.amphitheatre-leger-entry::marker {
    color: var(--col-lead);
}

.amphitheatre-leger-entry strong {
    color: var(--col-front);
}

.amphitheatre-leger-step {
    color: var(--col-lead);
    position: relative;
}

.amphitheatre-leger-step::after {
    background: var(--col-lead);
    block-size: var(--bd-light);
    content: '';
    inset-block-end: -2px;
    inset-inline-start: 50%;
    inline-size: 0;
    position: absolute;
    transform: translateX(-50%);
    transition: inline-size var(--spd-short) var(--bz-out);
}

.amphitheatre-leger-step:hover::after,
.amphitheatre-leger-step:focus-visible::after {
    inline-size: 100%;
}

.amphitheatre-leger-art {
    border: var(--bd-light) solid var(--col-rule);
    border-radius: var(--rd-wide);
    margin-block: var(--sp-wide);
    margin-inline: auto;
    max-height: 54vh;
    width: auto;
}

.amphitheatre-leger-figure {
    margin: 0 0 var(--sp-wide);
}

.amphitheatre-leger-cap {
    color: var(--col-quiet);
    font-size: var(--ts-tiny);
    letter-spacing: var(--trk-airy);
    margin-block-start: calc(-1 * var(--sp-snug));
}

/* ==========================================================================
   .autel-vif — offer shelf dropped between reading sections
   ========================================================================== */
.autel-vif {
    align-items: flex-start;
    background: linear-gradient(120deg, rgba(201, 13, 64, 0.14), rgba(4, 243, 255, 0.07));
    border: var(--bd-light) solid var(--col-rule);
    border-radius: var(--rd-wide);
    display: flex;
    flex-direction: column;
    gap: var(--sp-snug);
    margin-block: var(--sp-wide);
    padding: var(--sp-wide);
}

.autel-vif-go {
    align-items: center;
    background: var(--col-accent);
    border-radius: var(--rd-base);
    color: var(--col-front);
    display: inline-flex;
    font-family: var(--ff-banner);
    font-size: var(--ts-h6);
    font-weight: var(--wg-black);
    justify-content: center;
    letter-spacing: var(--trk-airy);
    min-height: 52px;
    padding-inline: var(--sp-roomy);
    text-align: center;
}

.autel-vif-go:hover {
    background: var(--col-accent-pressed);
    color: var(--col-front);
}

.autel-vif-fine {
    color: var(--col-quiet);
    display: block;
    font-size: var(--ts-tiny);
    line-height: var(--ld-default);
}

/* ==========================================================================
   .bosquet-voile — highlight cards (GRID-09: one horizontal rail, fixed card
   width, swipe on the phone, arrows on the desktop)
   ========================================================================== */
.bosquet-voile {
    padding-block: var(--sp-roomy);
}

.bosquet-voile-hold {
    margin-inline: auto;
    max-width: calc(var(--shl-full) + 2 * var(--shl-pad-lg));
    padding-inline: var(--shl-inset-mobile);
    width: 100%;
}

.bosquet-voile-crown {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-snug);
    justify-content: space-between;
    margin-block-end: var(--sp-wide);
}

.bosquet-voile-caption {
    font-size: var(--ts-display-2);
}

.bosquet-voile-bar {
    display: none;
    gap: var(--sp-tiny);
}

.bosquet-voile-nudge {
    align-items: center;
    background: transparent;
    border: var(--bd-light) solid var(--col-stroke-heavy);
    border-radius: var(--rd-round-full);
    color: var(--col-front);
    cursor: pointer;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    transition: border-color var(--spd-short) var(--bz-out), background var(--spd-short) var(--bz-out);
    width: 44px;
}

.bosquet-voile-nudge:hover {
    background: var(--col-lead-wash);
    border-color: var(--col-lead);
    color: var(--col-front);
}

.bosquet-voile-nudge {
    font-family: var(--ff-banner);
    font-size: 22px;
    line-height: 1;
    padding: 0;
}

.bosquet-voile-rail {
    align-items: flex-start;
    display: flex;
    gap: var(--sp-base);
    overflow-x: auto;
    padding-block-end: var(--sp-snug);
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.bosquet-voile-slab {
    background: var(--col-bg-elevated);
    border: var(--bd-light) solid var(--col-rule);
    border-radius: var(--rd-wide);
    flex: 0 0 auto;
    min-height: 200px;
    padding: var(--sp-wide);
    scroll-snap-align: start;
    transition: border-color var(--spd-base) var(--bz-out);
    width: 280px;
}

.bosquet-voile-slab:hover {
    border-color: var(--col-lead);
}

.bosquet-voile-glyph {
    align-items: center;
    background: var(--col-lead-wash);
    border-radius: var(--rd-base);
    color: var(--col-lead);
    display: inline-flex;
    height: 42px;
    justify-content: center;
    margin-block-end: var(--sp-snug);
    width: 42px;
}

.bosquet-voile-glyph svg {
    fill: currentColor;
    height: 20px;
    width: 20px;
}

.bosquet-voile-legend {
    font-size: var(--ts-display-4);
    margin-block-end: var(--sp-tiny);
}

.bosquet-voile-para {
    color: var(--col-quiet);
    font-size: var(--ts-sm);
    line-height: var(--ld-default);
}

/* ==========================================================================
   .chasse-leger — comparison table (TABLE-04: first column carries the label
   and is lifted out of the grid with its own fill and a spine on the edge)
   ========================================================================== */
.chasse-leger {
    padding-block: var(--sp-roomy);
}

.chasse-leger-hold {
    margin-inline: auto;
    max-width: calc(var(--shl-full) + 2 * var(--shl-pad-lg));
    padding-inline: var(--shl-inset-mobile);
    width: 100%;
}

.chasse-leger-caption {
    font-size: var(--ts-display-2);
    margin-block-end: var(--sp-wide);
}

.chasse-leger-pane {
    -webkit-overflow-scrolling: touch;
    border: var(--bd-light) solid var(--col-rule);
    border-radius: var(--rd-wide);
    overflow-x: auto;
}

.chasse-leger-grid {
    font-size: var(--ts-sm);
    min-width: 540px;
    width: 100%;
}

.chasse-leger-cap {
    background: var(--col-lead);
    color: var(--col-backdrop);
    font-family: var(--ff-banner);
    font-size: var(--ts-h6);
    font-weight: var(--wg-black);
    letter-spacing: var(--trk-airy);
    padding: var(--sp-snug) var(--sp-base);
    text-align: start;
}

.chasse-leger-key {
    background: var(--col-lead);
    border-inline-end: 4px solid var(--col-accent);
    color: var(--col-backdrop);
    font-weight: var(--wg-black);
    padding: var(--sp-base);
    text-align: start;
    vertical-align: top;
    width: 26%;
}

.chasse-leger-cell {
    border-block-start: var(--bd-light) solid var(--col-rule);
    color: var(--col-quiet);
    line-height: var(--ld-default);
    padding: var(--sp-base);
    vertical-align: top;
}

.chasse-leger-rank:nth-child(even) .chasse-leger-cell {
    background: rgba(255, 255, 255, 0.03);
}

/* ==========================================================================
   .chasse-mince — editor card on the author page (AUTH-02: vertical, centred,
   no frame, portrait first)
   ========================================================================== */
.chasse-mince {
    padding-block: var(--sp-roomy);
}

.chasse-mince-hold {
    margin-inline: auto;
    max-width: calc(var(--shl-full) + 2 * var(--shl-pad-lg));
    padding-inline: var(--shl-inset-mobile);
    text-align: center;
    width: 100%;
}

.chasse-mince-headshot {
    border: var(--bd-regular) solid var(--col-lead);
    border-radius: var(--rd-round-full);
    height: 140px;
    margin-block-end: var(--sp-wide);
    margin-inline: auto;
    object-fit: cover;
    width: 140px;
}

.chasse-mince-credit {
    color: var(--col-lead-soft);
    display: block;
    font-family: var(--ff-banner);
    font-size: var(--ts-sm);
    letter-spacing: var(--trk-airy);
    text-transform: uppercase;
}

.chasse-mince-author {
    font-size: var(--ts-display-2);
    margin-block: var(--sp-tiny) var(--sp-base);
}

.chasse-mince-para {
    color: var(--col-quiet);
    line-height: var(--ld-airy);
    margin-block-end: var(--sp-base);
}

.chasse-mince-run {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-tiny);
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.chasse-mince-entry {
    background: var(--col-lead-wash);
    border: var(--bd-light) solid var(--col-rule);
    border-radius: var(--rd-capsule);
    color: var(--col-front);
    font-size: var(--ts-tiny);
    padding: var(--sp-hair) var(--sp-snug);
}

/* ==========================================================================
   .colonnade-dense — cookie strip (COOK-12: pinned to the top edge, wipes down
   on arrival, clears the viewport upwards once a choice is made)
   ========================================================================== */
.colonnade-dense {
    animation: dense-drop var(--spd-base) var(--bz-out) both;
    background: var(--col-bg-elevated);
    border-block-end: var(--bd-light) solid var(--col-rule);
    color: var(--col-front);
    inset-block-start: 0;
    inset-inline: 0;
    position: fixed;
    transition: transform var(--spd-calm) var(--bz-swing), opacity var(--spd-calm) var(--bz-swing);
    z-index: 95;
}

.colonnade-dense.is-gone {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-101%);
    visibility: hidden;
}

.colonnade-dense-hold {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-snug);
    justify-content: space-between;
    margin-inline: auto;
    max-width: calc(var(--shl-full) + 2 * var(--shl-pad-lg));
    padding: var(--sp-snug) var(--shl-inset-mobile);
    width: 100%;
}

.colonnade-dense-copy {
    color: var(--col-quiet);
    flex: 1 1 220px;
    font-size: var(--ts-tiny);
    line-height: 1.35;
}

.colonnade-dense-bar {
    display: flex;
    gap: var(--sp-tiny);
}

.colonnade-dense-grant {
    background: var(--col-lead);
    border: var(--bd-light) solid var(--col-lead);
    border-radius: var(--rd-snug);
    color: var(--col-backdrop);
    cursor: pointer;
    font-family: var(--ff-banner);
    font-size: 12px;
    font-weight: var(--wg-black);
    min-height: 36px;
    padding-inline: var(--sp-snug);
}

.colonnade-dense-grant:hover {
    background: var(--col-lead-soft);
    color: var(--col-backdrop);
}

.colonnade-dense-no {
    background: transparent;
    border: var(--bd-light) solid var(--col-stroke-heavy);
    border-radius: var(--rd-snug);
    color: var(--col-front);
    cursor: pointer;
    font-family: var(--ff-banner);
    font-size: 12px;
    min-height: 36px;
    padding-inline: var(--sp-snug);
}

.colonnade-dense-no:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--col-front);
}

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

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

/* ==========================================================================
   .ecrin-secret — opening screen (HERO-01: full-bleed cinematic frame, the
   picture is laid in as the section fill so nothing sits on top of the words)
   ========================================================================== */
.ecrin-secret {
    align-items: flex-end;
    background-color: #04060b;
    background-image:
        linear-gradient(to bottom, rgba(2, 4, 8, 0.55) 0%, rgba(2, 4, 8, 0.42) 38%, rgba(3, 3, 6, 0.9) 100%),
        url('/visuals/masthead.webp');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    min-height: 480px;
    padding-block: calc(var(--pv-crown) + var(--sp-wide)) var(--sp-roomy);
    position: relative;
}

.ecrin-secret::after {
    background: linear-gradient(to top, var(--col-backdrop), rgba(6, 6, 6, 0));
    block-size: var(--sp-roomy);
    content: '';
    inset-block-end: 0;
    inset-inline: 0;
    pointer-events: none;
    position: absolute;
}

.ecrin-secret-hold {
    margin-inline: auto;
    max-width: calc(var(--shl-full) + 2 * var(--shl-pad-lg));
    padding-inline: var(--shl-inset-mobile);
    position: relative;
    width: 100%;
    z-index: 1;
}

.ecrin-secret-legend {
    color: #ffffff;
    font-size: var(--ts-xxl);
    margin-block-end: var(--sp-base);
    max-width: 18ch;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.ecrin-secret-sub {
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--ts-minor);
    line-height: var(--ld-default);
    margin-block-end: var(--sp-wide);
    max-width: var(--shl-brief);
}

.ecrin-secret-hook {
    align-items: center;
    background: var(--col-accent);
    border-radius: var(--rd-base);
    color: var(--col-front);
    display: flex;
    font-family: var(--ff-banner);
    font-size: var(--ts-h6);
    font-weight: var(--wg-black);
    justify-content: center;
    letter-spacing: var(--trk-airy);
    min-height: 52px;
    padding-inline: var(--sp-roomy);
    text-align: center;
    width: 100%;
}

.ecrin-secret-hook:hover {
    background: var(--col-accent-pressed);
    color: var(--col-front);
}

.ecrin-secret-fine {
    color: rgba(255, 255, 255, 0.82);
    display: block;
    font-size: var(--ts-tiny);
    line-height: var(--ld-default);
    margin-block-start: var(--sp-snug);
    max-width: 60ch;
}

/* ==========================================================================
   .gardien-lumineux — player feedback (REV-01: three columns of star cards)
   ========================================================================== */
.gardien-lumineux {
    padding-block: var(--sp-roomy);
}

.gardien-lumineux-hold {
    margin-inline: auto;
    max-width: calc(var(--shl-full) + 2 * var(--shl-pad-lg));
    padding-inline: var(--shl-inset-mobile);
    width: 100%;
}

.gardien-lumineux-caption {
    font-size: var(--ts-display-2);
    margin-block-end: var(--sp-wide);
}

.gardien-lumineux-run {
    display: grid;
    gap: var(--sp-wide);
    grid-template-columns: 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gardien-lumineux-entry {
    background: var(--col-bg-elevated);
    border: var(--bd-light) solid var(--col-rule);
    border-radius: var(--rd-wide);
    padding: var(--sp-wide);
    transition: border-color var(--spd-base) var(--bz-out);
}

.gardien-lumineux-entry:hover {
    border-color: var(--col-lead);
}

.gardien-lumineux-author {
    display: block;
    font-weight: var(--wg-black);
}

.gardien-lumineux-gauge {
    display: flex;
    gap: 3px;
    margin-block: var(--sp-tiny) var(--sp-snug);
}

.gardien-lumineux-star {
    flex: 0 0 auto;
    font-family: system-ui, 'Segoe UI Symbol', sans-serif;
    font-size: 18px;
    line-height: 1;
}

.gardien-lumineux-star.is-on {
    color: var(--col-lead);
}

.gardien-lumineux-star.is-half {
    color: var(--col-lead);
    opacity: 0.55;
}

.gardien-lumineux-star.is-off {
    color: rgba(255, 255, 255, 0.28);
}

.gardien-lumineux-para {
    color: var(--col-quiet);
    font-size: var(--ts-sm);
    line-height: var(--ld-airy);
    margin: 0;
}

/* ==========================================================================
   .loggia-haute-raffine — legal pages (LEGAL-07: magazine editorial, italic
   lead, rule under every heading, dropped initial on the opening paragraph)
   ========================================================================== */
.loggia-haute-raffine {
    padding-block: var(--sp-roomy);
}

.loggia-haute-raffine-hold {
    margin-inline: auto;
    max-width: calc(var(--shl-full) + 2 * var(--shl-pad-lg));
    padding-inline: var(--shl-inset-mobile);
    width: 100%;
}

.loggia-haute-raffine-rubric {
    color: var(--col-lead-soft);
    display: block;
    font-family: var(--ff-banner);
    font-size: var(--ts-tiny);
    letter-spacing: var(--trk-airy);
    margin-block-end: var(--sp-snug);
    text-transform: uppercase;
}

.loggia-haute-raffine-intro {
    color: var(--col-front);
    font-family: var(--ff-banner);
    font-size: var(--ts-display-4);
    font-style: italic;
    line-height: var(--ld-default);
    margin-block-end: var(--sp-roomy);
}

.loggia-haute-raffine-legend {
    font-family: var(--ff-banner);
    font-size: var(--ts-display-3);
    font-style: italic;
    margin-block-start: var(--sp-wide);
}

.loggia-haute-raffine-rule {
    background: var(--col-lead);
    block-size: var(--bd-wide);
    inline-size: 80px;
    margin-block: var(--sp-snug) var(--sp-base);
}

.loggia-haute-raffine-para {
    color: var(--col-quiet);
    margin-block-end: var(--sp-base);
}

.loggia-haute-raffine-legend + .loggia-haute-raffine-rule + .loggia-haute-raffine-para::first-letter {
    color: var(--col-lead);
    float: inline-start;
    font-family: var(--ff-banner);
    font-size: 3em;
    font-weight: var(--wg-black);
    line-height: 0.9;
    padding-inline-end: var(--sp-tiny);
}

.loggia-haute-raffine-fine {
    border-block-start: var(--bd-light) solid var(--col-rule);
    color: var(--col-quiet);
    display: block;
    font-size: var(--ts-tiny);
    line-height: var(--ld-default);
    margin-block-start: var(--sp-wide);
    padding-block-start: var(--sp-base);
}

.loggia-haute-raffine-step {
    color: var(--col-lead);
}

.loggia-haute-raffine-step:hover {
    color: var(--col-lead-soft);
}

/* ==========================================================================
   .niche-vaste — support form (FORM-01: single stacked column)
   ========================================================================== */
.niche-vaste {
    padding-block: var(--sp-roomy);
}

.niche-vaste-hold {
    margin-inline: auto;
    max-width: calc(var(--shl-full) + 2 * var(--shl-pad-lg));
    padding-inline: var(--shl-inset-mobile);
    width: 100%;
}

.niche-vaste-caption {
    font-size: var(--ts-display-2);
    margin-block-end: var(--sp-base);
}

.niche-vaste-intro {
    color: var(--col-quiet);
    line-height: var(--ld-airy);
    margin-block-end: var(--sp-wide);
}

.niche-vaste-copy {
    background: rgba(34, 197, 94, 0.12);
    border: var(--bd-light) solid rgba(34, 197, 94, 0.35);
    border-radius: var(--rd-base);
    color: var(--col-front);
    display: none;
    font-size: var(--ts-sm);
    margin-block-end: var(--sp-base);
    padding: var(--sp-base);
}

.niche-vaste-copy.is-live {
    display: block;
}

.niche-vaste-form {
    background: var(--col-bg-elevated);
    border: var(--bd-light) solid var(--col-rule);
    border-radius: var(--rd-base);
    box-shadow: var(--dep-snug);
    display: flex;
    flex-direction: column;
    gap: var(--sp-base);
    padding: var(--sp-wide);
}

.niche-vaste-input {
    display: flex;
    flex-direction: column;
    gap: var(--sp-tiny);
}

.niche-vaste-cap {
    color: var(--col-front);
    font-size: var(--ts-sm);
    font-weight: var(--wg-medium);
    letter-spacing: var(--trk-airy);
    text-transform: uppercase;
}

.niche-vaste-jot {
    background: var(--col-backdrop);
    border: var(--bd-light) solid var(--col-rule);
    border-radius: var(--rd-snug);
    color: var(--col-front);
    font-family: var(--ff-text);
    font-size: var(--ts-sm);
    min-height: 48px;
    padding: var(--sp-snug) var(--sp-base);
    width: 100%;
}

textarea.niche-vaste-jot {
    line-height: var(--ld-default);
    min-height: 140px;
    resize: vertical;
}

.niche-vaste-jot:focus {
    border-color: var(--col-lead);
    outline: none;
}

.niche-vaste-go {
    align-self: flex-start;
    background: var(--col-lead);
    border: 0;
    border-radius: var(--rd-base);
    color: var(--col-backdrop);
    cursor: pointer;
    font-family: var(--ff-banner);
    font-size: var(--ts-h6);
    font-weight: var(--wg-black);
    letter-spacing: var(--trk-airy);
    min-height: 48px;
    padding-inline: var(--sp-roomy);
}

.niche-vaste-go:hover {
    background: var(--col-lead-soft);
    color: var(--col-backdrop);
}

/* ==========================================================================
   .pavois-large — questions (FAQ-03: two columns of cards, answer always in
   sight, question carries a marked prefix)
   ========================================================================== */
.pavois-large {
    padding-block: var(--sp-roomy);
}

.pavois-large-hold {
    margin-inline: auto;
    max-width: calc(var(--shl-full) + 2 * var(--shl-pad-lg));
    padding-inline: var(--shl-inset-mobile);
    width: 100%;
}

.pavois-large-caption {
    font-size: var(--ts-display-2);
    margin-block-end: var(--sp-wide);
}

.pavois-large-run {
    display: grid;
    gap: var(--sp-base);
    grid-template-columns: 1fr;
    margin: 0;
}

.pavois-large-entry {
    background: var(--col-veil);
    border: var(--bd-light) solid var(--col-rule);
    border-radius: var(--rd-base);
    padding: var(--sp-wide);
    transition: border-color var(--spd-base) var(--bz-out);
}

.pavois-large-entry:hover {
    border-color: var(--col-lead);
}

.pavois-large-ask {
    margin: 0;
}

.pavois-large-legend {
    font-size: var(--ts-minor);
    margin: 0 0 var(--sp-base);
}

.pavois-large-tick {
    color: var(--col-lead);
    font-family: var(--ff-banner);
    font-weight: var(--wg-black);
    margin-inline-end: var(--sp-tiny);
}

.pavois-large-reply {
    color: var(--col-quiet);
    font-size: var(--ts-sm);
    line-height: var(--ld-default);
    margin: 0;
}

/* ==========================================================================
   .piedestal-sombre — missing address screen (ERR-01)
   ========================================================================== */
.piedestal-sombre {
    padding-block: calc(var(--pv-crown) + var(--sp-wide)) var(--sp-vast);
    text-align: center;
}

.piedestal-sombre-hold {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--sp-wide);
    margin-inline: auto;
    max-width: calc(var(--shl-full) + 2 * var(--shl-pad-lg));
    padding-inline: var(--shl-inset-mobile);
    width: 100%;
}

.piedestal-sombre-digits {
    color: var(--col-accent);
    font-family: var(--ff-banner);
    font-size: clamp(80px, 18vw, 200px);
    font-weight: var(--wg-black);
    line-height: var(--ld-dense);
}

.piedestal-sombre-legend {
    font-size: var(--ts-xxl);
    max-width: var(--shl-brief);
}

.piedestal-sombre-para {
    color: var(--col-quiet);
    font-size: var(--ts-minor);
    line-height: var(--ld-default);
    max-width: 60ch;
}

.piedestal-sombre-go {
    align-items: center;
    background: var(--col-lead);
    border-radius: var(--rd-base);
    color: var(--col-backdrop);
    display: inline-flex;
    font-family: var(--ff-banner);
    font-size: var(--ts-h6);
    font-weight: var(--wg-black);
    letter-spacing: var(--trk-airy);
    min-height: 52px;
    padding-inline: var(--sp-roomy);
}

.piedestal-sombre-go:hover {
    background: var(--col-lead-soft);
    color: var(--col-backdrop);
}

/* ==========================================================================
   .prie-dieu-vif — closing strip (FOOT-09: one wide industrial band, brand at
   one end, the reading list and the legal list along it)
   ========================================================================== */
.prie-dieu-vif {
    background: var(--col-lead);
    color: var(--col-backdrop);
    padding-block: var(--sp-base);
}

.prie-dieu-vif-hold {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--sp-base);
    justify-content: space-between;
    margin-inline: auto;
    max-width: calc(var(--shl-full) + 2 * var(--shl-pad-lg));
    padding-inline: var(--shl-inset-mobile);
    text-align: center;
    width: 100%;
}

.prie-dieu-vif-brand {
    display: inline-flex;
    flex: 0 0 auto;
}

.prie-dieu-vif-sigil {
    background: rgba(4, 10, 12, 0.9);
    border-radius: var(--rd-snug);
    flex-shrink: 0;
    height: 36px;
    padding: var(--sp-hair) var(--sp-tiny);
    width: auto;
}

.prie-dieu-vif-menu {
    flex: 1 1 auto;
}

.prie-dieu-vif-run {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-snug) var(--sp-base);
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.prie-dieu-vif-entry {
    display: inline-flex;
}

.prie-dieu-vif-step {
    color: var(--col-backdrop);
    font-size: var(--ts-sm);
    font-weight: var(--wg-medium);
    letter-spacing: var(--trk-airy);
}

.prie-dieu-vif-step:hover {
    color: #3a0a18;
}

.prie-dieu-vif-slim .prie-dieu-vif-step {
    font-size: var(--ts-tiny);
    font-weight: var(--wg-base);
}

.prie-dieu-vif-slim .prie-dieu-vif-run {
    gap: var(--sp-tiny) var(--sp-snug);
}

.prie-dieu-vif-fine {
    color: #10222a;
    display: block;
    font-size: var(--ts-tiny);
}

/* ==========================================================================
   .receptacle-raffine — byline strip (BYLINE-03: thin band at the head of the
   article, mini portrait, one line of credit)
   ========================================================================== */
.receptacle-raffine {
    border-block-end: var(--bd-light) solid rgba(255, 255, 255, 0.07);
}

.receptacle-raffine-hold {
    align-items: center;
    display: flex;
    gap: var(--sp-snug);
    margin-inline: auto;
    max-width: calc(var(--shl-full) + 2 * var(--shl-pad-lg));
    padding-block: var(--sp-snug);
    padding-inline: var(--shl-inset-mobile);
    width: 100%;
}

.receptacle-raffine-headshot {
    border-radius: var(--rd-round-full);
    flex-shrink: 0;
    height: 28px;
    object-fit: cover;
    width: 28px;
}

.receptacle-raffine-tag {
    color: var(--col-quiet);
    font-size: var(--ts-sm);
    line-height: var(--ld-default);
}

.receptacle-raffine-author {
    color: var(--col-lead);
    font-weight: var(--wg-medium);
}

.receptacle-raffine-author:hover {
    color: var(--col-lead-soft);
}

.receptacle-raffine-credit {
    color: var(--col-quiet);
}

/* ==========================================================================
   .sanctuaire-prime — masthead (HEAD-OVER: rides over the opening screen with
   no fill of its own, gains a blurred plate once the page moves, and shrinks
   as it goes; menu collapses by measured width into the spill list)
   ========================================================================== */
.sanctuaire-prime {
    inset-block-start: var(--pv-shell);
    margin-block-end: calc(-1 * var(--pv-crown));
    position: sticky;
    transition: background var(--spd-base) var(--bz-out), backdrop-filter var(--spd-base) var(--bz-out);
    z-index: 90;
}

.sanctuaire-prime.is-lit {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    background: rgba(6, 6, 6, 0.82);
}

.sanctuaire-prime.is-shrunk .sanctuaire-prime-brand {
    transform: scale(0.88);
    transform-origin: left center;
}

.sanctuaire-prime.is-shrunk .sanctuaire-prime-hold {
    min-height: 50px;
}

.sanctuaire-prime-hold {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-snug);
    padding-block: var(--sp-tiny);
    row-gap: var(--sp-tiny);
    margin-inline: auto;
    max-width: calc(var(--shl-full) + 2 * var(--shl-pad-lg));
    min-height: var(--hd-size-mobile);
    padding-inline: var(--shl-inset-mobile);
    transition: min-height var(--spd-base) var(--bz-out);
    width: 100%;
}

.sanctuaire-prime-brand {
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: var(--bd-light) solid var(--col-rule);
    border-radius: var(--rd-snug);
    display: inline-flex;
    flex-shrink: 0;
    order: 1;
    padding: 3px var(--sp-tiny);
    transition: transform var(--spd-base) var(--bz-out);
}

.sanctuaire-prime-sigil {
    flex-shrink: 0;
    height: 32px;
    width: auto;
}

.sanctuaire-prime-menu {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
    order: 2;
}

.sanctuaire-prime-run {
    align-items: center;
    display: flex;
    gap: var(--sp-snug);
    list-style: none;
    margin: 0;
    padding: 0;
}

.sanctuaire-prime-entry {
    position: relative;
}

.sanctuaire-prime-step {
    color: var(--col-front);
    display: inline-flex;
    align-items: center;
    font-family: var(--ff-text);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: var(--trk-default);
    min-height: 44px;
    padding-inline: var(--sp-hair);
    text-transform: none;
    transition: color var(--spd-short) var(--bz-out);
    white-space: nowrap;
}

.sanctuaire-prime-step:hover {
    color: var(--col-lead);
}

.sanctuaire-prime-step[aria-current='page'] {
    color: var(--col-lead);
}

.sanctuaire-prime-step[aria-current='page']::before {
    background: var(--col-lead);
    block-size: var(--bd-regular);
    content: '';
    inset-block-start: 6px;
    inset-inline: var(--sp-hair);
    position: absolute;
}

.sanctuaire-prime-entry-spill {
    position: relative;
}

.sanctuaire-prime-spill {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--col-front);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--ff-text);
    font-size: 14px;
    font-weight: 400;
    gap: var(--sp-hair);
    min-height: 44px;
    padding-inline: var(--sp-hair);
    white-space: nowrap;
}

.sanctuaire-prime-spill:hover {
    color: var(--col-lead);
}

.sanctuaire-prime-stash {
    background: var(--col-bg-elevated);
    border: var(--bd-light) solid var(--col-rule);
    border-radius: var(--rd-base);
    box-shadow: var(--dep-wide);
    display: none;
    inset-block-start: calc(100% + var(--sp-hair));
    inset-inline-end: 0;
    list-style: none;
    margin: 0;
    max-height: 60vh;
    min-width: 210px;
    overflow-y: auto;
    padding: var(--sp-tiny);
    position: absolute;
    z-index: 5;
}

.sanctuaire-prime-stash.is-open {
    display: block;
}

.sanctuaire-prime-stash .sanctuaire-prime-step {
    display: flex;
    padding-inline: var(--sp-snug);
    width: 100%;
}

.sanctuaire-prime-mark {
    border: var(--bd-light) solid var(--col-stroke-heavy);
    border-radius: var(--rd-tiny);
    color: var(--col-front);
    flex-shrink: 0;
    font-family: var(--ff-banner);
    font-size: 12px;
    letter-spacing: var(--trk-airy);
    margin-inline-start: auto;
    order: 3;
    padding: 2px var(--sp-hair);
}

.sanctuaire-prime-bar {
    display: flex;
    flex: 1 1 100%;
    gap: var(--sp-snug);
    order: 6;
}

.sanctuaire-prime-go {
    align-items: center;
    background: var(--col-accent);
    border-radius: var(--rd-hair);
    color: var(--col-front);
    display: inline-flex;
    font-family: var(--ff-banner);
    font-size: var(--ts-tiny);
    font-weight: var(--wg-black);
    justify-content: center;
    letter-spacing: var(--trk-airy);
    min-height: 44px;
    padding-inline: var(--sp-base);
    text-align: center;
    white-space: nowrap;
    width: 100%;
}

.sanctuaire-prime-go:hover {
    background: var(--col-accent-pressed);
    color: var(--col-front);
}

.sanctuaire-prime-tap {
    align-items: center;
    background: transparent;
    border: var(--bd-light) solid var(--col-stroke-heavy);
    border-radius: var(--rd-snug);
    color: var(--col-front);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    gap: 3px;
    height: 44px;
    justify-content: center;
    margin-inline-start: var(--sp-tiny);
    order: 5;
    width: 44px;
}

.sanctuaire-prime-tap:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--col-front);
}

.sanctuaire-prime-pip {
    background: currentColor;
    border-radius: var(--rd-round-full);
    height: 4px;
    width: 4px;
}

.sanctuaire-prime-sheet {
    background: var(--col-backdrop);
    border-block-start: var(--bd-light) solid var(--col-rule);
    display: none;
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--sp-base) var(--shl-inset-mobile) var(--sp-wide);
}

.sanctuaire-prime-sheet.is-open {
    display: block;
}

.sanctuaire-prime-stack {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sanctuaire-prime-stack .sanctuaire-prime-step {
    border-block-end: var(--bd-light) solid var(--col-rule);
    display: flex;
    font-size: 15px;
    min-height: 48px;
    padding-inline: 0;
    width: 100%;
}

/* ==========================================================================
   .stalle-bas — closing call (CTA-08: inverted block, the page turns light
   for one screen so the step reads as a break in the article)
   ========================================================================== */
.stalle-bas {
    background: var(--col-lead);
    color: var(--col-backdrop);
    padding-block: var(--sp-vast);
}

.stalle-bas-hold {
    margin-inline: auto;
    max-width: calc(var(--shl-full) + 2 * var(--shl-pad-lg));
    padding-inline: var(--shl-inset-mobile);
    text-align: center;
    width: 100%;
}

.stalle-bas-legend {
    color: var(--col-backdrop);
    font-size: var(--ts-xxl);
    margin-block-end: var(--sp-base);
    margin-inline: auto;
    max-width: 20ch;
}

.stalle-bas-para {
    color: #123138;
    font-size: var(--ts-minor);
    line-height: var(--ld-default);
    margin-block-end: var(--sp-wide);
    margin-inline: auto;
    max-width: 70ch;
}

.stalle-bas-go {
    align-items: center;
    background: var(--col-accent);
    border-radius: var(--rd-base);
    color: var(--col-front);
    display: inline-flex;
    font-family: var(--ff-banner);
    font-size: var(--ts-h6);
    font-weight: var(--wg-black);
    justify-content: center;
    letter-spacing: var(--trk-airy);
    min-height: 56px;
    padding-inline: var(--sp-vast);
    text-align: center;
}

.stalle-bas-go:hover {
    background: var(--col-accent-pressed);
    color: var(--col-front);
}

.stalle-bas-fine {
    color: #123138;
    display: block;
    font-size: var(--ts-tiny);
    line-height: var(--ld-default);
    margin-block-start: var(--sp-snug);
    margin-inline: auto;
    max-width: 70ch;
}

/* ==========================================================================
   .veilleur-austere — age and player-protection band (RG-04: dark band, the
   issued warning colour carried on the edge and under the help link)
   ========================================================================== */
.veilleur-austere {
    background: var(--col-veil);
    border-block-start: var(--bd-wide) solid var(--col-advisory);
    color: var(--col-quiet);
}

.veilleur-austere-hold {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-tiny);
    margin-inline: auto;
    max-width: calc(var(--shl-full) + 2 * var(--shl-pad-lg));
    padding-block: var(--sp-base);
    padding-inline: var(--shl-inset-mobile);
    width: 100%;
}

.veilleur-austere-para {
    color: var(--col-quiet);
    font-size: var(--ts-tiny);
    line-height: var(--ld-default);
}

.veilleur-austere-step {
    border-block-end: var(--bd-regular) solid var(--col-advisory);
    color: var(--col-front);
    font-weight: var(--wg-medium);
}

.veilleur-austere-step:hover {
    color: var(--col-lead);
}

/* ==========================================================================
   .veilleuse-large — page head on documents (PHEAD-07: index number beside
   the title)
   ========================================================================== */
.veilleuse-large {
    padding-block: calc(var(--pv-crown) + var(--sp-base)) var(--sp-wide);
}

.veilleuse-large-hold {
    display: grid;
    gap: var(--sp-snug);
    grid-template-columns: 1fr;
    margin-inline: auto;
    max-width: calc(var(--shl-full) + 2 * var(--shl-pad-lg));
    padding-inline: var(--shl-inset-mobile);
    width: 100%;
}

.veilleuse-large-index {
    align-self: start;
    color: var(--col-accent);
    font-family: var(--ff-banner);
    font-size: 48px;
    font-weight: var(--wg-black);
    line-height: var(--ld-dense);
}

.veilleuse-large-legend {
    font-size: var(--ts-xxl);
}

.veilleuse-large-sub {
    color: var(--col-quiet);
    font-size: var(--ts-minor);
    line-height: var(--ld-default);
    margin-block-start: var(--sp-snug);
}

/* ==========================================================================
   Wide layouts — added on top of the phone layer, never the other way round
   ========================================================================== */
@media (min-width: 540px) {
    :root {
        --pv-crown: 56px;
    }

    .sanctuaire-prime-hold {
        flex-wrap: nowrap;
        padding-block: 0;
    }

    .sanctuaire-prime-bar {
        flex: 0 0 auto;
        order: 4;
    }

    .sanctuaire-prime-go {
        width: auto;
    }

    .autel-vif {
        align-items: center;
        flex-direction: row;
        gap: var(--sp-wide);
        justify-content: space-between;
    }

    .autel-vif-fine {
        flex: 1 1 260px;
        order: -1;
    }

    .ecrin-secret-hook {
        display: inline-flex;
        width: auto;
    }

    .pavois-large-run {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 880px) {
    :root {
        --pv-crown: 64px;
        --ts-xxl: 48px;
        --ts-display-2: 36px;
        --ts-display-3: 26px;
        --ts-display-4: 21px;
        --ts-minor: 18px;
        --ts-h6: 16px;
        --ts-reading: 19px;
        --ts-sm: 16px;
        --ts-tiny: 14px;
    }

    .amphitheatre-leger-hold,
    .bosquet-voile-hold,
    .chasse-leger-hold,
    .chasse-mince-hold,
    .colonnade-dense-hold,
    .ecrin-secret-hold,
    .gardien-lumineux-hold,
    .loggia-haute-raffine-hold,
    .niche-vaste-hold,
    .pavois-large-hold,
    .piedestal-sombre-hold,
    .prie-dieu-vif-hold,
    .receptacle-raffine-hold,
    .sanctuaire-prime-hold,
    .stalle-bas-hold,
    .veilleur-austere-hold,
    .veilleuse-large-hold {
        padding-inline: var(--shl-inset-tablet);
    }

    .bosquet-voile-bar {
        display: flex;
    }

    .bosquet-voile-slab {
        width: 320px;
    }

    .ecrin-secret {
        min-height: 600px;
        padding-block-end: var(--sp-vast);
    }

    .piedestal-sombre {
        padding-block-end: var(--sp-vast);
    }

    .gardien-lumineux-run {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .prie-dieu-vif-hold {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--sp-wide);
        text-align: start;
    }

    .prie-dieu-vif-run {
        justify-content: flex-start;
    }

    .sanctuaire-prime-hold {
        gap: var(--sp-base);
        min-height: 64px;
    }

    .sanctuaire-prime.is-shrunk .sanctuaire-prime-hold {
        min-height: 54px;
    }

    .sanctuaire-prime-brand {
        padding: var(--sp-hair) var(--sp-snug);
    }

    .sanctuaire-prime-sigil {
        height: 44px;
    }

    .sanctuaire-prime-menu {
        display: block;
    }

    .sanctuaire-prime-tap {
        display: none;
    }

    .sanctuaire-prime-sheet {
        display: none !important;
    }

    .veilleuse-large-hold {
        gap: var(--sp-wide);
        grid-template-columns: 120px 1fr;
    }

    .veilleuse-large-index {
        font-size: 67px;
    }
}

@media (min-width: 1120px) {
    .amphitheatre-leger-hold,
    .bosquet-voile-hold,
    .chasse-leger-hold,
    .chasse-mince-hold,
    .colonnade-dense-hold,
    .ecrin-secret-hold,
    .gardien-lumineux-hold,
    .loggia-haute-raffine-hold,
    .niche-vaste-hold,
    .pavois-large-hold,
    .piedestal-sombre-hold,
    .prie-dieu-vif-hold,
    .receptacle-raffine-hold,
    .sanctuaire-prime-hold,
    .stalle-bas-hold,
    .veilleur-austere-hold,
    .veilleuse-large-hold {
        padding-inline: var(--shl-pad-lg);
    }

    .ecrin-secret {
        min-height: 640px;
    }

    .gardien-lumineux-run {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Between the menu appearing and the full shell width the offer button and the
   wordmark together leave the menu about 300px, and priority+ folds all but one
   item away. Both step down over that range so four sections stay in the row. */
@media (min-width: 880px) and (max-width: 1339px) {
    .sanctuaire-prime-sigil {
        height: 34px;
    }

    .sanctuaire-prime-bar .sanctuaire-prime-go {
        font-size: 12px;
        min-height: 44px;
        padding-inline: var(--sp-snug);
    }
}

/* --------------------------------------------------------------------------
   Motion off — everything must be visible and still for anyone who asks for it
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ==========================================================================
   Offer buttons — dressing issued for this domain by scripts/cta-style.mjs:
   fuchsia fill (deliberately outside the site palette so the button reads as
   a separate act), lift beat on a loop, motion dropped for reduced-motion.
   ========================================================================== */
.mivina-step{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--sp-roomy);min-height:52px;border-radius:var(--rd-base);font-size:var(--ts-h6);font-weight:var(--wg-black);letter-spacing:var(--trk-airy)}
.mivina-step{
  background:#C026D3;color:#FFFFFF;text-decoration:none;
  transition:background 0.22s cubic-bezier(.2,.7,.3,1),color 0.22s cubic-bezier(.2,.7,.3,1),transform 0.22s cubic-bezier(.2,.7,.3,1);}
.mivina-step.mivina-step{color:#FFFFFF;text-decoration:none;}
.mivina-step:hover{background:#A21CAF;color:#FFFFFF;animation:none}
.mivina-step.mivina-step:hover{color:#FFFFFF;text-decoration:none}
.mivina-step:hover::after{animation:none}
.mivina-step:active{background:#86198F;color:#FFFFFF}
.mivina-step:focus-visible{outline:3px solid #060606;outline-offset:3px}
.mivina-step{animation:mivina-beat 2.07s ease-in-out infinite}
@keyframes mivina-beat{0%{transform:translateY(0)}19.324%{transform:translateY(-3px)}44.444%,100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.mivina-step,.mivina-step::after{animation:none!important;transition:none!important}}

/* Two corrections on top of the issued dressing, both about being seen:
   a dark ring where the button sits on the light closing band (fill against
   fill is 1.23:1 there), and a focus ring that is visible on a dark page. */
.stalle-bas .mivina-step {
    box-shadow: 0 0 0 var(--bd-regular) rgba(6, 6, 6, 0.62);
}

.mivina-step:focus-visible {
    outline-color: var(--col-lead);
}

/* Buttons on one page must not breathe in unison. */
.autel-vif-go {
    animation-delay: -0.7s;
}

.stalle-bas-go {
    animation-delay: -1.4s;
}

@media (max-width: 659px) {
  .sanctuaire-prime-menu,
  .sanctuaire-prime-run { display: none !important; }
  .sanctuaire-prime-spill { display: inline-flex !important; }
}