/* ============ fonts ============ */
@font-face {
  font-family: "Poppins";
  src: url("/pictures/poppins-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/pictures/poppins-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/pictures/roboto-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/pictures/roboto-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/pictures/roboto-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============ tokens ============ */
:root {
  --colour-primary: #1c1c2d;
  --colour-zest: #782dbd;
  --colour-action-down: #6627a3;
  --colour-canvas: #141420;
  --colour-surface-2: #22222f;
  --colour-text: #ffffff;
  --colour-text-muted: #bebdbd;
  --colour-line: #2b2b3c;
  --colour-line-strong: #3d3d55;
  --colour-grad-1: #b488e1;
  --colour-fade-bottom: #9652d2;
  --colour-advisory: #cc2936;

  --gap-1: 3px;
  --gap-2: 8px;
  --gap-3: 13px;
  --gap-4: 21px;
  --gap-5: 34px;
  --gap-6: 55px;
  --gap-7: 89px;
  --gap-8: 144px;

  --curve-1: 2px 2px 0 0;
  --curve-2: 4px 4px 0 0;
  --curve-3: 6px 6px 0 0;
  --curve-4: 12px 12px 0 0;
  --curve-5: 20px 20px 0 0;
  --curve-6: 26px 26px 0 0;
  --curve-7: 32px 32px 0 0;
  --curve-8: 40px 40px 0 0;
  --curve-stadium: 9999px 9999px 0 0;
  --curve-orb: 50%;

  --font-banner: "Poppins", "Trebuchet MS", sans-serif;
  --font-copy: "Roboto", "Helvetica Neue", Arial, sans-serif;

  --fs-display-1: 30px;
  --fs-h2: 24px;
  --fs-display-3: 20px;
  --fs-h4: 17px;
  --fs-h5: 15px;
  --fs-h6: 13px;
  --fs-normal: 16px;
  --fs-sm: 13px;
  --fs-tiny: 11px;

  --rhythm-snug: 1.15;
  --rhythm-even: 1.55;
  --rhythm-loose: 1.7;

  --letter-spacing-tight: 0;
  --letter-spacing-base: 0;
  --letter-spacing-wide: 0.02em;

  --fw-plain: 400;
  --fw-medium: 500;
  --fw-black: 700;

  --depth-1: 0 -1px 0 rgba(0, 0, 0, 0.08) inset;
  --depth-2: 0 1px 2px rgba(0, 0, 0, 0.05);
  --depth-3: 0 2px 4px rgba(0, 0, 0, 0.06);
  --depth-4: 0 4px 12px rgba(0, 0, 0, 0.1);
  --depth-5: 0 10px 28px rgba(0, 0, 0, 0.14);
  --depth-6: 0 16px 40px rgba(0, 0, 0, 0.18);
  --depth-7: 0 22px 54px rgba(0, 0, 0, 0.22);
  --depth-8: 0 30px 70px rgba(0, 0, 0, 0.26);

  --pace-fast: 93ms;
  --pace-mid: 200ms;
  --pace-slow: 400ms;
  --glide-release: cubic-bezier(0.11, 0.88, 0.34, 0.93);
  --glide-take-off: cubic-bezier(0.66, 0.07, 0.89, 0.12);
  --glide-swing: cubic-bezier(0.4, 0.04, 0.25, 0.98);
  --glide-bounce: cubic-bezier(0.36, 1.25, 0.67, 1.35);

  --frame-outer: 1240px;
  --frame-column: 1240px;
  --frame-edge-wide: 56px;
  --frame-padding-tablet: 32px;
  --frame-padding-mobile: 16px;
  --frame-tight: 510px;

  --border-hair: 1px;
  --border-medium: 2px;
  --border-heavy: 3px;

  --nav-height-desktop: 60px;
  --nav-size-mobile: 56px;

  --shell: calc(var(--frame-outer) + 2 * var(--frame-edge-wide));
  --edge: var(--frame-padding-mobile);
  --sec-y: 34px;
  --rule: #262636;
}

@media (min-width: 489px) {
  :root {
    --edge: var(--frame-padding-tablet);
  }
}

@media (min-width: 833px) {
  :root {
    --fs-display-1: 52px;
    --fs-h2: 32px;
    --fs-display-3: 24px;
    --fs-h4: 19px;
    --fs-h5: 16px;
    --fs-h6: 14px;
    --fs-normal: 17px;
    --fs-sm: 14px;
    --fs-tiny: 12px;
    --sec-y: 44px;
  }
}

@media (min-width: 1136px) {
  :root {
    --edge: var(--frame-edge-wide);
  }
}

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

html,
body {
  overflow-x: clip;
}

body {
  background: var(--colour-canvas);
  color: var(--colour-text);
  display: flex;
  flex-direction: column;
  font-family: var(--font-copy);
  font-size: var(--fs-normal);
  font-weight: var(--fw-plain);
  line-height: var(--rhythm-even);
  margin: 0;
  min-height: 100vh;
}

a {
  color: var(--colour-grad-1);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

blockquote,
figure {
  margin: 0;
}

button {
  font: inherit;
}

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

h1 {
  font-family: var(--font-banner);
  font-size: var(--fs-display-1);
  font-weight: var(--fw-black);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--rhythm-snug);
}

h2 {
  font-family: var(--font-banner);
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: var(--rhythm-snug);
}

h3 {
  font-family: var(--font-copy);
  font-size: var(--fs-display-3);
  font-weight: var(--fw-medium);
  line-height: var(--rhythm-snug);
}

h4,
h5,
h6 {
  font-family: var(--font-copy);
  font-weight: var(--fw-medium);
}

img {
  max-width: 100%;
}

p {
  margin: 0;
}

svg {
  fill: currentColor;
}

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

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

.skip-hop {
  background: var(--colour-zest);
  border-radius: var(--curve-3);
  color: var(--colour-text);
  left: var(--gap-3);
  padding: var(--gap-3) var(--gap-4);
  position: fixed;
  text-decoration: none;
  top: var(--gap-3);
  z-index: 200;
}

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

/* ---- section reveal (motion: rise) ---- */
[data-motion] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--pace-slow) var(--glide-release), transform var(--pace-slow) var(--glide-release);
}

[data-motion].is-open {
  opacity: 1;
  transform: translateY(0);
}

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

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

/* ============ alcove — reviews REV-05 ============ */
.alcove {
  background: var(--colour-canvas);
  padding-block: var(--sec-y);
}

.alcove-inner {
  margin-inline: auto;
  max-width: var(--shell);
  padding-inline: var(--edge);
}

.alcove-badge {
  color: var(--colour-grad-1);
  display: block;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-medium);
  letter-spacing: var(--letter-spacing-wide);
  margin-block-end: var(--gap-2);
  text-transform: uppercase;
}

.alcove-stack {
  border-left: var(--border-hair) solid var(--colour-zest);
  list-style: none;
  margin-block-start: var(--gap-5);
  padding-left: 0;
}

.alcove-piece {
  margin-block-end: var(--gap-5);
  padding-left: var(--gap-6);
  position: relative;
}

.alcove-piece:last-child {
  margin-block-end: 0;
}

.alcove-mark {
  background: var(--colour-zest);
  border-radius: var(--curve-orb);
  display: block;
  height: 16px;
  left: -8px;
  position: absolute;
  top: 8px;
  width: 16px;
}

.alcove-bar {
  align-items: baseline;
  color: var(--colour-text-muted);
  display: flex;
  font-size: var(--fs-sm);
  gap: var(--gap-3);
  justify-content: space-between;
}

.alcove-when {
  color: var(--colour-text-muted);
}

.alcove-person {
  color: var(--colour-text);
  font-weight: var(--fw-medium);
}

.alcove-stars {
  color: var(--colour-text-muted);
  font-size: var(--fs-sm);
  margin-block-start: var(--gap-1);
}

.alcove-stars-glyph {
  color: var(--colour-grad-1);
  letter-spacing: 2px;
}

.alcove-quote {
  color: var(--colour-text);
  line-height: var(--rhythm-even);
  margin-block-start: var(--gap-2);
}

/* ============ atrium — prose PROSE-16 ============ */
.atrium {
  background: var(--colour-canvas);
  padding-block: var(--sec-y);
}

.atrium-inner {
  margin-inline: auto;
  max-width: var(--shell);
  padding-inline: var(--edge);
}

.atrium-part + .atrium-part {
  margin-block-start: var(--gap-5);
}

.atrium-badge {
  color: var(--colour-grad-1);
  display: block;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-medium);
  letter-spacing: var(--letter-spacing-wide);
  margin-block-end: var(--gap-1);
  text-transform: uppercase;
}

.atrium-part h2 {
  margin-block-start: 0;
  scroll-margin-top: var(--gap-6);
}

.atrium-para {
  color: var(--colour-text);
  margin-block-start: var(--gap-3);
}

.atrium-route {
  color: var(--colour-grad-1);
}

.atrium-stack {
  list-style: none;
  margin-block-start: var(--gap-3);
  padding-left: 0;
}

.atrium-piece {
  padding-left: var(--gap-4);
  position: relative;
}

.atrium-piece + .atrium-piece {
  margin-block-start: var(--gap-2);
}

.atrium-piece::before {
  background: var(--colour-zest);
  content: "";
  height: 6px;
  left: 0;
  position: absolute;
  top: 12px;
  width: 6px;
}

.atrium-figure {
  margin-block: var(--gap-4);
}

.atrium-figure--tall .atrium-media {
  max-height: 52vh;
  object-fit: cover;
  width: 100%;
}

.atrium-figure--square .atrium-media {
  margin-inline: auto;
  max-width: 420px;
  object-fit: contain;
  width: 100%;
}

.atrium-figure--wide .atrium-media {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}

.atrium-media {
  border-radius: var(--curve-4);
  display: block;
  height: auto;
}

.atrium-plug {
  align-items: center;
  background: var(--colour-primary);
  border-left: var(--border-heavy) solid var(--colour-zest);
  border-radius: var(--curve-4);
  color: var(--colour-text);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-4);
  justify-content: space-between;
  margin-block: var(--gap-5);
  padding: var(--gap-4);
}

.atrium-plug-matter {
  flex: 1 1 260px;
  min-width: 0;
}

.atrium-plug-hdr {
  font-family: var(--font-banner);
  font-size: var(--fs-h4);
  font-weight: var(--fw-black);
  line-height: var(--rhythm-snug);
}

.atrium-plug-blurb {
  color: var(--colour-text-muted);
  font-size: var(--fs-sm);
  margin-block-start: var(--gap-1);
}

/* ============ bandeau — cta-block CTA-03 ============ */
.bandeau {
  background: var(--colour-canvas);
  padding-block: var(--sec-y);
  scroll-margin-top: var(--gap-5);
}

.bandeau-inner {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  margin-inline: auto;
  max-width: var(--shell);
  padding-inline: var(--edge);
}

.bandeau-matter {
  background: var(--colour-primary);
  border-radius: var(--curve-5);
  color: var(--colour-text);
  padding: var(--gap-5) var(--gap-4);
}

.bandeau-badge {
  color: var(--colour-grad-1);
  display: block;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-medium);
  letter-spacing: var(--letter-spacing-wide);
  margin-block-end: var(--gap-2);
  text-transform: uppercase;
}

.bandeau-hdr {
  margin-block-end: var(--gap-3);
}

.bandeau-para {
  color: var(--colour-text-muted);
}

.bandeau-tools {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  margin-block-start: var(--gap-4);
}

.bandeau-fine {
  color: var(--colour-text-muted);
  font-size: var(--fs-tiny);
}

.bandeau-route {
  color: var(--colour-grad-1);
}

.bandeau-art {
  align-items: center;
  background-color: var(--colour-zest);
  background-image: linear-gradient(135deg, var(--colour-fade-bottom), var(--colour-primary));
  border-radius: var(--curve-5);
  color: var(--colour-text);
  display: flex;
  justify-content: center;
  min-height: 200px;
}

.bandeau-art-glyph {
  color: var(--colour-text);
  font-family: var(--font-banner);
  font-size: 64px;
  font-weight: var(--fw-black);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1;
}

/* ============ buffet — error ERR-07 ============ */
.buffet {
  background-color: var(--colour-canvas);
  background-image: linear-gradient(rgba(180, 136, 225, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 136, 225, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  color: var(--colour-text);
  display: flex;
  flex: 1 0 auto;
  padding-block: calc(var(--sec-y) * 2);
}

.buffet-inner {
  margin-inline: auto;
  max-width: var(--shell);
  padding-inline: var(--edge);
  text-align: center;
}

.buffet-badge {
  color: var(--colour-grad-1);
  display: block;
  font-family: var(--font-banner);
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  letter-spacing: var(--letter-spacing-wide);
}

.buffet-hdr {
  margin-block-start: var(--gap-3);
  margin-inline: auto;
  max-width: var(--frame-tight);
}

.buffet-para {
  color: var(--colour-text-muted);
  margin-block-start: var(--gap-3);
  margin-inline: auto;
  max-width: var(--frame-tight);
}

.buffet-home {
  background: var(--colour-zest);
  border-radius: var(--curve-3);
  color: var(--colour-text);
  display: inline-block;
  margin-block-start: var(--gap-4);
  min-height: 44px;
  padding: var(--gap-3) var(--gap-5);
  text-decoration: none;
}

.buffet-home:hover {
  background: var(--colour-action-down);
  color: var(--colour-text);
}

/* ============ bureau — page-header PHEAD-02 ============ */
.bureau {
  background: var(--colour-canvas);
  padding-block: var(--sec-y);
}

.bureau-inner {
  margin-inline: auto;
  max-width: var(--shell);
  padding-inline: var(--edge);
  text-align: center;
}

.bureau-badge {
  color: var(--colour-grad-1);
  display: block;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-medium);
  letter-spacing: var(--letter-spacing-wide);
  margin-block-end: var(--gap-2);
  text-transform: uppercase;
}

.bureau-rule {
  background: var(--colour-zest);
  display: block;
  height: 3px;
  margin: var(--gap-4) auto 0;
  width: 72px;
}

.bureau-sub {
  color: var(--colour-text-muted);
  margin: var(--gap-4) auto 0;
  max-width: var(--frame-tight);
}

/* ============ chambre — contact form FORM-05 ============ */
.chambre {
  background: var(--colour-canvas);
  padding-block: var(--sec-y);
}

.chambre-inner {
  margin-inline: auto;
  max-width: var(--shell);
  padding-inline: var(--edge);
}

.chambre-badge {
  color: var(--colour-grad-1);
  display: block;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-medium);
  letter-spacing: var(--letter-spacing-wide);
  margin-block-end: var(--gap-2);
  text-transform: uppercase;
}

.chambre-box {
  border: var(--border-medium) solid var(--colour-zest);
  border-radius: var(--curve-4);
  margin-block-start: var(--gap-4);
  padding: var(--gap-4);
}

.chambre-lead {
  color: var(--colour-text-muted);
}

.chambre-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-4);
  margin-block-start: var(--gap-4);
}

.chambre-cell {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--gap-1);
  width: 100%;
}

.chambre-cell--wide {
  width: 100%;
}

.chambre-tag {
  color: var(--colour-text-muted);
  font-size: var(--fs-sm);
}

.chambre-cell input,
.chambre-cell textarea {
  background: var(--colour-canvas);
  border: 0;
  border-bottom: var(--border-hair) solid var(--colour-line-strong);
  color: var(--colour-text);
  font-family: var(--font-copy);
  font-size: var(--fs-h5);
  min-height: 44px;
  padding: var(--gap-2) 0;
  width: 100%;
}

.chambre-cell textarea {
  min-height: 120px;
  resize: vertical;
}

.chambre-send {
  background: var(--colour-zest);
  border: 0;
  border-radius: var(--curve-3);
  color: var(--colour-text);
  cursor: pointer;
  font-weight: var(--fw-medium);
  min-height: 44px;
  padding: var(--gap-3) var(--gap-5);
}

.chambre-send:hover {
  background: var(--colour-action-down);
  color: var(--colour-text);
}

.chambre-done {
  background: var(--colour-primary);
  border-left: var(--border-heavy) solid var(--colour-grad-1);
  color: var(--colour-text);
  margin-block-start: var(--gap-4);
  padding: var(--gap-3) var(--gap-4);
}

/* ============ cloche — header HEAD-CENTER ============ */
.cloche {
  background: var(--colour-primary);
  color: var(--colour-text);
  position: relative;
  z-index: 60;
}

.cloche-crown {
  align-items: center;
  display: grid;
  gap: var(--gap-3);
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  margin-inline: auto;
  max-width: var(--shell);
  min-height: 76px;
  padding-block: var(--gap-2);
  padding-inline: var(--edge);
}

.cloche-side {
  align-items: center;
  display: flex;
  gap: var(--gap-3);
  min-width: 0;
}

.cloche-menu-tap {
  align-items: center;
  background: var(--colour-primary);
  border: var(--border-hair) solid var(--colour-line-strong);
  border-radius: var(--curve-3);
  color: var(--colour-text);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 46px;
}

.cloche-lines {
  background: var(--colour-text);
  display: block;
  height: 2px;
  position: relative;
  width: 20px;
}

.cloche-lines::after {
  background: var(--colour-text);
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 6px;
  width: 20px;
}

.cloche-flag {
  border: var(--border-hair) solid var(--colour-line-strong);
  display: none;
  height: 15px;
  overflow: hidden;
  width: 22px;
}

.cloche-flag-a,
.cloche-flag-b,
.cloche-flag-c {
  display: block;
  float: left;
  height: 100%;
  width: 33.33%;
}

.cloche-flag-a {
  background: #0b2d80;
}

.cloche-flag-b {
  background: #f2f2f2;
}

.cloche-flag-c {
  background: #c1121f;
}

.cloche-emblem {
  display: block;
  flex-shrink: 0;
  grid-column: 2;
  justify-self: center;
  line-height: 0;
}

.cloche-plate {
  background: var(--colour-surface-2);
  border: var(--border-hair) solid var(--colour-line);
  border-radius: var(--curve-4);
  color: var(--colour-text);
  display: inline-flex;
  padding: var(--gap-1) var(--gap-3);
}

.cloche-emblem-media {
  display: block;
  flex-shrink: 0;
  height: 56px;
  width: auto;
}

.cloche-tools {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap-3);
  justify-content: flex-end;
  min-width: 0;
}

.cloche-goto {
  border: var(--border-hair) solid var(--colour-grad-1);
  border-radius: var(--curve-stadium);
  color: var(--colour-grad-1);
  display: inline-flex;
  align-items: center;
  background: var(--colour-primary);
  font-size: var(--fs-h6);
  min-height: 44px;
  padding-inline: var(--gap-4);
  text-decoration: none;
  white-space: nowrap;
}

.cloche-goto:hover {
  background: var(--colour-grad-1);
  color: var(--colour-canvas);
}

.cloche-offer {
  flex-shrink: 0;
  white-space: nowrap;
}

.cloche-bar {
  border-top: var(--border-hair) solid var(--rule);
  display: none;
  min-height: 60px;
}

.cloche-map {
  align-items: center;
  display: flex;
  margin-inline: auto;
  max-width: var(--shell);
  min-height: 60px;
  padding-inline: var(--edge);
}

.cloche-stack {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap-5);
  justify-content: center;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.cloche-piece {
  flex: 0 0 auto;
  position: relative;
}

.cloche-piece[hidden] {
  display: none;
}

.cloche-piece + .cloche-piece::before {
  color: var(--colour-line-strong);
  content: "/";
  left: calc(var(--gap-5) / -2);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cloche-route {
  color: var(--colour-text);
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  min-height: 44px;
  padding-inline: var(--gap-2);
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.cloche-route:hover {
  background: var(--colour-surface-2);
  color: var(--colour-text);
}

.cloche-route[aria-current]::after {
  background: var(--colour-grad-1);
  bottom: 8px;
  content: "";
  height: 2px;
  left: var(--gap-2);
  position: absolute;
  right: var(--gap-2);
}

.cloche-extra {
  flex: 0 0 auto;
}

.cloche-more-tap {
  background: var(--colour-primary);
  border: var(--border-hair) solid var(--colour-line-strong);
  border-radius: var(--curve-3);
  color: var(--colour-text);
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  min-height: 44px;
  padding-inline: var(--gap-3);
  text-transform: uppercase;
  white-space: nowrap;
}

.cloche-more-tap:hover {
  background: var(--colour-surface-2);
  color: var(--colour-text);
}

.cloche-more-menu {
  background: var(--colour-surface-2);
  border: var(--border-hair) solid var(--colour-line-strong);
  border-radius: var(--curve-4);
  color: var(--colour-text);
  display: none;
  list-style: none;
  margin: 0;
  min-width: 220px;
  padding: var(--gap-2);
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 70;
}

.cloche-more-menu.is-open {
  display: block;
}

.cloche-sheet {
  background: var(--colour-primary);
  border-top: var(--border-hair) solid var(--rule);
  display: none;
  max-height: 72vh;
  overflow-y: auto;
}

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

.cloche-sheet-map {
  padding: var(--gap-3) var(--edge) var(--gap-4);
}

.cloche-sheet-stack {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cloche-sheet-piece {
  border-bottom: var(--border-hair) solid var(--rule);
}

.cloche-sheet-piece:last-child {
  border-bottom: 0;
}

.cloche-sheet-route {
  align-items: center;
  color: var(--colour-text);
  display: flex;
  font-size: var(--fs-h5);
  letter-spacing: var(--letter-spacing-wide);
  min-height: 48px;
  text-decoration: none;
  text-transform: uppercase;
}

.cloche-sheet-route[aria-current] {
  color: var(--colour-grad-1);
}

@media (min-width: 900px) {
  .cloche-bar {
    display: block;
  }

  .cloche-emblem-media {
    height: 72px;
  }

  .cloche-flag {
    display: block;
  }

  .cloche-menu-tap,
  .cloche-sheet {
    display: none;
  }
}

@media (min-width: 900px) and (max-width: 1135px) {
  .cloche-stack {
    gap: var(--gap-4);
  }

  .cloche-piece + .cloche-piece::before {
    left: calc(var(--gap-4) / -2);
  }
}

/* ============ console — author byline BYLINE-05 ============ */
.console {
  background: var(--colour-primary);
  color: var(--colour-text);
  display: block;
  padding-block: var(--gap-5);
}

.console-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-4);
  justify-content: space-between;
  margin-inline: auto;
  max-width: var(--shell);
  padding-inline: var(--edge);
}

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

.console-photo {
  border-radius: var(--curve-orb);
  flex-shrink: 0;
  height: 56px;
  object-fit: cover;
  width: 56px;
}

.console-matter {
  min-width: 0;
}

.console-person {
  font-family: var(--font-banner);
  font-size: var(--fs-h5);
  font-weight: var(--fw-black);
}

.console-route {
  color: var(--colour-text);
  text-decoration: none;
}

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

.console-credit {
  color: var(--colour-text-muted);
  font-size: var(--fs-sm);
}

.console-more {
  background: var(--colour-primary);
  border: var(--border-hair) solid var(--colour-grad-1);
  border-radius: var(--curve-3);
  color: var(--colour-grad-1);
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-sm);
  min-height: 44px;
  padding: 0 var(--gap-4);
  text-decoration: none;
}

.console-more:hover {
  background: var(--colour-grad-1);
  color: var(--colour-canvas);
}

/* ============ cour — hero HERO-04 ============ */
.cour {
  background: var(--colour-canvas);
  color: var(--colour-text);
  position: relative;
}

.cour-track {
  display: block;
  list-style: none;
  margin: 0;
  min-height: 380px;
  padding: 0;
  position: relative;
}

.cour-slide {
  background-color: var(--colour-primary);
  background-image: url("/pictures/vision.webp");
  background-position: 50% 42%;
  background-repeat: no-repeat;
  background-size: 118%;
  display: none;
  min-height: 380px;
  position: relative;
}

.cour-slide.is-open {
  display: block;
}

.cour-slide--a {
  background-position: 50% 42%;
}

.cour-slide--b {
  background-position: 18% 58%;
  background-size: 126%;
}

.cour-slide--c {
  background-position: 82% 34%;
  background-size: 122%;
}

.cour-veil {
  background-image: linear-gradient(105deg, rgba(20, 20, 32, 0.94) 0%, rgba(20, 20, 32, 0.82) 46%, rgba(20, 20, 32, 0.42) 100%);
  display: block;
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.cour-matter {
  margin-inline: auto;
  max-width: var(--shell);
  min-height: 380px;
  padding-block: var(--gap-6);
  padding-inline: var(--edge);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cour-badge {
  color: var(--colour-grad-1);
  display: block;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-medium);
  letter-spacing: var(--letter-spacing-wide);
  margin-block-end: var(--gap-2);
  text-transform: uppercase;
}

.cour-hdr {
  font-family: var(--font-banner);
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: var(--rhythm-snug);
  max-width: 18ch;
  overflow-wrap: anywhere;
}

.cour-second {
  color: var(--colour-text-muted);
  margin-block-start: var(--gap-3);
  max-width: var(--frame-tight);
}

.cour-tools {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  margin-block-start: var(--gap-4);
}

.cour-fine {
  color: var(--colour-text-muted);
  font-size: var(--fs-tiny);
}

.cour-pilot {
  align-items: center;
  display: flex;
  gap: var(--gap-3);
  justify-content: center;
  margin-inline: auto;
  max-width: var(--shell);
  padding: var(--gap-3) var(--edge);
}

.cour-arrow {
  background: var(--colour-primary);
  border: var(--border-hair) solid var(--colour-line-strong);
  border-radius: var(--curve-3);
  color: var(--colour-text);
  cursor: pointer;
  height: 44px;
  position: relative;
  width: 44px;
}

.cour-arrow:hover {
  background: var(--colour-surface-2);
  color: var(--colour-text);
}

.cour-arrow::before {
  border-right: var(--border-medium) solid currentColor;
  border-top: var(--border-medium) solid currentColor;
  content: "";
  height: 9px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 9px;
}

.cour-arrow--prev::before {
  transform: translate(-40%, -50%) rotate(-135deg);
}

.cour-arrow--next::before {
  transform: translate(-60%, -50%) rotate(45deg);
}

.cour-dots {
  align-items: center;
  display: flex;
  gap: var(--gap-2);
}

.cour-dot {
  background: var(--colour-line-strong);
  border: 0;
  border-radius: var(--curve-orb);
  color: var(--colour-text);
  cursor: pointer;
  height: 10px;
  padding: 0;
  width: 10px;
}

.cour-dot.is-open {
  background: var(--colour-grad-1);
}

@media (min-width: 833px) {
  .cour-track,
  .cour-slide,
  .cour-matter {
    min-height: 560px;
  }

  .cour-slide {
    background-size: cover;
  }

  .cour-slide--a {
  background-position: 50% 42%;
}

.cour-slide--b {
    background-position: 22% 62%;
  }

  .cour-slide--c {
    background-position: 78% 30%;
  }

  .cour-second {
    font-size: var(--fs-h5);
  }

  .cour-tools {
    align-items: center;
    flex-direction: row;
    gap: var(--gap-4);
  }
}

/* ============ fenetre — author card AUTH-02 ============ */
.fenetre {
  background: var(--colour-canvas);
  padding-block: var(--sec-y);
}

.fenetre-inner {
  margin-inline: auto;
  max-width: var(--shell);
  padding-inline: var(--edge);
  text-align: center;
}

.fenetre-photo {
  border-radius: var(--curve-orb);
  height: 140px;
  margin-block-end: var(--gap-5);
  object-fit: cover;
  width: 140px;
}

.fenetre-job {
  color: var(--colour-grad-1);
  font-size: var(--fs-sm);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.fenetre-person {
  font-family: var(--font-banner);
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: var(--rhythm-snug);
  margin-block-start: var(--gap-1);
}

.fenetre-bio {
  color: var(--colour-text-muted);
  line-height: var(--rhythm-loose);
  margin: var(--gap-4) auto 0;
  max-width: var(--frame-tight);
  text-align: left;
}

.fenetre-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
  justify-content: center;
  list-style: none;
  margin: var(--gap-4) 0 0;
  padding: 0;
}

.fenetre-tag {
  background: var(--colour-surface-2);
  border-radius: var(--curve-3);
  color: var(--colour-text);
  font-size: var(--fs-sm);
  padding: var(--gap-2) var(--gap-3);
}

.fenetre-works {
  margin-block-start: var(--gap-5);
}

.fenetre-works-hdr {
  color: var(--colour-grad-1);
  font-size: var(--fs-tiny);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.fenetre-works-stack {
  list-style: none;
  margin: var(--gap-3) 0 0;
  padding: 0;
}

.fenetre-work {
  color: var(--colour-text-muted);
  font-size: var(--fs-h5);
}

.fenetre-work + .fenetre-work {
  margin-block-start: var(--gap-1);
}

/* ============ fresque — legal LEGAL-02 ============ */
.fresque {
  background: var(--colour-canvas);
  padding-block: var(--sec-y);
}

.fresque-inner {
  margin-inline: auto;
  max-width: var(--shell);
  padding-inline: var(--edge);
}

.fresque-lead {
  color: var(--colour-text);
  font-size: var(--fs-h5);
}

.fresque-matter {
  counter-reset: fresque-part;
  margin-block-start: var(--gap-5);
}

.fresque-part {
  counter-increment: fresque-part;
}

.fresque-part + .fresque-part {
  margin-block-start: var(--gap-5);
}

.fresque-hdr::before {
  color: var(--colour-grad-1);
  content: counter(fresque-part) ". ";
  font-family: var(--font-banner);
  font-weight: var(--fw-black);
  margin-right: var(--gap-2);
}

.fresque-para {
  color: var(--colour-text-muted);
  margin-block-start: var(--gap-3);
  padding-left: var(--gap-4);
}

.fresque-aside {
  background: var(--colour-primary);
  border-radius: var(--curve-4);
  color: var(--colour-text);
  margin-block-start: var(--gap-5);
  padding: var(--gap-4);
}

.fresque-aside-hdr {
  color: var(--colour-grad-1);
  font-size: var(--fs-tiny);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.fresque-stack {
  list-style: none;
  margin: var(--gap-3) 0 0;
  padding: 0;
}

.fresque-piece {
  color: var(--colour-text);
}

.fresque-piece + .fresque-piece {
  margin-block-start: var(--gap-2);
}

.fresque-note {
  color: var(--colour-text-muted);
  font-size: var(--fs-sm);
  margin-block-start: var(--gap-5);
}

/* ============ ligne-age — 18+ band RG-04 ============ */
.ligne-age {
  background: var(--colour-primary);
  border-bottom: var(--border-heavy) solid var(--colour-advisory);
  color: var(--colour-text);
  display: block;
  padding: var(--gap-2) var(--edge);
  text-align: center;
}

.ligne-age-blurb {
  color: var(--colour-text);
  display: inline;
  font-size: var(--fs-tiny);
  line-height: var(--rhythm-even);
}

.ligne-age-route {
  color: var(--colour-grad-1);
  text-decoration-color: var(--colour-advisory);
  text-decoration-thickness: 2px;
}

/* ============ piedestal — inline cta INLINE-CTA-03 ============ */
.piedestal {
  display: block;
  padding-block: var(--gap-4);
  text-align: center;
}

.piedestal-line {
  color: var(--colour-text);
  font-size: var(--fs-h6);
  line-height: var(--rhythm-even);
}

.piedestal-route {
  color: var(--colour-grad-1);
  text-decoration: underline;
}

.piedestal-route:hover {
  color: var(--colour-grad-1);
  text-decoration-thickness: 3px;
}

/* ============ pignon — breadcrumbs BREAD-03 ============ */
.pignon {
  background: var(--colour-canvas);
  display: block;
  padding-block: var(--gap-4);
}

.pignon-inner {
  margin-inline: auto;
  max-width: var(--shell);
  padding-inline: var(--edge);
}

.pignon-stack {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pignon-piece {
  color: var(--colour-text);
}

.pignon-piece + .pignon-piece::before {
  color: var(--colour-grad-1);
  content: "›";
  margin-inline: var(--gap-2);
}

.pignon-route {
  color: var(--colour-text-muted);
}

/* ============ repere — footer FOOT-10 ============ */
.repere {
  background: var(--colour-canvas);
  border-top: var(--border-hair) solid var(--rule);
  color: var(--colour-text-muted);
  flex-shrink: 0;
}

.repere-inner {
  margin-inline: auto;
  max-width: var(--shell);
  padding-inline: var(--edge);
}

.repere-bar {
  border-bottom: var(--border-hair) solid var(--rule);
}

.repere-bar--brand {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-4);
  justify-content: space-between;
  padding-block: var(--gap-5);
}

.repere-emblem {
  display: block;
  line-height: 0;
}

.repere-emblem-media {
  height: 56px;
  width: auto;
}

.repere-blurb {
  color: var(--colour-text-muted);
  flex: 1 1 320px;
  font-size: var(--fs-sm);
  min-width: 0;
}

.repere-bar--map {
  display: grid;
  gap: var(--gap-5);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--gap-5);
}

.repere-box {
  min-width: 0;
}

.repere-hdr {
  color: var(--colour-text);
  font-family: var(--font-banner);
  font-size: var(--fs-h6);
  font-weight: var(--fw-black);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.repere-stack {
  list-style: none;
  margin: var(--gap-3) 0 0;
  padding: 0;
}

.repere-piece + .repere-piece {
  margin-block-start: var(--gap-2);
}

.repere-route {
  color: var(--colour-text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}

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

.repere-bar--warn {
  padding-block: var(--gap-4);
}

.repere-note {
  color: var(--colour-text-muted);
  font-size: var(--fs-tiny);
}

.repere-bar--sign {
  align-items: center;
  border-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-3);
  justify-content: space-between;
  padding-block: var(--gap-4);
}

.repere-sub {
  color: var(--colour-text-muted);
  font-size: var(--fs-sm);
}

.repere-top {
  color: var(--colour-grad-1);
  font-size: var(--fs-sm);
  text-decoration: none;
}

@media (min-width: 833px) {
  .repere-bar--map {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============ retable — data table TABLE-07 ============ */
.retable {
  margin-block: var(--gap-5);
}

.retable-cap {
  color: var(--colour-grad-1);
  font-size: var(--fs-tiny);
  letter-spacing: var(--letter-spacing-wide);
  margin-block-end: var(--gap-3);
  text-transform: uppercase;
}

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

.retable table {
  border-collapse: collapse;
  min-width: 460px;
  width: 100%;
}

.retable th {
  background: var(--colour-primary);
  color: var(--colour-text);
  font-family: var(--font-banner);
  font-size: var(--fs-h6);
  letter-spacing: var(--letter-spacing-wide);
  padding: var(--gap-3);
  text-align: left;
  text-transform: uppercase;
}

.retable td {
  border-top: var(--border-hair) solid var(--rule);
  color: var(--colour-text);
  font-size: var(--fs-sm);
  padding: var(--gap-3);
  vertical-align: top;
}

.retable td:nth-child(even) {
  background: #1a1a28;
  color: var(--colour-text);
}

.retable-lane-key {
  font-weight: var(--fw-medium);
}

.retable-note {
  color: var(--colour-text-muted);
  font-size: var(--fs-tiny);
  margin-block-start: var(--gap-3);
}

/* ============ terrasse — faq FAQ-08 ============ */
.terrasse {
  background: var(--colour-canvas);
  padding-block: var(--sec-y);
}

.terrasse-inner {
  margin-inline: auto;
  max-width: var(--shell);
  padding-inline: var(--edge);
}

.terrasse-badge {
  color: var(--colour-grad-1);
  display: block;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-medium);
  letter-spacing: var(--letter-spacing-wide);
  margin-block-end: var(--gap-2);
  text-transform: uppercase;
}

.terrasse-box {
  background: #191926;
  border: var(--border-hair) solid var(--colour-line);
  border-radius: var(--curve-5);
  color: var(--colour-text);
  margin-block-start: var(--gap-4);
  padding: var(--gap-4);
}

.terrasse-piece {
  border-bottom: var(--border-hair) solid var(--rule);
  box-shadow: inset 4px 0 0 var(--colour-zest);
  padding-left: var(--gap-4);
}

.terrasse-piece:last-child {
  border-bottom: 0;
}

.terrasse-ask {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: var(--gap-3);
  grid-template-columns: minmax(0, 1fr) auto;
  list-style: none;
  padding-block: var(--gap-3);
}

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

.terrasse-ask h3 {
  font-size: var(--fs-h4);
  min-width: 0;
}

.terrasse-sign {
  border-right: var(--border-medium) solid var(--colour-grad-1);
  border-bottom: var(--border-medium) solid var(--colour-grad-1);
  display: block;
  height: 9px;
  transform: rotate(45deg);
  width: 9px;
}

.terrasse-piece[open] .terrasse-sign {
  transform: rotate(-135deg);
}

.terrasse-reply {
  padding-block-end: var(--gap-3);
}

.terrasse-para {
  color: var(--colour-text-muted);
}

/* ============ vestibule — items grid GRID-05 ============ */
.vestibule {
  background: var(--colour-canvas);
  padding-block: var(--sec-y);
}

.vestibule-inner {
  margin-inline: auto;
  max-width: var(--shell);
  padding-inline: var(--edge);
}

.vestibule-badge {
  color: var(--colour-grad-1);
  display: block;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-medium);
  letter-spacing: var(--letter-spacing-wide);
  margin-block-end: var(--gap-2);
  text-transform: uppercase;
}

.vestibule-lead {
  background-color: var(--colour-zest);
  background-image: linear-gradient(140deg, var(--colour-zest) 0%, var(--colour-primary) 96%);
  border-radius: var(--curve-5);
  color: var(--colour-text);
  display: block;
  margin-block: var(--gap-4) var(--gap-5);
  padding: var(--gap-5) var(--gap-4);
}

.vestibule-lead-hdr {
  color: var(--colour-text);
  font-family: var(--font-banner);
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: var(--rhythm-snug);
}

.vestibule-lead-blurb {
  color: var(--colour-text);
  font-size: var(--fs-h5);
  line-height: var(--rhythm-even);
  margin-block-start: var(--gap-3);
  max-width: var(--frame-tight);
}

.vestibule-lead .vestibule-offer {
  margin-block-start: var(--gap-4);
}

.vestibule-plug {
  align-items: center;
  background: var(--colour-primary);
  border-left: var(--border-heavy) solid var(--colour-zest);
  border-radius: var(--curve-4);
  color: var(--colour-text);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-3);
  justify-content: space-between;
  padding: var(--gap-4);
}

.vestibule-plug-hdr {
  font-family: var(--font-banner);
  font-size: var(--fs-h4);
  font-weight: var(--fw-black);
  line-height: var(--rhythm-snug);
}

.vestibule-plug-blurb {
  color: var(--colour-text-muted);
  flex: 1 1 100%;
  font-size: var(--fs-sm);
}

.alcove-plug {
  align-items: center;
  background: var(--colour-primary);
  border-left: var(--border-heavy) solid var(--colour-zest);
  border-radius: var(--curve-4);
  color: var(--colour-text);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-3);
  justify-content: space-between;
  margin-block-end: var(--gap-5);
  margin-left: var(--gap-6);
  padding: var(--gap-4);
}

.alcove-plug-hdr {
  font-family: var(--font-banner);
  font-size: var(--fs-h4);
  font-weight: var(--fw-black);
  line-height: var(--rhythm-snug);
}

.alcove-offer.stele-act {
  font-size: var(--fs-h5);
  min-height: 52px;
  padding: 0 var(--gap-5);
}

.vestibule-stack {
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: minmax(0, 1fr);
}

.vestibule-box {
  border-top: var(--border-medium) solid var(--colour-zest);
  padding: var(--gap-4) var(--gap-3);
}

.vestibule-box:hover {
  transform: translateX(5px);
  transition: transform var(--pace-mid) var(--glide-release);
}

.vestibule-mark {
  color: var(--colour-grad-1);
  display: block;
  height: 30px;
  margin-block-end: var(--gap-2);
  width: 30px;
}

.vestibule-mark svg {
  display: block;
  height: 30px;
  width: 30px;
}

.vestibule-hdr {
  color: var(--colour-text);
  font-family: var(--font-copy);
  font-size: var(--fs-normal);
  font-weight: var(--fw-black);
}

.vestibule-blurb {
  color: var(--colour-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--rhythm-even);
  margin-block-start: var(--gap-2);
}

@media (min-width: 700px) {
  .vestibule-plug {
  align-items: center;
  background: var(--colour-primary);
  border-left: var(--border-heavy) solid var(--colour-zest);
  border-radius: var(--curve-4);
  color: var(--colour-text);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-3);
  justify-content: space-between;
  padding: var(--gap-4);
}

.vestibule-plug-hdr {
  font-family: var(--font-banner);
  font-size: var(--fs-h4);
  font-weight: var(--fw-black);
  line-height: var(--rhythm-snug);
}

.vestibule-plug-blurb {
  color: var(--colour-text-muted);
  flex: 1 1 100%;
  font-size: var(--fs-sm);
}

.alcove-plug {
  align-items: center;
  background: var(--colour-primary);
  border-left: var(--border-heavy) solid var(--colour-zest);
  border-radius: var(--curve-4);
  color: var(--colour-text);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-3);
  justify-content: space-between;
  margin-block-end: var(--gap-5);
  margin-left: var(--gap-6);
  padding: var(--gap-4);
}

.alcove-plug-hdr {
  font-family: var(--font-banner);
  font-size: var(--fs-h4);
  font-weight: var(--fw-black);
  line-height: var(--rhythm-snug);
}

.alcove-offer.stele-act {
  font-size: var(--fs-h5);
  min-height: 52px;
  padding: 0 var(--gap-5);
}

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

/* ============ zone — cookie banner COOK-13 ============ */
.zone {
  bottom: var(--gap-5);
  max-width: 320px;
  position: fixed;
  right: var(--gap-5);
  z-index: 90;
}

.zone[hidden] {
  display: none;
}

.zone.is-closed {
  display: none;
}

.zone-box {
  background: var(--colour-canvas);
  border: var(--border-hair) solid var(--colour-line-strong);
  border-radius: var(--curve-5);
  box-shadow: var(--depth-4);
  color: var(--colour-text);
  display: grid;
  gap: var(--gap-2);
  grid-template-columns: 20px minmax(0, 1fr);
  padding: var(--gap-4);
}

.zone-mark {
  color: var(--colour-grad-1);
  display: block;
  height: 20px;
  width: 20px;
}

.zone-mark svg {
  display: block;
  height: 20px;
  width: 20px;
}

.zone-blurb {
  color: var(--colour-text-muted);
  font-size: var(--fs-tiny);
  grid-column: 2;
  line-height: var(--rhythm-even);
}

.zone-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
  grid-column: 2;
}

.zone-grant {
  background: var(--colour-zest);
  border: 0;
  border-radius: var(--curve-3);
  color: var(--colour-text);
  cursor: pointer;
  font-size: var(--fs-h6);
  min-height: 36px;
  padding-inline: var(--gap-4);
}

.zone-grant:hover {
  background: var(--colour-action-down);
  color: var(--colour-text);
}

.zone-dismiss {
  align-items: center;
  background: var(--colour-canvas);
  border: 0;
  color: var(--colour-text-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--fs-h6);
  min-height: 36px;
  padding-inline: var(--gap-2);
  text-decoration: underline;
}

.zone-dismiss:hover {
  background: var(--colour-canvas);
  color: var(--colour-text);
}

@media (max-width: 720px) {
  .zone {
    bottom: var(--gap-3);
    left: var(--gap-3);
    max-width: none;
    right: var(--gap-3);
  }

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

  .zone-grant,
  .zone-dismiss {
    flex: 1 1 auto;
    font-size: 12px;
    min-height: 36px;
    min-width: 44px;
    padding-inline: 14px;
  }
}

/* ============ offer button geometry shared with cta-style ============ */
.bandeau-offer,
.cloche-offer,
.cour-offer,
.atrium-offer,
.vestibule-offer {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  min-height: 48px;
  text-align: center;
  text-decoration: none;
}

@media (min-width: 833px) {
  .bandeau-inner {
    align-items: stretch;
    gap: var(--gap-4);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .bandeau-matter {
    padding: var(--gap-6) var(--gap-5);
  }

  .bandeau-art {
    min-height: 400px;
  }

  .bandeau-art-glyph {
    font-size: 96px;
  }

  .atrium-figure--wide .atrium-media {
    margin-inline: auto;
    max-width: 760px;
  }

  .atrium-figure--tall .atrium-media {
    margin-inline: auto;
    max-width: 460px;
  }

  .fresque-para {
    padding-left: var(--gap-5);
  }

  .terrasse-box {
    padding: var(--gap-5);
  }

  .vestibule-lead {
    align-items: center;
    column-gap: var(--gap-6);
    display: grid;
    grid-template-columns: minmax(0, auto) auto;
    justify-content: space-between;
    padding: var(--gap-6) var(--gap-5);
  }

  .vestibule-lead-hdr {
    grid-column: 1;
    grid-row: 1;
  }

  .vestibule-lead-blurb {
    grid-column: 1;
    grid-row: 2;
  }

  .vestibule-lead .vestibule-offer {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-block-start: 0;
  }
}

@media (max-width: 480px) {
  .cloche-crown {
    gap: var(--gap-2);
  }

  .cloche-emblem-media {
    height: 48px;
  }

  .cloche-offer {
    font-size: var(--fs-h6) !important;
    padding-inline: var(--gap-3) !important;
  }

  .fresque-para {
    padding-left: 0;
  }
}

/* ============ bouton d'offre — scripts/cta-style.mjs ============ */
@property --shine-stele {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -40%;
}

.stele-act{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--gap-4);min-height:44px;border-radius:var(--curve-stadium);border:var(--border-hair) solid var(--colour-grad-1);font-size:var(--fs-h6);font-weight:600}
.stele-act{position:relative;
  background:#65A30D;color:#141420;text-decoration:none;font-family:var(--font-banner);
  transition:background 0.12s ease-out,transform 0.12s ease-out;}
.stele-act.stele-act{color:#141420;text-decoration:none;font-family:var(--font-banner);}
.stele-act:hover{background:#4D7C0F;color:#FFFFFF;animation:none}
.stele-act.stele-act:hover{color:#FFFFFF;text-decoration:none}
.stele-act:hover::after{animation:none}
.stele-act:active{background:#3F6212;color:#FFFFFF}
.stele-act:focus-visible{outline:3px solid #141420;outline-offset:3px}
.stele-act{overflow:hidden;animation:stele-tide 2.27s linear infinite}
.stele-act::after{content:"";position:absolute;inset:0;width:100%;transform:none;pointer-events:none;background:linear-gradient(100deg,transparent calc(var(--shine-stele) - 22%),rgba(255,255,255,.42) var(--shine-stele),transparent calc(var(--shine-stele) + 22%));animation:stele-tide-2 2.27s ease-in-out infinite}
@keyframes stele-tide{0%{transform:scale(1);animation-timing-function:cubic-bezier(.25,.8,.35,1)}17.621%{transform:scale(1.085);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}42.731%,100%{transform:scale(1)}}
@keyframes stele-tide-2{0%,3.084%{--shine-stele:-40%}36.123%,100%{--shine-stele:140%}}
@media (prefers-reduced-motion:reduce){.stele-act,.stele-act::after{animation:none!important;transition:none!important}}

.atrium-offer.stele-act,
.bandeau-offer.stele-act,
.cour-offer.stele-act,
.vestibule-offer.stele-act {
  font-size: var(--fs-h5);
  min-height: 52px;
  padding: 0 var(--gap-5);
}

.cloche-offer.stele-act {
  font-size: var(--fs-h6);
  min-height: 44px;
}

.stele-act.stele-act {
  border-radius: var(--curve-5);
}

@media (max-width: 923px) {
  .cloche-bar,
  .cloche-map,
  .cloche-stack,
  .cloche-route { display: none !important; }
  .cloche-menu-tap { display: flex !important; }
}

/* nojs guard 28.09.2026: без JS контент виден */
html.no-js [data-motion]{opacity:1!important;transform:none!important;visibility:visible!important;clip-path:none!important}

@media (max-width: 480px) {
  .cloche-tools, .matiere, .atrium-offer { min-width: 0; max-width: 100%; }
  .atrium-offer { overflow-wrap: anywhere; }
}