/* == fonts ================================================================= */
@font-face {
  font-display: swap;
  font-family: 'Olympe Display';
  font-style: normal;
  font-weight: 600;
  src: url('/archive-fresh/disp-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Olympe Display';
  font-style: normal;
  font-weight: 800;
  src: url('/archive-fresh/disp-800.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Olympe Text';
  font-style: normal;
  font-weight: 400;
  src: url('/archive-fresh/base-400.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Olympe Text';
  font-style: normal;
  font-weight: 600;
  src: url('/archive-fresh/base-600.woff2') format('woff2');
}

/* == tokens ================================================================ */
:root {
  --t-anchor: #5f1709;
  --t-beacon: #dbdcde;
  --t-spot-deep: #c0c2c7;
  --t-field: #212228;
  --t-layer: #2a2b31;
  --t-letters: #ffffff;
  --t-dim: #bdbdbd;
  --t-hairline: #3a3b43;
  --t-stroke-heavy: #56575f;
  --t-grad-1: #fcfcfc;
  --t-gradient-mid: #eeeeef;
  --t-advisory: #96281b;
  --t-deep: #191a1f;
  --t-warm: #2c2126;

  --f-banner: 'Olympe Display', 'Playfair Display', Georgia, serif;
  --f-base: 'Olympe Text', 'Outfit', 'Segoe UI', Arial, sans-serif;

  --z-h1: 72px;
  --z-head: 44px;
  --z-lg-2: 28px;
  --z-sub-2: 20px;
  --z-minor: 16px;
  --z-h6: 14px;
  --z-normal: 18px;
  --z-small: 15px;
  --z-xs: 12px;

  --l-snug: 1.08;
  --l-default: 1.5;
  --l-loose: 1.7;
  --w-book: 400;
  --w-semi: 600;
  --w-thick: 800;
  --e-packed: -0.03em;
  --e-default: 0;
  --e-spread: 0.05em;

  --g-hair: 2px;
  --g-tiny: 6px;
  --g-snug: 10px;
  --g-base: 14px;
  --g-wide: 20px;
  --g-roomy: 28px;
  --g-vast: 48px;
  --g-huge: 72px;

  --r-hair: 0;
  --r-tiny: 0;
  --r-snug: 4px;
  --r-base: 12px;
  --r-wide: 24px;
  --r-roomy: 32px;
  --r-vast: 40px;
  --r-huge: 56px;
  --r-pill: 9999px;
  --r-dot: 50%;

  --d-hair: 0 1px 0 rgba(0, 0, 0, 0.1);
  --d-tiny: 0 1px 2px rgba(0, 0, 0, 0.16);
  --d-snug: 0 2px 8px rgba(0, 0, 0, 0.22);
  --d-base: 0 6px 16px rgba(0, 0, 0, 0.28);
  --d-wide: 0 12px 32px rgba(0, 0, 0, 0.34);
  --d-roomy: 0 18px 44px rgba(0, 0, 0, 0.38);
  --d-vast: 0 24px 60px rgba(0, 0, 0, 0.42);
  --d-huge: 0 32px 80px rgba(0, 0, 0, 0.46);

  --b-hair: 1px;
  --b-base: 2px;
  --b-thick: 4px;

  --t-snap: 135ms;
  --t-regular: 250ms;
  --t-slow: 470ms;
  --x-settle: cubic-bezier(0.3, 0.9, 0.34, 0.99);
  --x-launch: cubic-bezier(0.56, 0.1, 0.3, 0.7);
  --x-smooth: cubic-bezier(0.56, 0.1, 0.52, 0.9);
  --x-bounce: cubic-bezier(0.23, 1.4, 0.6, 0.95);

  --v-site: 1120px;
  --v-text: 1120px;
  --v-brief: 570px;
  --v-inset-desktop: 64px;
  --v-inset-tablet: 32px;
  --v-padding-mobile: 20px;

  --h-strip: 34px;
  --h-tall: 64px;
  --h-size-mobile: 56px;
  --h-shell: 98px;
}

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

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

html,
body {
  overflow-x: clip;
}

body {
  background: var(--t-field);
  color: var(--t-letters);
  font-family: var(--f-base);
  font-size: var(--z-normal);
  font-weight: var(--w-book);
  letter-spacing: var(--e-default);
  line-height: var(--l-default);
  margin: 0;
  margin-block-start: var(--h-shell);
  padding: 0;
}

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

h1 {
  font-family: var(--f-banner);
  font-size: clamp(30px, 6vw, var(--z-h1));
  font-weight: var(--w-thick);
  letter-spacing: var(--e-packed);
  line-height: var(--l-snug);
}

h2 {
  font-family: var(--f-banner);
  font-size: clamp(25px, 3.4vw, var(--z-head));
  font-weight: var(--w-semi);
  letter-spacing: var(--e-packed);
  line-height: var(--l-snug);
}

h3 {
  font-family: var(--f-base);
  font-size: var(--z-lg-2);
  font-weight: var(--w-semi);
  line-height: var(--l-snug);
}

p {
  margin: 0;
}

img {
  max-width: 100%;
}

a {
  color: var(--t-beacon);
  text-decoration-color: var(--t-stroke-heavy);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-snap) var(--x-settle), text-decoration-thickness var(--t-snap) var(--x-settle);
}

a:hover {
  color: var(--t-spot-deep);
  text-decoration-color: var(--t-spot-deep);
  text-decoration-thickness: 3px;
}

:focus-visible {
  outline: var(--b-base) solid var(--t-beacon);
  outline-offset: 3px;
}

[id] {
  scroll-margin-block-start: calc(var(--h-shell) + var(--g-base));
}

/* == a11y ================================================================== */
.skip-jump {
  background: var(--t-letters);
  color: var(--t-field);
  inset-inline-start: var(--g-wide);
  padding: var(--g-snug) var(--g-base);
  position: fixed;
  z-index: 200;
}

.skip-jump:not(:focus) {
  inset-block-start: -200px;
}

.skip-jump:focus {
  inset-block-start: var(--g-snug);
}

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

/* == shared shell ========================================================== */
.loggia-core,
.alcove-core,
.piedestal-core,
.vitrail-core,
.belvedere-core,
.tympan-core,
.medaillon-core,
.lutrin-core,
.ardoise-core,
.volume-core,
.carnet-core,
.cahier-core,
.oriel-core,
.galerie-core,
.blason-core {
  margin-inline: auto;
  max-width: calc(var(--v-site) + 2 * var(--v-inset-desktop));
  padding-inline: var(--v-inset-desktop);
  width: 100%;
}

main > section,
main > aside {
  padding-block: var(--g-vast);
}

.loggia,
.alcove,
.piedestal,
.vitrail,
.belvedere,
.tympan,
.medaillon,
.lutrin,
.ardoise,
.volume,
.carnet,
.cahier,
.oriel,
.galerie {
  display: block;
  position: relative;
}

/* == header (HEAD-TIER, sticky) ============================================ */
.arche {
  background: var(--t-field);
  box-shadow: var(--d-base);
  inset-block-start: 0;
  inset-inline: 0;
  position: fixed;
  transition: box-shadow var(--t-regular) var(--x-settle);
  z-index: 100;
}

.arche.is-stuck {
  box-shadow: var(--d-wide);
}

.arche-shell {
  margin-inline: auto;
  max-width: 1440px;
  padding-inline: var(--g-roomy);
  width: 100%;
}

.arche-strip {
  background: var(--t-deep);
  border-block-end: var(--b-hair) solid var(--t-hairline);
}

.arche-strip-row {
  align-items: center;
  display: flex;
  gap: var(--g-base);
  justify-content: space-between;
  min-height: 34px;
}

.arche-advisory,
.arche-desk {
  align-items: center;
  color: var(--t-dim);
  display: flex;
  font-size: var(--z-xs);
  gap: var(--g-tiny);
  letter-spacing: var(--e-spread);
  line-height: var(--l-default);
  margin: 0;
}

.arche-badge {
  background: var(--t-advisory);
  border-radius: var(--r-snug);
  color: var(--t-letters);
  display: inline-flex;
  font-size: var(--z-xs);
  font-weight: var(--w-thick);
  letter-spacing: var(--e-default);
  line-height: 1;
  min-height: 24px;
  padding: var(--g-tiny) var(--g-snug);
  place-items: center;
}

.arche-hint {
  white-space: nowrap;
}

.arche-strip .arche-step {
  color: var(--t-beacon);
}

.arche-bar {
  background: var(--t-field);
}

.arche-row {
  align-items: center;
  display: flex;
  gap: var(--g-wide);
  min-height: 64px;
}

.arche-crest {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  text-decoration: none;
}

.arche-figure {
  display: block;
  height: 56px;
  width: 193px;
}

.arche-opener {
  align-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--g-hair);
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: var(--g-snug);
}

.arche-bun {
  background: var(--t-letters);
  display: block;
  height: 2px;
  width: 22px;
}

.arche-links {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: var(--g-snug);
  min-width: 0;
  overflow: hidden;
}

.arche-list {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--g-snug);
  list-style: none;
  margin: 0;
  padding: 0;
}

.arche-node {
  flex: 0 0 auto;
  position: relative;
}

.arche-list > .arche-node + .arche-node::before {
  color: var(--t-stroke-heavy);
  content: '\00B7';
  inset-block-start: 50%;
  inset-inline-start: -8px;
  line-height: 0;
  position: absolute;
}

.arche-step {
  color: var(--t-letters);
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--e-default);
  min-height: 44px;
  padding-inline: var(--g-tiny);
  position: relative;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
}

.arche-step:hover {
  color: var(--t-letters);
  text-decoration: underline;
  text-decoration-color: var(--t-beacon);
  text-decoration-thickness: 2px;
}

.arche-step[aria-current='page'] {
  color: var(--t-letters);
}

.arche-step[aria-current='page']::after {
  background: var(--t-advisory);
  content: '';
  inset-block: 10px;
  inset-inline-start: -4px;
  position: absolute;
  width: 3px;
}

.arche-extra {
  flex: 0 0 auto;
  position: relative;
}

.arche-more {
  background: none;
  border: var(--b-hair) solid var(--t-stroke-heavy);
  border-radius: var(--r-pill);
  color: var(--t-letters);
  cursor: pointer;
  font-family: var(--f-base);
  font-size: 13px;
  font-weight: 600;
  min-height: 34px;
  padding-inline: var(--g-base);
}

.arche-more:hover {
  background: var(--t-letters);
  color: var(--t-field);
}

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

.arche-pane {
  background: var(--t-layer);
  border: var(--b-hair) solid var(--t-hairline);
  border-radius: var(--r-base);
  box-shadow: var(--d-wide);
  display: none;
  inset-block-start: calc(100% + var(--g-snug));
  inset-inline-end: 0;
  list-style: none;
  margin: 0;
  min-width: 220px;
  padding: var(--g-snug);
  position: absolute;
  z-index: 40;
}

.arche-pane.is-open {
  display: block;
}

.arche-pane .arche-node {
  display: block;
}

.arche-pane .arche-node + .arche-node::before {
  content: none;
}

.arche-pane .arche-step {
  display: flex;
  min-height: 40px;
  white-space: normal;
}

.arche-actions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: var(--g-snug);
}

.arche-quiet {
  align-items: center;
  background: transparent;
  border: var(--b-hair) solid var(--t-letters);
  border-radius: var(--r-pill);
  color: var(--t-letters);
  display: inline-flex;
  font-family: var(--f-banner);
  font-size: var(--z-h6);
  font-weight: var(--w-thick);
  letter-spacing: var(--e-spread);
  min-height: 44px;
  padding-inline: var(--g-wide);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.arche-quiet:hover {
  background: var(--t-letters);
  color: var(--t-field);
}

.arche-drawer {
  background: var(--t-layer);
  border-block-start: var(--b-hair) solid var(--t-hairline);
  display: none;
  max-height: calc(100vh - var(--h-shell));
  overflow-y: auto;
  padding: var(--g-base) var(--v-padding-mobile);
}

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

.arche-drawer-list {
  display: flex;
  flex-direction: column;
  gap: var(--g-hair);
  list-style: none;
  margin: 0;
  padding: 0;
}

.arche-drawer .arche-step {
  display: flex;
  font-size: var(--z-minor);
  min-height: 48px;
  padding-inline: var(--g-snug);
  white-space: normal;
}

/* == hero (HERO-03) ======================================================== */
.loggia {
  background-color: var(--t-field);
  background-image: linear-gradient(180deg, rgba(44, 33, 38, 0.9) 0%, rgba(33, 34, 40, 0.97) 100%), url('/archive-fresh/focus.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--t-letters);
  text-align: center;
}

main > .loggia {
  padding-block: var(--g-huge) var(--g-vast);
}

.loggia-eyebrow {
  color: var(--t-beacon);
  display: block;
  font-size: var(--z-xs);
  letter-spacing: var(--e-spread);
  margin-block-end: var(--g-base);
  text-transform: uppercase;
}

.loggia-subtitle {
  color: var(--t-dim);
  font-size: var(--z-normal);
  line-height: var(--l-loose);
  margin-block: var(--g-base);
  margin-inline: auto;
  max-width: var(--v-brief);
}

.loggia-note {
  color: var(--t-dim);
  display: block;
  font-size: var(--z-xs);
  margin-inline: auto;
  max-width: var(--v-brief);
}

.loggia-push {
  margin-block: var(--g-wide);
}

/* == page header (PHEAD-05) ================================================ */
.alcove {
  border-block-end: var(--b-hair) solid var(--t-hairline);
}

main > .alcove {
  padding-block: var(--g-roomy) var(--g-vast);
}

.alcove-crumbs {
  align-items: center;
  color: var(--t-dim);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--z-xs);
  gap: var(--g-tiny);
  letter-spacing: var(--e-spread);
  margin-block-end: var(--g-base);
  text-transform: uppercase;
}

.alcove-crumbs .alcove-step {
  color: var(--t-beacon);
  text-decoration: none;
}

.alcove-crumbs .alcove-step:hover {
  color: var(--t-spot-deep);
  text-decoration: underline;
}

.alcove-top {
  color: var(--t-letters);
}

.alcove-subtitle {
  color: var(--t-dim);
  line-height: var(--l-loose);
  margin-block-start: var(--g-base);
  max-width: var(--v-text);
}

.alcove-extra {
  color: var(--t-dim);
  font-size: var(--z-small);
  margin-block-start: var(--g-snug);
}

/* == prose (PROSE-04, drop cap) ============================================ */
.piedestal-top {
  margin-block: var(--g-roomy) var(--g-base);
  text-align: center;
}

.piedestal-core > .piedestal-top:first-child {
  margin-block-start: 0;
}

.piedestal-text,
.piedestal-lead {
  color: var(--t-letters);
  line-height: var(--l-loose);
  margin-block-end: var(--g-base);
  max-width: var(--v-text);
}

.piedestal-lead::first-letter {
  color: var(--t-beacon);
  float: inline-start;
  font-family: var(--f-banner);
  font-size: 4.6em;
  font-weight: var(--w-thick);
  line-height: 0.8;
  padding-inline-end: var(--g-snug);
  padding-block-start: var(--g-hair);
}

.piedestal-list {
  color: var(--t-letters);
  line-height: var(--l-loose);
  margin-block: var(--g-snug) var(--g-base);
  max-width: var(--v-text);
  padding-inline-start: var(--g-roomy);
}

.piedestal-list .piedestal-node {
  margin-block-end: var(--g-tiny);
}

.piedestal-step {
  color: var(--t-beacon);
}

.piedestal-plug {
  margin-block: var(--g-wide);
  text-align: center;
}

.piedestal-shot {
  display: block;
  margin-block: var(--g-wide);
  margin-inline: auto;
}

.piedestal-shot-tall {
  max-width: 380px;
}

.piedestal-shot-even {
  max-width: 520px;
}

.piedestal-shot-flat {
  max-width: 760px;
}

.piedestal-figure {
  border-radius: var(--r-base);
  display: block;
  height: auto;
  width: 100%;
}

/* == items grid (GRID-10) ================================================== */
.vitrail-top {
  margin-block-end: var(--g-wide);
}

.vitrail-list {
  display: grid;
  gap: var(--g-base);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.vitrail-node {
  background: var(--t-warm);
  border-radius: var(--r-snug);
  min-height: 180px;
  padding: var(--g-base);
}

.vitrail-glyph {
  color: var(--t-beacon);
  display: block;
  height: 28px;
  margin-block-end: var(--g-snug);
  width: 28px;
}

.vitrail-glyph svg {
  display: block;
  fill: currentColor;
  height: 100%;
  width: 100%;
}

.vitrail-head {
  color: var(--t-letters);
  font-size: var(--z-minor);
  font-weight: var(--w-semi);
  margin-block-end: var(--g-tiny);
}

.vitrail-text {
  color: var(--t-dim);
  font-size: var(--z-small);
  line-height: var(--l-default);
}

/* == reviews (REV-02) ====================================================== */
.belvedere-top {
  margin-block-end: var(--g-wide);
}

.belvedere-list {
  display: block;
}

.belvedere-node {
  border-block-end: var(--b-hair) solid var(--t-hairline);
  margin-block: var(--g-roomy);
  margin-inline: auto;
  max-width: var(--v-brief);
  padding-block: var(--g-wide);
  position: relative;
}

.belvedere-node:last-child {
  border-block-end: 0;
}

.belvedere-quote {
  margin: 0;
  padding-inline-start: var(--g-roomy);
  position: relative;
}

.belvedere-quote::before {
  color: var(--t-beacon);
  content: '\201C';
  font-family: var(--f-banner);
  font-size: 56px;
  inset-block-start: -6px;
  inset-inline-start: -6px;
  line-height: 1;
  opacity: 0.5;
  position: absolute;
}

.belvedere-quote p {
  color: var(--t-letters);
  font-family: var(--f-banner);
  font-size: var(--z-sub-2);
  font-style: italic;
  line-height: var(--l-default);
}

.belvedere-mark {
  align-items: center;
  color: var(--t-dim);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--z-small);
  gap: var(--g-snug);
  margin-block-start: var(--g-snug);
  padding-inline-start: var(--g-roomy);
}

.belvedere-handle {
  color: var(--t-letters);
  font-style: normal;
  font-weight: var(--w-semi);
}

.belvedere-score {
  color: var(--t-beacon);
}

/* == faq (FAQ-08) ========================================================== */
.tympan-top {
  margin-block-end: var(--g-wide);
}

.tympan-box {
  background: var(--t-warm);
  border: var(--b-hair) solid var(--t-hairline);
  border-radius: var(--r-wide);
  padding: var(--g-roomy);
}

.tympan-node {
  border-block-end: var(--b-hair) solid var(--t-hairline);
  box-shadow: inset 4px 0 0 var(--t-beacon);
  padding-inline-start: var(--g-base);
}

.tympan-node:last-child {
  border-block-end: 0;
}

.tympan-ask {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: var(--g-base);
  grid-template-columns: 1fr auto;
  list-style: none;
  padding-block: var(--g-base);
}

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

.tympan-head {
  color: var(--t-letters);
  font-size: var(--z-sub-2);
  font-weight: var(--w-semi);
}

.tympan-sign {
  background: none;
  border-inline-end: var(--b-base) solid var(--t-beacon);
  border-block-end: var(--b-base) solid var(--t-beacon);
  height: 10px;
  transition: transform var(--t-snap) var(--x-settle);
  width: 10px;
}

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

.tympan-content {
  display: grid;
  grid-template-rows: 1fr;
}

.tympan-node[open] .tympan-content {
  animation: tympan-unroll var(--t-regular) var(--x-settle);
}

.tympan-text {
  overflow: hidden;
}

.tympan-text p {
  color: var(--t-dim);
  line-height: var(--l-loose);
  padding-block-end: var(--g-base);
}

@keyframes tympan-unroll {
  from {
    grid-template-rows: 0fr;
    opacity: 0;
  }
  to {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}

/* == data table (TABLE-03) ================================================= */
.medaillon-top {
  margin-block-end: var(--g-wide);
}

.medaillon-scroll {
  width: 100%;
}

.medaillon-grid {
  border-collapse: collapse;
  width: 100%;
}

.medaillon-grid th {
  background: var(--t-deep);
  color: var(--t-letters);
  font-family: var(--f-base);
  font-size: var(--z-small);
  font-weight: var(--w-semi);
  letter-spacing: var(--e-spread);
  padding: var(--g-base);
  text-align: start;
  text-transform: uppercase;
}

.medaillon-grid td {
  background: var(--t-layer);
  border-block-start: var(--b-hair) solid var(--t-hairline);
  color: var(--t-dim);
  font-size: var(--z-small);
  padding: var(--g-base);
  vertical-align: top;
}

/* == cta block (CTA-07) ==================================================== */
.lutrin-block {
  background: var(--t-field);
  border: var(--b-base) solid var(--t-beacon);
  border-radius: var(--r-wide);
  margin-inline: auto;
  max-width: 720px;
  padding: var(--g-roomy);
  text-align: center;
}

.lutrin-mark {
  color: var(--t-beacon);
  display: block;
  font-family: var(--f-banner);
  font-size: clamp(38px, 5vw, var(--z-h1));
  font-weight: var(--w-thick);
  line-height: var(--l-snug);
  margin-block-end: var(--g-snug);
}

.lutrin-top {
  margin-block-end: var(--g-snug);
}

.lutrin-text {
  color: var(--t-dim);
  line-height: var(--l-loose);
  margin-block-end: var(--g-wide);
}

.lutrin-note {
  color: var(--t-dim);
  display: block;
  font-size: var(--z-xs);
  margin-block-start: var(--g-base);
}

/* == inline cta (INLINE-CTA-06) ============================================ */
.ardoise {
  border-block: var(--b-hair) solid var(--t-hairline);
}

main > .ardoise {
  padding-block: var(--g-wide);
}

.ardoise-text {
  color: var(--t-dim);
  margin-inline: auto;
  max-width: var(--v-brief);
  text-align: center;
}

.ardoise-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-snug);
  justify-content: center;
  margin-block-start: var(--g-snug);
}

.ardoise-step {
  align-items: center;
  background: transparent;
  border: var(--b-hair) solid var(--t-stroke-heavy);
  border-radius: var(--r-pill);
  color: var(--t-letters);
  display: inline-flex;
  font-size: var(--z-small);
  min-height: 44px;
  padding-inline: var(--g-wide);
  text-decoration: none;
}

.ardoise-step:hover {
  background: var(--t-layer);
  border-color: var(--t-letters);
  color: var(--t-letters);
}

/* == author byline (BYLINE-05) ============================================= */
.volume {
  background: var(--t-anchor);
}

main > .volume {
  padding-block: var(--g-wide);
}

.volume-core {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-base);
  justify-content: space-between;
}

.volume-who {
  align-items: center;
  display: flex;
  gap: var(--g-base);
}

.volume-face {
  border-radius: var(--r-dot);
  flex-shrink: 0;
  height: 56px;
  object-fit: cover;
  width: 56px;
}

.volume-handle {
  font-weight: var(--w-semi);
}

.volume-handle .volume-step {
  color: var(--t-letters);
}

.volume-hat,
.volume-moment {
  color: var(--t-gradient-mid);
  font-size: var(--z-small);
}

.volume-more {
  align-items: center;
  background: var(--t-anchor);
  border: var(--b-hair) solid var(--t-beacon);
  border-radius: var(--r-pill);
  color: var(--t-letters);
  display: inline-flex;
  font-size: var(--z-small);
  min-height: 44px;
  padding-inline: var(--g-wide);
  text-decoration: none;
}

.volume-more:hover {
  background: var(--t-beacon);
  color: var(--t-anchor);
}

.volume-text {
  display: block;
}

/* == author card (AUTH-02) ================================================= */
.carnet-block {
  margin-inline: auto;
  max-width: 600px;
  text-align: center;
}

.carnet-face {
  border-radius: var(--r-dot);
  display: block;
  height: 140px;
  margin-block-end: var(--g-wide);
  margin-inline: auto;
  object-fit: cover;
  width: 140px;
}

.carnet-top {
  color: var(--t-letters);
  text-align: center;
}

.carnet-hat {
  color: var(--t-beacon);
  font-size: var(--z-small);
  letter-spacing: var(--e-spread);
  text-transform: uppercase;
}

.carnet-handle {
  margin-block: var(--g-snug);
}

.carnet-bio {
  color: var(--t-dim);
  line-height: var(--l-loose);
  margin-block-end: var(--g-base);
}

.carnet-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-tiny);
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.carnet-tags .carnet-node {
  border: var(--b-hair) solid var(--t-stroke-heavy);
  border-radius: var(--r-pill);
  color: var(--t-dim);
  font-size: var(--z-xs);
  padding: var(--g-tiny) var(--g-base);
}

.carnet-articles {
  border-block-start: var(--b-hair) solid var(--t-hairline);
}

.carnet-roll {
  display: grid;
  gap: var(--g-snug);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin-block-start: var(--g-wide);
  padding: 0;
}

.carnet-roll .carnet-node {
  background: var(--t-layer);
  border-radius: var(--r-base);
  padding: var(--g-base);
}

.carnet-roll .carnet-step {
  color: var(--t-letters);
  font-size: var(--z-small);
}

/* == legal (LEGAL-03) ====================================================== */
.cahier-core {
  display: grid;
  gap: var(--g-vast);
  grid-template-columns: 240px minmax(0, 1fr);
}

.cahier-part {
  margin-block-end: var(--g-wide);
}

.cahier-node {
  margin-block-end: var(--g-tiny);
}

.cahier-toc {
  align-self: start;
  background: var(--t-layer);
  border-radius: var(--r-base);
  inset-block-start: calc(var(--h-shell) + var(--g-wide));
  padding: var(--g-base);
  position: sticky;
}

.cahier-head {
  color: var(--t-letters);
  font-family: var(--f-banner);
  font-size: var(--z-minor);
  font-weight: var(--w-semi);
  margin-block-end: var(--g-snug);
}

.cahier-toc .cahier-list {
  font-size: var(--z-small);
  margin: 0;
  padding-inline-start: var(--g-wide);
}

.cahier-toc .cahier-step {
  color: var(--t-dim);
}

.cahier-toc .cahier-step:hover {
  color: var(--t-beacon);
}

.cahier-top {
  margin-block: var(--g-roomy) var(--g-base);
}

.cahier-content > .cahier-top:first-child {
  margin-block-start: 0;
}

.cahier-intro {
  color: var(--t-dim);
  line-height: var(--l-loose);
  margin-block-end: var(--g-wide);
}

.cahier-text {
  color: var(--t-letters);
  line-height: var(--l-loose);
  margin-block-end: var(--g-base);
}

.cahier-help .cahier-list {
  color: var(--t-dim);
  line-height: var(--l-loose);
  padding-inline-start: var(--g-roomy);
}

.cahier-note {
  border-inline-start: var(--b-thick) solid var(--t-advisory);
  color: var(--t-dim);
  font-size: var(--z-small);
  line-height: var(--l-loose);
  margin-block-start: var(--g-wide);
  padding: var(--g-base);
}

.cahier-moment {
  color: var(--t-dim);
  font-size: var(--z-small);
  margin-block-start: var(--g-base);
}

/* == contact form (FORM-04) ================================================ */
.oriel-intro {
  color: var(--t-dim);
  line-height: var(--l-loose);
  margin-block-end: var(--g-wide);
}

.oriel-step {
  color: var(--t-beacon);
}

.oriel-shape {
  display: flex;
  flex-direction: column;
  gap: var(--g-base);
}

.oriel-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-base);
}

.oriel-row .oriel-slot {
  flex: 1 1 240px;
}

.oriel-slot {
  display: flex;
  flex-direction: column;
  gap: var(--g-tiny);
}

.oriel-note {
  color: var(--t-dim);
  font-size: var(--z-small);
}

.oriel-shape input,
.oriel-shape textarea {
  background: var(--t-layer);
  border: var(--b-hair) solid var(--t-stroke-heavy);
  border-radius: var(--r-tiny);
  color: var(--t-letters);
  font-family: var(--f-base);
  font-size: var(--z-minor);
  min-height: 44px;
  padding: var(--g-snug) var(--g-base);
  width: 100%;
}

.oriel-send {
  align-self: flex-start;
  background: var(--t-beacon);
  border: 0;
  border-radius: var(--r-pill);
  color: var(--t-field);
  cursor: pointer;
  font-family: var(--f-banner);
  font-size: var(--z-h6);
  font-weight: var(--w-thick);
  letter-spacing: var(--e-spread);
  min-height: 44px;
  padding-inline: var(--g-roomy);
  text-transform: uppercase;
  transition: background var(--t-snap) var(--x-settle);
}

.oriel-send:hover {
  background: var(--t-spot-deep);
  color: var(--t-field);
}

.oriel-done {
  background: var(--t-anchor);
  border-radius: var(--r-base);
  color: var(--t-letters);
  margin-block-start: var(--g-base);
  padding: var(--g-base);
}

.oriel-mail {
  color: var(--t-dim);
  margin-block-start: var(--g-base);
}

/* == error block (ERR-05) ================================================== */
main > .galerie {
  padding-block: var(--g-huge) var(--g-vast);
  text-align: center;
}

.galerie-code {
  color: var(--t-beacon);
  font-family: var(--f-banner);
  font-size: clamp(56px, 12vw, 120px);
  font-weight: var(--w-thick);
  line-height: var(--l-snug);
}

.galerie-top {
  color: var(--t-letters);
  margin-block-end: var(--g-base);
  position: relative;
}

.galerie-top::before,
.galerie-top::after {
  color: var(--t-beacon);
  content: attr(data-text);
  inset-block-start: -2px;
  inset-inline-start: 2px;
  opacity: 0.35;
  pointer-events: none;
  position: absolute;
}

.galerie-top::after {
  color: var(--t-spot-deep);
  inset-block-start: 2px;
  inset-inline-start: -2px;
}

.galerie-text {
  color: var(--t-dim);
  line-height: var(--l-loose);
  margin-inline: auto;
  max-width: var(--v-brief);
}

.galerie-step {
  align-items: center;
  background: var(--t-field);
  border: var(--b-hair) solid var(--t-letters);
  border-radius: var(--r-pill);
  color: var(--t-letters);
  display: inline-flex;
  margin-block-start: var(--g-wide);
  min-height: 44px;
  padding-inline: var(--g-roomy);
  text-decoration: none;
}

.galerie-step:hover {
  background: var(--t-letters);
  color: var(--t-field);
}

/* == footer (FOOT-06) ====================================================== */
.blason {
  background: var(--t-deep);
  padding-block: var(--g-vast);
}

.blason-manifesto {
  margin-inline: auto;
  max-width: var(--v-brief);
  text-align: center;
}

.blason-top {
  color: var(--t-letters);
  margin-block-end: var(--g-base);
}

.blason-manifesto .blason-step {
  color: var(--t-letters);
  font-family: var(--f-banner);
  font-size: var(--z-minor);
  letter-spacing: var(--e-spread);
  text-decoration: underline;
  text-transform: uppercase;
}

.blason-manifesto .blason-step:hover {
  color: var(--t-beacon);
}

.blason-rule {
  background: var(--t-hairline);
  height: 1px;
  margin-block: var(--g-roomy);
}

.blason-extra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-roomy);
  justify-content: space-between;
}

.blason-crest {
  flex-shrink: 0;
}

.blason-figure {
  display: block;
  height: 44px;
  width: 152px;
}

.blason-links,
.blason-legal {
  flex: 1 1 220px;
}

.blason-head {
  color: var(--t-letters);
  font-family: var(--f-banner);
  font-size: var(--z-h6);
  letter-spacing: var(--e-spread);
  margin-block-end: var(--g-snug);
  text-transform: uppercase;
}

.blason-list {
  columns: 2;
  list-style: none;
  margin: 0;
  padding: 0;
}

.blason-legal .blason-list {
  columns: 1;
}

.blason-node {
  break-inside: avoid;
  margin-block-end: var(--g-tiny);
}

.blason-step {
  color: var(--t-dim);
  font-size: var(--z-small);
  text-decoration: none;
}

.blason-step:hover {
  color: var(--t-letters);
  text-decoration: underline;
}

.blason-fine {
  color: var(--t-dim);
  font-size: var(--z-xs);
  width: 100%;
}

/* == cookie banner (COOK-09) =============================================== */
.cour {
  inset-block-end: var(--g-wide);
  inset-inline-end: auto;
  inset-inline-start: var(--g-wide);
  max-width: min(420px, calc(100vw - 2 * var(--g-wide)));
  position: fixed;
  transition: transform var(--t-slow) var(--x-smooth), visibility var(--t-slow) var(--x-smooth);
  z-index: 90;
}

.cour.is-gone {
  transform: translateX(-160%);
  visibility: hidden;
}

.cour-core {
  background: var(--t-layer);
  border-inline-start: var(--b-thick) solid var(--t-beacon);
  border-end-end-radius: var(--r-snug);
  border-start-end-radius: var(--r-snug);
  box-shadow: var(--d-wide);
  display: flex;
  flex-direction: column;
  gap: var(--g-snug);
  padding: var(--g-wide);
}

.cour-line {
  color: var(--t-letters);
  font-size: var(--z-small);
  line-height: var(--l-default);
}

.cour-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-snug);
  justify-content: flex-start;
}

.cour-accept,
.cour-no {
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: var(--f-base);
  font-size: var(--z-small);
  font-weight: var(--w-semi);
  min-height: 44px;
  padding-inline: var(--g-wide);
}

.cour-accept {
  background: var(--t-beacon);
  border: 0;
  color: var(--t-field);
}

.cour-accept:hover {
  background: var(--t-spot-deep);
  color: var(--t-field);
}

.cour-no {
  background: transparent;
  border: var(--b-hair) solid var(--t-stroke-heavy);
  color: var(--t-letters);
}

.cour-no:hover {
  background: var(--t-field);
  color: var(--t-letters);
}

/* == motion: card lift ===================================================== */
.vitrail-node,
.carnet-roll .carnet-node {
  transition: box-shadow var(--t-regular) var(--x-settle), transform var(--t-regular) var(--x-settle);
}

.vitrail-node:hover,
.carnet-roll .carnet-node:hover {
  box-shadow: var(--d-base);
  transform: translateY(-6px);
}

/* == wide screens ========================================================== */
@media (max-width: 1499px) {
  .arche-shell {
    padding-inline: var(--g-wide);
  }
}

/* == tablet / burger ======================================================= */
@media (max-width: 1139px) {
  .loggia-core,
  .alcove-core,
  .piedestal-core,
  .vitrail-core,
  .belvedere-core,
  .tympan-core,
  .medaillon-core,
  .lutrin-core,
  .ardoise-core,
  .volume-core,
  .carnet-core,
  .cahier-core,
  .oriel-core,
  .galerie-core,
  .blason-core {
    padding-inline: var(--v-inset-tablet);
  }

  .arche-links {
    display: none;
  }

  .arche-opener {
    display: flex;
    margin-inline-start: auto;
    order: 3;
  }

  .arche-crest {
    order: 1;
  }

  .arche-actions {
    order: 2;
  }

  .arche-figure {
    height: 46px;
    width: 159px;
  }

  .vitrail-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .cahier-core {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--g-wide);
  }

  .cahier-part {
  margin-block-end: var(--g-wide);
}

.cahier-node {
  margin-block-end: var(--g-tiny);
}

.cahier-toc {
    position: static;
  }
}

/* == small tablet ========================================================== */
@media (max-width: 779px) {
  :root {
    --z-h1: 40px;
    --z-head: 30px;
    --z-lg-2: 22px;
    --z-sub-2: 18px;
    --z-minor: 14px;
    --z-h6: 12px;
    --z-normal: 17px;
    --z-small: 14px;
    --z-xs: 11px;
  }

  .loggia-core,
  .alcove-core,
  .piedestal-core,
  .vitrail-core,
  .belvedere-core,
  .tympan-core,
  .medaillon-core,
  .lutrin-core,
  .ardoise-core,
  .volume-core,
  .carnet-core,
  .cahier-core,
  .oriel-core,
  .galerie-core,
  .blason-core {
    padding-inline: var(--v-padding-mobile);
  }

  main > section,
  main > aside {
    padding-block: var(--g-roomy);
  }

  main > .loggia,
  main > .galerie {
    padding-block: var(--g-vast) var(--g-roomy);
  }

  .arche-shell {
    padding-inline: var(--v-padding-mobile);
  }

  .arche-strip-row {
    flex-wrap: wrap;
    gap: var(--g-tiny);
    padding-block: var(--g-tiny);
  }

  .arche-desk {
    display: none;
  }

  .arche-row {
    min-height: 56px;
  }

  .arche-figure {
    height: 40px;
    width: 138px;
  }

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

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

  .belvedere-quote::before {
    font-size: 40px;
  }

  .volume-core {
    align-items: flex-start;
    flex-direction: column;
  }

  .volume-more {
    width: 100%;
    justify-content: center;
  }

  .blason-extra {
    flex-direction: column;
    gap: var(--g-wide);
  }

  .blason-list {
    columns: 1;
  }

  .tympan-box {
    padding: var(--g-base);
  }

  .piedestal-shot-tall,
  .piedestal-shot-even,
  .piedestal-shot-flat {
    max-width: 100%;
  }

  .piedestal-lead::first-letter {
    font-size: 3.4em;
  }
}

/* == phone ================================================================= */
@media (max-width: 719px) {
  .cour {
    inset-inline: var(--g-snug);
    max-width: none;
  }

  .cour-core {
    gap: var(--g-tiny);
    padding: var(--g-base);
  }

  .cour-line {
    font-size: 13px;
    line-height: var(--l-default);
  }

  .cour-accept,
  .cour-no {
    flex: 1 1 auto;
    font-size: var(--z-xs);
    padding-inline: var(--g-base);
  }
}

@media (max-width: 539px) {
  .arche-hint {
    display: none;
  }

  .arche-row {
    gap: var(--g-snug);
  }

  .arche-figure {
    height: 34px;
    width: 117px;
  }

  .arche-actions .imposte-lead {
    font-size: var(--z-xs);
    padding-inline: var(--g-snug);
  }

  .arche-crest {
    margin-inline-end: auto;
  }

  .arche-actions {
    order: 3;
  }

  .arche-opener {
    margin-inline-start: 0;
    order: 4;
    padding-inline: var(--g-tiny);
  }

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

  .medaillon-grid,
  .medaillon-grid tbody,
  .medaillon-grid tr,
  .medaillon-grid td {
    display: block;
    width: 100%;
  }

  .medaillon-grid thead {
    display: none;
  }

  .medaillon-grid tr {
    background: var(--t-layer);
    border-radius: var(--r-base);
    margin-block-end: var(--g-base);
    padding: var(--g-base);
  }

  .medaillon-grid td {
    background: transparent;
    border-block-start: 0;
    padding: var(--g-tiny) 0;
  }

  .medaillon-grid td::before {
    color: var(--t-beacon);
    content: attr(data-label);
    display: block;
    font-size: var(--z-xs);
    letter-spacing: var(--e-spread);
    text-transform: uppercase;
  }

  .arche-strip-row {
    justify-content: flex-start;
  }

  .arche-advisory {
    flex-wrap: wrap;
  }

  .oriel-row {
    flex-direction: column;
  }
}

@media (max-width: 374px) {
  .arche-crest {
    margin-inline-end: 0;
  }

  .arche-row {
    flex-wrap: wrap;
    padding-block: var(--g-tiny);
    row-gap: var(--g-tiny);
  }

  .arche-actions {
    order: 4;
    width: 100%;
  }

  .arche-actions .imposte-lead {
    width: 100%;
  }
}

/* == reduced motion ======================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* == offer buttons (scripts/cta-style.mjs) ================================= */
.arche-push {
  flex-shrink: 0;
}

.loggia-push,
.lutrin-push,
.piedestal-push {
  margin-block-start: var(--g-snug);
}

.ardoise-push {
  flex: 0 0 auto;
}

.imposte-lead{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--g-wide);min-height:44px;border-radius:var(--r-pill);border:var(--b-hair) solid var(--t-letters);font-size:var(--z-h6);font-weight:var(--w-thick);letter-spacing:var(--e-spread)}
.imposte-lead{
  background:#0D9488;color:#191A1F;text-decoration:none;text-transform:uppercase;
  transition:background var(--t-snap) var(--x-settle),box-shadow var(--t-snap) var(--x-settle);}
.imposte-lead.imposte-lead{color:#191A1F;text-decoration:none;}
.imposte-lead:hover{background:#0F766E;color:#FFFFFF;animation:none}
.imposte-lead.imposte-lead:hover{color:#FFFFFF;text-decoration:none}
.imposte-lead:hover::after{animation:none}
.imposte-lead:active{background:#115E59;color:#FFFFFF}
.imposte-lead:focus-visible{outline:3px solid #191A1F;outline-offset:3px}
@keyframes imposte-glow{0%{transform:rotate(0)}17.500%{transform:rotate(0.4deg)}35.000%,100%{transform:rotate(0)}}
.imposte-lead{animation:imposte-glow 2s cubic-bezier(.25,.05,.35,1) infinite;transform-origin:50% 90%}
@media (prefers-reduced-motion:reduce){.imposte-lead,.imposte-lead::after{animation:none!important;transition:none!important}}

@media (max-width: 1175px) {
  .arche-links,
  .arche-list,
  .arche-extra { display: none !important; }
  .arche-opener { display: flex !important; }
}