@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('/glyphes/inter-lat-400.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: url('/glyphes/inter-lat-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('/glyphes/inter-lat-600.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('/glyphes/inter-lat-700.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    src: url('/glyphes/inter-lat-800.woff2') format('woff2');
}

:root {
    --airy: 0.02em;
    --b-fine: 1px;
    --base: 400;
    --blend-b: #a6a4c4;
    --body: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --caution: #bf1e2e;
    --copy: 16px;
    --core: #b287a8;
    --d-1: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    --d-2: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    --d-3: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    --d-4: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    --d-5: 0 16px 48px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    --d-6: 0 24px 64px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
    --d-7: 0 32px 80px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
    --d-8: 0 40px 96px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
    --demi: 500;
    --edge-hard: rgba(255, 255, 255, 0.28);
    --edge-mid: 24px;
    --even: cubic-bezier(0.68, 0.08, 0.49, 0.96);
    --fine: 14px;
    --g-1: 6px;
    --g-2: 14px;
    --g-3: 20px;
    --g-4: 32px;
    --g-5: 48px;
    --g-6: 72px;
    --g-7: 112px;
    --g-8: 160px;
    --grad-1: #d2d3e4;
    --h3: 26px;
    --head: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --heavy: 3px;
    --line: rgba(255, 255, 255, 0.13);
    --loose: 1.7;
    --lozenge: 9999px;
    --md-2: 20px;
    --micro-head: 14px;
    --mid: 2px;
    --minor: 16px;
    --narrow: -0.01em;
    --normal: 0;
    --outer: 1300px;
    --padding-desktop: 40px;
    --padding-mobile: 16px;
    --pop: cubic-bezier(0.31, 1.6, 0.67, 1.1);
    --pv-shell: 92px;
    --quiet: #bdbdbd;
    --r-1: 1px;
    --r-2: 2px;
    --r-3: 8px;
    --r-4: 14px;
    --r-5: 22px;
    --r-6: 30px;
    --r-7: 38px;
    --r-8: 46px;
    --regular: 1.55;
    --release: cubic-bezier(0.34, 0.71, 0.52, 0.96);
    --round-full: 50%;
    --short: 58px;
    --size-desktop: 62px;
    --slow: 367ms;
    --snug: 1.2;
    --spot-deep: #7271a4;
    --steady: 220ms;
    --surface: #261e24;
    --surface-2: #322734;
    --swift: 106ms;
    --take-off: cubic-bezier(0.49, 0.04, 0.66, 0.29);
    --thick: 700;
    --title: clamp(28px, 4.6vw, 44px);
    --type: #ffffff;
    --v-narrow: 560px;
    --xs: 12px;
    --z-head: clamp(24px, 2.6vw, 34px);
    --zest: #8c8db3;
}

@media (max-width: 759px) {
    :root {
        --copy: 15px;
        --fine: 13px;
        --g-4: 24px;
        --g-5: 32px;
        --g-6: 40px;
        --h3: 20px;
        --md-2: 18px;
        --micro-head: 13px;
        --minor: 15px;
        --xs: 11px;
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    overflow-x: clip;
}

html {
    background: var(--surface);
    scroll-behavior: smooth;
}

body {
    background: var(--surface);
    color: var(--type);
    font-family: var(--body);
    font-size: var(--copy);
    font-weight: var(--base);
    line-height: var(--regular);
    margin: 0;
    margin-block-start: var(--pv-shell);
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

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

h1 {
    font-family: var(--head);
    font-size: var(--title);
    font-weight: var(--thick);
    letter-spacing: var(--narrow);
    line-height: var(--snug);
    margin: 0;
}

h2 {
    font-family: var(--head);
    font-size: var(--z-head);
    font-weight: var(--thick);
    letter-spacing: var(--narrow);
    line-height: var(--snug);
    margin: 0;
}

h3 {
    font-family: var(--body);
    font-size: var(--md-2);
    font-weight: var(--thick);
    letter-spacing: var(--normal);
    line-height: var(--snug);
    margin: 0;
}

p {
    margin: 0;
}

img {
    max-width: 100%;
}

ul,
ol {
    margin: 0;
}

table {
    border-collapse: collapse;
}

:focus-visible {
    outline: var(--mid) solid var(--grad-1);
    outline-offset: 2px;
}

.skip-jump {
    background: var(--grad-1);
    border-radius: 0 0 var(--r-3) 0;
    color: var(--surface);
    font-size: var(--fine);
    font-weight: var(--demi);
    inset-inline-start: 0;
    padding: var(--g-2) var(--g-3);
    position: fixed;
    top: 0;
    z-index: 400;
}

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

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

.aile-inner,
.atrium-inner,
.balise-inner,
.blason-inner,
.bureau-inner,
.cadre-inner,
.fiche-inner,
.lisere-inner,
.nef-inner,
.paroi-inner,
.pupitre-inner,
.secteur-inner,
.socle-inner,
.tribune-inner,
.trumeau-inner,
.zone-inner {
    margin-inline: auto;
    max-width: calc(var(--outer) + 2 * var(--padding-desktop));
    padding-inline: var(--padding-desktop);
    width: 100%;
}

@media (max-width: 1079px) {
    .aile-inner,
    .atrium-inner,
    .balise-inner,
    .blason-inner,
    .bureau-inner,
    .cadre-inner,
    .fiche-inner,
    .lisere-inner,
    .nef-inner,
    .paroi-inner,
    .pupitre-inner,
    .secteur-inner,
    .socle-inner,
    .tribune-inner,
    .trumeau-inner,
    .zone-inner {
        padding-inline: var(--edge-mid);
    }
}

@media (max-width: 759px) {
    .aile-inner,
    .atrium-inner,
    .balise-inner,
    .blason-inner,
    .bureau-inner,
    .cadre-inner,
    .fiche-inner,
    .lisere-inner,
    .nef-inner,
    .paroi-inner,
    .pupitre-inner,
    .secteur-inner,
    .socle-inner,
    .tribune-inner,
    .trumeau-inner,
    .zone-inner {
        padding-inline: var(--padding-mobile);
    }
}

.aile,
.atrium,
.balise,
.blason,
.bureau,
.cadre,
.lisere,
.nef,
.paroi,
.secteur,
.tribune {
    padding-block: var(--g-5);
    position: relative;
}

.aile {
    text-align: center;
}

.aile-code {
    color: var(--zest);
    font-family: var(--head);
    font-size: var(--z-head);
    font-weight: var(--thick);
    letter-spacing: 0.32em;
    margin-block-end: var(--g-3);
}

.aile-caption {
    color: var(--type);
    display: inline-block;
    margin-inline: auto;
    max-width: var(--v-narrow);
    position: relative;
}

.aile-caption::before,
.aile-caption::after {
    content: attr(data-text);
    inset: 0;
    opacity: 0.55;
    position: absolute;
}

.aile-caption::before {
    color: var(--zest);
    transform: translate(2px, -2px);
}

.aile-caption::after {
    color: var(--core);
    transform: translate(-2px, 2px);
}

.aile-note {
    color: var(--quiet);
    margin-block: var(--g-4);
    margin-inline: auto;
    max-width: var(--v-narrow);
}

.aile-home {
    background: var(--grad-1);
    border: var(--mid) solid var(--grad-1);
    border-radius: var(--r-2);
    color: var(--surface);
    display: inline-flex;
    font-size: var(--fine);
    font-weight: var(--demi);
    letter-spacing: var(--airy);
    min-height: 46px;
    padding-inline: var(--g-4);
    place-items: center;
    text-decoration: none;
    transition: background var(--swift) var(--release), color var(--swift) var(--release);
}

.aile-home:hover {
    background: var(--type);
    border-color: var(--type);
    color: var(--surface);
}

.atrium-hdr {
    margin-block-end: var(--g-4);
}

.atrium-run {
    list-style: none;
    padding: 0;
}

.atrium-piece {
    border-block-end: var(--b-fine) solid var(--line);
}

.atrium-drop {
    padding-block: var(--g-4);
}

.atrium-opener {
    align-items: center;
    cursor: pointer;
    display: grid;
    gap: var(--g-3);
    grid-template-columns: 1fr auto;
    list-style: none;
}

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

.atrium-ask {
    color: var(--type);
    font-size: var(--minor);
    font-weight: var(--thick);
    transition: color var(--swift) var(--release);
}

.atrium-drop:hover .atrium-ask {
    color: var(--core);
}

.atrium-sign {
    border-inline-end: var(--mid) solid var(--zest);
    border-block-end: var(--mid) solid var(--zest);
    display: block;
    height: 10px;
    transform: rotate(45deg);
    transition: transform var(--steady) var(--even);
    width: 10px;
}

.atrium-drop[open] .atrium-sign {
    transform: rotate(225deg);
}

.atrium-content {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--steady) var(--even);
}

.atrium-note {
    color: var(--quiet);
    overflow: hidden;
    padding-block-start: var(--g-3);
}

.balise {
    background: linear-gradient(135deg, var(--surface-2), var(--spot-deep) 165%);
}

.balise-slab {
    align-items: start;
    display: grid;
    gap: var(--g-6);
    grid-template-columns: 256px 1fr;
}

.balise-headshot {
    aspect-ratio: 4 / 5;
    border-radius: var(--r-5);
    box-shadow: var(--d-5);
    overflow: hidden;
    width: 256px;
}

.balise-headshot img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: 45% 26%;
    width: 100%;
}

.balise-body {
    min-width: 0;
}

.balise-brow {
    color: var(--core);
    display: block;
    font-size: var(--fine);
    font-weight: var(--thick);
    letter-spacing: var(--airy);
    margin-block-end: var(--g-2);
    text-transform: uppercase;
}

.balise-name {
    margin-block-end: var(--g-3);
}

.balise-note {
    color: var(--type);
    font-size: var(--minor);
}

.balise-run {
    list-style: none;
    margin-block-start: var(--g-4);
    padding: 0;
}

.balise-piece {
    border-block-start: var(--b-fine) solid var(--edge-hard);
    color: var(--quiet);
    font-size: var(--fine);
    padding-block: var(--g-2);
}

.balise-fine {
    color: var(--type);
    display: block;
    font-size: var(--xs);
    margin-block-start: var(--g-4);
    opacity: 0.92;
}

.balise-shelf {
    border-block-start: var(--b-fine) solid var(--edge-hard);
    margin-block-start: var(--g-6);
    padding-block-start: var(--g-5);
}

.balise-hdr {
    font-size: var(--h3);
    margin-block-end: var(--g-4);
}

.balise-sheaf {
    display: grid;
    gap: var(--g-3);
    list-style: none;
    padding: 0;
}

.balise-leaf {
    border-inline-start: var(--heavy) solid var(--zest);
    padding-inline-start: var(--g-3);
}

.balise-route {
    color: var(--type);
    font-weight: var(--demi);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    text-underline-offset: 3px;
}

.balise-route:hover {
    color: var(--grad-1);
    text-decoration-color: currentColor;
}

.blason {
    text-align: center;
}

.blason-core {
    margin-inline: auto;
}

.blason-caption {
    font-size: var(--md-2);
    font-weight: var(--thick);
}

.blason-note {
    color: var(--quiet);
    line-height: var(--loose);
    margin-block: var(--g-4);
    margin-inline: auto;
    max-width: var(--v-narrow);
}

.blason-push {
    display: inline-flex;
    place-items: center;
    text-decoration: none;
}

.blason-fine {
    color: var(--quiet);
    display: block;
    font-size: var(--xs);
    margin-block-start: var(--g-3);
    margin-inline: auto;
    max-width: var(--v-narrow);
}

.bureau-hdr {
    color: var(--type);
    font-family: var(--body);
    font-size: var(--h3);
    font-weight: 600;
    letter-spacing: var(--airy);
    margin-block-end: var(--g-3);
    margin-block-start: var(--g-4);
    text-transform: uppercase;
}

.bureau-hdr::before {
    background: var(--zest);
    content: '';
    display: block;
    height: var(--b-fine);
    margin-block-end: var(--g-2);
    width: 46px;
}

.bureau-content > .bureau-hdr:first-child {
    margin-block-start: 0;
}

.bureau-content p {
    color: var(--quiet);
    line-height: var(--regular);
    margin-block-end: var(--g-3);
}

.bureau-content ul,
.bureau-content ol {
    color: var(--quiet);
    margin-block-end: var(--g-3);
    padding-inline-start: var(--g-3);
}

.bureau-content li {
    margin-block-end: var(--g-1);
}

.bureau-content strong {
    color: var(--type);
    font-weight: var(--thick);
}

.bureau-content a {
    color: var(--grad-1);
    position: relative;
    text-decoration: underline;
    text-decoration-color: rgba(210, 211, 228, 0.45);
    text-underline-offset: 3px;
}

.bureau-content a::after {
    background: var(--core);
    bottom: -3px;
    content: '';
    height: var(--mid);
    inset-inline: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--steady) var(--release);
}

.bureau-content a:hover {
    color: var(--core);
    text-decoration-color: transparent;
}

.bureau-content a:hover::after {
    transform: scaleX(1);
}

.bureau-break {
    margin-block: var(--g-5);
    text-align: center;
}

.bureau-push {
    display: inline-flex;
    place-items: center;
    text-decoration: none;
}

.cadre-brief {
    color: var(--quiet);
    font-family: var(--head);
    font-size: var(--md-2);
    font-style: italic;
    margin-inline: auto;
    max-width: var(--v-narrow);
    padding-block-end: var(--g-4);
    text-align: center;
}

.cadre-mark {
    background: var(--zest);
    display: block;
    height: var(--mid);
    margin-block-end: var(--g-2);
    margin-inline: auto;
    width: 40px;
}

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

.cadre-grid {
    font-size: var(--fine);
    width: 100%;
}

.cadre-grid th {
    border-block-end: var(--mid) solid var(--edge-hard);
    color: var(--type);
    font-size: var(--xs);
    font-weight: var(--thick);
    letter-spacing: var(--airy);
    padding: var(--g-2) var(--g-3);
    text-align: start;
    text-transform: uppercase;
}

.cadre-grid td {
    border-block-end: var(--b-fine) solid var(--line);
    color: var(--quiet);
    overflow-wrap: anywhere;
    padding: var(--g-2) var(--g-3);
    text-align: start;
    vertical-align: top;
}

.cadre-grid tr td:first-child {
    color: var(--type);
    font-weight: var(--demi);
}

.fiche {
    inset-block-start: 0;
    inset-inline: 0;
    position: fixed;
    z-index: 100;
}

.fiche-deck {
    backdrop-filter: blur(12px);
    background: rgba(38, 30, 36, 0.88);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
}

.fiche-inner {
    align-items: center;
    display: flex;
    gap: var(--g-4);
    height: 62px;
    padding-block: var(--g-1);
}

.fiche-opener {
    background: none;
    border: 0;
    color: var(--type);
    cursor: pointer;
    display: none;
    font-family: var(--body);
    font-size: var(--fine);
    font-weight: var(--demi);
    letter-spacing: var(--airy);
    margin-inline-end: auto;
    min-height: 44px;
    padding-inline: 0;
}

.fiche-menu {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: var(--g-3);
    min-width: 0;
}

.fiche-run {
    align-items: center;
    display: flex;
    gap: var(--g-4);
    list-style: none;
    padding: 0;
}

.fiche-piece {
    position: relative;
}

.fiche-piece + .fiche-piece::before {
    background: var(--edge-hard);
    border-radius: var(--round-full);
    content: '';
    height: 3px;
    inset-block-start: 50%;
    inset-inline-start: calc(var(--g-4) / -2 - 1px);
    position: absolute;
    transform: translateY(-50%);
    width: 3px;
}

.fiche-route {
    border-radius: var(--lozenge);
    color: var(--type);
    display: block;
    font-size: 15px;
    font-weight: 500;
    padding: var(--g-1) var(--g-2);
    text-decoration: none;
    transition: color var(--swift) var(--release);
    white-space: nowrap;
}

.fiche-route:hover {
    color: var(--core);
}

.fiche-route[aria-current='page'] {
    background: var(--surface-2);
    box-shadow: inset 0 -2px 0 var(--core);
    color: var(--grad-1);
}

.fiche-more {
    position: relative;
}

.fiche-more[hidden] {
    display: none;
}

.fiche-more-opener {
    background: none;
    border: 0;
    border-radius: var(--lozenge);
    color: var(--type);
    cursor: pointer;
    font-family: var(--body);
    font-size: 15px;
    font-weight: 500;
    padding: var(--g-1) var(--g-2);
    white-space: nowrap;
}

.fiche-more-opener:hover {
    color: var(--core);
}

.fiche-sheet {
    background: var(--surface-2);
    border: var(--b-fine) solid var(--line);
    border-radius: var(--r-3);
    box-shadow: var(--d-4);
    display: none;
    inset-block-start: calc(100% + 10px);
    inset-inline-end: 0;
    list-style: none;
    min-width: 200px;
    padding: var(--g-2);
    position: absolute;
    z-index: 120;
}

.fiche-more.is-open .fiche-sheet {
    display: block;
}

.fiche-sheet .fiche-route {
    padding: var(--g-2);
}

.fiche-sheet .fiche-piece + .fiche-piece::before {
    display: none;
}

.fiche-bars {
    background: currentColor;
    border-radius: var(--r-1);
    display: block;
    height: 2px;
    position: relative;
    width: 18px;
}

.fiche-bars::before,
.fiche-bars::after {
    background: currentColor;
    border-radius: var(--r-1);
    content: '';
    height: 2px;
    inset-inline: 0;
    position: absolute;
}

.fiche-bars::before {
    inset-block-start: -6px;
}

.fiche-bars::after {
    inset-block-start: 6px;
}

.fiche-logo {
    display: inline-flex;
    flex-shrink: 0;
    margin-inline-start: auto;
}

.fiche-logo img {
    display: block;
    flex-shrink: 0;
    height: 60px;
    width: auto;
}

.fiche-logo-shot {
    max-width: none;
}

.fiche-flag {
    border: var(--b-fine) solid var(--edge-hard);
    border-radius: var(--r-2);
    color: var(--quiet);
    flex-shrink: 0;
    font-size: 11px;
    font-weight: var(--thick);
    letter-spacing: var(--airy);
    padding: 3px 6px;
}

.fiche-strip {
    background: var(--caution);
    color: #ffffff;
    font-size: var(--xs);
    letter-spacing: var(--airy);
    line-height: 1.35;
    margin: 0;
    padding: var(--g-1) var(--padding-mobile);
    text-align: center;
}

.fiche-strip a {
    color: #ffffff;
}

.fiche-drawer {
    background: var(--surface-2);
    border-block-start: var(--b-fine) solid var(--line);
    display: none;
    inset-block-start: var(--pv-shell);
    inset-inline: 0;
    max-height: calc(100vh - var(--pv-shell));
    overflow-y: auto;
    padding: var(--g-3) var(--padding-mobile) var(--g-5);
    position: fixed;
    z-index: 99;
}

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

.fiche-drawer .fiche-sheaf {
    display: grid;
    gap: var(--g-1);
    list-style: none;
    padding: 0;
}

.fiche-drawer .fiche-route {
    font-size: var(--minor);
    padding: var(--g-2) var(--g-3);
}

.lisere-hdr {
    margin-block-end: var(--g-5);
    text-align: center;
}

.lisere-run {
    display: block;
}

.lisere-piece {
    margin: 0;
    padding-block: var(--g-5);
    text-align: center;
}

.lisere-quote {
    margin: 0;
}

.lisere-quote p {
    color: var(--type);
    font-family: var(--head);
    font-size: var(--h3);
    font-style: italic;
    line-height: var(--snug);
    margin-inline: auto;
    max-width: var(--v-narrow);
}

.lisere-by {
    align-items: baseline;
    color: var(--quiet);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fine);
    gap: var(--g-3);
    justify-content: center;
    letter-spacing: var(--airy);
    margin-block-start: var(--g-3);
    text-transform: uppercase;
}

.lisere-score {
    color: var(--core);
    font-weight: var(--demi);
}

.lisere-rule {
    background: var(--edge-hard);
    border: 0;
    height: var(--b-fine);
    margin-inline: auto;
    width: 80px;
}

.nef-slab {
    border-radius: var(--r-5);
    margin-inline: auto;
    max-width: 720px;
    overflow: hidden;
}

.nef-crest {
    background: var(--zest);
    height: 8px;
}

.nef-body {
    background: var(--surface-2);
    color: var(--type);
    display: grid;
    gap: var(--g-3);
    padding: var(--g-6) var(--g-4);
}

.nef-note {
    color: var(--quiet);
    margin-block-end: var(--g-2);
}

.nef-label {
    color: var(--type);
    display: block;
    font-size: var(--fine);
    font-weight: var(--demi);
}

.nef-input {
    background: var(--surface);
    border: var(--b-fine) solid var(--edge-hard);
    border-radius: var(--r-3);
    color: var(--type);
    font-family: var(--body);
    font-size: var(--copy);
    padding: var(--g-2);
    width: 100%;
}

.nef-input:focus {
    border-color: var(--zest);
}

textarea.nef-input {
    min-height: 140px;
    resize: vertical;
}

.nef-send {
    background: var(--grad-1);
    border: 0;
    border-radius: var(--r-3);
    color: var(--surface);
    cursor: pointer;
    font-family: var(--body);
    font-size: var(--fine);
    font-weight: var(--thick);
    justify-self: start;
    letter-spacing: var(--airy);
    min-height: 46px;
    padding-inline: var(--g-4);
    transition: transform var(--swift) var(--pop);
}

.nef-send:hover {
    background: var(--type);
    color: var(--surface);
}

.nef-send:active {
    transform: translateY(1px) scale(0.985);
}

.nef-done {
    background: var(--surface-2);
    border: var(--b-fine) solid var(--zest);
    border-radius: var(--r-3);
    color: var(--type);
    margin-block-start: var(--g-4);
    margin-inline: auto;
    max-width: 720px;
    padding: var(--g-3);
}

.paroi-hdr {
    margin-block-end: var(--g-5);
}

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

.paroi-piece {
    background: rgba(255, 255, 255, 0.05);
    border: var(--b-fine) solid var(--line);
    border-radius: var(--r-4);
    box-shadow: var(--d-2);
    padding: var(--g-4);
    transition: transform var(--steady) var(--release), box-shadow var(--steady) var(--release);
}

.paroi-piece:hover {
    box-shadow: var(--d-4);
    transform: translate(6px, -2px);
}

.paroi-badge {
    align-items: center;
    background: var(--zest);
    border-radius: var(--round-full);
    color: var(--surface);
    display: flex;
    font-family: var(--head);
    font-size: var(--md-2);
    font-weight: var(--thick);
    height: 56px;
    justify-content: center;
    margin-block-end: var(--g-4);
    width: 56px;
}

.paroi-badge svg {
    fill: currentColor;
    height: 26px;
    width: 26px;
}

.paroi-caption {
    color: var(--type);
    margin-block-end: var(--g-3);
}

.paroi-note {
    color: var(--quiet);
}

.pupitre {
    background: var(--surface-2);
    color: var(--quiet);
}

.pupitre-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fine);
    gap: var(--g-1);
    padding-block: var(--g-3);
}

.pupitre-route {
    color: var(--quiet);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pupitre-route:hover {
    color: var(--grad-1);
}

.pupitre-sep {
    color: var(--quiet);
}

.pupitre-now {
    color: var(--type);
}

.secteur {
    background: var(--surface);
    overflow: hidden;
}

.secteur::before {
    background-image: url('/visuals/splash.webp');
    background-position: center;
    background-size: cover;
    content: '';
    inset: 0;
    opacity: 0.17;
    position: absolute;
}

.secteur-inner {
    position: relative;
}

.secteur-frame {
    background: rgba(38, 30, 36, 0.72);
    box-shadow: 0 0 0 8px transparent, 0 0 0 9px var(--type);
    outline: 4px solid var(--type);
    padding: var(--g-6);
}

.secteur-content {
    animation: rise-up var(--slow) var(--release) both;
}

.secteur-brow {
    color: var(--core);
    display: block;
    font-size: var(--fine);
    font-style: italic;
    letter-spacing: var(--airy);
    margin-block-end: var(--g-3);
}

.secteur-rule {
    background: var(--zest);
    border: 0;
    height: var(--b-fine);
    margin-block: var(--g-4);
    margin-inline: 0;
    width: 80px;
}

.secteur-deck {
    color: var(--type);
    font-size: var(--minor);
    max-width: var(--v-narrow);
}

.secteur-push {
    display: inline-flex;
    margin-block-start: var(--g-4);
    place-items: center;
    text-decoration: none;
}

.secteur-fine {
    color: var(--quiet);
    display: block;
    font-size: var(--xs);
    margin-block-start: var(--g-3);
    max-width: var(--v-narrow);
}

.socle {
    background: var(--core);
    color: var(--surface);
}

.socle-inner {
    display: grid;
    gap: var(--g-5);
    grid-template-columns: 2fr 1fr;
    padding-block: var(--g-5);
}

.socle-content {
    display: grid;
    gap: var(--g-4);
}

.socle-logo {
    display: inline-flex;
    justify-self: start;
}

.socle-logo img {
    display: block;
    height: 52px;
    width: auto;
}

.socle-logo-shot {
    max-width: none;
}

.socle-menu {
    display: block;
}

.socle-hdr {
    color: var(--surface);
    font-family: var(--body);
    font-size: var(--xs);
    font-weight: var(--thick);
    letter-spacing: var(--airy);
    margin-block-end: var(--g-3);
    text-transform: uppercase;
}

.socle-run {
    display: grid;
    gap: var(--g-1) var(--g-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    padding: 0;
}

.socle-legal .socle-run {
    grid-template-columns: minmax(0, 1fr);
}

.socle-piece {
    margin: 0;
}

.socle-route {
    color: var(--surface);
    font-size: var(--fine);
    text-decoration: underline;
    text-decoration-color: rgba(38, 30, 36, 0.4);
    text-underline-offset: 3px;
}

.socle-route:hover {
    color: var(--surface);
    text-decoration-color: currentColor;
}

.socle-fine {
    color: var(--surface);
    display: block;
    font-size: var(--xs);
    line-height: var(--regular);
}

.socle-panel {
    align-items: center;
    background: var(--zest);
    border-radius: var(--r-4);
    display: flex;
    justify-content: center;
    padding: var(--g-4);
}

.socle-poster {
    color: var(--surface);
    font-family: var(--head);
    font-size: var(--z-head);
    font-weight: var(--thick);
    letter-spacing: var(--narrow);
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.tribune-crumbs {
    color: var(--quiet);
    font-size: var(--xs);
    letter-spacing: var(--airy);
    margin-block-end: var(--g-3);
    text-transform: uppercase;
}

.tribune-crumbs a {
    color: var(--quiet);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tribune-crumbs a:hover {
    color: var(--zest);
}

.tribune-caption {
    margin-block-end: var(--g-3);
}

.tribune-note {
    color: var(--quiet);
}

.trumeau {
    background: var(--zest);
    display: block;
}

.trumeau-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-4);
    justify-content: space-between;
    padding-block: var(--g-4);
}

.trumeau-band {
    display: block;
}

.trumeau-note {
    color: var(--surface);
    font-size: var(--minor);
    font-weight: var(--thick);
}

.trumeau-btn {
    display: inline-flex;
    place-items: center;
    text-decoration: none;
}

.vestibule {
    inset-block-end: var(--g-5);
    inset-inline-end: var(--g-5);
    max-width: 320px;
    position: fixed;
    z-index: 90;
}

.vestibule[hidden] {
    display: none;
}

.vestibule-inner {
    background: var(--surface);
    border: var(--b-fine) solid rgba(255, 255, 255, 0.1);
    border-radius: var(--r-5);
    box-shadow: var(--d-4);
    clip-path: inset(0 0 0 0);
    display: grid;
    gap: var(--g-2);
    grid-template-columns: 20px 1fr;
    opacity: 1;
    padding: var(--g-4);
    transition: clip-path var(--steady) var(--even), opacity var(--steady) var(--even);
    visibility: visible;
}

.vestibule.is-away .vestibule-inner {
    clip-path: inset(100% 0 0 0);
    opacity: 0;
    visibility: hidden;
}

.vestibule-mark {
    color: var(--zest);
    display: block;
    flex-shrink: 0;
}

.vestibule-mark svg {
    display: block;
    fill: currentColor;
    height: 20px;
    width: 20px;
}

.vestibule-message {
    color: var(--quiet);
    font-size: var(--xs);
    line-height: var(--regular);
}

.vestibule-acts {
    display: flex;
    gap: var(--g-2);
    grid-column: 2;
}

.vestibule-accept {
    background: var(--grad-1);
    border: 0;
    border-radius: var(--r-3);
    color: var(--surface);
    cursor: pointer;
    font-family: var(--body);
    font-size: var(--xs);
    font-weight: var(--thick);
    min-height: 36px;
    padding-inline: var(--g-3);
}

.vestibule-accept:hover {
    background: var(--type);
    color: var(--surface);
}

.vestibule-dismiss {
    background: none;
    border: 0;
    color: var(--quiet);
    cursor: pointer;
    font-family: var(--body);
    font-size: var(--xs);
    min-height: 36px;
    padding-inline: var(--g-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vestibule-dismiss:hover {
    color: var(--type);
}

.vitrine {
    display: block;
    padding-block: var(--g-4);
}

.vitrine-inner {
    align-items: center;
    display: flex;
    gap: var(--g-4);
    margin-inline: auto;
    max-width: calc(var(--outer) + 2 * var(--padding-desktop));
    padding-inline: var(--padding-desktop);
    width: 100%;
}

.vitrine-note {
    color: var(--quiet);
    flex: 1 1 auto;
    font-size: var(--fine);
    font-style: italic;
}

.vitrine-lead {
    margin-inline-end: var(--g-1);
}

.vitrine-name {
    color: var(--grad-1);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vitrine-name:hover {
    text-decoration-thickness: 2px;
}

.vitrine-post {
    color: var(--quiet);
}

.vitrine-sep {
    margin-inline: var(--g-1);
}

.vitrine-headshot {
    border-radius: var(--round-full);
    flex-shrink: 0;
    height: 44px;
    object-fit: cover;
    object-position: 44% 34%;
    width: 44px;
}

.zone {
    padding-block: var(--g-5);
}

.zone-lead {
    color: var(--type);
    font-size: var(--minor);
    margin-block-end: var(--g-4);
}

.zone-hdr {
    color: var(--type);
    font-family: var(--body);
    font-size: var(--h3);
    font-weight: var(--thick);
    margin-block-end: var(--g-3);
    margin-block-start: var(--g-5);
}

.zone-content p {
    color: var(--quiet);
    line-height: var(--loose);
    margin-block-end: var(--g-3);
}

.zone-content ul {
    color: var(--quiet);
    margin-block-end: var(--g-3);
    padding-inline-start: var(--g-3);
}

.zone-content a {
    color: var(--grad-1);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.zone-content a:hover {
    color: var(--core);
}

.zone-fine {
    color: var(--quiet);
    display: block;
    font-size: var(--xs);
    margin-block-start: var(--g-5);
}

.shot-frame {
    background: var(--surface-2);
    border-radius: var(--r-4);
    margin: 0;
    margin-block: var(--g-4);
    margin-inline: auto;
    max-width: 640px;
    overflow: hidden;
}

.shot-frame img {
    display: block;
    height: auto;
    max-height: 52vh;
    object-fit: contain;
    transition: transform var(--slow) var(--release);
    width: 100%;
}

.shot-frame:hover img {
    transform: scale(1.06);
}

.shot-note {
    color: var(--quiet);
    font-size: var(--xs);
    margin-block-start: var(--g-2);
}

@keyframes rise-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1200px) {
    .fiche-inner {
        gap: var(--g-3);
    }

    .fiche-run {
        gap: var(--g-3);
    }

    .fiche-piece + .fiche-piece::before {
        inset-inline-start: calc(var(--g-3) / -2 - 1px);
    }
}

@media (max-width: 1079px) {
    .balise-slab {
        gap: var(--g-5);
        grid-template-columns: 200px 1fr;
    }

    .balise-headshot {
        width: 200px;
    }

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

    .secteur-frame {
        padding: var(--g-5);
    }
}

@media (max-width: 899px) {
    .fiche-opener {
        display: inline-flex;
        place-items: center;
    }

    .fiche-menu {
        display: none;
    }

    .fiche-logo {
        margin-inline-start: 0;
    }

    .fiche-inner {
        gap: var(--g-3);
    }

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

@media (min-width: 900px) {
    .fiche-drawer {
        display: none !important;
    }
}

@media (max-width: 759px) {
    .balise-slab {
        grid-template-columns: minmax(0, 1fr);
    }

    .balise-headshot {
        width: 180px;
    }

    .cadre-grid {
        font-size: var(--xs);
    }

    .cadre-grid th,
    .cadre-grid td {
        padding: var(--g-1) var(--g-2);
    }

    .lisere-quote p {
        font-size: var(--md-2);
    }

    .nef-body {
        padding: var(--g-5) var(--g-4);
    }

    .paroi-run {
        grid-template-columns: minmax(0, 1fr);
    }

    .secteur-frame {
        padding: var(--g-4);
    }

    .socle-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .socle-run {
        grid-template-columns: minmax(0, 1fr);
    }

    .socle-poster {
        transform: none;
        writing-mode: horizontal-tb;
    }

    .trumeau-inner {
        gap: var(--g-3);
    }

    .trumeau-btn {
        width: 100%;
    }

    .vitrine-inner {
        padding-inline: var(--padding-mobile);
    }
}

@media (max-width: 720px) {
    .vestibule {
        inset-block-end: var(--g-3);
        inset-inline: var(--g-3);
        max-width: none;
    }

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

    .vestibule-acts {
        gap: 8px;
    }

    .vestibule-accept,
    .vestibule-dismiss {
        flex: 1 1 auto;
        font-size: 12px;
        min-height: 36px;
        padding-inline: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }
}
.bandeau-step{display:inline-block;text-align:center;padding:var(--g-2) var(--g-3);border-radius:0 0 var(--r-3) 0;font-size:var(--fine);font-weight:var(--demi)}
.bandeau-step{position:relative;
  background:#EAB308;color:#261E24;text-decoration:none;
  transition:background 0.3s ease-in-out,border-color 0.3s ease-in-out;}
.bandeau-step.bandeau-step{color:#261E24;text-decoration:none;}
.bandeau-step:hover{background:#A16207;color:#FFFFFF;animation:none}
.bandeau-step.bandeau-step:hover{color:#FFFFFF;text-decoration:none}
.bandeau-step:hover::after{animation:none}
.bandeau-step:active{background:#854D0E;color:#FFFFFF}
.bandeau-step:focus-visible{outline:3px solid #261E24;outline-offset:3px}
@keyframes bandeau-drift{0%,100%{transform:scaleX(0)}40%,60%{transform:scaleX(1)}}
.bandeau-step::after{content:"";position:absolute;left:12%;right:12%;bottom:6px;height:4px;background:currentColor;opacity:.5;transform-origin:left;animation:bandeau-drift 1.8s linear infinite}
@media (prefers-reduced-motion:reduce){.bandeau-step,.bandeau-step::after{animation:none!important;transition:none!important}}

.blason-push.bandeau-step,
.bureau-push.bandeau-step,
.secteur-push.bandeau-step,
.trumeau-btn.bandeau-step {
    border-radius: var(--r-3);
    font-size: var(--fine);
    font-weight: var(--thick);
    letter-spacing: 0.06em;
    line-height: 1.1;
    min-height: 50px;
    padding: var(--g-2) 34px 22px;
    text-transform: uppercase;
}

.trumeau-btn.bandeau-step {
    box-shadow: 0 0 0 3px rgba(38, 30, 36, 0.6);
}

@media (max-width: 759px) {
    .blason-push.bandeau-step,
    .bureau-push.bandeau-step,
    .secteur-push.bandeau-step,
    .trumeau-btn.bandeau-step {
        padding-inline: var(--g-3);
        text-align: center;
        width: 100%;
    }
}

@media (max-width: 935px) {
  .fiche-menu,
  .fiche-run,
  .fiche-more { display: none !important; }
  .fiche-opener { display: flex !important; }
}