/* Storiarium — Le Tyran d'Aldenar
   Editorial dark-fantasy literary site
*/

:root {
  /* Palette — noir editorial */
  --ink: #0d0b09;            /* near-black, the ink */
  --ink-2: #1a1714;          /* slightly lifted */
  --ink-3: #2a2521;          /* divider/frame */
  --paper: #f4ede0;          /* warm ivory */
  --paper-2: #ebe2d1;        /* slightly toned */
  --paper-3: #ddd1ba;        /* muted parchment */
  --blood: #8b1e2b;          /* dried-blood accent — sparse, used on light bg only */
  --blood-deep: #5e1419;
  --blood-on-dark: #d96b78;  /* readable accent for ink-bg, AA on --ink (>= 5.4:1) */
  --brass: #b8a787;          /* aged brass — bumped for AA on --ink (>= 6.4:1) */
  --ash: #8a8175;            /* mid grey-warm — bumped for AA on --ink */
  --smoke: #3a3530;          /* darker frame */

  /* Type */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-body: 'Inter Tight', 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Spacing rhythm */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  --measure: 62ch;          /* readable line length */
  --gutter: clamp(1.5rem, 4vw, 4rem);
  --max-w: 1440px;
}

[data-pairing="modern"] {
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-density="compact"] {
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 3.5rem;
  --space-7: 5rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: 'kern', 'liga', 'calt';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Typography primitives ---------- */

.serif { font-family: var(--font-display); }
.mono  { font-family: var(--font-mono); }

.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--brass);
  font-weight: 500;
}

.eyebrow .dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--blood-on-dark);
  border-radius: 50%;
  margin: 0 0.6em;
  vertical-align: middle;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

.display-xxl {
  font-size: clamp(3.5rem, 9vw, 8.5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.025em;
}

.display-xl {
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.02em;
}

.display-l {
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  font-weight: 400;
  line-height: 1.05;
}

.display-m {
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 400;
}

em, .italic { font-style: italic; }

.lede {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.5;
  font-style: italic;
  color: var(--paper-2);
  font-weight: 400;
  max-width: 38ch;
}

p { margin: 0 0 1em 0; max-width: var(--measure); }

.muted { color: var(--ash); }
.dim   { color: rgba(244, 237, 224, 0.6); }
.faint { color: rgba(244, 237, 224, 0.42); }
.blood { color: var(--blood); }
.brass { color: var(--brass); }
.paper { color: var(--paper); }

/* ---------- Layout primitives ---------- */

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.rule {
  border: 0;
  height: 1px;
  background: rgba(244, 237, 224, 0.14);
  margin: 0;
}

.rule-thick {
  height: 1px;
  background: var(--paper);
  opacity: 0.6;
}

.section {
  padding: var(--space-7) 0;
  border-top: 1px solid rgba(244, 237, 224, 0.08);
}

.section--no-top { border-top: 0; }

/* ---------- Reveal animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s cubic-bezier(.2,.6,.2,1), transform 1.1s cubic-bezier(.2,.6,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Buttons / links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding: 1em 1.6em;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--paper);
  background: transparent;
  color: var(--paper);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.btn:hover {
  background: var(--paper);
  color: var(--ink);
}
.btn--primary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn--primary:hover {
  background: var(--blood);
  color: var(--paper);
  border-color: var(--blood);
}
.btn--ghost {
  border-color: rgba(244, 237, 224, 0.35);
  color: var(--paper);
}
.btn--ghost:hover {
  border-color: var(--paper);
  background: transparent;
  color: var(--paper);
}

.link-arrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 237, 224, 0.3);
  padding-bottom: 4px;
  transition: border-color 0.3s, color 0.3s;
}
.link-arrow:hover {
  color: var(--blood-on-dark);
  border-color: var(--blood-on-dark);
}
.link-arrow:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

/* ---------- Header / nav ---------- */

[x-cloak] { display: none !important; }

/* V1.7.154 — Transition douce home → /play (recommandation marcus +
   web-wealth-strategist). Au clic sur un bouton .btn--page-transition,
   on fade le body en 300ms avant de naviguer. Le visiteur ressent
   une continuité ("on m'embarque dans le récit") au lieu d'un hard
   navigate. Skip si prefers-reduced-motion. */
body {
  transition: opacity 300ms ease;
}
body.is-leaving {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body, body.is-leaving { transition: none; opacity: 1; }
}

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(13, 11, 9, 0.0);
  backdrop-filter: blur(0px);
  transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
/* V1.7.147 — sur mobile, le header reste TOUJOURS opaque pour que le bouton
   burger ne soit pas illisible avec du texte qui passe derrière. La règle
   s'applique avant le breakpoint desktop pour ne pas être surchargée. */
@media (max-width: 1023px) {
  .site-header {
    background: rgba(13, 11, 9, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: rgba(244, 237, 224, 0.08);
  }
}
.site-header.is-scrolled {
  background: rgba(13, 11, 9, 0.85);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(244, 237, 224, 0.08);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  text-decoration: none;
  color: var(--paper);
  flex-shrink: 0;
}
.brand__mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.brand__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}
.nav {
  display: flex;
  gap: 2.2rem;
  align-items: center;
}
.nav a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-2);
  text-decoration: none;
  transition: color 0.2s;
}
.nav a:hover, .nav a.is-active { color: var(--blood-on-dark); }
.nav a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
}

.nav__cta {
  border: 1px solid var(--paper);
  padding: 0.7em 1.1em;
  color: var(--paper) !important;
}
.nav__cta:hover {
  background: var(--paper);
  color: var(--ink) !important;
}

/* V1.7.163 — Dropdown profil dans le marketing header (auth) */
.nav-user {
  position: relative;
  margin-left: 0.4rem;
}
.nav-user summary.nav-user__trigger {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  color: var(--paper);
  border-radius: 999px;
  border: 1px solid rgba(244, 237, 224, 0.18);
  font: inherit;
  font-size: 0.85rem;
}
.nav-user summary.nav-user__trigger::-webkit-details-marker { display: none; }
.nav-user summary.nav-user__trigger:hover,
.nav-user[open] summary.nav-user__trigger {
  background: rgba(232, 198, 116, 0.1);
  border-color: var(--brass);
  color: var(--brass);
}
.nav-user__name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user__chevron { font-size: 0.7em; transition: transform 200ms ease; }
.nav-user[open] .nav-user__chevron { transform: rotate(180deg); }
.nav-user__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--ink);
  border: 1px solid rgba(232, 198, 116, 0.32);
  border-radius: 6px;
  padding: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-user__item {
  display: block;
  width: 100%;
  padding: 0.6rem 0.85rem;
  color: var(--paper);
  background: none;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nav-user__item:hover,
.nav-user__item:focus-visible {
  background: rgba(232, 198, 116, 0.12);
  color: var(--brass);
  outline: none;
}
.nav-user__item--danger { color: rgba(217, 107, 120, 0.85); }
.nav-user__item--danger:hover { color: #d96b78; background: rgba(217, 107, 120, 0.1); }
.nav-user__form { margin: 0; }

/* V1.7.163 — Liste user en mobile (sans dropdown — visible direct) */
.mobile-nav__user-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid rgba(244, 237, 224, 0.12);
  display: flex;
  flex-direction: column;
}
.mobile-nav__user-list a,
.mobile-nav__user-logout {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.85rem 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--paper);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(244, 237, 224, 0.08);
  text-decoration: none;
  cursor: pointer;
}
.mobile-nav__user-list a:hover,
.mobile-nav__user-list a:focus-visible {
  color: var(--brass);
}
.mobile-nav__user-logout {
  color: rgba(217, 107, 120, 0.78);
  border-bottom: 0;
}
.mobile-nav__user-logout:hover { color: #d96b78; }

/* ---------- Page numbering / marginalia chrome ---------- */

.folio {
  position: fixed;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  z-index: 40;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 1.2em;
  white-space: nowrap;
}
.folio__divider { display: none; }
.folio__divider {
  width: 1px;
  height: 28px;
  background: rgba(154, 137, 112, 0.5);
  margin: 0.4em 0 0;
}

/* ---------- Hero ---------- */

.hero {
  padding-top: 7rem;
  padding-bottom: var(--space-5);
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
  min-height: 78vh;
}
.hero__type {
  padding-bottom: var(--space-3);
}
.hero__chapter {
  display: flex;
  align-items: center;
  gap: 1.2em;
  margin-bottom: var(--space-4);
}
.hero__chapter--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.hero__chapter--stack .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.hero__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.1;
  color: var(--brass);
  letter-spacing: -0.005em;
  display: inline-block;
  padding-top: 0.1rem;
}
.hero__tagline em { color: var(--brass); font-style: italic; }

.btn__sep {
  display: inline-block;
  margin: 0 0.4em;
  opacity: 0.55;
  font-weight: 400;
}
.hero__chapter::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(244, 237, 224, 0.2);
}
.hero__chapter--stack::after { display: none; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.4vw, 5.4rem);
  line-height: 1.0;
  letter-spacing: -0.022em;
  margin: 0 0 var(--space-3);
}
.hero__title em {
  color: var(--paper);
  font-style: italic;
}
.hero__title .ampersand {
  color: var(--blood);
  font-style: italic;
  font-weight: 400;
}
.hero__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.55;
  color: var(--paper-2);
  max-width: 44ch;
  margin-bottom: var(--space-4);
}
.hero__cta {
  display: flex;
  gap: 1rem;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.hero__meta {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  gap: 2.5rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  flex-wrap: wrap;
}
.hero__meta li { margin: 0; }
.hero__meta strong {
  display: block;
  color: var(--paper);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.hero__art {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--ink-2);
  overflow: hidden;
}
.hero__art img,
.hero__art video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.05) saturate(0.85) brightness(0.92);
  transition: transform 8s cubic-bezier(.2,.6,.2,1);
}
.hero__art:hover img { transform: scale(1.04); }

/* WCAG 2.2 — prefers-reduced-motion: pas d'animation video, on retombe sur le poster */
@media (prefers-reduced-motion: reduce) {
  .hero__art video { animation: none !important; }
  .hero__art:hover img,
  .hero__art:hover video { transform: none; }
}

.hero__caption {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  right: 1.25rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

.hero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.hero__scroll-line {
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--brass);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--paper);
  animation: scrollDash 2.6s ease-in-out infinite;
  transform-origin: left;
}
@keyframes scrollDash {
  0%   { transform: scaleX(0); transform-origin: left; }
  50%  { transform: scaleX(1); transform-origin: left; }
  51%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* ---------- Section header utility ---------- */

.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  align-items: end;
}
.section-head__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 20ch;
}
.section-head p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--paper-2);
  max-width: 50ch;
}

/* ---------- Excerpt block (book page) ---------- */

.excerpt {
  display: grid;
  grid-template-columns: 0.7fr 2.4fr 0.7fr;
  align-items: start;
  gap: 0;
  padding: var(--space-5) 0;
  position: relative;
}
.excerpt__page {
  border-top: 1px solid rgba(244, 237, 224, 0.18);
  border-bottom: 1px solid rgba(244, 237, 224, 0.18);
  padding: var(--space-5) var(--space-4);
  position: relative;
}
.excerpt__quote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.7vw, 1.65rem);
  line-height: 1.5;
  font-style: italic;
  color: var(--paper);
  font-weight: 400;
  text-wrap: pretty;
  margin: 0;
}
.excerpt__quote::before {
  content: '«';
  display: inline-block;
  font-size: 1.4em;
  color: var(--blood-on-dark);
  margin-right: 0.15em;
  vertical-align: -0.05em;
}
.excerpt__quote::after {
  content: '»';
  font-size: 1.4em;
  color: var(--blood-on-dark);
  margin-left: 0.1em;
  vertical-align: -0.05em;
}
.excerpt__source {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.excerpt__margin {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash);
  align-self: start;
  padding-top: var(--space-5);
}
.excerpt__margin--right {
  text-align: right;
}

/* ---------- Pillars (3 columns) ---------- */

.pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(244, 237, 224, 0.18);
  border-bottom: 1px solid rgba(244, 237, 224, 0.18);
}
.pillar {
  padding: var(--space-4) var(--space-3) var(--space-4) 0;
  border-right: 1px solid rgba(244, 237, 224, 0.12);
  margin: 0;
}
.pillar:last-child { border-right: 0; }
.pillar:not(:first-child) { padding-left: var(--space-3); }
.pillar__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--blood-on-dark);
  margin-bottom: var(--space-3);
}
.pillar__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  font-weight: 500;
}
.pillar__title em { color: var(--paper); }
.pillar__body {
  color: var(--paper-2);
  font-size: 0.97rem;
  line-height: 1.6;
}

/* ---------- Character grid ---------- */

.characters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.characters > li { margin: 0; }
.char-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--ink-2);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(244, 237, 224, 0.06);
  transition: border-color 0.4s;
}
.char-card:hover { border-color: rgba(244, 237, 224, 0.25); }
.char-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--ink-3);
}
.char-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: grayscale(0.15) contrast(1.05) brightness(0.85);
  transition: transform 1.2s cubic-bezier(.2,.6,.2,1), filter 0.6s;
}
.char-card:hover .char-card__media img {
  transform: scale(1.06);
  filter: grayscale(0) contrast(1.05) brightness(1);
}
.char-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(13,11,9,.85) 100%);
  pointer-events: none;
}
.char-card__num {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--paper);
  z-index: 2;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.char-card__body {
  padding: 1.4rem 1.4rem 1.6rem;
}
.char-card__name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}
.char-card__epithet {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--paper-2);
  margin-bottom: 1rem;
}
.char-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--paper);
  border-left: 1px solid var(--blood);
  padding-left: 0.9rem;
  line-height: 1.45;
  min-height: 4.2em;
}
.char-card__more {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(244, 237, 224, 0.1);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}
.char-card__more .arrow {
  transition: transform 0.4s;
}
.char-card:hover .char-card__more .arrow { transform: translateX(6px); color: var(--blood-on-dark); }
.char-card:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
  border-color: var(--paper);
}

/* Image placeholder (striped) */
.placeholder {
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(244,237,224,0.04) 0px,
      rgba(244,237,224,0.04) 8px,
      rgba(244,237,224,0.07) 8px,
      rgba(244,237,224,0.07) 16px
    ),
    var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(244,237,224,0.4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
  position: relative;
}
.placeholder::before {
  content: '';
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(244,237,224,0.12);
}

/* ---------- Manifesto block ---------- */

.manifesto {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-5);
  align-items: start;
}
.manifesto__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}
.manifesto__body {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.55;
  color: var(--paper);
  font-weight: 400;
  text-wrap: pretty;
  max-width: 60ch;
}
.manifesto__body em { color: var(--brass); font-style: italic; }
.manifesto__sig {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--paper-2);
}

/* ---------- Journal ---------- */

.journal {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.journal__filters {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.journal__filter {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.55em 1em;
  background: transparent;
  color: var(--paper-2);
  border: 1px solid rgba(244, 237, 224, 0.18);
  cursor: pointer;
  transition: all 0.25s;
}
.journal__filter:hover { border-color: var(--paper); color: var(--paper); }
.journal__filter.is-active {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.journal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(244, 237, 224, 0.18);
}
.journal__list > li { margin: 0; }
.journal__list > li.is-hidden { display: none; }
.journal__entry {
  display: grid;
  grid-template-columns: 140px 90px 1fr auto;
  gap: 2rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid rgba(244, 237, 224, 0.1);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.4s, transform 0.5s;
}
.journal__entry.is-hidden {
  display: none;
}
.journal__entry:hover { background: rgba(244,237,224,0.02); }
.journal__date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}
.journal__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-block;
  padding: 0.35em 0.7em;
  border: 1px solid currentColor;
  width: fit-content;
}
.tag-feat    { color: #b8d4a8; }
.tag-fix     { color: #d4847a; }
.tag-lore    { color: var(--brass); }
.tag-balance { color: #8aa9c4; }
.tag-tech    { color: #a8a39a; }

.journal__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.journal__title em { color: var(--paper-2); font-style: italic; font-size: 0.85em; display: block; margin-top: 4px; }
.journal__more {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--paper);
  white-space: nowrap;
}
.journal__entry:hover .journal__more { color: var(--blood-on-dark); }
.journal__entry:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

/* ---------- Beta CTA ---------- */

.beta {
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-7) 0;
  position: relative;
}
.beta__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-5);
  align-items: center;
}
.beta__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.beta__title em { color: var(--blood); font-style: italic; }
.beta__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--smoke);
  max-width: 38ch;
  margin-bottom: var(--space-4);
}
.beta__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  flex-wrap: wrap;
}
.beta__points li {
  margin: 0;
  position: relative;
  padding-left: 0.9rem;
}
.beta__points li::before {
  content: '·';
  position: absolute;
  left: 0;
  top: 0;
}
.beta__form {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-4);
}
.beta__form-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
  margin-bottom: 0.7rem;
}
.beta__input-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--paper);
  padding-bottom: 0.6rem;
}
.beta__input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  padding: 0.4rem 0;
  outline: none;
}
.beta__input::placeholder { color: rgba(244,237,224,0.3); }
.beta__submit {
  background: var(--blood);
  color: var(--paper);
  border: 0;
  padding: 0 1.6rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s;
}
.beta__submit:hover { background: var(--blood-deep); }
.beta__check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 12px;
  color: rgba(244,237,224,0.55);
  line-height: 1.5;
  margin-top: 1rem;
}
.beta__check input { margin-top: 4px; accent-color: var(--blood); }
.beta__counter {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(244,237,224,0.18);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--brass);
  text-transform: uppercase;
}
.beta__counter strong { color: var(--paper); font-size: 1.1em; }

/* ---------- Contact section ---------- */

.contact {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-7) 0;
  border-top: 1px solid rgba(244, 237, 224, 0.1);
}
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-5);
  align-items: start;
}
.contact__intro h2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0.6rem 0 1.4rem;
  font-weight: 400;
  text-wrap: balance;
}
.contact__intro h2 em { color: var(--paper); font-style: italic; }
.contact__intro p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--paper-2);
  max-width: 38ch;
}
.contact__channels {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.contact__channels li { margin: 0; }
.contact__channel {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  padding: 0.7em 0;
  border-bottom: 1px solid rgba(244, 237, 224, 0.18);
  transition: color 0.2s, border-color 0.2s;
}
.contact__channel:hover {
  color: var(--blood-on-dark);
  border-color: var(--blood-on-dark);
}
.contact__channel:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
}
.contact__channel-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.contact__form {
  display: grid;
  gap: 1.2rem;
}
.contact__field {
  display: grid;
  gap: 0.4rem;
}
.contact__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
}
.contact__label .req {
  color: var(--blood-on-dark);
  margin-left: 0.3em;
}
.contact__input,
.contact__textarea,
.contact__select {
  background: transparent;
  color: var(--paper);
  border: 0;
  border-bottom: 1px solid rgba(244, 237, 224, 0.3);
  padding: 0.7rem 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}
.contact__textarea {
  resize: vertical;
  min-height: 8rem;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
}
.contact__select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--paper-2) 50%),
                    linear-gradient(135deg, var(--paper-2) 50%, transparent 50%);
  background-position: calc(100% - 14px) 1.1rem, calc(100% - 8px) 1.1rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 1rem;
  padding-right: 2rem;
}
.contact__select option { background: var(--ink); color: var(--paper); }
.contact__input:focus,
.contact__textarea:focus,
.contact__select:focus {
  border-bottom-color: var(--paper);
}
.contact__input:focus-visible,
.contact__textarea:focus-visible,
.contact__select:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
}
.contact__field--invalid .contact__input,
.contact__field--invalid .contact__textarea,
.contact__field--invalid .contact__select {
  border-bottom-color: var(--blood-on-dark);
  border-bottom-width: 2px;
}
.contact__error {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--blood-on-dark);
  text-transform: none;
  margin: 0;
}
.contact__check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--paper-2);
  line-height: 1.5;
}
.contact__check input {
  margin-top: 4px;
  accent-color: var(--blood-on-dark);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.contact__submit {
  justify-self: start;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper);
  padding: 1em 1.8em;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.contact__submit:hover {
  background: var(--blood-on-dark);
  border-color: var(--blood-on-dark);
  color: var(--ink);
}
.contact__submit:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
}

/* Error summary box (above form) */
.contact__errors {
  border: 1px solid var(--blood-on-dark);
  background: rgba(217, 107, 120, 0.08);
  padding: 1.2rem 1.4rem;
  margin-bottom: 0.4rem;
}
.contact__errors-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blood-on-dark);
  margin: 0 0 0.7rem;
  font-weight: 500;
}
.contact__errors-list {
  list-style: disc;
  padding-left: 1.3rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.contact__errors-list a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact__errors-list a:hover { color: var(--blood-on-dark); }
.contact__errors-list a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}
.contact__success {
  border: 1px solid var(--paper);
  padding: 1.2rem 1.4rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--paper);
}

@media (max-width: 800px) {
  .contact__grid { grid-template-columns: 1fr; }
}

/* ---------- Skip link (a11y) ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  padding: 0.8rem 1.2rem;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 1rem;
  top: 1rem;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------- Footer LinkedIn ---------- */

.footer__social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.2rem;
  list-style: none;
  padding: 0;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(244, 237, 224, 0.25);
  color: var(--paper-2);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  margin: 0;
}
.footer__social a:hover {
  color: var(--blood-on-dark);
  border-color: var(--blood-on-dark);
}
.footer__social a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}
.footer__social svg {
  width: 16px;
  height: 16px;
}

/* ---------- Footer ---------- */

.footer {
  padding: var(--space-5) 0 var(--space-4);
  border-top: 1px solid rgba(244, 237, 224, 0.1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: var(--space-4);
}
.footer__col h2 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--paper);
  margin: 0 0 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
}
.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.footer__col li { margin: 0; }
.footer__col a {
  display: block;
  color: var(--paper-2);
  text-decoration: none;
  letter-spacing: 0.12em;
  text-transform: none;
  font-size: 12px;
}
.footer__col a:hover { color: var(--blood-on-dark); }
.footer__col a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(244, 237, 224, 0.08);
  flex-wrap: wrap;
  gap: 1rem;
}
.footer__brand {
  font-family: var(--font-display);
  font-size: 2rem;
  font-style: italic;
  color: var(--paper);
  margin: 0 0 0.6rem;
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.footer__tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--paper-2);
  text-transform: none;
  letter-spacing: 0;
  max-width: 32ch;
  margin: 0;
}

/* ---------- Game page specific ---------- */

.game-hero {
  position: relative;
  min-height: 95vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--space-5);
  padding-top: 8rem;
  overflow: hidden;
}
.game-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.game-hero__bg::before,
.game-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
}
.game-hero__bg::before {
  background:
    radial-gradient(circle at 30% 60%, rgba(139,30,43,0.15), transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(154,137,112,0.08), transparent 50%),
    var(--ink);
}
.game-hero__bg::after {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(244,237,224,0.014) 0px,
      rgba(244,237,224,0.014) 1px,
      transparent 1px,
      transparent 4px
    );
  opacity: 0.7;
}
.game-hero__content {
  position: relative;
  z-index: 1;
  max-width: 70ch;
}
.game-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 8vw, 7rem);
  line-height: 0.95;
  margin: var(--space-3) 0;
  letter-spacing: -0.02em;
}
.game-hero__title em { font-style: italic; color: var(--blood); }
.game-hero__tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  color: var(--paper-2);
  max-width: 38ch;
  margin-bottom: var(--space-4);
}

/* Story long-form */
.story {
  max-width: 64ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.65;
  color: var(--paper);
}
.story p { max-width: none; margin-bottom: 1.5em; }
.story p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 5em;
  float: left;
  line-height: 0.9;
  padding-right: 0.12em;
  padding-top: 0.05em;
  color: var(--blood);
  font-weight: 500;
}
.story em { color: var(--brass); font-style: italic; }

/* 3 excerpts row */
.scenes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(244, 237, 224, 0.18);
}
.scene {
  padding: var(--space-4) var(--space-3);
  border-right: 1px solid rgba(244, 237, 224, 0.12);
  margin: 0;
}
.scene:last-child { border-right: 0; }
.scene__type {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--blood-on-dark);
  margin-bottom: var(--space-3);
}
.scene__quote {
  margin: 0;
  border: 0;
  padding: 0;
}
.scene__context {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--brass);
  margin-bottom: var(--space-2);
  font-style: normal;
  text-transform: uppercase;
}
.scene__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--paper);
}

/* Mechanics 2x2 */
.mechs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(244, 237, 224, 0.18);
  border-left: 1px solid rgba(244, 237, 224, 0.18);
}
.mech {
  padding: var(--space-4);
  border-right: 1px solid rgba(244, 237, 224, 0.18);
  border-bottom: 1px solid rgba(244, 237, 224, 0.18);
  margin: 0;
}
.mech__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--blood-on-dark);
  margin-bottom: var(--space-3);
}
.mech__title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: 500;
}
.mech__body { color: var(--paper-2); font-size: 0.97rem; }

/* ---------- Character page ---------- */

.char-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 95vh;
  padding-top: 6rem;
}
.char-hero__media {
  position: relative;
  background: var(--ink-2);
  overflow: hidden;
}
.char-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.char-hero__type {
  padding: var(--space-5) var(--space-4) var(--space-5) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.char-hero__crumbs {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--space-3);
}
.char-hero__crumbs a { color: var(--paper-2); text-decoration: none; }
.char-hero__crumbs a:hover { color: var(--blood); }
.char-hero__name {
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.025em;
  margin-bottom: 0.4rem;
  font-weight: 400;
}
.char-hero__epithet {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  color: var(--blood);
  margin-bottom: var(--space-4);
  letter-spacing: -0.005em;
}
.char-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  border-top: 1px solid rgba(244,237,224,0.18);
  border-bottom: 1px solid rgba(244,237,224,0.18);
  padding: 1.2rem 0;
  margin-bottom: var(--space-3);
}
.char-fact {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}
.char-fact strong {
  display: block;
  color: var(--paper);
  font-size: 14px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  font-weight: 500;
}
.char-hero__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.4;
  color: var(--paper-2);
  margin-bottom: var(--space-3);
  max-width: 32ch;
}
.char-hero__quote::before { content: '«  '; color: var(--blood); }
.char-hero__quote::after  { content: '  »'; color: var(--blood); }
.char-hero__listen {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
  border-bottom: 1px solid rgba(244,237,224,0.3);
  padding-bottom: 4px;
  cursor: pointer;
  background: none;
  border-top: 0; border-left: 0; border-right: 0;
  border-bottom-style: solid;
  width: fit-content;
}
.char-hero__listen:hover { color: var(--blood); border-color: var(--blood); }

.char-section {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-top: 1px solid rgba(244,237,224,0.12);
  align-items: start;
}
.char-section__head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  position: sticky;
  top: 6rem;
}
.char-section__head .num {
  display: block;
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--blood);
  margin-bottom: 0.4rem;
  font-style: italic;
}
.char-section__body {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.65;
  color: var(--paper);
  max-width: 56ch;
}
.char-section__body p { margin-bottom: 1.4em; max-width: none; }
.char-section__body em { color: var(--brass); font-style: italic; }

.char-roles {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.char-role {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(244,237,224,0.1);
  align-items: baseline;
}
.char-role:last-child { border-bottom: 0; }
.char-role__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blood);
}
.char-role__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--paper);
}

.char-related {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.char-rel {
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 1rem;
  border: 1px solid rgba(244,237,224,0.12);
  transition: border-color 0.3s, background 0.3s;
}
.char-rel:hover { border-color: var(--paper); background: rgba(244,237,224,0.02); }
.char-rel__name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: 0.2rem;
}
.char-rel__role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}

/* ---------- Marquee strip ---------- */
.strip {
  border-top: 1px solid rgba(244, 237, 224, 0.18);
  border-bottom: 1px solid rgba(244, 237, 224, 0.18);
  overflow: hidden;
  padding: 1rem 0;
}
.strip__inner {
  display: flex;
  gap: 4rem;
  white-space: nowrap;
  animation: marquee 60s linear infinite;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--paper-2);
}
.strip__inner span { display: inline-flex; align-items: center; gap: 4rem; }
.strip__inner .dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--blood);
  border-radius: 50%;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Tweaks panel adjustments */
[data-tweaks-host] *, [data-tweaks-host] {
  font-family: var(--font-body) !important;
}

/* =========================================================================
   RESPONSIVE — Mobile / tablet
   ========================================================================= */

/* Hamburger button — hidden on desktop, shown ≤900 */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: 1px solid rgba(244, 237, 224, 0.28);
  color: var(--paper);
  padding: 0.55rem 0.85rem;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.nav-toggle:hover { border-color: var(--paper); }
.nav-toggle:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.nav-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 12px;
}
.nav-toggle__bars span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transition: transform 0.25s, opacity 0.2s;
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(5.25px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-5.25px) rotate(-45deg);
}

/* Mobile nav drawer */
.mobile-nav {
  display: none;
  position: fixed;
  top: 64px;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100vh - 64px);
  /* V1.7.147 — fond TOTALEMENT opaque. Le backdrop-filter du header parent
     casse l'effet de rgba 0.97 dans certains rendus (Chrome mobile, screenshots
     émulés). Couleur unie + pas de backdrop-filter = lisibilité garantie. */
  background-color: #0d0b09;
  z-index: 49;
  overflow-y: auto;
  animation: mobileNavIn 0.3s ease both;
}
.mobile-nav.is-open { display: block; }
@keyframes mobileNavIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.mobile-nav__inner {
  padding: var(--space-4) var(--gutter) var(--space-5);
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(244, 237, 224, 0.12);
}
.mobile-nav__list li { margin: 0; }
.mobile-nav__list a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0.9rem 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 237, 224, 0.12);
  transition: color 0.2s, padding-left 0.25s;
}
.mobile-nav__list a:hover,
.mobile-nav__list a:focus-visible {
  color: var(--blood-on-dark);
  padding-left: 0.4rem;
}
.mobile-nav__list a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}
.mobile-nav__list a.is-active {
  color: var(--brass);
}
.mobile-nav__cta {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-3);
  min-height: 56px;
}
.mobile-nav__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(244, 237, 224, 0.12);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}
.mobile-nav__meta a { color: var(--paper); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.mobile-nav__meta a:hover { color: var(--blood-on-dark); }

/* ---- Tablet (≤1024) — desktop nav still visible, but stack big grids ---- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { aspect-ratio: 16 / 12; max-height: 60vh; }
  .pillars, .scenes, .characters { grid-template-columns: 1fr 1fr; }
  .mechs { grid-template-columns: 1fr; }
  .beta__grid, .manifesto, .char-hero, .section-head { grid-template-columns: 1fr; }
  .char-section { grid-template-columns: 1fr; }
  .char-section__head { position: static; }
  .char-related { grid-template-columns: 1fr 1fr; }
  .char-hero__media { min-height: 60vh; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .journal__entry { grid-template-columns: 1fr; gap: 0.6rem; }
  .folio { display: none; }
}

/* ---- Mobile (≤900) — swap to hamburger nav ---- */
@media (max-width: 900px) {
  :root {
    --space-5: 2.75rem;
    --space-6: 4rem;
    --space-7: 5.5rem;
  }

  /* Header swap */
  .nav--desktop { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header__inner { padding: 0.85rem var(--gutter); }
  .brand__sub { display: none; }
  .brand__mark { font-size: 1.3rem; }

  /* Section padding tighter */
  .section { padding: var(--space-6) 0; }

  /* Hero */
  .hero { padding-top: 6rem; padding-bottom: var(--space-4); }
  .hero__title { font-size: clamp(2.4rem, 10vw, 4rem); }
  .hero__lede { font-size: 1.15rem; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__meta { flex-direction: column; align-items: flex-start; gap: 0.6rem; }

  /* Game hero */
  .game-hero { padding-top: 6rem; padding-bottom: var(--space-4); }
  .game-hero__title { font-size: clamp(2.6rem, 11vw, 4.4rem); margin: var(--space-2) 0; }

  /* About hero */
  .about-hero { padding: var(--space-5) 0 var(--space-4); }
  .about-hero__title { font-size: clamp(2.2rem, 9.5vw, 3.6rem); max-width: none; }
  .about-hero__lede { font-size: 1.1rem; }

  /* About sections — already stacked at 920, ensure paddings */
  .about-section { padding: var(--space-4) 0; gap: var(--space-2); }
  .about-section__title { font-size: clamp(1.7rem, 6vw, 2.4rem); }
  .about-section__num { font-size: 11px; }

  /* Demo */
  .demo__title { font-size: clamp(1.8rem, 8vw, 2.6rem); max-width: none; }
  .demo__copy { font-size: 1.1rem; }

  /* Voix */
  .voix { padding: var(--space-5) 0 var(--space-4); }
  .voix__title { font-size: clamp(1.8rem, 8vw, 2.6rem); }

  /* Beta */
  .beta { padding: var(--space-5) 0; }
  .beta__title { font-size: clamp(2rem, 9vw, 3rem); }
  .beta__form { padding: var(--space-3); }

  /* Footer */
  .footer { padding: var(--space-4) 0 var(--space-3); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
  .footer__brand { font-size: 1.6rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 0.6rem; font-size: 10px; }

  /* Buttons should be properly tappable */
  .btn { min-height: 48px; padding: 0.95em 1.4em; }

  /* Strip slows */
  .strip__inner { animation-duration: 50s; }

  /* Manifesto / journal */
  .manifesto__body { font-size: 1rem; max-width: 100%; }
  .journal__filters { gap: 0.4rem; }
  .journal__filter { padding: 0.55em 0.9em; min-height: 40px; }

  /* About contact rows already auto-fit, fine */

  /* Char */
  .char-hero__type { padding: var(--space-4) var(--gutter); }
  .char-section { padding: var(--space-4) 0; gap: var(--space-2); }

  /* Tweaks panel — cap width */
  [data-tweaks-host] {
    inset-inline-end: 1rem !important;
    inset-block-end: 1rem !important;
    max-width: calc(100vw - 2rem) !important;
  }
}

/* ---- Small phones (≤640) ---- */
@media (max-width: 640px) {
  :root {
    --gutter: 1.25rem;
  }
  .pillars, .scenes, .characters { grid-template-columns: 1fr; }
  .pillar, .scene { border-right: 0; border-bottom: 1px solid rgba(244,237,224,0.12); }
  .char-related { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-3); }

  /* Type scale a touch smaller */
  .hero__title { font-size: clamp(2.1rem, 11vw, 3.4rem); }
  .game-hero__title { font-size: clamp(2.3rem, 12vw, 3.8rem); }
  .about-hero__title { font-size: clamp(2rem, 11vw, 3.2rem); }

  /* Demo player margins to 0 */
  .demo-player, .demo-caption { margin-left: 0; margin-right: 0; }
  .demo-caption { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .demo-caption__controls { margin-left: 0; }

  /* Excerpt margins tighten */
  .excerpt { padding: var(--space-3) var(--space-2); }

  /* Skip link bigger on mobile */
  .skip-link:focus, .skip-link:focus-visible { left: 0.75rem; top: 0.75rem; }
}

/* ---- Tiny phones (≤380) ---- */
@media (max-width: 380px) {
  :root { --gutter: 1rem; }
  .nav-toggle__label { display: none; }
  .brand__mark { font-size: 1.15rem; }
  .hero__title { font-size: clamp(1.9rem, 12vw, 3rem); }
}

/* =========================================================================
   ADDITIONS — Démo vidéo · Voix (témoignages) · À propos · Indices Tamys
   ========================================================================= */

/* ---------- §03 Démonstration — video player ---------- */

.demo {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-5);
  align-items: end;
  padding-bottom: var(--space-4);
}
.demo__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.02;
  margin: 0.5rem 0 0;
  letter-spacing: -0.01em;
  font-weight: 500;
  max-width: 14ch;
}
.demo__title em { color: var(--blood); font-style: italic; }
.demo__copy {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--paper-2);
  max-width: 48ch;
  margin: 0;
  padding-bottom: 0.4rem;
}

.demo-player {
  margin: 0 calc(var(--gutter) * 0.4) 0;
  position: relative;
  border: 1px solid var(--brass);
  background: #000;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.demo-player video,
.demo-player img.demo-player__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.demo-player__poster-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(201, 169, 97, 0.18) 0%, transparent 60%),
    linear-gradient(160deg, #1a1714 0%, #0d0b09 50%, #2a1a14 100%);
}
.demo-player__poster-wrap::after {
  /* film-grain noise */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.18) 2px 3px);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.demo-player__play {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 999px;
  border: 1px solid rgba(244, 237, 224, 0.85);
  background: rgba(13, 11, 9, 0.45);
  color: var(--paper);
  cursor: pointer;
  transition: transform 0.4s, border-color 0.4s, background 0.4s;
  backdrop-filter: blur(2px);
}
.demo-player__play:hover {
  transform: scale(1.06);
  border-color: var(--brass);
  background: rgba(13, 11, 9, 0.6);
}
.demo-player__play:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
}
.demo-player__play-icon {
  font-size: 22px;
  margin-left: 4px;
  letter-spacing: 0;
  color: var(--paper);
}
.demo-player__placeholder-tag {
  position: absolute;
  z-index: 2;
  bottom: 1rem;
  left: 1rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-3);
  opacity: 0.7;
}
.demo-player__horizon {
  /* schematic horizon line + smoke column to make the placeholder feel narrative */
  position: absolute;
  left: 0; right: 0; top: 62%;
  height: 1px;
  background: rgba(244, 237, 224, 0.18);
  z-index: 1;
}
.demo-player__smoke {
  position: absolute;
  left: 22%;
  top: 12%;
  width: 5%;
  height: 50%;
  background: linear-gradient(to top, rgba(244, 237, 224, 0.0), rgba(244, 237, 224, 0.18) 60%, rgba(244, 237, 224, 0.04));
  filter: blur(6px);
  z-index: 1;
}

.demo-caption {
  margin: 1rem calc(var(--gutter) * 0.4) 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}
.demo-caption__controls { color: var(--paper-3); }
.demo-caption__controls span { margin-left: 1.2rem; }
.demo-caption__controls span:first-child { margin-left: 0; }

@media (max-width: 920px) {
  .demo { grid-template-columns: 1fr; gap: var(--space-3); }
  .demo-player, .demo-caption { margin-left: 0; margin-right: 0; }
}

/* ---------- §06 Voix — empty testimonials promise ---------- */

.voix {
  text-align: center;
  padding: var(--space-6) 0 var(--space-5);
  max-width: 780px;
  margin: 0 auto;
}
.voix__eyebrow {
  display: block;
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--brass);
}
.voix__h2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  font-weight: 400;
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
.voix__h2 em { color: var(--blood); font-style: italic; }
.voix__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--paper-3);
  max-width: 56ch;
  margin: 0 auto var(--space-4);
}
.voix__cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 0.4rem;
  transition: color 0.3s, border-color 0.3s;
}
.voix__cta:hover,
.voix__cta:focus-visible { color: var(--brass); border-color: var(--paper); }
.voix__cta:focus-visible { outline: 2px solid var(--brass); outline-offset: 6px; }

.voix__rule {
  width: 1px;
  height: var(--space-4);
  background: rgba(244, 237, 224, 0.22);
  margin: 0 auto var(--space-4);
  display: block;
}

/* ---------- About page — lecture éditoriale ---------- */

.about-hero {
  padding: var(--space-7) 0 var(--space-5);
  border-bottom: 1px solid rgba(244, 237, 224, 0.12);
}
.about-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}
.about-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.014em;
  font-weight: 400;
  margin: 1rem 0 0;
  max-width: 16ch;
}
.about-hero__title em { color: var(--blood); font-style: italic; }
.about-hero__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--paper-2);
  margin-top: var(--space-3);
  max-width: 60ch;
  line-height: 1.55;
}

.about-section {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-bottom: 1px solid rgba(244, 237, 224, 0.10);
  align-items: start;
}
.about-section__head {
  position: sticky;
  top: 6rem;
}
.about-section__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}
.about-section__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.12;
  color: var(--blood);
  margin: 0.6rem 0 0;
  font-weight: 400;
  max-width: 14ch;
}
.about-section__body {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.7;
  color: var(--paper-2);
  max-width: 60ch;
}
.about-section__body p { margin: 0 0 1.4em; }
.about-section__body p:last-child { margin-bottom: 0; }
.about-section__body em { color: var(--brass); font-style: italic; }
.about-section__body strong { color: var(--paper); font-weight: 500; }
.about-section__body a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  transition: color 0.3s, border-color 0.3s;
}
.about-section__body a:hover { color: var(--brass); border-color: var(--paper); }

.about-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-4);
  align-items: start;
}

.admin-log {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--paper-2);
  background: var(--ink-2);
  border: 1px solid var(--brass);
  padding: 1.4rem 1.5rem;
  position: relative;
}
.admin-log__title {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.8rem;
}
.admin-log__rule {
  border-top: 1px dashed rgba(154, 137, 112, 0.5);
  margin-bottom: 1rem;
}
.admin-log__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.admin-log__entry {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.admin-log__entry p { margin: 0; }
.admin-log__entry .ts { color: var(--paper-3); }
.admin-log__entry .who { color: var(--paper); }
.admin-log__entry .what { color: var(--brass); }
.admin-log__note {
  margin-top: 1.2rem;
  font-size: 11px;
  line-height: 1.6;
  color: var(--paper-3);
  font-style: italic;
}

.about-contact {
  padding: var(--space-6) 0 var(--space-5);
}
.about-contact h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  margin: 0 0 var(--space-3);
  font-weight: 400;
}
.about-contact h2 em { color: var(--blood); font-style: italic; }
.about-contact__rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  border-top: 1px solid rgba(244, 237, 224, 0.18);
  border-bottom: 1px solid rgba(244, 237, 224, 0.18);
  padding: var(--space-3) 0;
  margin: var(--space-3) 0 0;
  list-style: none;
}
.about-contact__row strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.6rem;
  font-weight: 500;
}
.about-contact__row a, .about-contact__row span {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--paper);
  text-decoration: none;
}
.about-contact__row a:hover { color: var(--brass); }

@media (max-width: 920px) {
  .about-section { grid-template-columns: 1fr; gap: var(--space-3); }
  .about-section__head { position: static; }
  .about-grid { grid-template-columns: 1fr; }
  .about-contact__rows { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ---------- Tamys IV BIS · INDICES (moodboard 4 vignettes) ---------- */

.indices-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: var(--space-3);
}
.indice {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--brass);
  background: var(--ink-2);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.indice__art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(201, 169, 97, 0.16), transparent 60%),
    linear-gradient(160deg, #1a1714, #0d0b09);
  overflow: hidden;
}
.indice__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.18) 2px 3px);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.indice__svg {
  width: 56%;
  height: auto;
  opacity: 0.78;
  color: var(--brass);
  position: relative;
  z-index: 1;
}
.indice__caption {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 1rem 1rem 0.9rem;
  background: linear-gradient(to top, rgba(13, 11, 9, 0.92) 30%, transparent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-2);
  line-height: 1.4;
}

@media (max-width: 920px) {
  .indices-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .indices-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   §04 POUR TOUS LES REGARDS — accessibility manifesto
   ========================================================================= */

.regards { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.regards__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-5);
  align-items: start;
}
.regards__head { position: sticky; top: 7rem; }
.regards__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.05;
  font-weight: 400;
  margin: var(--space-2) 0 0;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.regards__title em {
  font-style: italic;
  color: var(--blood-on-dark);
}
.regards__body {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--paper-2);
  max-width: 56ch;
}
.regards__body p { margin: 0 0 1.2rem; }
.regards__body em { font-style: italic; color: var(--brass); }
.regards__body strong { color: var(--paper); font-weight: 500; }

.regards__quote {
  margin: var(--space-4) 0 var(--space-3);
  border: 1px solid var(--brass);
  background: var(--ink-2);
  padding: var(--space-3) var(--space-3);
  position: relative;
}
.regards__quote::before {
  content: '“';
  position: absolute;
  top: -0.6rem;
  left: 1rem;
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--brass);
  background: var(--ink);
  padding: 0 0.4rem;
}
.regards__quote blockquote { margin: 0; }
.regards__quote blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--paper);
  margin: 0;
  text-wrap: pretty;
}
.regards__quote blockquote em {
  color: var(--brass);
  font-style: italic;
}
.regards__quote figcaption {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-2);
}

.regards__compat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-3);
  font-style: normal;
  margin: var(--space-3) 0 0;
  line-height: 1.8;
}
.regards__compat span { color: var(--brass); font-style: italic; text-transform: none; letter-spacing: 0.05em; font-family: var(--font-display); font-size: 13px; }

@media (max-width: 920px) {
  .regards__grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .regards__head { position: static; }
  .regards__body { font-size: 1.1rem; max-width: none; }
  .regards__quote blockquote p { font-size: 1.15rem; }
}

/* =========================================================================
   §05 DANS LA POCHE — mobile/contextual play
   ========================================================================= */

.poche { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.poche__head {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-5);
  align-items: end;
  margin-bottom: var(--space-5);
}
.poche__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 1.0;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: var(--space-2) 0 0;
  text-wrap: pretty;
}
.poche__title em {
  font-style: italic;
  color: var(--blood-on-dark);
}
.poche__lede {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--paper-2);
  margin: 0;
  max-width: 52ch;
  padding-bottom: 0.4rem;
}
.poche__lede em { font-style: italic; color: var(--paper-2); }

.poche__grid {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(244, 237, 224, 0.18);
  border-bottom: 1px solid rgba(244, 237, 224, 0.18);
}
.poche__item {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-right: 1px solid rgba(244, 237, 224, 0.12);
  margin: 0;
}
.poche__item:last-child { border-right: 0; }
.poche__item:not(:first-child) { padding-left: var(--space-3); }
.poche__item-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 var(--space-2);
}
.poche__item-body {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--paper);
  margin: 0;
  max-width: 28ch;
  text-wrap: pretty;
}
.poche__item-body strong {
  color: var(--blood-on-dark);
  font-weight: 500;
  font-style: italic;
}

.poche__tech {
  border: 1px solid var(--brass);
  background: var(--ink-2);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
}
.poche__tech p {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--paper-3);
  margin: 0;
  max-width: 70ch;
}
.poche__tech em { font-style: italic; color: var(--paper-3); }

@media (max-width: 920px) {
  .poche__head { grid-template-columns: 1fr; gap: var(--space-3); align-items: start; }
  .poche__grid { grid-template-columns: 1fr; }
  .poche__item {
    border-right: 0;
    border-bottom: 1px solid rgba(244, 237, 224, 0.12);
    padding: var(--space-3) 0;
  }
  .poche__item:last-child { border-bottom: 0; }
  .poche__item:not(:first-child) { padding-left: 0; }
  .poche__lede { font-size: 1.1rem; }
}

/* =========================================================================
   Beta form — promise eyebrow above input
   ========================================================================= */

.beta__form-promise {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blood-on-dark);
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.beta__form-promise::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--blood-on-dark);
  display: inline-block;
}

/* =========================================================================
   Reduced motion — defensive override for new sections
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .regards__quote::before { transition: none; }
  .poche__item { transition: none; }
}

/* =========================================================================
   V1.7.122 — Refonte vitrine V2 (CDC v1.2 — strategist + Marcus)
   Architecture 10 sections home + page jeu individuelle.
   Mobile-first, breakpoints : 640px (tablette), 1024px (desktop).
   ========================================================================= */

/* --- Helper: section header commun ----------------------------------------- */
.v2-section-header {
  text-align: center;
  margin-bottom: var(--space-5);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.v2-section-header .eyebrow {
  display: block;
  margin-bottom: 0.75rem;
}
.v2-section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.05;
  font-weight: 400;
  margin: 0;
  color: var(--paper);
}
.v2-section-header h2 em {
  color: var(--blood-on-dark);
  font-style: italic;
}
.v2-section-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--paper-2);
  margin: 1rem auto 0;
  max-width: 56ch;
}

/* --- SECTION HERO ---------------------------------------------------------- */
.v2-hero {
  padding: var(--space-7) 0 var(--space-5);
  border-bottom: 1px solid rgba(244, 237, 224, 0.10);
}
/* V1.7.144 — Layout hero 2 colonnes : texte gauche, vidéo cinémagraph droite. */
.v2-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 1024px) {
  .v2-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-6);
  }
}
.v2-hero__content {
  min-width: 0;
}
.v2-hero__art {
  margin: 0;
  padding: 0;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 25px 80px -25px rgba(0, 0, 0, 0.7);
}
.v2-hero__art video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: rgba(13, 8, 5, 0.5);
}
@media (max-width: 1023px) {
  /* V1.7.147 — sur mobile, la vidéo hero 9:16 prendrait toute la viewport.
     On la cape à 70vh pour laisser voir le contenu en dessous (titre, CTA). */
  .v2-hero__art {
    max-height: 70vh;
  }
  .v2-hero__art video {
    max-height: 70vh;
    width: auto;
    margin: 0 auto;
  }
}
.v2-hero__art-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.6rem 1rem;
  background: linear-gradient(to top, rgba(13, 8, 5, 0.85), rgba(13, 8, 5, 0));
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  text-align: center;
  pointer-events: none;
}
/* Sur mobile, vidéo affichée mais plus petite + sans rogner trop le texte. */
@media (max-width: 1023px) {
  .v2-hero__art {
    max-width: 480px;
    margin: 0 auto;
  }
}
.v2-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1.2rem;
}
.v2-hero__eyebrow em {
  color: var(--brass);
  font-style: italic;
  font-weight: 600;
}
.v2-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.014em;
  font-weight: 400;
  margin: 0 0 1.5rem;
  max-width: 18ch;
  color: var(--paper);
}
.v2-hero__title em {
  color: var(--blood-on-dark);
  font-style: italic;
}
.v2-hero__quote {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--brass);
  margin: 0 0 1.5rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--brass);
  max-width: 48ch;
}
.v2-hero__quote em {
  font-style: italic;
  color: var(--brass);
}
.v2-hero__quote cite {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-size: 1rem;
  color: var(--paper-2);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
.v2-hero__lede {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--paper-2);
  margin: 0 0 var(--space-3);
  max-width: 60ch;
}
.v2-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 0.8rem;
}
.v2-hero__cta-note {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--paper-3);
  margin: 0;
  letter-spacing: 0.02em;
}

/* --- SECTION TRUST STRIP --------------------------------------------------- */
.v2-trust {
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(244, 237, 224, 0.08);
  background: rgba(232, 198, 116, 0.02);
}
.v2-trust__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.v2-trust__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(184, 167, 135, 0.25);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--paper-2);
  background: rgba(244, 237, 224, 0.02);
}
.v2-trust__pill svg {
  flex-shrink: 0;
  color: var(--brass);
}
.v2-trust__pill strong {
  color: var(--blood-on-dark);
  font-weight: 700;
}
.v2-trust__pill--accent {
  border-color: var(--brass);
  background: rgba(184, 167, 135, 0.08);
  color: var(--paper);
}

/* --- SECTION GOÛTE LE RÉCIT (premier paragraphe playable au LOOK du jeu) ---
   V1.7.123 — C2 voix retirées, C3 look du vrai jeu (parchment, drop cap,
   suggestions stylées comme g-qcmd-btn). Section en fond paper pour
   trancher avec le hero ink (alternance Marcus). */
.v2-taste {
  padding: var(--space-6) 0;
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid rgba(184, 167, 135, 0.3);
  border-bottom: 1px solid rgba(184, 167, 135, 0.3);
}
.v2-taste .v2-section-header h2 { color: var(--ink); }
.v2-taste .v2-section-header h2 em { color: var(--blood); }
.v2-taste .v2-section-header .eyebrow { color: var(--brass-deep); }
.v2-taste .v2-section-lede { color: var(--ink-2); }

.v2-taste-game {
  max-width: 760px;
  margin: 0 auto;
}
.v2-taste-game__panel {
  padding: var(--space-4) var(--space-3);
  border: 1px solid rgba(184, 167, 135, 0.4);
  border-radius: 4px;
  background: var(--paper-2);
  box-shadow: 0 2px 8px rgba(13, 11, 9, 0.05);
}
.v2-taste-game__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}
/* Réutilise le look .g-narration du vrai jeu (Cormorant + parchment + drop cap).
   Surcharge pour adapter au contexte page vitrine. */
.v2-taste-game__narration {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--ink);
  max-width: 65ch;
  margin: 0 auto var(--space-3);
  padding: 0;
}
.v2-taste-game__narration p {
  margin: 0;
}
.v2-taste-game__narration p::first-letter {
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 600;
  float: left;
  line-height: 0.85;
  margin: 0.15rem 0.5rem 0 0;
  color: var(--brass-deep);
}
.v2-taste-game__narration em {
  font-style: italic;
  color: var(--ink-2);
}
.v2-taste-game__choices {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(184, 167, 135, 0.3);
}
.v2-taste-game__hint-top {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin: 0 0 0.8rem;
  text-align: center;
}
.v2-taste-game__cmd-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.v2-taste-game__cmd-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--brass);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.05rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 100ms ease;
}
.v2-taste-game__cmd-btn::before {
  content: '› ';
  color: var(--brass-deep);
  margin-right: 0.3rem;
}
.v2-taste-game__cmd-btn:hover {
  background: var(--brass);
  color: var(--paper);
  transform: translateX(2px);
}
.v2-taste-game__cmd-btn:hover::before { color: var(--paper); }
.v2-taste-game__cmd-btn:focus-visible {
  outline: 2px solid var(--brass-deep);
  outline-offset: 2px;
}
.v2-taste-game__hint {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--ink-2);
  margin: 0;
}
.v2-taste-game__cta {
  text-align: center;
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  border-top: 1px solid rgba(184, 167, 135, 0.3);
}
.v2-taste-game__cta p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink);
  margin: 0 0 1rem;
}

/* V1.7.156 — CTA persistant sous le panel teaser, visible toujours.
   Vit hors du panel parchemin sur le fond clair de la section "Goûte
   le récit". On utilise les tokens sombres (--ink, --ink-2) pour rester
   lisible sur ce fond clair. */
.v2-taste-game__below-cta {
  text-align: center;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-2);
}
.v2-taste-game__below-cta p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 1rem;
}
.v2-taste-game__below-cta .btn--primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.8rem;
  font-size: 1rem;
  /* Le .btn--primary global est conçu pour fond sombre (paper sur ink).
     Ici on est sur fond parchemin clair, donc on inverse : fond ink,
     texte paper. */
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.v2-taste-game__below-cta .btn--primary:hover {
  background: var(--blood, #8b1e2b);
  border-color: var(--blood, #8b1e2b);
  color: var(--paper);
}
.v2-taste-game__below-cta-meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-2) !important;
  font-style: normal !important;
  margin: 0.8rem 0 0 !important;
  opacity: 0.7;
}

/* V1.7.125 — Champ libre du taste-game (C23). Apparaît après la 1ère
   action scriptée. Look identique au champ du vrai jeu. */
.v2-taste-game__free-form {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(184, 167, 135, 0.3);
}
.v2-taste-game__free-input {
  flex: 1;
  padding: 0.85rem 1rem;
  border: 1px solid var(--brass-deep);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.v2-taste-game__free-input:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(184, 167, 135, 0.25);
}
.v2-taste-game__free-input::placeholder {
  color: rgba(13, 11, 9, 0.45);
  font-style: italic;
}
.v2-taste-game__free-submit {
  padding: 0 1.2rem;
  background: var(--brass-deep);
  color: var(--paper);
  border: none;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms ease, transform 100ms ease;
}
.v2-taste-game__free-submit:hover:not(:disabled) {
  background: var(--ink);
}
.v2-taste-game__free-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.v2-taste-game__free-submit:focus-visible {
  outline: 2px solid var(--brass-deep);
  outline-offset: 2px;
}

/* Loading state pendant l'appel LLM. */
.v2-taste-game__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: var(--space-3);
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--brass-deep);
  border-top: 1px solid rgba(184, 167, 135, 0.3);
}
.v2-taste-game__loading-dots {
  display: inline-flex;
  gap: 0.2rem;
}
.v2-taste-game__loading-dots span {
  width: 6px;
  height: 6px;
  background: var(--brass-deep);
  border-radius: 50%;
  animation: tasteLoadingDot 1.2s ease-in-out infinite;
}
.v2-taste-game__loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.v2-taste-game__loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes tasteLoadingDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .v2-taste-game__loading-dots span { animation: none; opacity: 0.6; }
}

/* --- SECTION CATALOGUE ----------------------------------------------------- */
.v2-catalogue {
  padding: var(--space-6) 0;
  border-bottom: 1px solid rgba(244, 237, 224, 0.08);
}
.v2-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.v2-game-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(184, 167, 135, 0.22);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(244, 237, 224, 0.02);
  transition: border-color 200ms ease, transform 200ms ease;
}
.v2-game-card:hover {
  border-color: var(--brass);
  transform: translateY(-2px);
}
.v2-game-card--soon { opacity: 0.7; }
.v2-game-card--soon:hover { transform: none; }
.v2-game-card article {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.v2-game-card__cover {
  aspect-ratio: 9 / 16;
  max-height: 70vh;
  background: linear-gradient(135deg, rgba(13, 11, 9, 0.6), rgba(184, 167, 135, 0.1));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2-game-card__cover img,
.v2-game-card__cover video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v2-game-card__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--brass);
}
.v2-game-card__placeholder p {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}
.v2-game-card__body {
  padding: var(--space-3);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.v2-game-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0;
}
.v2-game-card__body h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--paper);
  margin: 0;
  line-height: 1.1;
}
.v2-game-card__tagline {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--brass);
  margin: 0;
}
.v2-game-card__tagline em { font-style: italic; }
.v2-game-card__synopsis {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--paper-2);
  margin: 0.4rem 0;
  /* V1.7.152 — clamp à 4 lignes + min-height équivalente pour que toutes
     les cards aient le même bloc synopsis, peu importe la longueur du
     texte source. Aldenar (court) et Le grand silence (long) occupent
     ainsi la même hauteur visuelle. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.5em * 4);
}
.v2-game-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding: 0.6rem 0;
  border-top: 1px dashed rgba(184, 167, 135, 0.2);
  border-bottom: 1px dashed rgba(184, 167, 135, 0.2);
  margin: 0;
  list-style: none;
}
.v2-game-card__meta li {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--paper-3);
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.v2-game-card__meta strong {
  color: var(--paper);
  font-size: 0.9rem;
  font-weight: 600;
}
.v2-game-card__cta {
  margin-top: auto;
  align-self: stretch;
  /* V1.7.152 — min-height aligné avec .v2-game-card__notify-form pour
     que la zone footer fasse la même hauteur, qu'on affiche un bouton
     simple (Aldenar) ou un formulaire (Le grand silence). */
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.v2-game-card__soon-label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--brass);
  font-style: italic;
  margin: auto 0 0;
}

/* V1.7.143 — Mini-formulaire collect email pour les jeux à venir */
.v2-game-card__notify-form {
  margin-top: auto;
  width: 100%;
  /* V1.7.152 — min-height aligné avec .v2-game-card__cta. Le formulaire
     a naturellement plus de hauteur (input + bouton stacked en mobile,
     inline en ≥540px), donc on n'a pas besoin de plus, juste de garantir
     un plancher commun avec le bouton simple. */
  min-height: 48px;
}
.v2-game-card__notify-inline {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 540px) {
  .v2-game-card__notify-inline {
    flex-direction: row;
  }
}
.v2-game-card__notify-input {
  flex: 1;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: rgba(244, 237, 224, 0.06);
  border: 1px solid rgba(244, 237, 224, 0.20);
  border-radius: 4px;
  color: var(--parchment);
}
.v2-game-card__notify-input::placeholder {
  color: rgba(244, 237, 224, 0.45);
  font-style: italic;
}
.v2-game-card__notify-input:focus {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-color: var(--brass);
}
.v2-game-card__notify-btn {
  white-space: nowrap;
}
.v2-game-card__notify-success {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--brass);
  margin: 0;
  padding: 0.6rem 0.85rem;
  border-left: 2px solid var(--brass);
  background: rgba(232, 198, 116, 0.08);
}

/* --- SECTION POURQUOI STORIARIUM ------------------------------------------ */
.v2-why {
  padding: var(--space-6) 0;
  border-bottom: 1px solid rgba(244, 237, 224, 0.08);
}
.v2-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: pillar;
}
.v2-pillar {
  text-align: center;
  padding: var(--space-3);
}
.v2-pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(184, 167, 135, 0.1);
  color: var(--brass);
  margin: 0 auto var(--space-2);
}
.v2-pillar h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--paper);
  margin: 0 0 0.6rem;
}
.v2-pillar p {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--paper-2);
  margin: 0;
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}
.v2-compare {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-4);
  border: 1px dashed rgba(184, 167, 135, 0.3);
  border-radius: 6px;
}
.v2-compare__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--brass);
  margin: 0 0 1rem;
  text-align: center;
}
.v2-compare__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.v2-compare__list li {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--paper-2);
}
.v2-compare__list strong {
  display: block;
  color: var(--paper);
  font-weight: 600;
  font-style: italic;
  margin-bottom: 0.2rem;
}

/* --- SECTION TARIFS -------------------------------------------------------- */
.v2-pricing {
  padding: var(--space-6) 0;
  border-bottom: 1px solid rgba(244, 237, 224, 0.08);
}
.v2-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}
.v2-pricing-card {
  display: flex;
  border: 1px solid rgba(184, 167, 135, 0.22);
  border-radius: 6px;
  background: rgba(244, 237, 224, 0.02);
  transition: border-color 200ms ease;
}
.v2-pricing-card:hover { border-color: var(--brass); }
.v2-pricing-card--featured {
  border-color: var(--brass);
  background: rgba(184, 167, 135, 0.08);
  box-shadow: 0 0 0 3px rgba(184, 167, 135, 0.15);
}

/* V1.7.158 — Founder Pass mise en valeur (reco web-wealth-strategist).
   Highlight la card centrale : scale 1.04, border brass plus marquée,
   ombre dorée glow, ribbon "AVANT-PREMIÈRE" en haut, prix strike-through
   pour montrer la promo lock-in. */
.v2-pricing-card--highlight {
  position: relative;
  border-color: var(--brass);
  background: linear-gradient(180deg, rgba(232, 198, 116, 0.12), rgba(184, 167, 135, 0.06));
  box-shadow: 0 0 0 3px rgba(232, 198, 116, 0.35), 0 22px 60px -20px rgba(0, 0, 0, 0.6);
  transform: scale(1.04);
  z-index: 2;
}
.v2-pricing-card--highlight:hover {
  border-color: var(--brass);
  transform: scale(1.05);
}
.v2-pricing-card__ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brass);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 5px 14px;
  border-radius: 999px;
  margin: 0;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.v2-pricing-card__price--with-strike {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.7rem;
}
.v2-pricing-card__strike {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--paper-3);
  text-decoration: line-through;
  text-decoration-color: var(--blood-on-dark);
  text-decoration-thickness: 2px;
  margin: 0;
  opacity: 0.85;
}
.v2-pricing-card__price-meta {
  display: block;
  width: 100%;
  margin: 0;
}
.v2-pricing-card__price-meta em {
  color: var(--brass);
  font-style: italic;
  font-weight: 600;
}
@media (max-width: 1023px) {
  /* Sur mobile, on garde la mise en valeur mais sans le scale qui
     déborderait sur les autres cards. */
  .v2-pricing-card--highlight { transform: none; }
  .v2-pricing-card--highlight:hover { transform: none; }
}
.v2-pricing-card article {
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  width: 100%;
  gap: 0.6rem;
}
.v2-pricing-card__badge {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--brass);
  margin: 0;
}
.v2-pricing-card__badge strong { color: var(--blood-on-dark); }
.v2-pricing-card__badge--save { color: var(--blood-on-dark); }
.v2-pricing-card h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--paper);
  margin: 0;
}
.v2-pricing-card__price {
  font-family: var(--font-display);
  margin: 0;
}
.v2-pricing-card__price strong {
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--paper);
  line-height: 1;
}
.v2-pricing-card__price span {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--paper-3);
  margin-left: 0.5rem;
}
.v2-pricing-card__features {
  list-style: none;
  margin: 0.6rem 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}
.v2-pricing-card__features li {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--paper-2);
  padding-left: 1.4rem;
  position: relative;
}
.v2-pricing-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brass);
}
.v2-pricing-card__cta { margin-top: auto; }
.v2-pricing-card__note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--paper-3);
  margin: 0.5rem 0 0;
  text-align: center;
}
.v2-pricing-cta-link {
  text-align: center;
  margin-top: var(--space-4);
}
.v2-pricing-cta-link a {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--brass);
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.v2-pricing-cta-link a:hover { color: var(--paper); }

/* --- SECTION TÉMOIGNAGES --------------------------------------------------- */
.v2-testimonials {
  padding: var(--space-6) 0;
  border-bottom: 1px solid rgba(244, 237, 224, 0.08);
}
.v2-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.v2-testimonial {
  margin: 0;
  padding: var(--space-3);
  border-left: 3px solid var(--brass);
  background: rgba(184, 167, 135, 0.04);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}
.v2-testimonial blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--paper);
}
.v2-testimonial blockquote p { margin: 0; }
.v2-testimonial figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.v2-testimonial__author {
  color: var(--paper);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.v2-testimonial__context {
  color: var(--paper-3);
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}

/* --- SECTION FAQ ----------------------------------------------------------- */
.v2-faq {
  padding: var(--space-6) 0;
  border-bottom: 1px solid rgba(244, 237, 224, 0.08);
}
.v2-faq-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.v2-faq-list details {
  border: 1px solid rgba(184, 167, 135, 0.18);
  border-radius: 4px;
  background: rgba(244, 237, 224, 0.02);
  overflow: hidden;
  transition: border-color 200ms ease;
}
.v2-faq-list details[open] {
  border-color: var(--brass);
  background: rgba(184, 167, 135, 0.06);
}
.v2-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--paper);
  list-style: none;
  user-select: none;
}
.v2-faq-list summary::-webkit-details-marker { display: none; }
.v2-faq-list summary svg {
  color: var(--brass);
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.v2-faq-list details[open] summary svg { transform: rotate(180deg); }
.v2-faq-list summary:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: -2px;
}
.v2-faq__answer {
  padding: 0 1.2rem 1.2rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--paper-2);
}
.v2-faq__answer p { margin: 0; }

/* --- SECTION CTA FINAL ---------------------------------------------------- */
.v2-final-cta {
  padding: var(--space-7) 0 var(--space-6);
  text-align: center;
}
/* V1.7.158 — Compteur Founder eyebrow (reco web-wealth-strategist).
   Scarcité visible avant le titre, dot pulsante pour signaler "live". */
.v2-final-cta__counter {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  background: rgba(232, 198, 116, 0.08);
  border: 1px solid rgba(232, 198, 116, 0.32);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  margin: 0 auto 1.2rem;
}
.v2-final-cta__counter strong {
  color: var(--paper);
  font-size: 1.05rem;
  font-weight: 700;
}
.v2-final-cta__counter-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blood-on-dark);
  box-shadow: 0 0 0 0 rgba(217, 107, 120, 0.55);
  animation: pulse-dot 2.4s ease-out infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(217, 107, 120, 0.55); }
  60% { box-shadow: 0 0 0 10px rgba(217, 107, 120, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 107, 120, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .v2-final-cta__counter-dot { animation: none; }
}
.v2-final-cta__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  line-height: 1.05;
  font-weight: 400;
  margin: 0 0 1.2rem;
  color: var(--paper);
}
.v2-final-cta__title em {
  color: var(--blood-on-dark);
  font-style: italic;
}
.v2-final-cta__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--paper-2);
  margin: 0 auto var(--space-3);
  max-width: 56ch;
}
.v2-final-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.v2-final-cta__note {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--paper-3);
  margin: 0;
  letter-spacing: 0.02em;
}
.v2-final-cta__note strong { color: var(--paper); }
.v2-final-cta__note em { color: var(--brass); font-style: italic; }

/* --- SECTION NEWSLETTER (V1.7.160) -------------------------------------- */
/* Reco web-wealth-strategist V3 : capture email pour les visiteurs qui
   ne sont pas prêts à signer maintenant. Layout 2 colonnes desktop,
   1 colonne mobile. Style éditorial cohérent avec le reste de la home,
   pas un pop-up agressif. */
.v2-newsletter {
  padding: var(--space-5) 0;
  background: linear-gradient(180deg,
    rgba(13, 11, 9, 0) 0%,
    rgba(232, 198, 116, 0.03) 50%,
    rgba(13, 11, 9, 0) 100%);
  border-top: 1px solid rgba(184, 167, 135, 0.12);
  border-bottom: 1px solid rgba(184, 167, 135, 0.12);
}
.v2-newsletter__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
  max-width: 920px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .v2-newsletter__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
}
.v2-newsletter__copy {
  text-align: center;
}
@media (min-width: 900px) {
  .v2-newsletter__copy { text-align: left; }
}
.v2-newsletter__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1.1;
  font-weight: 400;
  color: var(--paper);
  margin: 0.5rem 0 1rem;
}
.v2-newsletter__title em {
  color: var(--brass);
  font-style: italic;
}
.v2-newsletter__lede {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--paper-2);
  margin: 0;
}
.v2-newsletter__lede strong { color: var(--paper); }
.v2-newsletter__form {
  width: 100%;
}
.v2-newsletter__row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 0 0.6rem;
}
@media (min-width: 540px) {
  .v2-newsletter__row {
    flex-direction: row;
  }
}
.v2-newsletter__input {
  flex: 1;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--paper);
  background: rgba(13, 11, 9, 0.5);
  border: 1px solid rgba(184, 167, 135, 0.4);
  border-radius: 6px;
  box-sizing: border-box;
  transition: border-color 150ms, box-shadow 150ms;
}
.v2-newsletter__input:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(184, 167, 135, 0.22);
}
.v2-newsletter__input::placeholder { color: var(--paper-3); }
.v2-newsletter__btn {
  white-space: nowrap;
  padding: 0.85rem 1.5rem;
}
.v2-newsletter__success {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--brass);
  margin: 0.5rem 0;
  text-align: center;
}
.v2-newsletter__error {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--blood-on-dark);
  margin: 0.4rem 0 0;
}
.v2-newsletter__legal {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--paper-3);
  margin: 0.6rem 0 0;
  line-height: 1.4;
}

/* --- SECTION FRISE ÉDITORIALE (sous le catalogue) ------------------------- */
.v2-timeline {
  list-style: none;
  margin: var(--space-4) auto 0;
  padding: var(--space-3);
  max-width: 720px;
  border: 1px dashed rgba(184, 167, 135, 0.3);
  border-radius: 4px;
}
.v2-timeline__item {
  display: grid;
  grid-template-columns: 90px 32px 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--paper-2);
  border-bottom: 1px dotted rgba(184, 167, 135, 0.15);
}
.v2-timeline__item:last-child { border-bottom: none; }
.v2-timeline__date {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--paper-3);
}
.v2-timeline__dot {
  font-size: 1.1rem;
  color: var(--brass);
  text-align: center;
}
.v2-timeline__item--published .v2-timeline__dot { color: var(--brass); }
.v2-timeline__item--soon .v2-timeline__dot { color: var(--paper-2); }
.v2-timeline__item--writing .v2-timeline__dot { color: var(--paper-3); }
.v2-timeline__label strong {
  color: var(--paper);
  font-weight: 600;
  font-style: italic;
}

/* --- SECTION POURQUOI (override fond paper, alternance Marcus) ------------ */
.v2-why {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid rgba(184, 167, 135, 0.3);
  border-bottom: 1px solid rgba(184, 167, 135, 0.3);
}
.v2-why .v2-section-header h2 { color: var(--ink); }
.v2-why .v2-section-header h2 em { color: var(--blood); }
.v2-why .v2-section-header .eyebrow { color: var(--brass-deep); }
.v2-why .v2-pillar h3 { color: var(--ink); }
.v2-why .v2-pillar p { color: var(--ink-2); }
.v2-why .v2-pillar__icon {
  background: rgba(184, 167, 135, 0.18);
  color: var(--brass-deep);
}

/* --- SECTION POCKET (commuter — Un livre vivant dans ta poche) ------------ */
.v2-pocket {
  padding: var(--space-6) 0;
  border-bottom: 1px solid rgba(244, 237, 224, 0.08);
}
.v2-pocket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.v2-pocket-card {
  text-align: center;
  padding: var(--space-3);
  border: 1px solid rgba(184, 167, 135, 0.2);
  border-radius: 6px;
  background: rgba(244, 237, 224, 0.02);
  transition: border-color 200ms ease;
}
.v2-pocket-card:hover { border-color: var(--brass); }
.v2-pocket-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(184, 167, 135, 0.1);
  color: var(--brass);
  margin: 0 auto 0.8rem;
}
.v2-pocket-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--paper);
  margin: 0 0 0.5rem;
}
.v2-pocket-card p {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--paper-2);
  margin: 0;
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
}

/* --- SECTION FAQ (override fond paper, alternance Marcus) ----------------- */
.v2-faq {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid rgba(184, 167, 135, 0.3);
  border-bottom: 1px solid rgba(184, 167, 135, 0.3);
}
.v2-faq .v2-section-header h2 { color: var(--ink); }
.v2-faq .v2-section-header h2 em { color: var(--blood); }
.v2-faq .v2-section-header .eyebrow { color: var(--brass-deep); }
.v2-faq-list details {
  border-color: rgba(184, 167, 135, 0.4);
  background: var(--paper-2);
}
.v2-faq-list details[open] {
  border-color: var(--brass);
  background: rgba(184, 167, 135, 0.12);
}
.v2-faq-list summary { color: var(--ink); }
.v2-faq-list summary svg { color: var(--brass-deep); }
.v2-faq-list summary:focus-visible {
  outline: 2px solid var(--brass-deep);
}
.v2-faq__answer { color: var(--ink-2); }

/* =========================================================================
   Responsive — V2 vitrine
   ========================================================================= */
@media (max-width: 1023px) {
  /* Tablette : ajustements moyens */
  .v2-hero { padding: var(--space-6) 0 var(--space-4); }
  .v2-section-header { margin-bottom: var(--space-4); }
  .v2-pillars { gap: var(--space-3); }
  .v2-final-cta { padding: var(--space-6) 0 var(--space-5); }
}

@media (max-width: 640px) {
  /* Mobile : single column partout, padding réduit */
  .v2-hero { padding: var(--space-5) 0 var(--space-3); }
  .v2-hero__title { font-size: clamp(2rem, 8vw, 2.8rem); max-width: none; }
  .v2-hero__quote { font-size: 1.05rem; padding-left: 0.8rem; }
  .v2-hero__lede { font-size: 1.05rem; }
  .v2-hero__cta { flex-direction: column; align-items: stretch; }
  .v2-hero__cta .btn { justify-content: center; }

  .v2-trust { padding: var(--space-3) 0; }
  .v2-trust__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.4rem;
  }
  .v2-trust__pill { flex-shrink: 0; }

  .v2-section-header h2 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .v2-section-lede { font-size: 1.05rem; }

  .v2-taste-game__panel { padding: var(--space-3) var(--space-2); }
  .v2-taste-game__title { font-size: 1.2rem; }
  .v2-taste-game__narration { font-size: 1.05rem; }
  .v2-taste-game__narration p::first-letter { font-size: 2.6rem; }
  .v2-taste-game__cmd-btn { font-size: 1rem; padding: 0.75rem 0.9rem; }

  .v2-taste-game__free-form { flex-direction: column; }
  .v2-taste-game__free-input { font-size: 1rem; padding: 0.75rem 0.9rem; }
  .v2-taste-game__free-submit { padding: 0.75rem 1rem; }

  .v2-game-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  /* V1.7.150 — pas d'override aspect-ratio ici. La règle de base (9/16)
     s'applique à toutes les tailles, c'est ce qu'on veut depuis V1.7.146.
     L'ancienne override mobile en 16/9 forçait un ruban paysage qui
     écrasait la card Aldenar à quelques pixels de haut sur smartphone. */
  .v2-game-card__body h3 { font-size: 1.5rem; }

  .v2-timeline { padding: var(--space-2); }
  .v2-timeline__item {
    grid-template-columns: 70px 24px 1fr;
    font-size: 0.92rem;
  }

  .v2-pillars { grid-template-columns: 1fr; gap: var(--space-3); }
  .v2-pillar { padding: var(--space-2); }
  .v2-pillar h3 { font-size: 1.4rem; }

  .v2-pricing-grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .v2-pricing-card__price strong { font-size: 2rem; }

  .v2-pocket-grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .v2-pocket-card { padding: var(--space-2); }
  .v2-pocket-card h3 { font-size: 1.2rem; }

  .v2-testimonial-grid { grid-template-columns: 1fr; }

  .v2-faq-list summary { font-size: 1rem; padding: 0.85rem 1rem; }
  .v2-faq__answer { padding: 0 1rem 1rem; font-size: 1rem; }

  .v2-final-cta__buttons { flex-direction: column; align-items: stretch; }
  .v2-final-cta__buttons .btn { justify-content: center; }
}

/* =========================================================================
   V1.7.123 — Page jeu individuelle (/jeux/{slug})
   ========================================================================= */
.v2-game-page { padding-bottom: var(--space-5); }

.v2-game-hero {
  padding: var(--space-6) 0 var(--space-5);
  border-bottom: 1px solid rgba(244, 237, 224, 0.10);
}
.v2-game-hero__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-4);
  align-items: center;
}
.v2-game-hero__cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  border: 1px solid var(--brass);
  border-radius: 4px;
  display: block;
}
.v2-game-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.8rem;
}
.v2-game-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1.05;
  font-weight: 400;
  color: var(--paper);
  margin: 0 0 0.8rem;
  max-width: 16ch;
}
.v2-game-hero__tagline {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--brass);
  margin: 0 0 1rem;
}
.v2-game-hero__synopsis {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--paper-2);
  margin: 0 0 var(--space-3);
  max-width: 50ch;
}
.v2-game-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 0.6rem;
}
.v2-game-hero__cta-note {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--paper-3);
  margin: 0;
}

.v2-section-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 400;
  color: var(--paper);
  margin: 0 0 1rem;
}
.v2-section-h2 em { color: var(--blood-on-dark); font-style: italic; }

.v2-game-overview {
  padding: var(--space-5) 0;
  border-bottom: 1px solid rgba(244, 237, 224, 0.08);
}
.v2-game-overview__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
.v2-game-overview__text p {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--paper-2);
  margin: 0;
  max-width: 60ch;
}
.v2-game-overview__meta {
  padding: var(--space-3);
  background: rgba(184, 167, 135, 0.06);
  border: 1px solid rgba(184, 167, 135, 0.2);
  border-radius: 4px;
}
.v2-game-meta-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem 1rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.v2-game-meta-list dt {
  color: var(--brass);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.v2-game-meta-list dd {
  color: var(--paper);
  margin: 0;
  font-weight: 600;
}

.v2-game-quotes {
  padding: var(--space-5) 0;
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid rgba(184, 167, 135, 0.3);
  border-bottom: 1px solid rgba(184, 167, 135, 0.3);
}
.v2-game-quotes .v2-section-header h2 { color: var(--ink); }
.v2-game-quotes .v2-section-header h2 em { color: var(--blood); }
.v2-game-quotes .v2-section-header .eyebrow { color: var(--brass-deep); }
.v2-quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.v2-quote-card {
  margin: 0;
  padding: var(--space-3);
  border-left: 3px solid var(--brass-deep);
  background: var(--paper-2);
}
.v2-quote-card blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink);
}
.v2-quote-card blockquote p { margin: 0; }
.v2-quote-card figcaption {
  margin-top: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--brass-deep);
}

.v2-game-destinies {
  padding: var(--space-5) 0;
  border-bottom: 1px solid rgba(244, 237, 224, 0.08);
}
.v2-destiny-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: destiny;
}
.v2-destiny-mini {
  display: flex;
  gap: 1rem;
  padding: var(--space-3);
  border: 1px solid rgba(184, 167, 135, 0.2);
  border-radius: 4px;
  background: rgba(184, 167, 135, 0.04);
}
.v2-destiny-mini__num {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--brass);
  letter-spacing: 0.05em;
  flex-shrink: 0;
  width: 2.4rem;
}
.v2-destiny-mini__body h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--paper);
  margin: 0 0 0.3rem;
}
.v2-destiny-mini__body p {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--paper-2);
  margin: 0;
}
.v2-destiny-mini__body p em { font-style: italic; color: var(--brass); }
.v2-game-destinies__cta {
  text-align: center;
  margin-top: var(--space-4);
}
.v2-game-destinies__cta a {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 4px;
  letter-spacing: 0.02em;
}
.v2-game-destinies__cta a:hover { color: var(--paper); }

.v2-game-final-cta {
  padding: var(--space-6) 0 var(--space-5);
  text-align: center;
}
.v2-game-final-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.1;
  font-weight: 400;
  color: var(--paper);
  margin: 0 0 1rem;
}
.v2-game-final-cta h2 em { color: var(--blood-on-dark); font-style: italic; }
.v2-game-final-cta p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--paper-2);
  margin: 0 auto 1.5rem;
  max-width: 50ch;
}
.v2-game-final-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.v2-game-final-cta__note {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--paper-3);
  margin: 0;
}
.v2-game-final-cta__note a {
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 1023px) {
  .v2-game-hero__grid {
    grid-template-columns: 240px 1fr;
    gap: var(--space-3);
  }
  .v2-game-overview__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .v2-game-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .v2-game-hero__cover {
    max-width: 280px;
    margin: 0 auto;
  }
  .v2-game-hero__title { font-size: clamp(1.8rem, 7vw, 2.8rem); }
  .v2-game-hero__tagline { font-size: 1.2rem; }
  .v2-game-hero__synopsis { font-size: 1.05rem; }
  .v2-game-hero__cta { flex-direction: column; align-items: stretch; }
  .v2-game-hero__cta .btn { justify-content: center; }
  .v2-game-meta-list { grid-template-columns: 1fr; }
  .v2-destiny-grid { grid-template-columns: 1fr; }
  .v2-quote-grid { grid-template-columns: 1fr; }
  .v2-game-final-cta__buttons { flex-direction: column; align-items: stretch; }
  .v2-game-final-cta__buttons .btn { justify-content: center; }
}

/* =========================================================================
   V1.7.121 — Page « Mes destinées »
   ========================================================================= */

.destinies-hero {
  padding: var(--space-7) 0 var(--space-5);
  border-bottom: 1px solid rgba(244, 237, 224, 0.12);
}
.destinies-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}
.destinies-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.014em;
  font-weight: 400;
  margin: 1rem 0 0;
  max-width: 18ch;
}
.destinies-hero__title em { color: var(--blood); font-style: italic; }
.destinies-hero__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--paper-2);
  margin-top: var(--space-3);
  max-width: 60ch;
  line-height: 1.55;
}

.destiny-game {
  margin: var(--space-6) 0;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(244, 237, 224, 0.08);
}
.destiny-game:last-of-type { border-bottom: none; }
.destiny-game__header { margin-bottom: var(--space-4); }
.destiny-game__title {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
  color: var(--paper);
}
.destiny-game__tagline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--brass);
  font-size: 1.1rem;
  margin: 0;
}
.destiny-game__progress {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--paper-2);
  margin: 0.6rem 0 0;
  letter-spacing: 0.04em;
}
.destiny-game__progress strong { color: var(--blood); font-weight: 600; }

.destiny-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

.destiny-card {
  position: relative;
  padding: var(--space-3);
  border: 1px solid rgba(232, 198, 116, 0.18);
  border-radius: 4px;
  background: rgba(232, 198, 116, 0.04);
  display: flex;
  gap: 0.8rem;
  transition: border-color 200ms ease, background 200ms ease;
}
.destiny-card--unlocked {
  border-color: var(--brass);
  background: rgba(212, 175, 55, 0.10);
}
.destiny-card--locked { opacity: 0.6; }
.destiny-card--locked:hover { opacity: 0.85; }

.destiny-card__number {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--brass);
  letter-spacing: 0.05em;
  flex-shrink: 0;
  width: 2.4rem;
  line-height: 1;
}
.destiny-card--locked .destiny-card__number { color: var(--paper-2); }

.destiny-card__body {
  flex: 1;
  min-width: 0;
}
.destiny-card__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 0.3rem;
  color: var(--paper);
  line-height: 1.15;
}
.destiny-card__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--brass);
  margin: 0;
  line-height: 1.4;
}
.destiny-card__tagline--locked { color: var(--paper-2); }

.destiny-card__quote {
  margin: 0.6rem 0 0;
  padding: 0.5rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--paper);
  border-top: 1px dashed rgba(232, 198, 116, 0.25);
  line-height: 1.5;
}

.destiny-card__badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brass);
  color: var(--ink);
}
.destiny-card__badge--locked {
  background: rgba(244, 237, 224, 0.08);
  color: var(--paper-2);
}

.destiny-cta {
  margin: var(--space-6) 0;
  padding: var(--space-4);
  text-align: center;
  border-top: 1px solid rgba(244, 237, 224, 0.10);
}
.destiny-cta p {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--paper-2);
  margin: 0 0 1rem;
}
.destiny-cta .btn-primary {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  background: var(--brass);
  color: var(--ink);
  border: none;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  transition: background 200ms ease;
}
.destiny-cta .btn-primary:hover { background: var(--brass-deep, #b8941f); }

@media (max-width: 640px) {
  .destiny-list { grid-template-columns: 1fr; }
  .destiny-game__title { font-size: 1.8rem; }
}