@font-face {
    font-family: "Geist";
    src: url("/illustration-soft/geist-latin-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist";
    src: url("/illustration-soft/geist-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist";
    src: url("/illustration-soft/geist-latin-700.woff2") format("woff2");
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --chroma-root: #c7122f;
    --chroma-highlight: #c6a300;
    --chroma-action-down: #a58900;
    --chroma-sheet: #0b0b15;
    --chroma-layer: #16161f;
    --chroma-letters: #ffffff;
    --chroma-muted: #bdbdbd;
    --chroma-stroke: #292937;
    --chroma-rule-bold: #3d3d52;
    --chroma-grad-1: #ffd343;
    --chroma-fade-bottom: #f8c700;
    --chroma-notice: #dc2626;
    --stack-hair: 4px;
    --stack-tiny: 8px;
    --stack-snug: 12px;
    --stack-base: 16px;
    --stack-wide: 24px;
    --stack-roomy: 40px;
    --stack-vast: 64px;
    --stack-huge: 96px;
    --soften-capsule: 0;
    --soften-circle: 50%;
    --soften-hair: 0;
    --soften-tiny: 0;
    --soften-snug: 0;
    --soften-base: 0;
    --soften-wide: 0;
    --soften-roomy: 0;
    --soften-vast: 0;
    --soften-huge: 0;
    --type-heading: "Geist", "Helvetica Neue", Arial, sans-serif;
    --type-reading: "Geist", "Helvetica Neue", Arial, sans-serif;
    --size-title: 48px;
    --size-h2: 36px;
    --size-h3: 26px;
    --size-display-4: 21px;
    --size-h5: 18px;
    --size-xs-2: 16px;
    --size-reading: 19px;
    --size-fine: 16px;
    --size-micro: 14px;
    --line-height-compact: 1.2;
    --line-height-normal: 1.7;
    --line-height-airy: 2;
    --weight-regular: 400;
    --weight-demi: 500;
    --weight-bold: 600;
    --ls-packed: -0.01em;
    --ls-base: 0;
    --ls-wide: 0.02em;
    --shadow-hair: none;
    --shadow-tiny: none;
    --shadow-snug: 0 1px 0 rgba(0, 0, 0, 0.08);
    --shadow-base: 0 2px 0 rgba(0, 0, 0, 0.12);
    --shadow-wide: 0 4px 0 rgba(0, 0, 0, 0.16);
    --shadow-roomy: 0 6px 0 rgba(0, 0, 0, 0.2);
    --shadow-vast: 0 8px 0 rgba(0, 0, 0, 0.24);
    --shadow-huge: 0 12px 0 rgba(0, 0, 0, 0.28);
    --duration-brisk: 173ms;
    --duration-regular: 370ms;
    --duration-easy: 681ms;
    --motion-curve-out: cubic-bezier(0.13, 0.84, 0.51, 0.97);
    --motion-curve-launch: cubic-bezier(0.97, 0.13, 0.84, 0.51);
    --motion-curve-smooth: cubic-bezier(0.35, 0.1, 0.52, 0.94);
    --motion-curve-spring: cubic-bezier(0.4, 1.1, 0.72, 1.25);
    --wrap-site: 1420px;
    --wrap-column: 1420px;
    --wrap-padding-desktop: 56px;
    --wrap-inset-tablet: 24px;
    --wrap-inset-mobile: 16px;
    --border-light: 1px;
    --border-medium: 2px;
    --border-bold: 4px;
    --topbar-tall: 74px;
    --topbar-h-sm: 64px;
    --hw-rail: calc(var(--wrap-site) + 2 * var(--wrap-padding-desktop));
    --hw-slim: 560px;
    --hw-sec-y: 44px;
    --hw-shell: 112px;
    --hw-edge: var(--wrap-padding-desktop);
}

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

html,
body {
    overflow-x: clip;
}

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

body {
    margin: 0;
    margin-block-start: var(--hw-shell);
    background: var(--chroma-sheet);
    color: var(--chroma-letters);
    font-family: var(--type-reading);
    font-size: var(--size-reading);
    font-weight: var(--weight-regular);
    line-height: var(--line-height-airy);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: anywhere;
    margin: 0;
    color: var(--chroma-letters);
}

h1 {
    font-family: var(--type-heading);
    font-size: clamp(30px, 4vw, var(--size-title));
    font-weight: var(--weight-bold);
    line-height: var(--line-height-compact);
    letter-spacing: var(--ls-packed);
}

h2 {
    font-family: var(--type-heading);
    font-size: clamp(25px, 3vw, var(--size-h2));
    font-weight: var(--weight-bold);
    line-height: var(--line-height-compact);
    letter-spacing: var(--ls-packed);
}

h3 {
    font-family: var(--type-reading);
    font-size: clamp(21px, 2vw, var(--size-h3));
    font-weight: var(--weight-bold);
    line-height: var(--line-height-compact);
}

h4 {
    font-family: var(--type-reading);
    font-size: var(--size-display-4);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-compact);
}

h5,
h6 {
    font-family: var(--type-reading);
    font-weight: var(--weight-demi);
}

p {
    margin: 0;
}

img {
    max-width: 100%;
}

a {
    color: var(--chroma-highlight);
}

figure {
    margin: 0;
}

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

button {
    font: inherit;
}

.skip-hop {
    position: absolute;
    inset-inline-start: var(--stack-base);
    z-index: 400;
    padding: var(--stack-snug) var(--stack-base);
    background: var(--chroma-highlight);
    color: #14140f;
    font-weight: var(--weight-bold);
    text-decoration: none;
}

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

.skip-hop:focus {
    top: var(--stack-base);
}

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

.hw-flow {
    max-width: var(--hw-rail);
    margin-inline: auto;
    padding-inline: var(--hw-edge);
}

.hw-slot {
    padding-block: var(--hw-sec-y);
}

.hw-eye {
    display: block;
    font-family: var(--type-reading);
    font-size: var(--size-micro);
    font-weight: var(--weight-demi);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--chroma-highlight);
    background: var(--chroma-sheet);
    margin-block-end: var(--stack-snug);
}

.hw-fine {
    display: block;
    font-size: var(--size-micro);
    line-height: var(--line-height-normal);
    color: var(--chroma-muted);
    background: var(--chroma-sheet);
}

.hw-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--stack-tiny);
    min-height: 52px;
    padding: 14px 30px;
    border: var(--border-medium) solid transparent;
    border-radius: var(--soften-tiny);
    font-family: var(--type-heading);
    font-size: var(--size-fine);
    font-weight: var(--weight-bold);
    letter-spacing: var(--ls-wide);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.hw-act:hover,
.hw-act:focus-visible {
    transform: translateY(2px);
}

.hw-hold {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--stack-base);
    padding: var(--stack-wide);
    margin-block: var(--stack-wide);
    background: var(--chroma-layer);
    color: var(--chroma-letters);
    border-inline-start: var(--border-bold) solid var(--chroma-root);
}

.hw-hold-say {
    flex: 1 1 320px;
    font-size: var(--size-fine);
    line-height: var(--line-height-normal);
    color: var(--chroma-muted);
    background: var(--chroma-layer);
}

.pic-hold {
    display: block;
    margin-block: var(--stack-wide);
    margin-inline: auto;
    text-align: center;
}

.pic-shot {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
    border: var(--border-light) solid var(--chroma-stroke);
    border-radius: var(--soften-tiny);
}

.pic-wide .pic-shot {
    max-width: 700px;
}

.pic-square .pic-shot {
    max-width: 460px;
}

.pic-tall .pic-shot {
    max-width: 360px;
}

.rg-band {
    display: block;
    padding: 7px var(--hw-edge);
    background: var(--chroma-notice);
    color: #ffffff;
    font-size: var(--size-micro);
    line-height: 1.35;
    text-align: center;
}

.rg-say {
    color: #ffffff;
    background: var(--chroma-notice);
}

.rg-step {
    color: #ffffff;
    background: var(--chroma-notice);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rg-step:hover {
    color: #ffffff;
    background: var(--chroma-notice);
}

.enceinte-prime {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 120;
    background: var(--chroma-sheet);
    color: var(--chroma-letters);
    border-block-end: var(--border-light) solid var(--chroma-stroke);
    transition: transform var(--duration-regular) var(--motion-curve-out);
}

.enceinte-prime.is-hidden {
    transform: translateY(-100%);
}

.enceinte-prime-band {
    display: flex;
    align-items: center;
    gap: var(--stack-wide);
    height: 74px;
    max-width: var(--hw-rail);
    margin-inline: auto;
    padding-inline: var(--hw-edge);
    background: var(--chroma-sheet);
    color: var(--chroma-letters);
}

.enceinte-prime-emblem {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    order: 1;
    padding: 3px 10px;
    background: var(--chroma-layer);
    color: var(--chroma-letters);
    border: var(--border-light) solid var(--chroma-stroke);
}

.enceinte-prime-emblem-pic {
    display: block;
    height: 46px;
    width: auto;
    flex-shrink: 0;
}

.enceinte-prime-menu-switch {
    display: inline-flex;
    order: 4;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-direction: column;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    margin-inline-start: 0;
    padding: 0;
    background: var(--chroma-sheet);
    color: var(--chroma-letters);
    border: var(--border-light) solid var(--chroma-rule-bold);
    border-radius: var(--soften-tiny);
    cursor: pointer;
}

.enceinte-prime-lines {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--chroma-letters);
}

.enceinte-prime-map {
    display: flex;
    order: 2;
    flex: 0 0 auto;
    margin-inline-start: auto;
    align-items: center;
}

.enceinte-prime-roll {
    display: flex;
    align-items: center;
    gap: var(--stack-wide);
    list-style: none;
    margin: 0;
    padding: 0;
}

.enceinte-prime-one {
    display: flex;
    align-items: center;
    position: relative;
}

.enceinte-prime-one[hidden] {
    display: none;
}

.enceinte-prime-step {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--stack-snug);
    background: var(--chroma-sheet);
    color: var(--chroma-letters);
    font-size: 15px;
    font-weight: 500;
    font-variant-caps: small-caps;
    letter-spacing: var(--ls-wide);
    text-decoration: none;
    white-space: nowrap;
}

.enceinte-prime-step:hover,
.enceinte-prime-step:focus-visible {
    background: var(--chroma-stroke);
    color: var(--chroma-letters);
}

.enceinte-prime-step[aria-current="page"] {
    background: var(--chroma-rule-bold);
    color: var(--chroma-letters);
}

.enceinte-prime-more {
    position: relative;
}

.enceinte-prime-more-opener {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-inline: var(--stack-snug);
    background: var(--chroma-sheet);
    color: var(--chroma-letters);
    border: var(--border-light) solid var(--chroma-stroke);
    border-radius: var(--soften-tiny);
    font-size: 15px;
    letter-spacing: 2px;
    cursor: pointer;
}

.enceinte-prime-more-opener:hover {
    background: var(--chroma-stroke);
    color: var(--chroma-letters);
}

.enceinte-prime-more-pane {
    display: none;
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 130;
    min-width: 220px;
    max-height: 60vh;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: var(--stack-tiny);
    background: var(--chroma-layer);
    color: var(--chroma-letters);
    border: var(--border-light) solid var(--chroma-rule-bold);
}

.enceinte-prime-more-pane.is-open {
    display: block;
}

.enceinte-prime-more-pane .enceinte-prime-one {
    display: block;
}

.enceinte-prime-more-pane .enceinte-prime-step {
    display: flex;
    width: 100%;
    background: var(--chroma-layer);
    color: var(--chroma-letters);
    white-space: normal;
}

.enceinte-prime-more-pane .enceinte-prime-step:hover {
    background: var(--chroma-stroke);
    color: var(--chroma-letters);
}

.enceinte-prime-actions {
    display: flex;
    order: 3;
    align-items: center;
    gap: var(--stack-snug);
    flex-shrink: 0;
    margin-inline-start: var(--stack-base);
}

.enceinte-prime-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding-inline: var(--stack-wide);
    background: var(--chroma-sheet);
    color: var(--chroma-letters);
    border: var(--border-light) solid var(--chroma-rule-bold);
    border-radius: var(--soften-tiny);
    font-family: var(--type-heading);
    font-size: var(--size-micro);
    font-weight: var(--weight-demi);
    letter-spacing: var(--ls-wide);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.enceinte-prime-key:hover,
.enceinte-prime-key:focus-visible {
    background: var(--chroma-stroke);
    color: var(--chroma-letters);
    transform: translateY(2px);
}

.enceinte-prime-actions .hw-act {
    min-height: 46px;
    padding: 10px 22px;
    font-size: var(--size-micro);
    white-space: nowrap;
}

.enceinte-prime-panel {
    display: none;
    max-height: 74vh;
    overflow-y: auto;
    padding: var(--stack-base) var(--hw-edge) var(--stack-wide);
    background: var(--chroma-layer);
    color: var(--chroma-letters);
    border-block-start: var(--border-light) solid var(--chroma-stroke);
}

.enceinte-prime-panel.is-open {
    display: block;
}

.enceinte-prime-panel-roll {
    list-style: none;
    margin: 0;
    padding: 0;
}

.enceinte-prime-panel-one {
    display: block;
}

.enceinte-prime-panel-step {
    display: block;
    padding-block: var(--stack-snug);
    background: var(--chroma-layer);
    color: var(--chroma-letters);
    font-size: var(--size-fine);
    font-weight: var(--weight-demi);
    text-decoration: none;
    border-block-end: var(--border-light) solid var(--chroma-stroke);
}

.enceinte-prime-panel-step:hover {
    background: var(--chroma-stroke);
    color: var(--chroma-letters);
}

.receptacle-moderne {
    position: relative;
    z-index: 20;
    background: var(--chroma-sheet);
    color: var(--chroma-muted);
    border-block-start: var(--border-light) solid var(--chroma-stroke);
}

.receptacle-moderne-frame {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--stack-base);
    min-height: 64px;
    max-width: var(--hw-rail);
    margin-inline: auto;
    padding-block: var(--stack-snug);
    padding-inline: var(--hw-edge);
}

.receptacle-moderne-line {
    font-size: var(--size-micro);
    color: var(--chroma-muted);
    background: var(--chroma-sheet);
}

.receptacle-moderne-map {
    display: flex;
    align-items: center;
    gap: var(--stack-snug);
    flex-wrap: wrap;
}

.receptacle-moderne-step {
    padding-inline-start: var(--stack-snug);
    border-inline-start: var(--border-light) solid var(--chroma-rule-bold);
    background: var(--chroma-sheet);
    color: var(--chroma-muted);
    font-size: var(--size-micro);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    text-decoration: none;
}

.receptacle-moderne-step:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
}

.receptacle-moderne-step:hover,
.receptacle-moderne-step:focus-visible {
    background: var(--chroma-sheet);
    color: var(--chroma-letters);
}

.peristyle-voile {
    position: relative;
    overflow: hidden;
    padding-block: var(--stack-wide);
    background: var(--chroma-sheet);
    color: var(--chroma-letters);
}

.peristyle-voile-frame {
    position: relative;
    max-width: var(--hw-rail);
    margin-inline: auto;
    padding-inline: var(--hw-edge);
}

.peristyle-voile-main {
    position: relative;
    z-index: 2;
    width: 48%;
    padding-block: var(--stack-roomy);
    animation: hw-arrive var(--duration-easy) var(--motion-curve-out) backwards;
}

.peristyle-voile-sub {
    max-width: var(--hw-slim);
    margin-block-start: var(--stack-base);
    font-size: var(--size-h5);
    line-height: var(--line-height-normal);
    color: var(--chroma-muted);
    background: var(--chroma-sheet);
}

.peristyle-voile-push {
    margin-block-start: var(--stack-wide);
}

.peristyle-voile-fine {
    display: block;
    max-width: var(--hw-slim);
    margin-block-start: var(--stack-snug);
    font-size: var(--size-micro);
    color: var(--chroma-muted);
    background: var(--chroma-sheet);
}

.peristyle-voile-pic {
    position: absolute;
    inset-block: 32px;
    inset-inline-end: var(--hw-edge);
    width: 46%;
    overflow: hidden;
    transform: rotate(2deg);
    box-shadow: var(--shadow-wide);
    transition: transform var(--duration-easy) var(--motion-curve-out);
}

.peristyle-voile-pic:hover {
    transform: rotate(0deg) scale(1.02);
}

.peristyle-voile-shot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes hw-arrive {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.vigile-robuste {
    background: var(--chroma-sheet);
    color: var(--chroma-letters);
}

.vigile-robuste-frame {
    max-width: var(--hw-rail);
    margin-inline: auto;
    padding-inline: var(--hw-edge);
}

.vigile-robuste-heading {
    margin-block-start: var(--stack-base);
}

.chapelle-austere {
    display: block;
    font-family: var(--type-reading);
    font-size: var(--size-fine);
    color: var(--chroma-muted);
    background: var(--chroma-sheet);
}

.chapelle-austere-step {
    color: var(--chroma-muted);
    background: var(--chroma-sheet);
    text-decoration: none;
}

.chapelle-austere-step:hover {
    color: var(--chroma-letters);
    background: var(--chroma-sheet);
}

.chapelle-austere-sep {
    display: inline-block;
    margin-inline: var(--stack-tiny);
    color: var(--chroma-highlight);
    background: var(--chroma-sheet);
}

.chapelle-austere-here {
    color: var(--chroma-letters);
    background: var(--chroma-sheet);
}

.ostensoir-dore {
    background: var(--chroma-sheet);
    color: var(--chroma-muted);
}

.ostensoir-dore-frame {
    display: flex;
    align-items: center;
    gap: var(--stack-snug);
    max-width: var(--hw-rail);
    margin-inline: auto;
    padding-block: var(--stack-snug);
    padding-inline: var(--hw-edge);
    border-block-end: var(--border-light) solid var(--chroma-stroke);
}

.ostensoir-dore-shot {
    display: block;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: var(--soften-circle);
    background: var(--chroma-layer);
}

.ostensoir-dore-headshot {
    display: block;
    width: 190%;
    height: auto;
    max-width: none;
    margin-inline-start: -55%;
    margin-block-start: -22%;
}

.ostensoir-dore-meta {
    font-size: var(--size-micro);
    line-height: var(--line-height-normal);
    color: var(--chroma-muted);
    background: var(--chroma-sheet);
}

.ostensoir-dore-person {
    color: var(--chroma-highlight);
    background: var(--chroma-sheet);
    text-decoration: none;
}

.ostensoir-dore-person:hover {
    color: var(--chroma-highlight);
    background: var(--chroma-sheet);
    text-decoration: underline;
}

.ostensoir-dore-hat {
    color: var(--chroma-muted);
    background: var(--chroma-sheet);
}

.support-lumineux {
    background: var(--chroma-sheet);
    color: var(--chroma-letters);
}

.support-lumineux-frame {
    max-width: var(--hw-rail);
    margin-inline: auto;
    padding-inline: var(--hw-edge);
}

.support-lumineux-roll {
    display: flex;
    flex-direction: column;
    gap: var(--stack-wide);
    list-style: none;
    margin-block-start: var(--stack-wide);
    padding: 0;
}

.support-lumineux-one {
    display: block;
}

.support-lumineux-rule {
    width: 60px;
    height: 2px;
    margin: var(--stack-snug) 0;
    border: 0;
    background: var(--chroma-highlight);
}

.support-lumineux-line {
    font-size: var(--size-reading);
    line-height: var(--line-height-airy);
    color: var(--chroma-muted);
    background: var(--chroma-sheet);
}

.fondement-etroit {
    background: var(--chroma-sheet);
    color: var(--chroma-letters);
}

.fondement-etroit-frame {
    max-width: var(--hw-rail);
    margin-inline: auto;
    padding-inline: var(--hw-edge);
}

.fondement-etroit-block + .fondement-etroit-block {
    margin-block-start: var(--stack-roomy);
}

.fondement-etroit-block h2 {
    position: relative;
    margin-block-start: 0;
    padding-block-start: 6px;
    padding-inline-start: 34px;
}

.fondement-etroit-block h2::before {
    content: "";
    position: absolute;
    inset-block-start: 16px;
    inset-inline-start: 4px;
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background: rgba(198, 163, 0, 0.55);
}

.fondement-etroit-line {
    margin-block-start: var(--stack-base);
    font-size: var(--size-reading);
    line-height: var(--line-height-airy);
    color: var(--chroma-muted);
    background: var(--chroma-sheet);
}

.fondement-etroit-roll {
    margin-block-start: var(--stack-base);
    padding-inline-start: var(--stack-wide);
    color: var(--chroma-muted);
    background: var(--chroma-sheet);
}

.fondement-etroit-one {
    margin-block-start: var(--stack-tiny);
    line-height: var(--line-height-normal);
    color: var(--chroma-muted);
    background: var(--chroma-sheet);
}

.fondement-etroit-line a,
.fondement-etroit-one a {
    color: var(--chroma-highlight);
    background-image: linear-gradient(var(--chroma-highlight), var(--chroma-highlight));
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 0 2px;
    text-decoration: none;
    transition: background-size var(--duration-brisk) var(--motion-curve-out);
}

.fondement-etroit-line a:hover,
.fondement-etroit-one a:hover {
    color: var(--chroma-highlight);
    background-size: 100% 2px;
}

.fondement-etroit strong {
    color: var(--chroma-letters);
    background: var(--chroma-sheet);
    font-weight: var(--weight-bold);
}

.credence-vif {
    background: var(--chroma-sheet);
    color: var(--chroma-letters);
}

.credence-vif-frame {
    max-width: var(--hw-rail);
    margin-inline: auto;
    padding-inline: var(--hw-edge);
}

.credence-vif-rail {
    display: flex;
    gap: var(--stack-base);
    margin-block-start: var(--stack-wide);
    padding-block-end: var(--stack-snug);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    list-style: none;
}

.credence-vif-slab {
    flex: 0 0 360px;
    width: 360px;
    min-height: 240px;
    padding: var(--stack-wide);
    scroll-snap-align: start;
    background: var(--chroma-layer);
    color: var(--chroma-letters);
    border: var(--border-light) solid var(--chroma-stroke);
    transition: background var(--duration-brisk) var(--motion-curve-out);
}

.credence-vif-slab:hover {
    background: var(--chroma-stroke);
    color: var(--chroma-letters);
}

.credence-vif-who {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--stack-tiny);
    font-size: var(--size-fine);
    font-weight: var(--weight-bold);
    color: var(--chroma-letters);
    background: var(--chroma-layer);
}

.credence-vif-time {
    font-size: var(--size-micro);
    font-weight: var(--weight-regular);
    color: var(--chroma-muted);
    background: var(--chroma-layer);
}

.credence-vif-score {
    display: block;
    margin-block-start: var(--stack-snug);
    font-size: var(--size-micro);
    letter-spacing: var(--ls-wide);
    color: var(--chroma-highlight);
    background: var(--chroma-layer);
}

.credence-vif-bar {
    display: block;
    width: 60%;
    height: 4px;
    margin-block-start: var(--stack-hair);
    background: #3a3a4d;
}

.credence-vif-fill {
    display: block;
    height: 4px;
    background: var(--chroma-highlight);
}

.credence-vif-note {
    margin: var(--stack-snug) 0 0;
    padding: 0;
    border: 0;
    font-size: var(--size-fine);
    line-height: var(--line-height-normal);
    color: var(--chroma-muted);
    background: var(--chroma-layer);
}

.credence-vif-dots {
    display: flex;
    gap: var(--stack-tiny);
    justify-content: center;
    margin-block-start: var(--stack-base);
    list-style: none;
    padding: 0;
}

.credence-vif-dot {
    display: block;
    width: 9px;
    height: 9px;
    background: #4a4a5e;
    border-radius: var(--soften-circle);
}

.credence-vif-dot.is-live {
    background: var(--chroma-highlight);
}

.support-etroit {
    background: var(--chroma-sheet);
    color: var(--chroma-letters);
}

.support-etroit-frame {
    max-width: var(--hw-rail);
    margin-inline: auto;
    padding-inline: var(--hw-edge);
}

.support-etroit-roll {
    margin-block-start: var(--stack-wide);
}

.support-etroit-one {
    border-block-end: var(--border-light) solid var(--chroma-stroke);
    padding-block: var(--stack-base);
}

.support-etroit-ask {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--stack-base);
    cursor: pointer;
    list-style: none;
    color: var(--chroma-letters);
    background: var(--chroma-sheet);
}

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

.support-etroit-ask h3 {
    font-family: var(--type-reading);
    font-size: var(--size-h5);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-normal);
    color: var(--chroma-letters);
}

.support-etroit-ask:hover h3 {
    color: var(--chroma-highlight);
}

.support-etroit-sign {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 24px;
    color: var(--chroma-highlight);
    background: var(--chroma-sheet);
    transform: rotate(0deg);
}

.support-etroit-one[open] .support-etroit-sign {
    transform: rotate(45deg);
}

.support-etroit-reply {
    margin-block-start: var(--stack-snug);
    font-size: var(--size-reading);
    line-height: var(--line-height-airy);
    color: var(--chroma-muted);
    background: var(--chroma-sheet);
}

.stalle-classique {
    position: relative;
    z-index: 30;
    background: var(--chroma-highlight);
    color: #17140a;
    box-shadow: var(--shadow-wide);
}

.stalle-classique-frame {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--stack-base);
    min-height: 80px;
    max-width: var(--hw-rail);
    margin-inline: auto;
    padding-block: var(--stack-base);
    padding-inline: var(--hw-edge);
}

.stalle-classique-heading {
    font-family: var(--type-heading);
    font-size: var(--size-reading);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-compact);
    color: #17140a;
    background: var(--chroma-highlight);
}

.stalle-classique-line {
    display: block;
    max-width: var(--hw-slim);
    margin-block-start: var(--stack-hair);
    font-size: var(--size-micro);
    line-height: var(--line-height-normal);
    color: #2c2610;
    background: var(--chroma-highlight);
}

.stalle-classique-actions {
    display: flex;
    align-items: center;
    gap: var(--stack-snug);
    flex-shrink: 0;
}

.stalle-classique .hw-act {
    box-shadow: 0 0 0 3px var(--chroma-sheet);
}

.stalle-classique-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--chroma-highlight);
    color: #17140a;
    border: var(--border-light) solid #6d5c05;
    font-size: var(--size-reading);
    cursor: pointer;
}

.stalle-classique-close:hover {
    background: var(--chroma-grad-1);
    color: #17140a;
}

.stalle-classique.is-gone {
    display: none;
}

.console-prime {
    background: var(--chroma-sheet);
    color: var(--chroma-letters);
}

.vigile-robuste + .console-prime {
    padding-block-start: 0;
}

.console-prime-frame {
    max-width: var(--hw-rail);
    margin-inline: auto;
    padding-inline: var(--hw-edge);
}

.console-prime-lead {
    margin-block-start: var(--stack-base);
    font-family: var(--type-heading);
    font-size: var(--size-display-4);
    font-style: italic;
    line-height: var(--line-height-normal);
    color: var(--chroma-letters);
    background: var(--chroma-sheet);
}

.console-prime-part {
    margin-block-start: var(--stack-roomy);
}

.console-prime-part h3 {
    font-family: var(--type-heading);
    font-style: italic;
    font-size: clamp(21px, 2vw, var(--size-h3));
}

.console-prime-rule {
    width: 80px;
    height: 2px;
    margin: var(--stack-snug) 0;
    border: 0;
    background: var(--chroma-highlight);
}

.console-prime-line {
    margin-block-start: var(--stack-base);
    font-size: var(--size-reading);
    line-height: var(--line-height-airy);
    color: var(--chroma-muted);
    background: var(--chroma-sheet);
}

.console-prime-part .console-prime-line:first-of-type::first-letter {
    float: inline-start;
    margin-inline-end: var(--stack-tiny);
    font-family: var(--type-heading);
    font-size: 3em;
    line-height: 0.9;
    font-weight: var(--weight-bold);
    color: var(--chroma-highlight);
}

.console-prime-roll {
    margin-block-start: var(--stack-base);
    list-style: none;
    padding: 0;
}

.console-prime-one {
    display: flex;
    align-items: flex-start;
    gap: var(--stack-snug);
    margin-block-start: var(--stack-snug);
    padding: var(--stack-snug) var(--stack-base);
    background: var(--chroma-layer);
    color: var(--chroma-muted);
    border-inline-start: var(--border-medium) solid var(--chroma-stroke);
    font-size: var(--size-fine);
    line-height: var(--line-height-normal);
}

.console-prime-mark {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-block-start: 3px;
    fill: var(--chroma-highlight);
}

.console-prime-fine {
    display: block;
    margin-block-start: var(--stack-wide);
    padding-block-start: var(--stack-base);
    border-block-start: var(--border-light) solid var(--chroma-stroke);
    font-size: var(--size-micro);
    line-height: var(--line-height-normal);
    color: var(--chroma-muted);
    background: var(--chroma-sheet);
}

.ciboire-vaste {
    background: var(--chroma-sheet);
    color: var(--chroma-letters);
}

.ciboire-vaste-frame {
    max-width: var(--hw-rail);
    margin-inline: auto;
    padding-inline: var(--hw-edge);
}

.ciboire-vaste-shape {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--stack-base);
    margin-block-start: var(--stack-wide);
    max-width: 720px;
}

.ciboire-vaste-slot {
    position: relative;
}

.ciboire-vaste-slot-wide {
    grid-column: 1 / -1;
}

.ciboire-vaste-put,
.ciboire-vaste-area {
    display: block;
    width: 100%;
    padding: var(--stack-wide) var(--stack-base) var(--stack-tiny);
    background: var(--chroma-layer);
    color: var(--chroma-letters);
    border: var(--border-medium) solid var(--chroma-stroke);
    border-radius: var(--soften-tiny);
    font-family: var(--type-reading);
    font-size: var(--size-fine);
}

.ciboire-vaste-area {
    min-height: 140px;
    resize: vertical;
}

.ciboire-vaste-label {
    position: absolute;
    inset-block-start: 22px;
    inset-inline-start: var(--stack-base);
    color: var(--chroma-muted);
    background: var(--chroma-layer);
    font-size: var(--size-fine);
    pointer-events: none;
    transition: inset-block-start var(--duration-brisk) var(--motion-curve-out), font-size var(--duration-brisk) var(--motion-curve-out);
}

.ciboire-vaste-put:focus + .ciboire-vaste-label,
.ciboire-vaste-put:not(:placeholder-shown) + .ciboire-vaste-label,
.ciboire-vaste-area:focus + .ciboire-vaste-label,
.ciboire-vaste-area:not(:placeholder-shown) + .ciboire-vaste-label {
    inset-block-start: 6px;
    font-size: var(--size-micro);
    color: var(--chroma-highlight);
    background: var(--chroma-layer);
}

.ciboire-vaste-send {
    grid-column: 1 / -1;
    justify-self: start;
    min-height: 52px;
    padding: 14px 30px;
    background: var(--chroma-root);
    color: #ffffff;
    border: var(--border-medium) solid var(--chroma-root);
    border-radius: var(--soften-tiny);
    font-family: var(--type-heading);
    font-size: var(--size-fine);
    font-weight: var(--weight-bold);
    letter-spacing: var(--ls-wide);
    cursor: pointer;
}

.ciboire-vaste-send:hover,
.ciboire-vaste-send:focus-visible {
    background: #9d0e25;
    color: #ffffff;
    transform: translateY(2px);
}

.ciboire-vaste-done {
    display: none;
    margin-block-start: var(--stack-base);
    padding: var(--stack-base);
    background: var(--chroma-layer);
    color: var(--chroma-letters);
    border-inline-start: var(--border-bold) solid var(--chroma-highlight);
    font-size: var(--size-fine);
}

.ciboire-vaste-done.is-open {
    display: block;
}

.pavois-dru {
    background: var(--chroma-root);
    color: #ffffff;
}

.pavois-dru-frame {
    display: grid;
    grid-template-columns: 256px minmax(0, 1fr);
    gap: var(--stack-vast);
    align-items: start;
    max-width: var(--hw-rail);
    margin-inline: auto;
    padding-inline: var(--hw-edge);
}

.pavois-dru-shot {
    width: 100%;
    max-width: 256px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--chroma-sheet);
    border: var(--border-medium) solid #ffffff;
    align-self: start;
}

.pavois-dru-headshot {
    display: block;
    width: 165%;
    height: auto;
    max-width: none;
    margin-inline-start: -42%;
    margin-block-start: -8%;
}

.pavois-dru-eye {
    display: block;
    font-size: var(--size-fine);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: #ffe9a3;
    background: var(--chroma-root);
}

.pavois-dru-heading {
    margin-block-start: var(--stack-snug);
    font-size: clamp(32px, 5vw, 58px);
    color: #ffffff;
}

.pavois-dru-blurb {
    max-width: 640px;
    margin-block-start: var(--stack-base);
    font-size: var(--size-h5);
    line-height: var(--line-height-normal);
    color: #ffffff;
    background: var(--chroma-root);
}

.pavois-dru-skills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--stack-tiny);
    margin-block-start: var(--stack-wide);
    list-style: none;
    padding: 0;
}

.pavois-dru-one {
    padding: 6px var(--stack-snug);
    background: #8f0c21;
    color: #ffffff;
    font-size: var(--size-micro);
}

.pavois-dru-works {
    margin-block-start: var(--stack-wide);
    list-style: none;
    padding: 0;
}

.pavois-dru-work {
    margin-block-start: var(--stack-tiny);
}

.pavois-dru-step {
    color: #ffe9a3;
    background: var(--chroma-root);
    font-size: var(--size-fine);
    text-decoration: none;
    border-block-end: var(--border-light) solid #ffe9a3;
}

.pavois-dru-step:hover {
    color: #ffffff;
    background: var(--chroma-root);
}

.pavois-dru-heading-sub {
    display: block;
    margin-block-start: var(--stack-wide);
    font-size: var(--size-fine);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: #ffe9a3;
    background: var(--chroma-root);
}

.tribune-mince {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    justify-content: center;
    padding-block: var(--stack-huge);
    background: var(--chroma-sheet);
    color: var(--chroma-letters);
}

.tribune-mince-frame {
    max-width: var(--hw-rail);
    margin-inline: auto;
    padding-inline: var(--hw-edge);
    width: 100%;
}

.tribune-mince-slab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--stack-base);
    max-width: var(--hw-slim);
    margin-inline: auto;
    padding: var(--stack-vast) var(--stack-roomy);
    text-align: center;
    background: var(--chroma-layer);
    color: var(--chroma-letters);
    border: var(--border-medium) solid var(--chroma-highlight);
    box-shadow: var(--shadow-base);
}

.tribune-mince-line {
    font-size: var(--size-fine);
    line-height: var(--line-height-normal);
    color: var(--chroma-muted);
    background: var(--chroma-layer);
}

.tribune-mince-back {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding-inline: var(--stack-wide);
    background: var(--chroma-layer);
    color: var(--chroma-highlight);
    border: var(--border-light) solid var(--chroma-highlight);
    font-family: var(--type-heading);
    font-weight: var(--weight-demi);
    text-decoration: none;
}

.tribune-mince-back:hover {
    background: var(--chroma-highlight);
    color: #17140a;
}

.dais-calme {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 90;
    padding: var(--stack-snug) var(--hw-edge);
    background: var(--chroma-layer);
    color: var(--chroma-letters);
    border-block-start: var(--border-medium) solid var(--chroma-highlight);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-regular) var(--motion-curve-out), transform var(--duration-regular) var(--motion-curve-out);
}

.dais-calme.is-live {
    opacity: 1;
    visibility: visible;
}

.dais-calme.is-gone {
    transform: translateX(120vw);
    opacity: 0;
    visibility: hidden;
}

.dais-calme-blurb {
    display: flex;
    align-items: flex-start;
    gap: var(--stack-tiny);
    max-width: var(--hw-rail);
    margin-inline: auto;
    font-size: var(--size-fine);
    line-height: var(--line-height-normal);
    color: var(--chroma-letters);
    background: var(--chroma-layer);
}

.dais-calme-mark {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-block-start: 4px;
    fill: var(--chroma-highlight);
}

.dais-calme-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--stack-snug);
    max-width: var(--hw-rail);
    margin-inline: auto;
    margin-block-start: var(--stack-snug);
}

.dais-calme-grant {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 20px;
    background: var(--chroma-highlight);
    color: #17140a;
    border: var(--border-light) solid var(--chroma-highlight);
    font-family: var(--type-heading);
    font-weight: var(--weight-bold);
    font-size: var(--size-micro);
    cursor: pointer;
}

.dais-calme-grant:hover {
    background: var(--chroma-grad-1);
    color: #17140a;
}

.dais-calme-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 20px;
    background: var(--chroma-layer);
    color: var(--chroma-letters);
    border: var(--border-light) solid var(--chroma-rule-bold);
    font-family: var(--type-heading);
    font-size: var(--size-micro);
    cursor: pointer;
}

.dais-calme-no:hover {
    background: var(--chroma-stroke);
    color: var(--chroma-letters);
}

.dais-calme-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px var(--stack-snug);
    background: var(--chroma-layer);
    color: var(--chroma-muted);
    font-size: var(--size-micro);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dais-calme-more:hover {
    background: var(--chroma-layer);
    color: var(--chroma-letters);
}

.parterre-calme {
    background: var(--chroma-sheet);
    color: var(--chroma-letters);
}

.support-lumineux-plug {
    display: block;
}

.rg-mid {
    color: #ffffff;
    background: var(--chroma-notice);
}

.ciboire-vaste-line {
    margin-block-start: var(--stack-base);
    font-size: var(--size-reading);
    line-height: var(--line-height-airy);
    color: var(--chroma-muted);
    background: var(--chroma-sheet);
}

.credence-vif-slab h3 {
    font-size: var(--size-h5);
}

@media (max-width: 1380px) {
    .peristyle-voile-main {
        width: 50%;
    }

    .peristyle-voile-pic {
        width: 44%;
    }
}

@media (max-width: 1160px) {
    :root {
        --hw-edge: var(--wrap-inset-tablet);
    }

    .enceinte-prime-roll {
        gap: var(--stack-snug);
    }

    .enceinte-prime-step {
        padding-inline: var(--stack-tiny);
        font-size: var(--size-micro);
    }

    .enceinte-prime-actions .hw-act {
        padding: 10px 16px;
        font-size: 13px;
    }

    .enceinte-prime-key {
        padding-inline: var(--stack-snug);
        font-size: 13px;
    }

    .peristyle-voile-main {
        width: 52%;
    }

    .peristyle-voile-pic {
        width: 42%;
    }

    .pavois-dru-frame {
        gap: var(--stack-roomy);
    }
}

@media (min-width: 900px) {
    .enceinte-prime-menu-switch {
        display: none;
    }

    .enceinte-prime-panel,
    .enceinte-prime-panel.is-open {
        display: none;
    }
}

@media (max-width: 899px) {
    .enceinte-prime-map {
        display: none;
    }

    .enceinte-prime-band {
        gap: var(--stack-snug);
    }

    .enceinte-prime-actions {
        margin-inline-start: auto;
    }

    .enceinte-prime-key {
        display: none;
    }

    .peristyle-voile-main {
        width: 100%;
        padding-block: var(--stack-roomy) var(--stack-wide);
    }

    .peristyle-voile-pic {
        position: static;
        width: 100%;
        height: 260px;
        margin-block-end: var(--stack-roomy);
        transform: none;
    }

    .peristyle-voile-pic:hover {
        transform: none;
    }

    .pavois-dru-frame {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--stack-wide);
    }

    .ciboire-vaste-shape {
        grid-template-columns: minmax(0, 1fr);
    }

    .receptacle-moderne-frame {
        flex-direction: column;
        align-items: flex-start;
        min-height: 80px;
    }
}

@media (max-width: 860px) {
    :root {
        --hw-sec-y: 32px;
        --size-title: 32px;
        --size-h2: 26px;
        --size-h3: 22px;
        --size-display-4: 19px;
        --size-h5: 17px;
        --size-xs-2: 15px;
        --size-reading: 18px;
        --size-fine: 15px;
        --size-micro: 13px;
        --topbar-tall: 64px;
    }

    .stalle-classique-frame {
        flex-direction: column;
        align-items: flex-start;
        min-height: 64px;
    }

    .credence-vif-slab {
        flex: 0 0 300px;
        width: 300px;
    }
}

@media (max-width: 720px) {
    :root {
        --hw-edge: var(--wrap-inset-mobile);
    }

    .enceinte-prime-band {
        height: 64px;
    }

    .enceinte-prime-emblem-pic {
        height: 34px;
    }

    .enceinte-prime-actions .hw-act {
        padding: 10px 14px;
        font-size: 12px;
        letter-spacing: 0;
    }

    .rg-band {
        font-size: 12px;
        padding-inline: var(--stack-snug);
    }

    .dais-calme,
    .dais-calme-blurb {
        padding: 12px 14px;
        gap: 8px;
        font-size: 13px;
        line-height: 1.35;
    }

    .dais-calme-blurb {
        padding: 0;
    }

    .dais-calme-actions {
        margin-block-start: 8px;
    }

    .dais-calme-grant,
    .dais-calme-no,
    .dais-calme-more {
        padding: 8px 14px;
        font-size: 12px;
        min-height: 36px;
    }

    .hw-hold {
        padding: var(--stack-base);
    }

    .tribune-mince-slab {
        padding: var(--stack-roomy) var(--stack-wide);
    }
}

@media (max-width: 580px) {
    .rg-mid {
        display: none;
    }

    .peristyle-voile-pic {
        height: 200px;
    }

    .credence-vif-slab {
        flex: 0 0 84vw;
        width: 84vw;
    }

    .enceinte-prime-actions .hw-act {
        padding: 10px 12px;
        white-space: normal;
        line-height: 1.15;
    }

    .stalle-classique .hw-act,
    .peristyle-voile-push,
    .hw-hold .hw-act {
        width: 100%;
    }

    .console-prime-part .console-prime-line:first-of-type::first-letter {
        font-size: 2.4em;
    }
}

@media (max-width: 400px) {
    .enceinte-prime-emblem {
        padding-inline: 6px;
    }

    .enceinte-prime-emblem-pic {
        height: 28px;
    }

    .enceinte-prime-actions .hw-act {
        font-size: 11px;
        padding: 8px 10px;
    }
}

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

.hw-act {
    background: #0d9488;
    border-color: #115e59;
    color: #0b0b15;
    text-decoration: none;
    transition: background var(--duration-brisk) var(--motion-curve-out);
}

.hw-act.hw-act {
    color: #0b0b15;
    text-decoration: none;
}

.hw-act:hover {
    background: #0f766e;
    color: #ffffff;
    animation: none;
}

.hw-act.hw-act:hover {
    color: #ffffff;
    text-decoration: none;
}

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

.hw-act:active {
    background: #115e59;
    color: #ffffff;
}

.hw-act:focus-visible {
    outline: 3px solid var(--chroma-letters);
    outline-offset: 3px;
}

.hw-act {
    animation: hw-ripple calc(var(--duration-regular) + var(--duration-easy) + var(--duration-brisk)) var(--motion-curve-smooth) infinite;
}

@keyframes hw-ripple {
    0% {
        transform: translateY(0);
    }

    30.508% {
        transform: translateY(-3px);
    }

    66.102%,
    100% {
        transform: translateY(0);
    }
}

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

@media (max-width: 919px) {
  .enceinte-prime-map,
  .enceinte-prime-roll,
  .enceinte-prime-step,
  .enceinte-prime-key { display: none !important; }
  .enceinte-prime-menu-switch { display: flex !important; }
}