@font-face {
    font-display: swap;
    font-family: "Paytone One";
    font-style: normal;
    font-weight: 400;
    src: url("/view/pt-400.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: url("/view/os-400.woff2") format("woff2");
}

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

@font-face {
    font-display: swap;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src: url("/view/os-700.woff2") format("woff2");
}

:root {
    --vd-primary: #2c8eff;
    --vd-highlight: #e7e91b;
    --vd-accent-pressed: #c5c014;
    --vd-field: #030305;
    --vd-surface-2: #101016;
    --vd-front: #ffffff;
    --vd-faint: #c0bebf;
    --vd-border: #2a2a33;
    --vd-border-strong: #4a4a56;
    --vd-fade-top: #f5f48d;
    --vd-fade-bottom: #eee84c;
    --vd-caution: #bf1e2e;

    --vd-1: 4px;
    --vd-2: 8px;
    --vd-3: 12px;
    --vd-4: 16px;
    --vd-5: 24px;
    --vd-6: 40px;
    --vd-7: 64px;
    --vd-8: 96px;

    --vd-lozenge: 9999px;
    --vd-circle: 50%;
    --r-1: 2px;
    --r-2: 2px;
    --r-3: 6px;
    --r-4: 8px;
    --r-5: 14px;
    --r-6: 14px;
    --r-7: 18px;
    --r-8: 22px;

    --vd-banner: "Paytone One", "Trebuchet MS", sans-serif;
    --vd-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;

    --vd-title: 26px;
    --vd-head: 22px;
    --vd-display-3: 18px;
    --vd-md-2: 16px;
    --vd-sm-2: 13px;
    --vd-xs-2: 11px;
    --vd-base: 14px;
    --vd-small: 12px;
    --vd-micro: 10px;

    --vd-tight: 1.15;
    --vd-regular: 1.45;
    --vd-relaxed: 1.6;

    --vd-plain: 400;
    --vd-demi: 500;
    --vd-strong: 700;

    --e-tight: -0.01em;
    --vd-normal: 0;
    --vd-spread: 0.06em;

    --d-1: 0 1px 2px rgba(0, 0, 0, 0.05);
    --d-2: 0 1px 2px rgba(0, 0, 0, 0.05);
    --d-3: 0 2px 4px rgba(0, 0, 0, 0.08);
    --d-4: 0 4px 10px rgba(0, 0, 0, 0.1);
    --d-5: 0 8px 20px rgba(0, 0, 0, 0.14);
    --d-6: 0 8px 20px rgba(0, 0, 0, 0.14);
    --d-7: 0 10px 26px rgba(0, 0, 0, 0.18);
    --d-8: 0 12px 32px rgba(0, 0, 0, 0.2);

    --vd-quick: 148ms;
    --t-regular: 320ms;
    --vd-gentle: 539ms;
    --vd-land: cubic-bezier(0.32, 0.72, 0.38, 0.92);
    --vd-enter: cubic-bezier(0.61, 0.08, 0.55, 0.94);
    --vd-even: cubic-bezier(0.61, 0.08, 0.55, 0.94);
    --vd-overshoot: cubic-bezier(0.21, 1.4, 0.55, 1);

    --vd-main: 1360px;
    --vd-column: 1360px;
    --vd-slim: 540px;
    --vd-cover: 880px;
    --vd-pad-lg: 24px;
    --vd-pad-md: 32px;
    --vd-edge-narrow: 16px;

    --vd-fine: 1px;
    --b-regular: 2px;
    --b-strong: 3px;

    --vd-tall: 50px;
    --vd-height-mobile: 46px;

    --vd-sec-y: 32px;
    --vd-rg: 36px;
    --vd-shell: 32px;
}

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

html,
body {
    overflow-x: clip;
}

body {
    background: var(--vd-field);
    color: var(--vd-front);
    display: flex;
    flex-direction: column;
    font-family: var(--vd-body);
    font-size: var(--vd-base);
    font-weight: var(--vd-plain);
    line-height: var(--vd-regular);
    margin: 0;
    min-height: 100vh;
    padding-block-end: calc(var(--vd-rg) + 10px);
}

img {
    max-width: 100%;
}

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

h1 {
    font-family: var(--vd-banner);
    font-size: var(--vd-title);
    font-weight: var(--vd-plain);
    letter-spacing: var(--e-tight);
    line-height: var(--vd-tight);
}

h2 {
    font-family: var(--vd-banner);
    font-size: var(--vd-head);
    font-weight: var(--vd-plain);
    letter-spacing: var(--e-tight);
    line-height: var(--vd-tight);
}

h3 {
    font-family: var(--vd-body);
    font-size: var(--vd-display-3);
    font-weight: var(--vd-strong);
    line-height: var(--vd-regular);
}

h4 {
    font-family: var(--vd-body);
    font-size: var(--vd-md-2);
    font-weight: var(--vd-strong);
}

p {
    margin: 0;
    overflow-wrap: anywhere;
}

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

.skip-hop {
    background: var(--vd-highlight);
    border-radius: var(--r-3);
    color: var(--vd-field);
    font-weight: var(--vd-strong);
    inset-inline-start: var(--vd-4);
    padding: var(--vd-3) var(--vd-4);
    position: absolute;
    top: var(--vd-4);
    z-index: 200;
}

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

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

[data-motion] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 539ms cubic-bezier(0.32, 0.72, 0.38, 0.92), transform 539ms cubic-bezier(0.32, 0.72, 0.38, 0.92);
}

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

.affiche {
    padding-block: var(--vd-sec-y);
}

.affiche-frame {
    margin-inline: auto;
    max-width: calc(var(--vd-main) + 2 * var(--vd-pad-lg));
    padding-inline: var(--vd-edge-narrow);
    width: 100%;
}

.affiche-box {
    align-items: center;
    background: var(--vd-surface-2);
    border: var(--vd-fine) solid var(--vd-border);
    border-radius: var(--r-5);
    color: var(--vd-front);
    display: inline-flex;
    gap: var(--vd-3);
    padding: var(--vd-3) var(--vd-5) var(--vd-3) var(--vd-3);
}

.affiche-lens {
    border-radius: var(--vd-circle);
    display: block;
    flex-shrink: 0;
    height: 40px;
    overflow: hidden;
    width: 40px;
}

.affiche-shot {
    display: block;
    height: 100%;
    object-fit: cover;
    transform: scale(2.4) translate(-19%, 26%);
    width: 100%;
}

.affiche-inside {
    display: flex;
    flex-direction: column;
}

.affiche-name {
    color: var(--vd-front);
    font-size: var(--vd-base);
    font-weight: var(--vd-strong);
}

.affiche-hat {
    color: var(--vd-faint);
    font-size: var(--vd-micro);
    letter-spacing: var(--vd-spread);
    text-transform: uppercase;
}

.arcade {
    background: var(--vd-highlight);
    color: var(--vd-field);
    scroll-margin-block-start: var(--vd-4);
}

.arcade-frame {
    align-items: center;
    column-gap: var(--vd-5);
    display: flex;
    flex-wrap: wrap;
    margin-inline: auto;
    max-width: calc(var(--vd-main) + 2 * var(--vd-pad-lg));
    padding-block: var(--vd-4);
    padding-inline: var(--vd-edge-narrow);
    position: relative;
    row-gap: var(--vd-3);
    width: 100%;
}

.arcade-inside {
    flex: 1 1 320px;
}

.arcade-head {
    color: var(--vd-field);
    font-family: var(--vd-body);
    font-size: var(--vd-md-2);
    font-weight: var(--vd-strong);
}

.arcade-copy {
    color: #26260a;
    font-size: var(--vd-small);
    line-height: var(--vd-regular);
    margin-block-start: var(--vd-1);
    padding-inline-end: var(--vd-5);
}

.arcade-acts {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--vd-2);
}

.arcade-terms {
    color: #26260a;
    font-size: var(--vd-micro);
    letter-spacing: var(--vd-spread);
}

.arcade-shut {
    background: #26260a;
    border: 0;
    border-radius: var(--vd-circle);
    color: var(--vd-highlight);
    cursor: pointer;
    font-size: var(--vd-base);
    height: 26px;
    inset-block-start: var(--vd-2);
    inset-inline-end: var(--vd-2);
    line-height: 1;
    position: absolute;
    width: 26px;
}

.atrium {
    padding-block: var(--vd-sec-y);
}

.atrium-frame {
    margin-inline: auto;
    max-width: calc(var(--vd-main) + 2 * var(--vd-pad-lg));
    padding-inline: var(--vd-edge-narrow);
    width: 100%;
}

.atrium-stack {
    display: flex;
    flex-direction: column;
    gap: var(--vd-3);
    margin-block-start: var(--vd-5);
}

.atrium-entry {
    border-block-end: var(--vd-fine) solid var(--vd-border);
}

.atrium-ask {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: var(--vd-3);
    justify-content: space-between;
    list-style: none;
    padding-block: var(--vd-3);
}

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

.atrium-head {
    color: var(--vd-front);
    font-size: var(--vd-base);
    font-weight: var(--vd-demi);
    line-height: var(--vd-regular);
}

.atrium-sign {
    background: var(--vd-highlight);
    display: block;
    flex-shrink: 0;
    height: 2px;
    position: relative;
    width: 12px;
}

.atrium-sign::after {
    background: var(--vd-highlight);
    content: "";
    height: 12px;
    inset-block-start: -5px;
    inset-inline-start: 5px;
    position: absolute;
    width: 2px;
}

.atrium-entry[open] .atrium-sign::after {
    display: none;
}

.atrium-copy {
    color: var(--vd-faint);
    font-size: var(--vd-small);
    line-height: var(--vd-relaxed);
    padding-block: var(--vd-2) var(--vd-3);
}

.atrium-plug {
    align-items: center;
    background: var(--vd-surface-2);
    border: var(--vd-fine) solid var(--vd-border-strong);
    border-radius: var(--r-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--vd-3);
    justify-content: space-between;
    padding: var(--vd-4);
}

.atrium-pitchline {
    color: var(--vd-front);
    font-size: var(--vd-base);
    font-weight: var(--vd-strong);
}

.borne {
    background: var(--vd-caution);
    color: var(--vd-front);
    inset-block-end: 0;
    inset-inline: 0;
    pointer-events: none;
    position: fixed;
    text-align: center;
    z-index: 95;
}

.borne-copy {
    color: var(--vd-front);
    display: block;
    font-size: var(--vd-micro);
    line-height: var(--vd-regular);
    padding: 8px var(--vd-3);
}

.borne-mark {
    background: var(--vd-front);
    border-radius: var(--r-2);
    color: var(--vd-caution);
    display: inline-block;
    font-weight: var(--vd-strong);
    margin-inline-end: var(--vd-1);
    padding-inline: 5px;
}

.borne-link {
    color: var(--vd-front);
    display: inline-block;
    pointer-events: auto;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.coffre {
    background: var(--vd-surface-2);
    border: var(--vd-fine) solid var(--vd-border-strong);
    border-radius: var(--r-4);
    box-shadow: var(--d-4);
    display: none;
    flex-wrap: wrap;
    gap: var(--vd-4);
    inset-block-end: calc(var(--vd-rg) + var(--vd-4));
    inset-inline: var(--vd-4);
    margin-inline: auto;
    max-width: var(--vd-slim);
    padding: var(--vd-4);
    position: fixed;
    transition: clip-path var(--t-regular) var(--vd-even), opacity var(--t-regular) var(--vd-even);
    z-index: 90;
}

.coffre.is-visible {
    align-items: center;
    display: flex;
}

.coffre.is-leaving {
    clip-path: inset(0 0 0 100%);
    opacity: 0;
}

.coffre-message {
    color: var(--vd-faint);
    flex: 1 1 260px;
    font-size: var(--vd-small);
    line-height: var(--vd-regular);
}

.coffre-acts {
    display: flex;
    gap: var(--vd-3);
}

.coffre-confirm {
    background: var(--vd-highlight);
    border: 0;
    border-radius: var(--r-4);
    color: var(--vd-field);
    cursor: pointer;
    font-family: var(--vd-body);
    font-size: var(--vd-micro);
    font-weight: var(--vd-strong);
    letter-spacing: var(--vd-spread);
    min-height: 40px;
    padding-inline: var(--vd-4);
    text-transform: uppercase;
}

.coffre-confirm:hover {
    background: var(--vd-accent-pressed);
    color: var(--vd-field);
}

.coffre-deny {
    background: var(--vd-surface-2);
    border: var(--vd-fine) solid var(--vd-border-strong);
    border-radius: var(--r-4);
    color: var(--vd-front);
    cursor: pointer;
    font-family: var(--vd-body);
    font-size: var(--vd-micro);
    font-weight: var(--vd-strong);
    letter-spacing: var(--vd-spread);
    min-height: 40px;
    padding-inline: var(--vd-4);
    text-transform: uppercase;
}

.coffre-deny:hover {
    background: #1b1b23;
    color: var(--vd-front);
}

.coupole {
    padding-block: var(--vd-sec-y);
}

.coupole-frame {
    margin-inline: auto;
    max-width: calc(var(--vd-main) + 2 * var(--vd-pad-lg));
    padding-inline: var(--vd-edge-narrow);
    width: 100%;
}

.coupole-lead {
    background: #0b1523;
    border-radius: var(--r-5);
    color: var(--vd-front);
    margin-block: var(--vd-5);
    padding: var(--vd-5);
}

.coupole-quote {
    color: var(--vd-front);
    font-size: var(--vd-md-2);
    font-style: italic;
    line-height: var(--vd-regular);
    margin: var(--vd-3) 0 0;
}

.coupole-score {
    color: var(--vd-highlight);
    font-size: var(--vd-md-2);
    letter-spacing: 2px;
}

.coupole-score-big {
    font-size: 26px;
}

.coupole-num {
    color: var(--vd-faint);
    font-size: var(--vd-small);
    letter-spacing: var(--vd-normal);
}

.coupole-name {
    color: var(--vd-front);
    display: block;
    font-size: var(--vd-small);
    font-style: normal;
    font-weight: var(--vd-strong);
    margin-block-start: var(--vd-3);
}

.coupole-posted {
    color: var(--vd-faint);
    font-size: var(--vd-micro);
    font-weight: var(--vd-plain);
    margin-inline-start: var(--vd-2);
}

.coupole-stack {
    display: grid;
    gap: var(--vd-4);
    grid-template-columns: 1fr;
}

.coupole-box {
    border-block-start: var(--vd-fine) solid var(--vd-border);
    padding-block: var(--vd-4);
}

.coupole-strip {
    align-items: baseline;
    display: flex;
    gap: var(--vd-3);
    justify-content: space-between;
}

.coupole-copy {
    color: var(--vd-faint);
    font-size: var(--vd-small);
    line-height: var(--vd-relaxed);
    margin-block-start: var(--vd-2);
}

.coupole-plug {
    align-items: center;
    background: var(--vd-surface-2);
    border: var(--vd-fine) solid var(--vd-border-strong);
    border-radius: var(--r-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--vd-3);
    justify-content: space-between;
    padding: var(--vd-4);
}

.coupole-pitchline {
    color: var(--vd-front);
    font-size: var(--vd-base);
    font-weight: var(--vd-strong);
}

.encart {
    padding-block: var(--vd-sec-y);
}

.encart-frame {
    margin-inline: auto;
    max-width: calc(var(--vd-main) + 2 * var(--vd-pad-lg));
    padding-inline: var(--vd-edge-narrow);
    width: 100%;
}

.encart-part {
    margin-block-end: var(--vd-5);
}

.encart-head {
    background: var(--vd-highlight);
    border-bottom: var(--b-strong) solid var(--vd-accent-pressed);
    color: var(--vd-field);
    display: block;
    font-family: var(--vd-banner);
    font-size: 24px;
    font-weight: var(--vd-plain);
    line-height: var(--vd-tight);
    margin-block: var(--vd-6) var(--vd-5);
    padding: var(--vd-4) var(--vd-5);
    text-align: center;
}

.encart-part:first-child .encart-head {
    margin-block-start: 0;
}

.encart-copy {
    color: #ececed;
    line-height: var(--vd-relaxed);
    margin-block-end: var(--vd-4);
}

.encart-copy a {
    background-image: linear-gradient(var(--vd-highlight), var(--vd-highlight));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    color: var(--vd-highlight);
    text-decoration: none;
    transition: background-size var(--vd-quick) var(--vd-land);
}

.encart-copy a:hover {
    background-size: 100% 2px;
    color: var(--vd-highlight);
}

.encart-copy strong {
    color: var(--vd-front);
}

.encart-stack {
    color: #ececed;
    line-height: var(--vd-relaxed);
    margin-block: 0 var(--vd-4);
    padding-inline-start: var(--vd-5);
}

.encart-stack-num {
    list-style: decimal;
}

.encart-entry {
    margin-block-end: var(--vd-2);
}

.encart-entry a {
    color: var(--vd-highlight);
}

.encart-shot {
    margin: var(--vd-5) 0;
    text-align: center;
}

.encart-visual {
    border-radius: var(--r-4);
    display: block;
    height: auto;
    margin-inline: auto;
    width: 100%;
}

.encart-visual-tall {
    max-width: 320px;
}

.encart-visual-even {
    max-width: 440px;
}

.encart-visual-wide {
    max-width: 720px;
}

.enseigne {
    background: #08080c;
    border-block-start: var(--vd-fine) solid var(--vd-border);
    position: relative;
    z-index: 2;
}

.enseigne-frame {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--vd-2);
    justify-content: space-between;
    margin-inline: auto;
    max-width: calc(var(--vd-main) + 2 * var(--vd-pad-lg));
    min-height: 80px;
    padding-block: var(--vd-3);
    padding-inline: var(--vd-edge-narrow);
    width: 100%;
}

.enseigne-copy {
    color: var(--vd-faint);
    font-size: var(--vd-micro);
}

.enseigne-index {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vd-3);
    justify-content: center;
}

.enseigne-hop {
    color: var(--vd-faint);
    font-size: var(--vd-micro);
    letter-spacing: var(--vd-spread);
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.enseigne-hop + .enseigne-hop {
    border-inline-start: var(--vd-fine) solid var(--vd-border-strong);
    padding-inline-start: var(--vd-3);
}

.enseigne-hop:hover {
    color: var(--vd-front);
}

.fresque {
    background: var(--vd-field);
    padding-block: var(--vd-sec-y);
}

.fresque-frame {
    margin-inline: auto;
    max-width: calc(var(--vd-main) + 2 * var(--vd-pad-lg));
    padding-inline: var(--vd-edge-narrow);
    width: 100%;
}

.fresque-part {
    margin-block-end: var(--vd-5);
}

.fresque-part h2 {
    color: var(--vd-front);
    font-family: var(--vd-body);
    font-size: var(--vd-display-3);
    font-weight: var(--vd-strong);
    letter-spacing: var(--vd-normal);
    margin-block: var(--vd-5) var(--vd-3);
}

.fresque-copy {
    color: var(--vd-faint);
    line-height: var(--vd-relaxed);
    margin-block-end: var(--vd-3);
}

.fresque-copy-lead {
    color: var(--vd-front);
}

.fresque-copy a {
    color: var(--vd-highlight);
}

.fresque-stack {
    color: var(--vd-faint);
    line-height: var(--vd-relaxed);
    margin-block: 0 var(--vd-3);
    padding-inline-start: var(--vd-5);
}

.fresque-entry {
    margin-block-end: var(--vd-2);
}

.fresque-note {
    color: var(--vd-faint);
    display: block;
    font-size: var(--vd-small);
    margin-block-start: var(--vd-5);
}

.imposte {
    padding-block: var(--vd-sec-y);
}

.imposte-frame {
    margin-inline: auto;
    max-width: calc(var(--vd-main) + 2 * var(--vd-pad-lg));
    padding-inline: var(--vd-edge-narrow);
    width: 100%;
}

.imposte-box {
    border: var(--b-regular) solid var(--vd-highlight);
    border-radius: var(--r-4);
    padding: var(--vd-5);
}

.imposte-shape {
    display: flex;
    flex-direction: column;
    gap: var(--vd-5);
}

.imposte-field {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: var(--vd-1);
}

.imposte-mark {
    color: var(--vd-faint);
    font-size: var(--vd-micro);
    letter-spacing: var(--vd-spread);
    text-transform: uppercase;
}

.imposte-input {
    background: var(--vd-field);
    border: 0;
    border-block-end: var(--vd-fine) solid var(--vd-border-strong);
    color: var(--vd-front);
    font-family: var(--vd-body);
    font-size: var(--vd-md-2);
    padding-block: var(--vd-2);
}

.imposte-input:focus {
    border-block-end-color: var(--vd-highlight);
    outline: none;
}

.imposte-input-area {
    line-height: var(--vd-regular);
    resize: vertical;
}

.imposte-send {
    align-self: flex-start;
    background: var(--vd-highlight);
    border: 0;
    border-radius: var(--r-4);
    color: var(--vd-field);
    cursor: pointer;
    font-family: var(--vd-body);
    font-size: var(--vd-small);
    font-weight: var(--vd-strong);
    letter-spacing: var(--vd-spread);
    min-height: 46px;
    padding-inline: var(--vd-5);
    text-transform: uppercase;
}

.imposte-send:hover {
    background: var(--vd-accent-pressed);
    color: var(--vd-field);
    transform: translateY(1px);
}

.imposte-done {
    background: var(--vd-surface-2);
    border-radius: var(--r-4);
    color: var(--vd-front);
    margin-block-start: var(--vd-4);
    padding: var(--vd-4);
}

.lisere {
    padding-block: var(--vd-sec-y);
}

.lisere-frame {
    margin-inline: auto;
    max-width: calc(var(--vd-main) + 2 * var(--vd-pad-lg));
    padding-inline: var(--vd-edge-narrow);
    width: 100%;
}

.lisere-lane {
    margin-block-start: var(--vd-5);
    overflow-x: auto;
}

.lisere-grid {
    border-collapse: collapse;
    min-width: 560px;
    width: 100%;
}

.lisere-grid th {
    background: var(--vd-surface-2);
    color: var(--vd-front);
    font-size: var(--vd-micro);
    font-weight: var(--vd-strong);
    letter-spacing: var(--vd-spread);
    padding: var(--vd-3);
    position: sticky;
    text-align: start;
    text-transform: uppercase;
    top: 0;
    z-index: 1;
}

.lisere-grid td {
    border-block-end: var(--vd-fine) solid var(--vd-border);
    color: var(--vd-faint);
    font-size: var(--vd-small);
    padding: var(--vd-2) var(--vd-3);
}

.lisere-grid tr td:first-child {
    color: var(--vd-front);
    font-weight: var(--vd-demi);
}

.medaillon {
    background: var(--vd-field);
    position: relative;
    z-index: 60;
}

.medaillon-tier {
    background: #0c0c12;
    border-block-end: var(--vd-fine) solid var(--vd-border);
    height: 34px;
}

.medaillon-lane {
    align-items: center;
    display: flex;
    gap: var(--vd-4);
    height: 100%;
    margin-inline: auto;
    max-width: calc(var(--vd-main) + 2 * var(--vd-pad-md));
    padding-inline: var(--vd-edge-narrow);
    width: 100%;
}

.medaillon-lane-base {
    gap: var(--vd-3);
    height: auto;
    min-height: 50px;
}

.medaillon-base {
    border-block-end: var(--vd-fine) solid var(--vd-border);
}

.medaillon-mark {
    color: var(--vd-faint);
    font-size: var(--vd-micro);
    letter-spacing: var(--vd-spread);
    text-transform: uppercase;
}

.medaillon-link {
    color: var(--vd-faint);
    font-size: var(--vd-micro);
    letter-spacing: var(--vd-spread);
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.medaillon-link:hover {
    color: var(--vd-highlight);
}

.medaillon-logo {
    align-items: center;
    background: #0c0c12;
    border-radius: var(--r-4);
    display: inline-flex;
    flex-shrink: 0;
    padding: 4px 10px;
}

.medaillon-logo img {
    display: block;
    height: 60px;
    width: auto;
}

.medaillon-visual {
    flex-shrink: 0;
}

.medaillon-menu-handle {
    align-items: center;
    min-width: 48px;
    background: transparent;
    border: var(--vd-fine) solid var(--vd-border-strong);
    border-radius: var(--r-4);
    color: var(--vd-front);
    cursor: pointer;
    display: inline-flex;
    gap: var(--vd-2);
    justify-content: center;
    margin-inline-start: auto;
    min-height: 44px;
    padding-inline: var(--vd-3);
}

.medaillon-lines {
    background: var(--vd-front);
    display: block;
    height: 2px;
    position: relative;
    width: 20px;
}

.medaillon-lines::before,
.medaillon-lines::after {
    background: var(--vd-front);
    content: "";
    height: 2px;
    inset-inline-start: 0;
    position: absolute;
    width: 20px;
}

.medaillon-lines::before {
    inset-block-start: -6px;
}

.medaillon-lines::after {
    inset-block-start: 6px;
}

.medaillon-sr {
    clip: rect(0 0 0 0);
    color: var(--vd-front);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.medaillon-index {
    display: none;
    margin-inline-start: auto;
}

.medaillon-stack {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.medaillon-entry {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
}

.medaillon-entry + .medaillon-entry::before {
    color: var(--vd-border-strong);
    content: "/";
    font-size: var(--vd-small);
    margin-inline-end: 8px;
}

.medaillon-hop {
    border-block-start: var(--b-regular) solid transparent;
    color: var(--vd-faint);
    font-size: 13px;
    font-variant: small-caps;
    font-weight: 600;
    padding-block: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.medaillon-hop:hover {
    background: #14141b;
    color: var(--vd-front);
}

.medaillon-hop.is-here {
    border-block-start-color: var(--vd-highlight);
    color: var(--vd-front);
}

.medaillon-sheet {
    background: #0c0c12;
    border-block-end: var(--vd-fine) solid var(--vd-border-strong);
    display: none;
    inset-block-start: 100%;
    inset-inline: 0;
    max-height: 70vh;
    overflow-y: auto;
    position: absolute;
    z-index: 70;
}

.medaillon-sheet.is-open {
    display: block;
}

.medaillon-stack-sheet {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0;
    padding-inline: var(--vd-edge-narrow);
}

.medaillon-stack-sheet .medaillon-entry {
    border-block-end: var(--vd-fine) solid var(--vd-border);
    display: block;
    width: 100%;
}

.medaillon-stack-sheet .medaillon-entry + .medaillon-entry::before {
    content: none;
}

.medaillon-stack-sheet .medaillon-hop {
    border-block-start: 0;
    display: block;
    padding-block: var(--vd-3);
}

.paroi {
    padding-block: var(--vd-sec-y);
}

.paroi-frame {
    display: grid;
    gap: var(--vd-4);
    grid-template-columns: 64px 1fr;
    margin-inline: auto;
    max-width: calc(var(--vd-main) + 2 * var(--vd-pad-lg));
    padding-inline: var(--vd-edge-narrow);
    width: 100%;
}

.paroi-index {
    align-self: start;
    color: var(--vd-highlight);
    font-family: var(--vd-banner);
    font-size: 34px;
    font-weight: var(--vd-plain);
    line-height: 1;
}

.paroi-inside {
    display: block;
}

.paroi-sub {
    color: var(--vd-faint);
    line-height: var(--vd-relaxed);
    margin-block-start: var(--vd-3);
}

.pilier {
    background: var(--vd-primary);
    color: var(--vd-field);
    padding-block: var(--vd-5);
}

.pilier-frame {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--vd-4);
    justify-content: space-between;
    margin-inline: auto;
    max-width: calc(var(--vd-main) + 2 * var(--vd-pad-lg));
    padding-inline: var(--vd-edge-narrow);
    width: 100%;
}

.pilier-who {
    align-items: center;
    display: flex;
    gap: var(--vd-3);
}

.pilier-lens {
    border-radius: var(--vd-circle);
    display: block;
    flex-shrink: 0;
    height: 56px;
    overflow: hidden;
    width: 56px;
}

.pilier-shot {
    display: block;
    height: 100%;
    object-fit: cover;
    transform: scale(2.4) translate(-19%, 26%);
    width: 100%;
}

.pilier-inside {
    display: block;
}

.pilier-name {
    color: var(--vd-field);
    font-size: var(--vd-md-2);
    font-weight: var(--vd-strong);
}

.pilier-link {
    color: var(--vd-field);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pilier-hat {
    color: #0d2338;
    font-size: var(--vd-small);
}

.pilier-more {
    background: var(--vd-primary);
    border: var(--vd-fine) solid var(--vd-field);
    border-radius: var(--r-4);
    color: var(--vd-field);
    font-size: var(--vd-small);
    font-weight: var(--vd-strong);
    padding: var(--vd-2) var(--vd-4);
    text-decoration: none;
}

.pilier-more:hover {
    background: var(--vd-field);
    color: var(--vd-highlight);
}

.plaque {
    padding-block: var(--vd-7);
}

.plaque-frame {
    margin-inline: auto;
    max-width: calc(var(--vd-main) + 2 * var(--vd-pad-lg));
    padding-inline: var(--vd-edge-narrow);
    width: 100%;
}

.plaque-box {
    align-items: center;
    background: var(--vd-surface-2);
    border: var(--b-regular) solid var(--vd-highlight);
    border-radius: var(--r-5);
    box-shadow: var(--d-4);
    display: flex;
    flex-direction: column;
    gap: var(--vd-4);
    margin-inline: auto;
    max-width: var(--vd-slim);
    padding: var(--vd-6) var(--vd-5);
    text-align: center;
}

.plaque-copy {
    color: var(--vd-faint);
    line-height: var(--vd-relaxed);
}

.plaque-home {
    background: var(--vd-highlight);
    border-radius: var(--r-4);
    color: var(--vd-field);
    font-size: var(--vd-small);
    font-weight: var(--vd-strong);
    letter-spacing: var(--vd-spread);
    padding: var(--vd-3) var(--vd-5);
    text-decoration: none;
    text-transform: uppercase;
}

.plaque-home:hover {
    background: var(--vd-accent-pressed);
    color: var(--vd-field);
    transform: translateY(1px);
}

.secteur {
    padding-block: var(--vd-3);
}

.secteur-frame {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--vd-2);
    margin-inline: auto;
    max-width: calc(var(--vd-main) + 2 * var(--vd-pad-lg));
    padding-inline: var(--vd-edge-narrow);
    width: 100%;
}

.secteur-link {
    color: var(--vd-faint);
    font-size: var(--vd-small);
    text-decoration: none;
}

.secteur-link:hover {
    color: var(--vd-highlight);
}

.secteur-slash {
    color: var(--vd-faint);
    font-size: var(--vd-small);
}

.secteur-here {
    color: var(--vd-front);
    font-size: var(--vd-small);
}

.socle {
    background: var(--vd-highlight);
    color: var(--vd-field);
}

.socle-frame {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--vd-4);
    justify-content: space-between;
    margin-inline: auto;
    max-width: calc(var(--vd-main) + 2 * var(--vd-pad-lg));
    padding-block: var(--vd-4);
    padding-inline: var(--vd-edge-narrow);
    width: 100%;
}

.socle-copy {
    color: var(--vd-field);
    font-size: var(--vd-md-2);
    font-weight: var(--vd-strong);
    line-height: var(--vd-regular);
}

.socle-pitch {
    align-items: center;
    background: var(--vd-field);
    border-radius: var(--vd-lozenge);
    color: var(--vd-highlight);
    display: inline-flex;
    font-family: var(--vd-body);
    font-size: var(--vd-small);
    font-weight: var(--vd-strong);
    justify-content: center;
    letter-spacing: var(--vd-spread);
    min-height: 48px;
    padding: 14px 28px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.socle-pitch-solid {
    background: var(--vd-field);
    color: var(--vd-highlight);
}

.socle-pitch-ghost {
    background: var(--vd-field);
    color: var(--vd-highlight);
}

.socle-pitch:hover {
    background: #16161d;
    color: var(--vd-highlight);
    transform: translateY(1px);
}

.vitrine {
    padding-block: var(--vd-sec-y);
}

.vitrine-frame {
    margin-inline: auto;
    max-width: calc(var(--vd-main) + 2 * var(--vd-pad-lg));
    padding-inline: var(--vd-edge-narrow);
    width: 100%;
}

.vitrine-stack {
    display: grid;
    gap: var(--vd-4);
    grid-template-columns: minmax(0, 1fr);
    margin-block-start: var(--vd-5);
}

.vitrine-box {
    background: var(--vd-surface-2);
    border: var(--vd-fine) solid var(--vd-border);
    border-radius: var(--r-4);
    padding: var(--vd-5);
    transition: transform var(--t-regular) var(--vd-land);
}

.vitrine-box:hover {
    transform: translateY(-4px);
}

.vitrine-glyph {
    align-items: center;
    background: #2a2a10;
    border: var(--vd-fine) solid var(--vd-border-strong);
    border-radius: var(--vd-circle);
    color: var(--vd-highlight);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    margin-block-end: var(--vd-3);
    width: 38px;
}

.vitrine-sign {
    fill: currentColor;
    height: 21px;
    width: 21px;
}

.vitrine-head {
    color: var(--vd-front);
    font-family: var(--vd-banner);
    font-size: var(--vd-md-2);
    font-weight: var(--vd-plain);
    line-height: var(--vd-tight);
    margin-block-end: var(--vd-3);
}

.vitrine-copy {
    color: var(--vd-faint);
    line-height: var(--vd-relaxed);
}

.vitrine-plug {
    align-items: center;
    background: #14140a;
    border: var(--vd-fine) solid var(--vd-highlight);
    border-radius: var(--r-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--vd-3);
    justify-content: space-between;
    padding: var(--vd-4);
}

.vitrine-pitchline {
    color: var(--vd-front);
    font-size: var(--vd-base);
    font-weight: var(--vd-strong);
}

.zone {
    align-items: center;
    background-image: linear-gradient(0deg, rgba(3, 3, 5, 0.9), rgba(3, 3, 5, 0.45)), url("/view/vignette.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    min-height: clamp(460px, calc(100vh - 190px), 660px);
    position: relative;
    text-align: center;
}

.zone-cover {
    margin-inline: auto;
    max-width: var(--vd-cover);
    padding-block: var(--vd-7) var(--vd-8);
    padding-inline: var(--vd-edge-narrow);
    width: 100%;
}

.zone-eye {
    color: var(--vd-highlight);
    display: block;
    font-size: var(--vd-micro);
    letter-spacing: var(--vd-spread);
    margin-block-end: var(--vd-3);
    text-transform: uppercase;
}

.zone h1 {
    color: var(--vd-front);
    font-size: clamp(28px, 6vw, 44px);
}

.zone-deck {
    color: #e2e2e4;
    font-size: var(--vd-md-2);
    line-height: var(--vd-regular);
    margin-block-start: var(--vd-4);
    margin-inline: auto;
    max-width: var(--vd-slim);
}

.zone-meta {
    align-items: center;
    color: var(--vd-faint);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--vd-small);
    gap: var(--vd-3);
    justify-content: center;
    margin-block-start: var(--vd-4);
}

.zone-scribe {
    color: var(--vd-faint);
}

.zone-span {
    border-inline-start: var(--vd-fine) solid var(--vd-border-strong);
    color: var(--vd-faint);
    padding-inline-start: var(--vd-3);
}

.zone-hint {
    animation: hint-bob 2400ms cubic-bezier(0.61, 0.08, 0.55, 0.94) infinite;
    color: var(--vd-faint);
    font-size: var(--vd-micro);
    inset-block-end: var(--vd-5);
    inset-inline: 0;
    letter-spacing: var(--vd-spread);
    position: absolute;
    text-transform: uppercase;
}

.zone-hint::after {
    border-block-end: var(--b-regular) solid var(--vd-highlight);
    border-inline-end: var(--b-regular) solid var(--vd-highlight);
    content: "";
    display: block;
    height: 8px;
    margin: 6px auto 0;
    transform: rotate(45deg);
    width: 8px;
}

@keyframes hint-bob {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}

.medaillon.is-shrunk .medaillon-logo img {
    height: 48px;
}

@media (min-width: 520px) {
    .coupole-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .enseigne-frame {
        flex-direction: row;
        min-height: 64px;
    }
}

@media (min-width: 820px) {
    :root {
        --vd-title: 36px;
        --vd-head: 26px;
        --vd-display-3: 20px;
        --vd-md-2: 17px;
        --vd-sm-2: 14px;
        --vd-xs-2: 12px;
        --vd-base: 14px;
        --vd-small: 12px;
        --vd-micro: 11px;
        --vd-sec-y: 44px;
    }

    .medaillon-lane {
        padding-inline: var(--vd-pad-md);
    }

    .paroi-frame {
        grid-template-columns: 120px 1fr;
        gap: var(--vd-5);
    }

    .paroi-index {
        font-size: 50px;
    }

    .vitrine-stack {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .vitrine-box-wide {
        grid-column: span 3;
    }

    .vitrine-box-slim {
        grid-column: span 2;
    }

    .vitrine-plug {
        grid-column: 1 / -1;
    }

    .coupole-lead {
        padding: var(--vd-6);
    }

    .zone h1 {
        font-size: clamp(34px, 3.6vw, 46px);
    }

    .arcade-frame,
    .socle-frame,
    .encart-frame,
    .vitrine-frame,
    .atrium-frame,
    .coupole-frame,
    .lisere-frame,
    .fresque-frame,
    .imposte-frame,
    .plaque-frame,
    .paroi-frame,
    .secteur-frame,
    .pilier-frame,
    .affiche-frame,
    .enseigne-frame {
        padding-inline: var(--vd-pad-md);
    }
}

@media (min-width: 1180px) {
    .arcade-frame,
    .socle-frame,
    .encart-frame,
    .vitrine-frame,
    .atrium-frame,
    .coupole-frame,
    .lisere-frame,
    .fresque-frame,
    .imposte-frame,
    .plaque-frame,
    .paroi-frame,
    .secteur-frame,
    .pilier-frame,
    .affiche-frame,
    .enseigne-frame {
        padding-inline: var(--vd-pad-lg);
    }

    .lisere-grid {
        min-width: 0;
    }
}

@media (max-width: 1439px) {
    .medaillon-stack {
        gap: 6px;
    }

    .medaillon-entry + .medaillon-entry::before {
        margin-inline-end: 6px;
    }

    .medaillon-hop {
        font-size: 12.5px;
    }
}

@media (min-width: 1300px) {
    .medaillon-menu-handle {
        display: none;
    }

    .medaillon-index {
        display: block;
    }

    .medaillon-sheet,
    .medaillon-sheet.is-open {
        display: none;
    }
}

@media (max-width: 720px) {
    .coffre,
    .coffre.is-visible {
        font-size: 13px;
        gap: 8px !important;
        line-height: 1.35 !important;
        padding: 12px 14px !important;
    }

    .coffre-confirm,
    .coffre-deny {
        font-size: 11px !important;
        min-height: 40px !important;
        padding-inline: 14px !important;
    }
}

@media (max-width: 899px) {
    .medaillon-mark {
        display: none;
    }
}

@media (max-width: 719px) {
    .medaillon-link-mail {
        display: none;
    }
}

@media (max-width: 519px) {
    .arcade-shut {
        inset-block-start: var(--vd-1);
        inset-inline-end: var(--vd-1);
    }

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

    .socle-pitch {
        width: 100%;
    }

    .pilier-more {
        text-align: center;
        width: 100%;
    }
}

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

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

.coupole-jump{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;min-height:48px;border-radius:var(--vd-lozenge);font-size:var(--vd-small);font-weight:var(--vd-strong);letter-spacing:var(--vd-spread)}

.coupole-jump{
  background:#059669;color:#030305;text-decoration:none;text-transform:uppercase;
  transition:background 0.24s cubic-bezier(.2,.7,.3,1);}

.coupole-jump.coupole-jump{color:#030305;text-decoration:none;}

.coupole-jump:hover{background:#047857;color:#FFFFFF;animation:none}

.coupole-jump.coupole-jump:hover{color:#FFFFFF;text-decoration:none}

.coupole-jump:hover::after{animation:none}

.coupole-jump:active{background:#065F46;color:#FFFFFF}

.coupole-jump:focus-visible{outline:3px solid #030305;outline-offset:3px}

.coupole-jump{animation:coupole-ripple 1.81s ease-in-out infinite}

@keyframes coupole-ripple{0%{transform:translateY(0)}15.470%{transform:translateY(-5px)}41.989%,100%{transform:translateY(0)}}

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

.socle .coupole-jump,
.arcade .coupole-jump,
.vitrine-plug .coupole-jump {
    box-shadow: 0 0 0 3px var(--vd-field);
}

.medaillon-link-mail {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1335px) {
  .medaillon-link,
  .medaillon-index { display: none !important; }
  .medaillon-menu-handle { display: flex !important; }
}