/* ===== Nøcturne V2 — Pandoufle immersif ===== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Caveat:wght@500;600;700&family=Cinzel:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Pandoufle palette — moonlit forest, magic over sepia */
  --night: #050810;
  --bark-deepest: #0a0d18;
  --bark-deep: #121826;
  --bark: #1a2235;
  --bark-mid: #2a3245;
  --bark-light: #3a4255;
  --moss: #1a2a25;
  --moss-light: #2a4035;
  /* Accents - kept warm but used sparingly */
  --honey-deep: #c88030;
  --honey: #e8b050;
  --honey-light: #f8d078;
  --honey-glow: #ffe89a;
  --ember: #ff9a4a;
  /* Cool magic glows */
  --moon: #c8d8f0;
  --moon-glow: #e0ecff;
  --sage: #8aa898;
  --parchment: #ebe5d5;
  --parchment-warm: #e0d8c0;
  --ink: #18202a;

  --fg: var(--parchment);
  --fg-soft: rgba(235, 229, 213, 0.72);
  --fg-dim: rgba(235, 229, 213, 0.42);
  --accent: var(--honey-light);
  --accent-glow: var(--honey-glow);

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "EB Garamond", Georgia, serif;
  --font-hand: "Caveat", cursive;
  --font-cap: "Cinzel", serif;
  --font-mono: "JetBrains Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--night);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
}

body {
  position: relative;
  min-height: 100vh;
}

/* === Wood grain texture (SVG noise, layered) === */
.bg-wood {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 10%, rgba(200, 216, 240, 0.08), transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(138, 168, 152, 0.06), transparent 60%),
    radial-gradient(ellipse at 20% 90%, rgba(255, 154, 74, 0.05), transparent 50%),
    linear-gradient(180deg, #0a1020 0%, #050810 100%);
}
.bg-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.18 0 0 0 0 0.25 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  transform: translateZ(0);
}

/* Tree trunks at sides — full height */
.bg-trunks {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.trunk {
  position: absolute;
  top: -10vh;
  height: 120vh;
  width: 22vw;
  background:
    repeating-linear-gradient(180deg,
      rgba(0,0,0,0.5) 0 1px,
      transparent 1px 4px,
      rgba(40, 60, 80, 0.2) 4px 6px,
      transparent 6px 14px),
    radial-gradient(ellipse 80% 100% at 50% 50%, var(--bark) 0%, var(--bark-deep) 60%, var(--bark-deepest) 100%);
  filter: brightness(0.7);
}
.trunk-left { left: -10vw; clip-path: polygon(0% 0%, 75% 0%, 60% 30%, 80% 60%, 65% 100%, 0% 100%); }
.trunk-right { right: -10vw; clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 35% 100%, 20% 60%, 40% 30%); }

/* Floating canopy leaves (top) */
.bg-canopy {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 25vh;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 80% at 10% 20%, rgba(8, 12, 22, 0.95), transparent 60%),
    radial-gradient(ellipse 35% 70% at 30% 0%, rgba(8, 12, 22, 0.85), transparent 70%),
    radial-gradient(ellipse 45% 90% at 60% 10%, rgba(8, 12, 22, 0.9), transparent 60%),
    radial-gradient(ellipse 30% 80% at 90% 25%, rgba(8, 12, 22, 0.95), transparent 60%);
}
.bg-floor {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30vh;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(4, 6, 14, 0.95) 30%, transparent 80%);
}

/* === Lantiop cursor === */
.cursor-on, .cursor-on * { cursor: none !important; }
.lantiop {
  position: fixed;
  pointer-events: none;
  width: 32px; height: 32px;
  left: 0; top: 0;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  transition: opacity 0.3s;
}
.lantiop-core {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8c0 0%, #ffd97a 40%, transparent 75%);
  animation: lp 1.4s ease-in-out infinite;
}
.lantiop-glow {
  position: absolute;
  inset: -25px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,217,122,0.6) 0%, rgba(184,114,26,0.15) 40%, transparent 70%);
  animation: lp 1.4s ease-in-out infinite;
}
@keyframes lp { 0%,100% { opacity: 0.7; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.15); } }
.lantiop-trail {
  position: fixed; width: 5px; height: 5px;
  pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, #ffd97a, transparent 70%);
  z-index: 9998; mix-blend-mode: screen;
  animation: tr 1.4s ease-out forwards;
}
@keyframes tr { 0% { opacity: 0.9; transform: scale(1.2); } 100% { opacity: 0; transform: scale(0.2) translateY(20px); } }

/* === Floating particles (lucioles) === */
.particles { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
.particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,217,122,0.95) 0%, rgba(255,217,122,0.3) 50%, transparent 80%);
  box-shadow: 0 0 8px rgba(255, 217, 122, 0.6);
  filter: blur(0.5px);
  will-change: transform, opacity;
}

/* === Top Nav === */
.top-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 36px;
  transition: background 0.4s, backdrop-filter 0.4s;
}
.top-nav.scrolled {
  background: linear-gradient(180deg, rgba(10,6,4,0.85), rgba(10,6,4,0.4));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(244, 198, 104, 0.15);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--fg);
  font-family: var(--font-cap);
  font-size: 20px;
  letter-spacing: 0.18em;
  font-weight: 500;
}
.brand-mark {
  width: 28px; height: 28px;
  position: relative;
}
.brand-mark::before, .brand-mark::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
}
.brand-mark::before {
  background: radial-gradient(circle at 35% 35%, var(--honey-glow), var(--honey) 60%, var(--honey-deep));
  box-shadow: 0 0 18px var(--honey-glow), 0 0 4px var(--honey-light);
}
.brand-mark::after {
  inset: 3px 0 3px 14px;
  background: var(--night);
  border-radius: 50%;
}
.nav-links { display: flex; gap: 6px; }
.nav-link {
  font-family: var(--font-cap);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-soft);
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 100px;
  transition: color 0.25s, background 0.25s;
  position: relative;
}
.nav-link:hover { color: var(--accent-glow); }
.nav-link.active { color: var(--accent-glow); }
.nav-link.active::after {
  content: '✦';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--honey);
}

/* === HERO — full-screen entrance === */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 80px 32px;
  overflow: hidden;
}

.hero-content {
  text-align: center;
  position: relative;
  z-index: 5;
  max-width: 900px;
}

.hero-mark {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  opacity: 0;
  animation: fade-up 1.2s 0.3s ease forwards;
}
.hero-mark span {
  display: inline-block;
  margin: 0 8px;
  opacity: 0.5;
}

.hero-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(110px, 20vw, 320px);
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: transparent;
  background: linear-gradient(180deg, var(--moon-glow) 0%, var(--honey-light) 35%, var(--honey) 70%, var(--honey-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 40px rgba(200, 216, 240, 0.35)) drop-shadow(0 8px 30px rgba(0,0,0,0.7));
  margin: 8px 0;
  opacity: 0;
  animation: fade-up 1.6s 0.5s ease forwards;
  position: relative;
}
.hero-title::before {
  content: 'Nøcturne';
  position: absolute;
  inset: 0;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  filter: blur(20px);
  opacity: 0.4;
  z-index: -1;
}

.hero-sub-line {
  font-family: var(--font-hand);
  font-size: clamp(32px, 4vw, 56px);
  color: var(--accent-glow);
  font-weight: 600;
  margin: -8px 0 24px;
  opacity: 0;
  animation: fade-up 1.4s 0.9s ease forwards;
  transform: rotate(-2deg);
  display: inline-block;
}

.hero-pitch {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.5;
  color: var(--fg-soft);
  max-width: 580px;
  margin: 0 auto 36px;
  opacity: 0;
  animation: fade-up 1.4s 1.2s ease forwards;
  text-wrap: balance;
}
.hero-pitch em {
  color: var(--accent-glow);
  font-style: normal;
  font-weight: 500;
  text-shadow: 0 0 20px rgba(255, 217, 122, 0.5);
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 32px;
  background: linear-gradient(180deg, rgba(255, 217, 122, 0.1), rgba(184, 114, 26, 0.05));
  border: 1px solid var(--honey);
  color: var(--accent-glow);
  font-family: var(--font-cap);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 100px;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: fade-up 1.4s 1.5s ease forwards;
  transition: all 0.3s;
  box-shadow: 0 0 0 0 rgba(255, 217, 122, 0.4), 0 4px 20px rgba(0,0,0,0.5);
}
.hero-cta:hover {
  background: linear-gradient(180deg, rgba(255, 217, 122, 0.2), rgba(184, 114, 26, 0.1));
  box-shadow: 0 0 40px 4px rgba(255, 217, 122, 0.2), 0 4px 30px rgba(0,0,0,0.7);
  transform: translateY(-2px);
}
.hero-cta::before {
  content: '✦';
  font-size: 14px;
  color: var(--honey-glow);
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll cue */
.hero-scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-cap);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 5;
}
.hero-scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(180deg, transparent, var(--honey));
  animation: scroll-pulse 2.4s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.7); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* Hero — wooden platform decoration at bottom of hero */
.hero-platform {
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 80px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(20, 10, 5, 0.6) 30%, var(--bark-deepest) 100%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.4) 0 2px, transparent 2px 30px);
  z-index: 4;
}
.hero-platform::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, transparent, var(--honey-deep) 50%, transparent);
  filter: blur(4px);
  opacity: 0.6;
}

/* Lantern hanging in hero */
.lantern {
  position: absolute;
  z-index: 6;
  pointer-events: none;
}
.lantern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 200px;
  background: linear-gradient(180deg, transparent, rgba(244, 198, 104, 0.3));
  transform: translateX(-50%) translateY(-200px);
}
.lantern-body {
  width: 36px;
  height: 50px;
  background: radial-gradient(ellipse at 50% 40%, var(--honey-glow), var(--ember) 60%, var(--bark-deep));
  border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
  box-shadow:
    0 0 60px 20px rgba(255, 138, 58, 0.4),
    0 0 120px 40px rgba(255, 138, 58, 0.2),
    inset 0 -8px 12px rgba(0,0,0,0.4);
  animation: sway 6s ease-in-out infinite;
  position: relative;
}
@keyframes sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
.lantern-1 { top: 18%; left: 8%; animation-delay: 0s; }
.lantern-2 { top: 12%; right: 12%; animation-delay: -2s; }
.lantern-3 { top: 35%; left: 22%; animation-delay: -3s; transform: scale(0.7); }

/* === SECTIONS === */
.section {
  position: relative;
  padding: 140px 0;
  z-index: 10;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 36px;
  position: relative;
}

/* Wooden plank divider between sections */
.plank-divider {
  position: relative;
  height: 24px;
  background:
    linear-gradient(90deg, transparent, rgba(200, 216, 240, 0.25) 20%, rgba(200, 216, 240, 0.25) 80%, transparent),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.4) 0 1px, transparent 1px 18px);
  margin: 0 5%;
  border-radius: 100px;
}
.plank-divider::before, .plank-divider::after {
  content: '✦';
  position: absolute;
  top: 50%; transform: translateY(-50%);
  color: var(--honey);
  font-size: 14px;
  text-shadow: 0 0 12px var(--honey-glow);
}
.plank-divider::before { left: -8px; }
.plank-divider::after { right: -8px; }

/* === Pitch — wooden parchment === */
.pitch-scroll {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(220, 230, 245, 0.18), transparent 60%),
    linear-gradient(135deg, var(--parchment), #f5f0e0);
  color: var(--ink);
  padding: 80px 90px;
  border-radius: 4px;
  box-shadow:
    inset 0 0 80px rgba(120, 80, 30, 0.3),
    inset 0 0 200px rgba(40, 50, 80, 0.18),
    0 30px 80px rgba(0,0,0,0.7),
    0 60px 150px rgba(200, 216, 240, 0.12);
  position: relative;
  font-family: var(--font-display);
}
.pitch-scroll::before, .pitch-scroll::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 30px;
  background:
    radial-gradient(ellipse at 50% 50%, var(--bark) 30%, var(--bark-deep) 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.4) 0 2px, transparent 2px 8px);
  border-radius: 100px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.pitch-scroll::before { top: -15px; }
.pitch-scroll::after { bottom: -15px; }
.pitch-eyebrow {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--bark-deep);
  text-align: center;
  margin-bottom: 24px;
  opacity: 0.7;
}
.pitch-eyebrow::before, .pitch-eyebrow::after {
  content: '✦';
  margin: 0 14px;
  color: var(--honey-deep);
  opacity: 0.7;
}
.pitch-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.5;
  text-align: center;
  color: var(--bark-deep);
  text-wrap: balance;
}
.pitch-text em {
  font-style: normal;
  color: var(--ember);
  font-weight: 500;
}
.pitch-marg {
  font-family: var(--font-hand);
  font-size: 26px;
  color: var(--ember);
  position: absolute;
  transform: rotate(-8deg);
}
.pitch-marg-1 {
  top: 10%; left: -60px;
}
.pitch-marg-2 {
  bottom: 18%; right: -40px;
  transform: rotate(6deg);
}
@media (max-width: 800px) {
  .pitch-scroll { padding: 60px 32px; }
  .pitch-marg { display: none; }
}

/* === World — vertical immersive section === */
.world-stage {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  padding: 0 36px;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .world-stage { grid-template-columns: 1fr; gap: 40px; padding: 80px 24px; }
}

.world-text h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1;
  color: var(--accent-glow);
  margin-bottom: 24px;
  text-wrap: balance;
}
.world-text h2 em {
  font-style: normal;
  display: block;
  font-family: var(--font-hand);
  color: var(--ember);
  font-size: 0.8em;
  font-weight: 600;
  transform: rotate(-2deg);
  text-shadow: 0 0 20px rgba(255, 138, 58, 0.4);
}
.world-text p {
  font-size: 19px;
  color: var(--fg-soft);
  margin-bottom: 16px;
  line-height: 1.7;
}
.world-text p em {
  color: var(--accent-glow);
  font-style: normal;
  font-weight: 500;
}

/* The world image — silhouetted village in fog */
.world-visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 4px;
  overflow: hidden;
  background: var(--night);
  box-shadow: 0 30px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(244, 198, 104, 0.15);
}
.world-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* moon glow */
    radial-gradient(circle 80px at 70% 20%, rgba(244, 232, 207, 0.4), transparent 70%),
    /* fog layers */
    radial-gradient(ellipse 120% 30% at 50% 60%, rgba(180, 200, 220, 0.15), transparent 70%),
    radial-gradient(ellipse 100% 25% at 50% 75%, rgba(150, 170, 190, 0.2), transparent 70%),
    /* village silhouette */
    linear-gradient(180deg, transparent 0%, transparent 65%, rgba(15, 10, 8, 0.8) 67%, rgba(15, 10, 8, 0.95) 80%, var(--night) 100%),
    /* sky */
    linear-gradient(180deg, #0c1018 0%, #181c28 50%, #100a14 100%);
}
.world-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,80 L20,75 L25,60 L30,75 L40,55 L45,75 L60,70 L70,50 L75,70 L90,65 L100,45 L110,68 L120,55 L130,72 L150,60 L160,40 L165,65 L180,55 L195,68 L210,50 L220,60 L235,45 L250,62 L265,55 L280,70 L295,58 L310,40 L325,65 L340,55 L355,68 L370,60 L390,72 L400,68 L400,100 L0,100 Z' fill='%23080503'/%3E%3C/svg%3E");
  background-size: 100% 40%;
  background-repeat: no-repeat;
  background-position: bottom;
  opacity: 0.95;
}
.world-shadow-creeping {
  position: absolute;
  bottom: 30%;
  left: 20%;
  width: 200px;
  height: 80px;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.95), transparent 70%);
  filter: blur(8px);
  animation: creep 8s ease-in-out infinite;
}
@keyframes creep {
  0%, 100% { transform: translateX(0) scale(1); opacity: 0.7; }
  50% { transform: translateX(40px) scale(1.2); opacity: 0.9; }
}
.world-tag {
  position: absolute;
  bottom: 20px;
  left: 24px;
  font-family: var(--font-cap);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fg-soft);
  z-index: 2;
}
.world-tag::before {
  content: '◉';
  margin-right: 8px;
  color: var(--ember);
}

/* === Three branches as embers === */
.branches-stage {
  text-align: center;
  position: relative;
}
.section-eyebrow {
  font-family: var(--font-cap);
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.section-eyebrow::before, .section-eyebrow::after {
  content: '';
  width: 30px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.section-eyebrow::after { background: linear-gradient(90deg, var(--accent), transparent); }

.section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  color: var(--fg);
  margin-bottom: 16px;
  text-wrap: balance;
}
.section-title em {
  font-style: normal;
  font-family: var(--font-hand);
  color: var(--accent-glow);
  display: block;
  font-size: 0.55em;
  transform: rotate(-1.5deg);
  margin-top: 4px;
}
.section-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--fg-soft);
  max-width: 620px;
  margin: 24px auto 80px;
  line-height: 1.5;
  text-wrap: balance;
}

.embers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
  perspective: 1000px;
}
@media (max-width: 900px) {
  .embers { grid-template-columns: 1fr; }
}

.ember-card {
  position: relative;
  background:
    radial-gradient(circle at 50% 0%, rgba(200, 216, 240, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(26, 34, 53, 0.85), rgba(10, 13, 24, 0.95));
  border: 1px solid rgba(200, 216, 240, 0.18);
  border-radius: 12px;
  padding: 48px 32px 36px;
  text-decoration: none;
  color: var(--fg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 420px;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.5s, box-shadow 0.5s;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.ember-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 100%, var(--ember-color, var(--honey)) 0%, transparent 50%);
  opacity: 0.15;
  transition: opacity 0.5s;
}
.ember-card::after {
  /* wood plank texture */
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(180deg, rgba(0,0,0,0.15) 0 1px, transparent 1px 60px);
  pointer-events: none;
  opacity: 0.5;
}
.ember-card:hover {
  transform: translateY(-12px) rotateX(2deg);
  border-color: var(--ember-color, var(--honey));
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 80px var(--ember-color, var(--honey)), inset 0 0 60px rgba(255, 217, 122, 0.08);
}
.ember-card:hover::before { opacity: 0.35; }

.ember-blason {
  width: 130px;
  height: 130px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
}
.ember-blason::before {
  content: '';
  position: absolute;
  inset: -15px;
  background: radial-gradient(circle, var(--ember-color, var(--honey)) 0%, transparent 60%);
  opacity: 0.35;
  filter: blur(14px);
  animation: flicker 3s ease-in-out infinite;
  z-index: -1;
}
.ember-blason img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.6));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ember-card:hover .ember-blason img {
  transform: scale(1.08) rotate(-2deg);
}
.ember-card[data-branch="mythéor"] .ember-blason img {
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.6)) grayscale(0.5) opacity(0.9);
  transition: filter 0.6s, transform 0.6s;
}
.ember-card[data-branch="mythéor"]:hover .ember-blason img {
  filter: drop-shadow(0 4px 24px rgba(160, 196, 104, 0.5)) grayscale(0) opacity(1);
}

@keyframes flicker {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  33% { opacity: 0.5; transform: scale(1.08); }
  66% { opacity: 0.4; transform: scale(0.95); }
}

/* === Patoche le furet === */
.patoche-roost {
  position: fixed;
  bottom: 22px;
  left: 22px;
  width: 84px;
  height: 84px;
  cursor: pointer;
  z-index: 50;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  user-select: none;
}
.patoche-roost img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6)) drop-shadow(0 0 20px rgba(232, 176, 80, 0.25));
  transition: filter 0.3s;
  animation: patoche-idle 3.6s ease-in-out infinite;
}
.patoche-roost:hover {
  transform: scale(1.12) translateY(-4px);
}
.patoche-roost:hover img {
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.7)) drop-shadow(0 0 30px rgba(255, 232, 154, 0.6));
}
@keyframes patoche-idle {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-3px) rotate(1deg); }
}
.patoche-bubble {
  position: fixed;
  bottom: 110px;
  left: 30px;
  background: var(--parchment);
  color: var(--ink);
  border-radius: 14px;
  padding: 12px 18px;
  font-family: var(--font-hand);
  font-size: 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
  z-index: 51;
  white-space: nowrap;
  border: 1px solid rgba(232, 176, 80, 0.3);
}
.patoche-bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 30px;
  width: 13px;
  height: 13px;
  background: var(--parchment);
  transform: rotate(45deg);
  border-right: 1px solid rgba(232, 176, 80, 0.3);
  border-bottom: 1px solid rgba(232, 176, 80, 0.3);
}
.patoche-bubble.show { opacity: 1; transform: translateY(0); }

.ember-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 38px;
  color: var(--ember-color, var(--honey-light));
  margin-bottom: 6px;
  z-index: 2;
  position: relative;
}
.ember-motto {
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--fg-soft);
  margin-bottom: 18px;
  z-index: 2;
  position: relative;
  font-style: italic;
}
.ember-desc {
  font-size: 15px;
  color: var(--fg-soft);
  flex: 1;
  z-index: 2;
  position: relative;
  line-height: 1.6;
}
.ember-cta {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ember-color, var(--honey-light));
  margin-top: 20px;
  z-index: 2;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s;
}
.ember-card:hover .ember-cta { gap: 14px; }

.ember-card[data-branch="dragard"] { --ember-color: #d4621a; --ember-glow: #ff8a3a; }
.ember-card[data-branch="grimlune"] { --ember-color: #6a8aa8; --ember-glow: #a0c0e0; }
.ember-card[data-branch="mythéor"] { --ember-color: #6a8a48; --ember-glow: #a0c468; }

.ember-card[data-branch="mythéor"] .ember-extinct {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: var(--font-hand);
  font-size: 18px;
  color: var(--ember-glow);
  transform: rotate(8deg);
  z-index: 3;
}

/* === Portals (carte des chapitres) === */
.portals-stage {
  position: relative;
}
.portals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 60px;
}
@media (max-width: 900px) { .portals { grid-template-columns: 1fr; } }

.portal {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--fg);
  background:
    linear-gradient(135deg, rgba(26, 34, 53, 0.75), rgba(10, 13, 24, 0.92));
  border: 1px solid rgba(200, 216, 240, 0.15);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  min-height: 320px;
  transition: transform 0.5s, border-color 0.5s;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.portal:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
}
.portal-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.portal-bg-monde {
  background:
    radial-gradient(ellipse at 50% 80%, rgba(80, 60, 100, 0.5), transparent 60%),
    linear-gradient(180deg, #08080f 0%, #14101a 100%);
}
.portal-bg-monde::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,90 L30,80 L40,60 L55,82 L70,55 L85,80 L100,68 L120,40 L135,72 L160,60 L180,38 L195,68 L220,55 L240,72 L265,45 L285,68 L305,55 L325,72 L350,50 L375,68 L400,60 L400,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.85;
}
.portal-bg-magie {
  background:
    radial-gradient(circle at 30% 40%, rgba(232, 176, 80, 0.18), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(200, 216, 240, 0.18), transparent 50%),
    linear-gradient(135deg, #0c1020 0%, #1a1830 100%);
}
.portal-bg-coulisses {
  background:
    radial-gradient(circle at 60% 30%, rgba(106, 138, 168, 0.2), transparent 60%),
    linear-gradient(180deg, #0a0a14 0%, #15101a 100%);
}
.portal-bg-newsletter {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 138, 58, 0.25), transparent 60%),
    linear-gradient(135deg, #2a0a04 0%, #1a0805 100%);
}

.portal-content {
  position: relative;
  z-index: 2;
  padding: 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.portal-num {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.portal-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 44px;
  line-height: 1.05;
  margin-bottom: 14px;
  color: var(--fg);
  text-wrap: balance;
}
.portal-title em {
  font-style: normal;
  font-family: var(--font-hand);
  color: var(--accent-glow);
  display: block;
  font-size: 0.7em;
  transform: rotate(-1deg);
  margin-top: 2px;
}
.portal-desc {
  font-size: 16px;
  color: var(--fg-soft);
  flex: 1;
  line-height: 1.6;
  max-width: 400px;
}
.portal-arrow {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-glow);
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: gap 0.3s;
}
.portal:hover .portal-arrow { gap: 18px; }

/* === Newsletter — carved invitation === */
.newsletter-section {
  position: relative;
}
.newsletter-card {
  max-width: 760px;
  margin: 0 auto;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 138, 58, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(26, 34, 53, 0.92), rgba(10, 13, 24, 0.96));
  border: 1px solid rgba(255, 154, 74, 0.35);
  border-radius: 12px;
  padding: 70px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 100px rgba(255, 138, 58, 0.1);
}
.newsletter-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(180deg, rgba(0,0,0,0.15) 0 1px, transparent 1px 60px);
  opacity: 0.5;
  pointer-events: none;
}
.newsletter-card h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(40px, 5vw, 64px);
  color: var(--accent-glow);
  margin-bottom: 16px;
  text-wrap: balance;
  position: relative;
}
.newsletter-card h2 em {
  font-style: normal;
  font-family: var(--font-hand);
  color: var(--ember);
  display: block;
  font-size: 0.55em;
  transform: rotate(-1deg);
}
.newsletter-card p {
  font-size: 19px;
  color: var(--fg-soft);
  max-width: 540px;
  margin: 0 auto 32px;
  line-height: 1.6;
  position: relative;
}
.newsletter-form {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}
.newsletter-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 17px;
  padding: 16px 24px;
  border-radius: 100px;
  border: 1px solid rgba(255, 217, 122, 0.3);
  background: rgba(10, 6, 4, 0.5);
  color: var(--fg);
  outline: none;
  transition: border-color 0.3s, background 0.3s;
}
.newsletter-input::placeholder { color: var(--fg-dim); }
.newsletter-input:focus {
  border-color: var(--accent);
  background: rgba(10, 6, 4, 0.8);
}
.newsletter-btn {
  font-family: var(--font-cap);
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 100px;
  border: 1px solid var(--ember);
  background: linear-gradient(180deg, var(--honey), var(--ember));
  color: var(--bark-deepest);
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(255, 138, 58, 0.3);
}
.newsletter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(255, 138, 58, 0.5);
}

/* ===========================================================
   LE FURET BAVARD — newsletter component (premium)
   =========================================================== */
.furet-bavard-section {
  position: relative;
  z-index: 10;
  padding: 90px 24px;
}
.furet-bavard-card {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 56px 56px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 217, 122, 0.10), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 138, 58, 0.05), transparent 60%),
    linear-gradient(180deg, rgba(18, 16, 28, 0.95), rgba(8, 10, 18, 0.98));
  border: 1px solid rgba(255, 217, 122, 0.22);
  border-radius: 18px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 80px rgba(255, 217, 122, 0.05);
  overflow: hidden;
  box-sizing: border-box;
}
/* Corner brackets */
.furet-bavard-card::before,
.furet-bavard-card::after {
  content: '';
  position: absolute;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 217, 122, 0.45);
  pointer-events: none;
}
.furet-bavard-card::before {
  top: 14px; left: 14px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 6px;
}
.furet-bavard-card::after {
  bottom: 14px; right: 14px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 6px;
}
.furet-bavard-corner-tr,
.furet-bavard-corner-bl {
  position: absolute;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 217, 122, 0.45);
  pointer-events: none;
}
.furet-bavard-corner-tr {
  top: 14px; right: 14px;
  border-left: none;
  border-bottom: none;
  border-top-right-radius: 6px;
}
.furet-bavard-corner-bl {
  bottom: 14px; left: 14px;
  border-right: none;
  border-top: none;
  border-bottom-left-radius: 6px;
}

/* Portrait */
.furet-bavard-portrait {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.furet-bavard-portrait::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(255, 217, 122, 0.35) 0%, rgba(255, 217, 122, 0.12) 35%, transparent 70%);
  filter: blur(8px);
  border-radius: 50%;
  z-index: 0;
  animation: furet-halo 4s ease-in-out infinite;
}
.furet-bavard-portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 24px rgba(255, 217, 122, 0.3));
}
@keyframes furet-halo {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* Title */
.furet-bavard-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1;
  margin: 0 0 26px;
  background: linear-gradient(180deg, var(--moon-glow) 0%, var(--accent-glow) 60%, var(--honey) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 28px rgba(255, 217, 122, 0.22));
  letter-spacing: -0.01em;
  max-width: 100%;
}

/* Body copy */
.furet-bavard-desc {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.65;
  color: var(--fg-soft);
  max-width: 620px;
  margin: 0 auto 26px;
  text-wrap: pretty;
}
.furet-bavard-gift {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.55;
  color: var(--accent-glow);
  max-width: 560px;
  margin: 0 auto 42px;
  opacity: 0.92;
  text-wrap: pretty;
}

/* Form */
.furet-bavard-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 620px;
  margin: 0 auto;
}
.furet-bavard-form input {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 18px 22px;
  border-radius: 8px;
  border: 1px solid rgba(255, 217, 122, 0.25);
  background: rgba(8, 6, 14, 0.55);
  color: var(--fg);
  outline: none;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  width: 100%;
  box-sizing: border-box;
}
.furet-bavard-form input::placeholder {
  color: var(--fg-dim);
  opacity: 0.7;
}
.furet-bavard-form input:focus {
  border-color: var(--accent);
  background: rgba(8, 6, 14, 0.85);
  box-shadow: 0 0 0 3px rgba(255, 217, 122, 0.12);
}
.furet-bavard-btn {
  grid-column: 1 / -1;
  font-family: var(--font-cap);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 20px 32px;
  border-radius: 8px;
  border: 1px solid var(--honey);
  background: linear-gradient(180deg, var(--honey-light, #ffe89a), var(--honey));
  color: var(--bark-deepest);
  cursor: pointer;
  margin-top: 6px;
  transition: transform 0.2s, box-shadow 0.3s, filter 0.2s;
  box-shadow: 0 8px 24px rgba(244, 198, 104, 0.28), 0 0 50px rgba(244, 198, 104, 0.12);
}
.furet-bavard-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(244, 198, 104, 0.4), 0 0 70px rgba(244, 198, 104, 0.22);
  filter: brightness(1.04);
}

/* Promise caption */
.furet-bavard-promise {
  margin: 30px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--fg-dim);
  opacity: 0.7;
}

/* Status messages (error / info) */
.furet-bavard-msg {
  margin: 20px auto 0;
  max-width: 540px;
  padding: 14px 22px;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  animation: fb-msg-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.furet-bavard-msg--error {
  color: #ffc8b0;
  background: rgba(255, 120, 80, 0.10);
  border: 1px solid rgba(255, 120, 80, 0.35);
}
.furet-bavard-msg--info {
  color: var(--accent-glow);
  background: rgba(255, 217, 122, 0.08);
  border: 1px solid rgba(255, 217, 122, 0.25);
}
@keyframes fb-msg-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Success state — when the card transforms after a successful signup */
.furet-bavard-card.is-success {
  animation: fb-success-pulse 0.6s ease-out;
}
.furet-bavard-card.is-success .furet-bavard-title {
  animation: fb-success-glow 1.2s ease-out;
}
@keyframes fb-success-pulse {
  0% { box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 80px rgba(255, 217, 122, 0.05); }
  50% { box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 160px rgba(255, 217, 122, 0.35); }
  100% { box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 80px rgba(255, 217, 122, 0.05); }
}
@keyframes fb-success-glow {
  0% { filter: drop-shadow(0 0 28px rgba(255, 217, 122, 0.22)); }
  50% { filter: drop-shadow(0 0 60px rgba(255, 217, 122, 0.6)); }
  100% { filter: drop-shadow(0 0 28px rgba(255, 217, 122, 0.22)); }
}

/* Disabled state on inputs during loading */
.furet-bavard-form input:disabled,
.furet-bavard-form button:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Compact variant — used inline within other pages */
.furet-bavard-card.is-compact {
  padding: 48px 40px 44px;
}
.furet-bavard-card.is-compact .furet-bavard-portrait {
  width: 130px;
  height: 130px;
  margin-bottom: 20px;
}
.furet-bavard-card.is-compact .furet-bavard-title {
  font-size: clamp(32px, 4.2vw, 48px);
  margin-bottom: 20px;
}
.furet-bavard-card.is-compact .furet-bavard-desc {
  font-size: 16px;
  margin-bottom: 20px;
}
.furet-bavard-card.is-compact .furet-bavard-gift {
  font-size: 15px;
  margin-bottom: 32px;
}

@media (max-width: 720px) {
  .furet-bavard-section { padding: 60px 16px; }
  .furet-bavard-card { padding: 50px 26px 44px; }
  .furet-bavard-card.is-compact { padding: 40px 22px 36px; }
  .furet-bavard-portrait { width: 140px; height: 140px; }
  .furet-bavard-form { grid-template-columns: 1fr; }
  .furet-bavard-card::before,
  .furet-bavard-card::after,
  .furet-bavard-corner-tr,
  .furet-bavard-corner-bl { width: 28px; height: 28px; }
}

/* === Footer === */
.footer {
  position: relative;
  z-index: 10;
  padding: 80px 36px 40px;
  text-align: center;
  border-top: 1px solid rgba(244, 198, 104, 0.1);
  margin-top: 60px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
}
.footer-brand {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 48px;
  color: var(--accent-glow);
  margin-bottom: 16px;
  filter: drop-shadow(0 0 20px rgba(255, 217, 122, 0.3));
}
.footer-tag {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: 8px;
}
.footer-credit {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  margin-top: 24px;
}

/* === Youpi === */
.youpi-roost {
  position: fixed;
  bottom: 18px;
  left: 18px;
  font-size: 28px;
  cursor: pointer;
  z-index: 50;
  filter: grayscale(0.3) drop-shadow(0 0 8px rgba(255, 217, 122, 0.3));
  transition: transform 0.2s, filter 0.2s;
  user-select: none;
}
.youpi-roost:hover { transform: scale(1.25) rotate(-8deg); filter: drop-shadow(0 0 16px rgba(255, 217, 122, 0.6)); }
.youpi-bubble {
  position: fixed;
  bottom: 70px;
  left: 14px;
  background: var(--parchment);
  color: var(--ink);
  border-radius: 14px;
  padding: 10px 16px;
  font-family: var(--font-hand);
  font-size: 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
  z-index: 51;
}
.youpi-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 22px;
  width: 12px;
  height: 12px;
  background: var(--parchment);
  transform: rotate(45deg);
}
.youpi-bubble.show { opacity: 1; transform: translateY(0); }

/* === Reveal animation === */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* === Gates of Pandoufle === */
.gates {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  perspective: 1400px;
}
.gate {
  position: absolute;
  top: 8%;
  bottom: 0;
  width: 50%;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.45) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.25) 0 1px, transparent 1px 60px),
    linear-gradient(180deg, #1a1f2e 0%, #0c0f18 100%);
  box-shadow: inset 0 0 100px rgba(0,0,0,0.7), 0 0 60px rgba(0,0,0,0.6);
  transform-origin: var(--origin);
  transition: transform 2.2s cubic-bezier(0.65, 0, 0.35, 1);
  overflow: hidden;
}
.gate-left { left: 0; --origin: left center; clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 100%); }
.gate-right { right: 0; --origin: right center; clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); }
.gate-panel {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(200, 216, 240, 0.12);
  border-radius: 4px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(232, 176, 80, 0.06), transparent 60%);
}
.gate-panel::before {
  content: '';
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(200, 216, 240, 0.06);
  border-radius: 2px;
}
.gate-runes {
  position: absolute;
  top: 30%;
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  font-family: var(--font-cap);
  font-size: 28px;
  color: var(--accent);
  opacity: 0.55;
  text-shadow: 0 0 20px var(--accent-glow);
}
.gate-arch {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 14%;
  background:
    radial-gradient(ellipse 50% 200% at 50% 100%, transparent 60%, #0c0f18 62%),
    linear-gradient(180deg, transparent, rgba(12, 15, 24, 0.9));
}
.gate-keystone {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-cap);
  font-size: 36px;
  color: var(--accent-glow);
  text-shadow: 0 0 30px var(--accent-glow), 0 0 60px var(--ember);
  z-index: 6;
  animation: keystone-pulse 3s ease-in-out infinite;
}
@keyframes keystone-pulse {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}
.gate-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: radial-gradient(circle, var(--accent-glow) 0%, var(--ember) 30%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 7;
}

/* OPENING animation */
body.opening .gate-left { transform: rotateY(-95deg); }
body.opening .gate-right { transform: rotateY(95deg); }
body.opening .gate-keystone { animation: keystone-burst 2.2s ease-out forwards; }
@keyframes keystone-burst {
  0% { opacity: 1; transform: translateX(-50%) scale(1); }
  30% { opacity: 1; transform: translateX(-50%) scale(2.5); filter: drop-shadow(0 0 60px var(--accent-glow)); }
  60% { opacity: 0.6; transform: translateX(-50%) scale(4); }
  100% { opacity: 0; transform: translateX(-50%) scale(8); }
}
body.opening .gate-glow {
  animation: glow-burst 2.2s ease-out forwards;
}
@keyframes glow-burst {
  0% { width: 0; height: 0; opacity: 0; }
  40% { width: 120vw; height: 120vw; opacity: 0.7; }
  100% { width: 250vw; height: 250vw; opacity: 0; }
}
body.opening .hero-content {
  animation: zoom-in 2.2s cubic-bezier(0.5, 0, 0.7, 0.2) forwards;
}
@keyframes zoom-in {
  0% { transform: scale(1); opacity: 1; filter: blur(0); }
  60% { transform: scale(2.2); opacity: 0.4; filter: blur(8px); }
  100% { transform: scale(5); opacity: 0; filter: blur(20px); }
}
body.opening .lantern,
body.opening .hero-scroll {
  animation: fade-out-fast 0.8s ease forwards;
}
@keyframes fade-out-fast {
  to { opacity: 0; transform: scale(1.5); }
}
body.entered { animation: enter-fade 1.2s ease forwards; }
@keyframes enter-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 700px) {
  .gate-runes { font-size: 18px; gap: 30px; }
  .gate-keystone { font-size: 24px; }
}
.bar-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 138, 58, 0.1);
  border: 1px solid rgba(255, 138, 58, 0.3);
  color: var(--ember);
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 100px;
}
.bar-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 12px var(--ember);
  animation: ember-pulse 1.6s ease-in-out infinite;
}
@keyframes ember-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* responsive */
@media (max-width: 700px) {
  .top-nav { padding: 14px 14px; flex-wrap: wrap; row-gap: 8px; }
  .brand { font-size: 16px; gap: 8px; }
  .brand-mark { width: 22px; height: 22px; }
  .nav-links { gap: 0; flex-wrap: wrap; justify-content: flex-end; }
  .nav-link { padding: 8px 10px; font-size: 10px; letter-spacing: 0.16em; }
  .container { padding: 0 22px; }
  .section { padding: 80px 0; }
  .lantern { display: none; }
  .trunk { width: 28vw; opacity: 0.55; }
  .hero { padding: 100px 20px 80px; }
  .hero-mark { letter-spacing: 0.32em; font-size: 10px; }
  .hero-pitch { font-size: 17px; }
  .hero-cta { padding: 14px 22px; font-size: 11px; letter-spacing: 0.24em; }
  .pitch-marg { display: none; }
  .pitch-scroll { padding: 50px 28px; }
  .world-stage { padding: 60px 22px; }
  .embers { gap: 20px; }
  .ember-card { min-height: auto; padding: 36px 24px 28px; }
  .portal-content { padding: 30px 26px; }
  .portal-title { font-size: 32px; }
  .newsletter-card { padding: 50px 28px; }
  .newsletter-form { flex-direction: column; }
  .newsletter-input, .newsletter-btn { width: 100%; }
  .footer { padding: 60px 22px 32px; }
  .footer-brand { font-size: 36px; }
  .patoche-roost { width: 64px; height: 64px; bottom: 14px; left: 14px; }
  .patoche-bubble { bottom: 86px; left: 18px; font-size: 18px; padding: 10px 14px; max-width: calc(100vw - 36px); white-space: normal; }
}

/* Tablet refinements */
@media (max-width: 900px) and (min-width: 701px) {
  .hero-title { font-size: clamp(96px, 16vw, 220px); }
  .top-nav { padding: 16px 24px; }
  .container { padding: 0 28px; }
}

/* Disable custom cursor on touch devices — UX guard */
@media (hover: none), (pointer: coarse) {
  .cursor-on, .cursor-on * { cursor: auto !important; }
  .lantiop, .lantiop-trail { display: none !important; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .particle, .lantern-body, .gate-keystone, .world-shadow-creeping { animation: none !important; }
}

/* ===========================================================
   CODEX — Sub-navigation
   =========================================================== */
.codex-subnav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  margin: 96px auto 0;
  padding: 22px 24px 18px;
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
}
.codex-subnav::-webkit-scrollbar { display: none; }
.codex-subnav::before {
  content: '✦';
  position: absolute;
  top: -56px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-cap);
  color: var(--accent);
  font-size: 18px;
  opacity: 0.5;
  text-shadow: 0 0 18px rgba(255, 217, 122, 0.5);
}
.codex-subnav::after {
  content: '';
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 176, 80, 0.35) 25%, rgba(232, 176, 80, 0.35) 75%, transparent);
}
.codex-pill {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-soft);
  text-decoration: none;
  padding: 11px 18px;
  border-radius: 8px 14px 10px 16px;
  border: 1px solid rgba(232, 176, 80, 0.22);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 217, 122, 0.07), transparent 60%),
    linear-gradient(180deg, rgba(40, 30, 22, 0.65), rgba(18, 14, 10, 0.88));
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  box-shadow:
    inset 0 1px 0 rgba(255, 217, 122, 0.08),
    0 4px 14px rgba(0, 0, 0, 0.45);
  position: relative;
  flex-shrink: 0;
  transition: color 0.3s, background 0.3s, border-color 0.3s, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
}
.codex-pill::before {
  font-family: var(--font-cap);
  font-size: 12px;
  opacity: 0.55;
  color: var(--accent);
  transition: opacity 0.3s, transform 0.4s, color 0.3s, text-shadow 0.3s;
  display: inline-block;
  line-height: 1;
}
.codex-pill[data-icon="star"]::before  { content: '✦'; }
.codex-pill[data-icon="vine"]::before  { content: '❦'; }
.codex-pill[data-icon="tree"]::before  { content: '✺'; }
.codex-pill[data-icon="face"]::before  { content: '❀'; }
.codex-pill[data-icon="spark"]::before { content: '✧'; }
.codex-pill[data-icon="moon"]::before  { content: '☾'; }
.codex-pill[data-icon="paw"]::before   { content: '❧'; }

.codex-pill:nth-child(odd)  { transform: rotate(-1deg); }
.codex-pill:nth-child(even) { transform: rotate(1deg); }

.codex-pill:hover {
  color: var(--accent-glow);
  border-color: rgba(255, 217, 122, 0.55);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 217, 122, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(60, 42, 24, 0.8), rgba(30, 20, 14, 0.88));
  transform: rotate(0deg) translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 217, 122, 0.2),
    0 8px 24px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(255, 217, 122, 0.2);
}
.codex-pill:hover::before {
  opacity: 1;
  transform: scale(1.25) rotate(18deg);
  text-shadow: 0 0 10px var(--accent-glow);
}

.codex-pill.active {
  color: var(--accent-glow);
  border-color: rgba(255, 217, 122, 0.55);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 217, 122, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(60, 42, 24, 0.8), rgba(30, 20, 14, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 217, 122, 0.2),
    0 8px 24px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(255, 217, 122, 0.2);
  transform: rotate(0deg);
}
.codex-pill.active::before {
  color: var(--accent-glow);
  opacity: 1;
  text-shadow: 0 0 12px var(--accent-glow), 0 0 22px rgba(255, 138, 58, 0.5);
  animation: pill-spark 2.4s ease-in-out infinite;
}
@keyframes pill-spark {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.75; }
  50%      { transform: scale(1.4) rotate(15deg); opacity: 1; }
}

@media (max-width: 700px) {
  .codex-subnav {
    margin-top: 64px;
    justify-content: flex-start;
    padding: 12px 22px;
    gap: 10px;
  }
  .codex-subnav::before { top: -42px; font-size: 15px; }
  .codex-subnav::after  { top: -26px; width: 160px; }
  .codex-pill { padding: 10px 14px; gap: 7px; }
}

/* ===========================================================
   CODEX — Bento landing
   =========================================================== */
.codex-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  gap: 22px;
  perspective: 1400px;
}
.codex-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 260px;
  padding: 32px 30px;
  border-radius: 18px;
  text-decoration: none;
  color: var(--fg);
  border: 1px solid rgba(200, 216, 240, 0.15);
  background: linear-gradient(140deg, rgba(26, 34, 53, 0.55), rgba(10, 13, 24, 0.92));
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.5s, box-shadow 0.5s;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  grid-column: span 2;
  isolation: isolate;
}
/* Background image layer (zoomable on hover) */
.codex-tile-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity: 0.55;
  filter: saturate(1.05) brightness(0.92);
  transform: scale(1);
  transition: opacity 0.6s, transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s;
}
.codex-tile:hover .codex-tile-bg {
  opacity: 0.78;
  transform: scale(1.06);
  filter: saturate(1.15) brightness(1);
}
/* Dark scrim — guarantees text legibility over any image */
.codex-tile-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 10, 18, 0.15) 0%, rgba(8, 10, 18, 0.55) 55%, rgba(8, 10, 18, 0.92) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(8, 10, 18, 0.3), transparent 70%);
}
.codex-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
  z-index: 2;
  transition: opacity 0.5s;
  mix-blend-mode: soft-light;
}
.codex-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 60px);
  opacity: 0.5;
  z-index: 2;
  pointer-events: none;
}
.codex-tile:hover {
  transform: translateY(-8px);
  border-color: var(--tone-border, var(--accent));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 100px var(--tone-glow, transparent);
}
.codex-tile:hover::before { opacity: 1; }
.codex-tile-eyebrow {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tone-eyebrow, var(--accent));
  margin-bottom: 14px;
  position: relative;
  z-index: 3;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.codex-tile-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  margin-bottom: 12px;
  color: var(--tone-title, var(--fg));
  position: relative;
  z-index: 3;
  letter-spacing: -0.01em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}
.codex-tile-desc {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-soft);
  margin-bottom: 18px;
  position: relative;
  z-index: 3;
  max-width: 460px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.codex-tile-arrow {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tone-eyebrow, var(--accent-glow));
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s;
}
.codex-tile:hover .codex-tile-arrow { gap: 14px; }

/* Featured tile (Pandoufle): big block, 4 cols × 2 rows */
.codex-tile--featured {
  grid-column: span 4;
  grid-row: span 2;
  min-height: 540px;
  padding: 48px 44px;
}
.codex-tile--featured .codex-tile-title {
  font-size: clamp(56px, 7vw, 100px);
  line-height: 0.92;
  margin-bottom: 18px;
}
.codex-tile--featured .codex-tile-desc { font-size: 19px; max-width: 540px; }

/* Wide tiles (3 cols) */
.codex-tile--wide { grid-column: span 3; min-height: 280px; }
.codex-tile--wide .codex-tile-title { font-size: 48px; }

/* Tones — visual variation per tile */
.codex-tile[data-tone="amber"] {
  --tone-border: #e8b050;
  --tone-glow: rgba(255, 184, 90, 0.22);
  --tone-eyebrow: #ffd078;
  --tone-title: #ffe89a;
}
.codex-tile[data-tone="amber"]::before {
  background:
    radial-gradient(circle at 80% 0%, rgba(255, 184, 90, 0.28), transparent 55%),
    radial-gradient(circle at 20% 100%, rgba(184, 90, 30, 0.2), transparent 60%);
}
.codex-tile[data-tone="mist"] {
  --tone-border: #8aa8c8;
  --tone-glow: rgba(160, 192, 224, 0.18);
  --tone-eyebrow: #b0c8e0;
  --tone-title: #e0ecff;
}
.codex-tile[data-tone="mist"]::before {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(160, 200, 230, 0.22), transparent 60%),
    radial-gradient(ellipse at 30% 100%, rgba(80, 110, 140, 0.2), transparent 60%);
}
.codex-tile[data-tone="ember"] {
  --tone-border: #d4621a;
  --tone-glow: rgba(255, 138, 58, 0.22);
  --tone-eyebrow: #ff9a4a;
  --tone-title: #ffd078;
}
.codex-tile[data-tone="ember"]::before {
  background:
    radial-gradient(circle at 50% 100%, rgba(255, 138, 58, 0.3), transparent 55%),
    radial-gradient(circle at 0% 0%, rgba(106, 138, 168, 0.15), transparent 60%),
    radial-gradient(circle at 100% 0%, rgba(106, 138, 72, 0.15), transparent 60%);
}
.codex-tile[data-tone="warm"] {
  --tone-border: #c87a4a;
  --tone-glow: rgba(232, 140, 80, 0.18);
  --tone-eyebrow: #f8b078;
  --tone-title: #fadeb8;
}
.codex-tile[data-tone="warm"]::before {
  background:
    radial-gradient(circle at 70% 30%, rgba(232, 140, 80, 0.22), transparent 60%);
}
.codex-tile[data-tone="silver"] {
  --tone-border: #aab8d0;
  --tone-glow: rgba(180, 200, 230, 0.18);
  --tone-eyebrow: #c0d0e8;
  --tone-title: #e0e8f5;
}
.codex-tile[data-tone="silver"]::before {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(180, 200, 230, 0.18), transparent 65%);
}
.codex-tile[data-tone="moss"] {
  --tone-border: #6a8a48;
  --tone-glow: rgba(160, 196, 104, 0.22);
  --tone-eyebrow: #a0c468;
  --tone-title: #c8e09a;
}
.codex-tile[data-tone="moss"]::before {
  background:
    radial-gradient(circle at 30% 70%, rgba(106, 138, 72, 0.28), transparent 60%);
}
.codex-tile[data-tone="forest"] {
  --tone-border: #5a8068;
  --tone-glow: rgba(120, 168, 144, 0.18);
  --tone-eyebrow: #8aa898;
  --tone-title: #c0d8c8;
}
.codex-tile[data-tone="forest"]::before {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(80, 120, 90, 0.25), transparent 60%),
    radial-gradient(ellipse at 30% 100%, rgba(40, 60, 50, 0.4), transparent 60%);
}

/* Blasons row inside Magie tile */
.codex-tile-blasons {
  position: absolute;
  top: 26px;
  right: 26px;
  display: flex;
  gap: 8px;
  z-index: 4;
  opacity: 0.92;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.6));
}
.codex-tile-blasons img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
  transition: transform 0.4s;
}
.codex-tile-blasons img:nth-child(1) { transform: rotate(-6deg); }
.codex-tile-blasons img:nth-child(3) { transform: rotate(6deg); }
.codex-tile:hover .codex-tile-blasons img:nth-child(1) { transform: rotate(-10deg) translateY(-2px); }
.codex-tile:hover .codex-tile-blasons img:nth-child(3) { transform: rotate(10deg) translateY(-2px); }

/* Featured tile decoration: floating mark */
.codex-tile--featured::after {
  content: '✦';
  position: absolute;
  top: 28px;
  right: 36px;
  font-family: var(--font-cap);
  font-size: 38px;
  color: var(--tone-title);
  text-shadow: 0 0 30px var(--tone-glow), 0 2px 12px rgba(0, 0, 0, 0.7);
  opacity: 0.9;
  background: none;
  inset: auto;
  width: auto;
  height: auto;
  z-index: 4;
}

/* Bento responsive */
@media (max-width: 1100px) {
  .codex-tile--featured { grid-column: span 6; grid-row: auto; min-height: 380px; }
  .codex-tile--wide { grid-column: span 3; }
}
@media (max-width: 700px) {
  .codex-bento { grid-template-columns: 1fr; gap: 16px; }
  .codex-tile, .codex-tile--featured, .codex-tile--wide { grid-column: 1; min-height: 220px; padding: 28px 24px; }
  .codex-tile--featured { min-height: 320px; padding: 36px 28px; }
  .codex-tile-title { font-size: 36px; }
  .codex-tile--featured .codex-tile-title { font-size: 56px; }
  .codex-tile--featured::after { font-size: 28px; top: 18px; right: 22px; }
  .codex-tile-blasons { top: 20px; right: 20px; }
  .codex-tile-blasons img { width: 38px; height: 38px; }
}

/* ===========================================================
   CITY PAGES — ambiances + layout
   =========================================================== */
.ambiance-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

/* Snow (Froikanar) */
.ambiance-snow .ambiance-overlay {
  background: radial-gradient(ellipse 100% 70% at 50% 30%, rgba(200, 220, 255, 0.10), transparent 60%);
}
.ambiance-snow .ambiance-overlay::before,
.ambiance-snow .ambiance-overlay::after {
  content: '';
  position: absolute;
  inset: -100px 0 0 0;
  background-image:
    radial-gradient(2px 2px at 10% 20%, white, transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 40%, white, transparent 60%),
    radial-gradient(2.5px 2.5px at 60% 70%, white, transparent 60%),
    radial-gradient(1px 1px at 80% 90%, white, transparent 60%),
    radial-gradient(2px 2px at 90% 10%, white, transparent 60%),
    radial-gradient(1.5px 1.5px at 50% 50%, white, transparent 60%);
  background-size: 280px 280px;
  animation: snow-drift 18s linear infinite;
  opacity: 0.7;
}
.ambiance-snow .ambiance-overlay::after {
  background-size: 380px 380px;
  animation-duration: 26s;
  opacity: 0.4;
  filter: blur(1.5px);
}
@keyframes snow-drift {
  from { transform: translate3d(0, -280px, 0); }
  to   { transform: translate3d(0, 100vh, 0); }
}

/* Rain (Bourg-Trempé) */
.ambiance-rain .ambiance-overlay {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(60, 90, 130, 0.20), transparent 70%),
    radial-gradient(ellipse at 50% 100%, rgba(40, 60, 80, 0.15), transparent 60%);
}
.ambiance-rain .ambiance-overlay::before,
.ambiance-rain .ambiance-overlay::after {
  content: '';
  position: absolute;
  inset: -380px -120px -100px -120px;
  pointer-events: none;
}
.ambiance-rain .ambiance-overlay::before {
  background-image:
    radial-gradient(1.4px 13px at 6% 10%,  rgba(200, 220, 240, 0.7), transparent),
    radial-gradient(1.4px 11px at 16% 55%, rgba(200, 220, 240, 0.6), transparent),
    radial-gradient(1.4px 14px at 26% 85%, rgba(200, 220, 240, 0.7), transparent),
    radial-gradient(1.4px 12px at 36% 25%, rgba(200, 220, 240, 0.65), transparent),
    radial-gradient(1.4px 13px at 46% 70%, rgba(200, 220, 240, 0.7), transparent),
    radial-gradient(1.4px 10px at 56% 40%, rgba(200, 220, 240, 0.55), transparent),
    radial-gradient(1.4px 13px at 66% 92%, rgba(200, 220, 240, 0.7), transparent),
    radial-gradient(1.4px 11px at 76% 22%, rgba(200, 220, 240, 0.6), transparent),
    radial-gradient(1.4px 14px at 86% 65%, rgba(200, 220, 240, 0.7), transparent),
    radial-gradient(1.4px 12px at 96% 38%, rgba(200, 220, 240, 0.65), transparent);
  background-size: 220px 320px;
  animation: rain-fall 4.5s linear infinite;
  opacity: 0.18;
  filter: blur(1px);
}
.ambiance-rain .ambiance-overlay::after {
  background-image:
    radial-gradient(1px 9px at 12% 28%,  rgba(180, 210, 240, 0.5), transparent),
    radial-gradient(1px 11px at 32% 65%, rgba(180, 210, 240, 0.45), transparent),
    radial-gradient(1px 8px at 52% 18%,  rgba(180, 210, 240, 0.4), transparent),
    radial-gradient(1px 10px at 72% 48%, rgba(180, 210, 240, 0.45), transparent),
    radial-gradient(1px 12px at 92% 78%, rgba(180, 210, 240, 0.45), transparent);
  background-size: 280px 380px;
  animation: rain-fall 7s linear infinite;
  opacity: 0.10;
  filter: blur(2.4px);
}
@keyframes rain-fall {
  from { transform: skewX(-9deg) translate3d(0, -380px, 0); }
  to   { transform: skewX(-9deg) translate3d(-18px, 380px, 0); }
}

/* Mist (Fort-en-Brume) */
.ambiance-mist .ambiance-overlay {
  background:
    radial-gradient(ellipse 200% 60% at 50% 70%, rgba(180, 200, 220, 0.15), transparent 70%),
    radial-gradient(ellipse 150% 40% at 50% 30%, rgba(160, 180, 200, 0.10), transparent 70%);
}
.ambiance-mist .ambiance-overlay::before,
.ambiance-mist .ambiance-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 30% at 20% 60%, rgba(200, 220, 240, 0.12), transparent 70%),
    radial-gradient(ellipse 60% 35% at 80% 40%, rgba(200, 220, 240, 0.10), transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 80%, rgba(200, 220, 240, 0.12), transparent 70%);
  filter: blur(40px);
  animation: mist-drift 28s ease-in-out infinite;
}
.ambiance-mist .ambiance-overlay::after {
  animation-duration: 40s;
  animation-direction: reverse;
  opacity: 0.7;
}
@keyframes mist-drift {
  0%, 100% { transform: translate3d(-30px, 0, 0); }
  50%      { transform: translate3d(40px, -10px, 0); }
}

/* Golden (Eldora) */
.ambiance-golden .ambiance-overlay {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 217, 122, 0.18), transparent 60%),
    radial-gradient(circle at 30% 80%, rgba(232, 176, 80, 0.10), transparent 60%);
}
.ambiance-golden .ambiance-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 15% 25%, rgba(255, 232, 154, 0.9), transparent 70%),
    radial-gradient(1.5px 1.5px at 35% 55%, rgba(255, 232, 154, 0.7), transparent 70%),
    radial-gradient(3px 3px at 55% 35%, rgba(255, 232, 154, 0.9), transparent 70%),
    radial-gradient(1px 1px at 75% 75%, rgba(255, 232, 154, 0.6), transparent 70%),
    radial-gradient(2px 2px at 85% 25%, rgba(255, 232, 154, 0.8), transparent 70%);
  background-size: 220px 220px;
  animation: golden-shimmer 16s ease-in-out infinite alternate;
  opacity: 0.7;
}
@keyframes golden-shimmer {
  from { opacity: 0.4; transform: translate(0, 0); }
  to   { opacity: 0.9; transform: translate(20px, -10px); }
}

/* Dark / lost (Félicity) */
.ambiance-dark .ambiance-overlay {
  background:
    radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, rgba(60, 10, 10, 0.18), transparent 70%);
}

/* Bustling (Mercado) */
.ambiance-bustling .ambiance-overlay {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 138, 58, 0.18), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(232, 176, 80, 0.16), transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(212, 98, 26, 0.12), transparent 65%);
}

/* Haunted forest (Forêt des Oubliés) */
.ambiance-haunted .ambiance-overlay {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(80, 110, 70, 0.18), transparent 70%),
    radial-gradient(ellipse at 70% 30%, rgba(120, 60, 100, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent 50%);
}

/* Spectral (Plaine des Trépassés) */
.ambiance-spectral .ambiance-overlay {
  background:
    radial-gradient(ellipse 100% 50% at 50% 80%, rgba(180, 200, 220, 0.14), transparent 70%),
    radial-gradient(ellipse 80% 30% at 50% 30%, rgba(200, 200, 220, 0.10), transparent 70%);
}

/* Mystic / blue (Nivoirien — placeholder palette) */
.ambiance-mystic .ambiance-overlay {
  background:
    radial-gradient(circle at 50% 30%, rgba(140, 160, 220, 0.18), transparent 60%),
    radial-gradient(circle at 30% 80%, rgba(100, 120, 200, 0.14), transparent 60%);
}

/* === City page layout === */
.city-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 140px 36px 100px;
  position: relative;
  z-index: 12;
}
.city-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--fg-soft);
  text-decoration: none;
  margin-bottom: 32px;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid rgba(200, 216, 240, 0.12);
  background: rgba(10, 13, 24, 0.5);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.city-back:hover {
  color: var(--accent-glow);
  border-color: rgba(255, 217, 122, 0.4);
  background: rgba(255, 217, 122, 0.08);
}
.city-header {
  text-align: center;
  margin-bottom: 50px;
}
.city-icon {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 22px;
  display: inline-block;
  filter: drop-shadow(0 0 28px var(--city-glow, var(--accent-glow)));
  animation: float-soft 5s ease-in-out infinite;
}
@keyframes float-soft {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}
.city-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(60px, 9vw, 140px);
  line-height: 0.9;
  margin-bottom: 22px;
  background: linear-gradient(180deg, var(--city-glow, var(--moon-glow)) 0%, var(--city-color, var(--honey-light)) 65%, var(--city-color-deep, var(--honey)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 50px var(--city-glow, var(--accent-glow))) drop-shadow(0 6px 20px rgba(0, 0, 0, 0.7));
  text-wrap: balance;
}
.city-survival {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  border-radius: 100px;
  border: 1px solid var(--city-color, var(--honey));
  color: var(--city-color, var(--honey-light));
  font-family: var(--font-cap);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: rgba(255, 217, 122, 0.05);
}
.city-survival.is-classified {
  border-color: var(--city-color, var(--honey));
  font-style: italic;
  letter-spacing: 0.3em;
}
.city-prose {
  max-width: 760px;
  margin: 0 auto 60px;
  font-size: 19px;
  line-height: 1.8;
  color: var(--fg-soft);
  text-wrap: pretty;
}
.city-prose em {
  color: var(--city-glow, var(--accent-glow));
  font-style: italic;
  font-weight: 500;
}
.city-prose.is-mystery {
  font-style: italic;
  font-family: var(--font-display);
  text-align: center;
  font-size: 22px;
}
.city-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 50px;
}
@media (max-width: 800px) { .city-cards { grid-template-columns: 1fr; } }
.city-card {
  position: relative;
  background: linear-gradient(180deg, rgba(26, 34, 53, 0.55), rgba(10, 13, 24, 0.85));
  border: 1px solid var(--city-color, rgba(200, 216, 240, 0.18));
  border-radius: 14px;
  padding: 24px 22px;
  transition: transform 0.4s, box-shadow 0.4s;
}
.city-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 50px var(--city-glow, transparent);
}
.city-card-tag {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--city-color, var(--accent));
  margin-bottom: 12px;
}
.city-card-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-soft);
}

/* City color tokens — applied via body class */
.ambiance-snow      { --city-color: #b8d8ff; --city-color-deep: #6a9ac8; --city-glow: rgba(200, 220, 255, 0.6); }
.ambiance-rain      { --city-color: #6a9ac8; --city-color-deep: #4a78a8; --city-glow: rgba(160, 200, 232, 0.6); }
.ambiance-mist      { --city-color: #b0bcc8; --city-color-deep: #707a88; --city-glow: rgba(200, 216, 232, 0.6); }
.ambiance-golden    { --city-color: #f8d078; --city-color-deep: #c89030; --city-glow: rgba(255, 232, 154, 0.7); }
.ambiance-dark      { --city-color: #c87878; --city-color-deep: #804040; --city-glow: rgba(200, 100, 100, 0.5); }
.ambiance-bustling  { --city-color: #f8a850; --city-color-deep: #c87020; --city-glow: rgba(255, 168, 80, 0.6); }
.ambiance-haunted   { --city-color: #8aa898; --city-color-deep: #506a5a; --city-glow: rgba(120, 168, 144, 0.55); }
.ambiance-spectral  { --city-color: #c8d0d8; --city-color-deep: #808890; --city-glow: rgba(200, 216, 224, 0.5); }
.ambiance-mystic    { --city-color: #a8b8e0; --city-color-deep: #6878b0; --city-glow: rgba(160, 180, 224, 0.55); }

/* Mobile tweaks for city pages */
@media (max-width: 700px) {
  .city-page { padding: 110px 22px 70px; }
  .city-icon { font-size: 52px; }
  .city-prose { font-size: 17px; }
}

/* ===========================================================
   REGIONS — TCG-style cards
   =========================================================== */
.regions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 1000px) { .regions-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 600px)  { .regions-grid { grid-template-columns: 1fr; gap: 18px; } }

.region-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: var(--fg);
  border: 1px solid var(--card-border, rgba(232, 176, 80, 0.25));
  background: linear-gradient(180deg, #1a2235, #0a0d18);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s, border-color 0.5s;
  perspective: 1000px;
}
.region-card:hover {
  transform: translateY(-8px) rotate(-0.4deg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75), 0 0 80px var(--card-glow, rgba(232, 176, 80, 0.3));
  border-color: var(--card-color, var(--accent));
}

/* Illustration layer (placeholder gradient — swap for image when ready) */
.region-card-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--card-art);
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.region-card:hover .region-card-art { transform: scale(1.06); }

/* Inner frame: vignette + grain on top of art */
.region-card-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, transparent 35%, rgba(0, 0, 0, 0.85) 100%);
}
.region-card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.15 0 0 0 0 0.1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.4;
  mix-blend-mode: overlay;
}

/* Decorative inner border for the TCG frame feel */
.region-card::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--card-border, rgba(232, 176, 80, 0.18));
  border-radius: 12px;
  z-index: 4;
  pointer-events: none;
  opacity: 0.7;
}

/* Symbol overlay (SVG) */
.region-card-symbol {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 56px;
  height: 56px;
  z-index: 5;
  color: var(--card-color, var(--accent-glow));
  filter:
    drop-shadow(0 4px 14px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 18px var(--card-glow, rgba(255, 217, 122, 0.4)));
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.region-card-symbol svg { width: 100%; height: 100%; display: block; }
.region-card:hover .region-card-symbol { transform: scale(1.12) rotate(-6deg); }

/* Bottom content panel */
.region-card-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 24px 22px 22px;
}
.region-card-meta {
  font-family: var(--font-cap);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--card-color, var(--accent));
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.region-card-meta::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--card-color, var(--accent)), transparent);
  opacity: 0.45;
}
.region-card-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 36px;
  line-height: 0.95;
  margin-bottom: 6px;
  color: var(--card-glow, var(--fg));
  letter-spacing: -0.01em;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.6));
  text-wrap: balance;
}
.region-card-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-soft);
  text-wrap: pretty;
}

/* Per-region tones (placeholders — swap art for real illustrations) */
.region-card[data-region="mercado"] {
  --card-color: #f8a850;
  --card-glow: #ffd078;
  --card-border: rgba(255, 168, 80, 0.32);
  --card-art:
    radial-gradient(ellipse at 30% 60%, rgba(255, 138, 58, 0.5), transparent 60%),
    radial-gradient(ellipse at 70% 25%, rgba(232, 176, 80, 0.42), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(212, 98, 26, 0.32), transparent 55%),
    linear-gradient(160deg, #2a1408 0%, #150a04 100%);
}
.region-card[data-region="froikanar"] {
  --card-color: #b8d8ff;
  --card-glow: #e0ecff;
  --card-border: rgba(200, 220, 255, 0.32);
  --card-art:
    radial-gradient(ellipse at 50% 30%, rgba(200, 220, 255, 0.32), transparent 60%),
    radial-gradient(ellipse at 30% 80%, rgba(140, 180, 230, 0.28), transparent 60%),
    linear-gradient(160deg, #0a1424 0%, #050a14 100%);
}
.region-card[data-region="bourg-trempe"] {
  --card-color: #6a9ac8;
  --card-glow: #a0c8e8;
  --card-border: rgba(160, 200, 232, 0.32);
  --card-art:
    radial-gradient(ellipse at 40% 50%, rgba(60, 120, 180, 0.42), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(40, 90, 140, 0.4), transparent 60%),
    linear-gradient(160deg, #0a1828 0%, #050f18 100%);
}
.region-card[data-region="eldora"] {
  --card-color: #f8d078;
  --card-glow: #ffe89a;
  --card-border: rgba(255, 232, 154, 0.4);
  --card-art:
    radial-gradient(circle at 50% 40%, rgba(255, 217, 122, 0.5), transparent 55%),
    radial-gradient(ellipse at 30% 80%, rgba(184, 114, 26, 0.35), transparent 60%),
    linear-gradient(160deg, #1c1408 0%, #0a0604 100%);
}
.region-card[data-region="felicity"] {
  --card-color: #e8a868;
  --card-glow: #ffd49a;
  --card-border: rgba(232, 168, 104, 0.32);
  --card-art:
    radial-gradient(circle at 50% 35%, rgba(255, 184, 90, 0.32), transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(40, 10, 10, 0.65), transparent 60%),
    linear-gradient(180deg, #2a1410 0%, #0a0604 100%);
}
.region-card[data-region="fort-en-brume"] {
  --card-color: #b0bcc8;
  --card-glow: #d0d8e0;
  --card-border: rgba(200, 216, 232, 0.32);
  --card-art:
    radial-gradient(ellipse at 40% 50%, rgba(180, 200, 220, 0.32), transparent 65%),
    radial-gradient(ellipse at 70% 70%, rgba(140, 160, 180, 0.28), transparent 60%),
    linear-gradient(160deg, #0e1620 0%, #060a10 100%);
}
.region-card[data-region="nivoirien"] {
  --card-color: #a8b8e0;
  --card-glow: #c8d0f0;
  --card-border: rgba(160, 180, 224, 0.3);
  --card-art:
    radial-gradient(circle at 70% 22%, rgba(160, 180, 224, 0.32), transparent 50%),
    radial-gradient(circle at 25% 78%, rgba(70, 80, 130, 0.28), transparent 60%),
    linear-gradient(180deg, #02040c 0%, #060814 60%, #02030a 100%);
}
.region-card[data-region="foret-des-oublies"] {
  --card-color: #8aa898;
  --card-glow: #c0e0a8;
  --card-border: rgba(120, 168, 144, 0.32);
  --card-art:
    radial-gradient(ellipse at 30% 60%, rgba(80, 110, 70, 0.45), transparent 65%),
    radial-gradient(ellipse at 70% 30%, rgba(120, 60, 100, 0.28), transparent 65%),
    linear-gradient(160deg, #0a1208 0%, #050804 100%);
}
.region-card[data-region="plaine-des-trepasses"] {
  --card-color: #c8d0d8;
  --card-glow: #e0e8f0;
  --card-border: rgba(200, 216, 224, 0.3);
  --card-art:
    radial-gradient(ellipse at 50% 80%, rgba(100, 120, 140, 0.32), transparent 65%),
    radial-gradient(ellipse at 50% 30%, rgba(150, 160, 180, 0.22), transparent 60%),
    linear-gradient(160deg, #0c0e14 0%, #06080c 100%);
}

@media (max-width: 600px) {
  .region-card-name { font-size: 30px; }
  .region-card-symbol { width: 44px; height: 44px; top: 16px; right: 16px; }
  .region-card-body { padding: 20px 18px 18px; }
}

/* === Region grid section titles (3 narrative lines) === */
.regions-section-title {
  text-align: center;
  max-width: 720px;
  margin: 70px auto 36px;
  position: relative;
}
.regions-section-title:first-child { margin-top: 0; }
.regions-section-eyebrow {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.regions-section-eyebrow::before,
.regions-section-eyebrow::after {
  content: '';
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.regions-section-eyebrow::after {
  background: linear-gradient(90deg, var(--accent), transparent);
}
.regions-section-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
  color: var(--accent-glow);
  margin: 12px 0 8px;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.regions-section-lede {
  font-size: 15px;
  color: var(--fg-soft);
  line-height: 1.5;
  font-style: italic;
  font-family: var(--font-display);
  text-wrap: pretty;
}

/* ===========================================================
   CERCLE DES PREMIERS LECTEURS — Sales page layout
   =========================================================== */

/* HERO */
.cercle-hero {
  position: relative;
  z-index: 10;
  padding: 140px 36px 80px;
  text-align: center;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-wrap: break-word;
}
.cercle-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 100px;
  border: 1px solid rgba(255, 154, 74, 0.4);
  background: rgba(255, 154, 74, 0.08);
  color: var(--ember);
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.cercle-hero-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 14px var(--ember);
  animation: ember-pulse 1.6s ease-in-out infinite;
}
.cercle-hero h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1;
  margin: 0 0 28px;
  background: linear-gradient(180deg, var(--moon-glow) 0%, var(--accent-glow) 55%, var(--honey) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 36px rgba(255, 217, 122, 0.25));
  text-wrap: balance;
  letter-spacing: -0.01em;
  max-width: 100%;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: center;
}
.cercle-hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.45;
  color: var(--fg-soft);
  max-width: 760px;
  margin: 0 auto 56px;
  text-wrap: balance;
}
.cercle-hero-tagline em {
  color: var(--accent-glow);
  font-style: italic;
  font-weight: 500;
}

/* STATS row */
.cercle-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 0 auto 56px;
  max-width: 900px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 217, 122, 0.18);
  padding-top: 48px;
}
.cercle-stat {
  text-align: center;
}
.cercle-stat-number {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1;
  color: var(--accent-glow);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
  filter: drop-shadow(0 0 22px rgba(255, 217, 122, 0.3));
}
.cercle-stat-label {
  font-family: var(--font-cap);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}

/* Primary CTA button */
.cercle-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 40px;
  background: linear-gradient(180deg, var(--honey-light), var(--ember));
  border: 1px solid var(--ember);
  color: var(--bark-deepest);
  font-family: var(--font-cap);
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  border-radius: 100px;
  box-shadow: 0 8px 30px rgba(255, 138, 58, 0.35), 0 0 60px rgba(255, 138, 58, 0.18);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
  position: relative;
}
.cercle-cta-primary::before {
  content: '✦';
  font-size: 14px;
  color: var(--bark-deepest);
}
.cercle-cta-primary::after {
  content: '→';
  font-size: 16px;
  color: var(--bark-deepest);
  transition: transform 0.3s;
}
.cercle-cta-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 44px rgba(255, 138, 58, 0.5), 0 0 80px rgba(255, 138, 58, 0.3);
}
.cercle-cta-primary:hover::after { transform: translateX(4px); }
.cercle-cta-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--fg-dim);
  font-style: italic;
}

/* SECTIONS */
.cercle-section {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 36px;
}
.cercle-section-header {
  text-align: center;
  max-width: 740px;
  margin: 0 auto 60px;
}
.cercle-section-eyebrow {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.cercle-section-eyebrow::before,
.cercle-section-eyebrow::after {
  content: '';
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.cercle-section-eyebrow::after {
  background: linear-gradient(90deg, var(--accent), transparent);
}
.cercle-section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  color: var(--accent-glow);
  margin: 0 0 16px;
  text-wrap: balance;
  letter-spacing: -0.01em;
  max-width: 100%;
  overflow-wrap: break-word;
}
.cercle-section-title em {
  display: block;
  margin-top: 4px;
  color: var(--fg-soft);
  opacity: 0.92;
  font-weight: 400;
}
.cercle-section-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--fg-soft);
  line-height: 1.5;
  text-wrap: pretty;
}

/* NARRATIVE (Gaspard prose) */
.cercle-narrative {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.85;
  color: var(--fg-soft);
}
.cercle-narrative p { margin-bottom: 22px; text-wrap: pretty; }
.cercle-narrative p:last-child { margin-bottom: 0; }
.cercle-narrative em {
  color: var(--accent-glow);
  font-style: italic;
  font-weight: 500;
}
.cercle-narrative .lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--accent-glow);
  line-height: 1.4;
  margin-bottom: 32px;
}

/* BENEFITS grid (numbered cards) */
.cercle-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.cercle-benefit {
  position: relative;
  padding: 38px 36px 34px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255, 217, 122, 0.12), transparent 55%),
    linear-gradient(135deg, rgba(36, 28, 22, 0.65), rgba(14, 16, 26, 0.95));
  border: 1px solid rgba(232, 176, 80, 0.28);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s, box-shadow 0.4s;
}
.cercle-benefit::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 217, 122, 0.12);
  border-radius: 11px;
  pointer-events: none;
}
.cercle-benefit:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 217, 122, 0.12);
}
.cercle-benefit-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 74px;
  line-height: 0.9;
  color: var(--accent);
  opacity: 0.45;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.cercle-benefit-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  color: var(--accent-glow);
  margin: 0 0 12px;
}
.cercle-benefit-claim {
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--ember);
  margin-bottom: 14px;
  transform: rotate(-1deg);
  display: inline-block;
}
.cercle-benefit-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-soft);
  margin: 0;
  text-wrap: pretty;
}
.cercle-benefit-desc em {
  color: var(--accent-glow);
  font-style: italic;
  font-weight: 500;
}

/* COMMITMENTS (numbered, slimmer) */
.cercle-commitments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.cercle-commitment {
  position: relative;
  padding: 36px 32px 32px;
  background: linear-gradient(180deg, rgba(20, 14, 8, 0.55), rgba(10, 8, 14, 0.85));
  border: 1px solid rgba(232, 176, 80, 0.2);
  border-radius: 14px;
  transition: border-color 0.4s, transform 0.4s, box-shadow 0.4s;
}
.cercle-commitment:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 217, 122, 0.5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.cercle-commitment-tag {
  font-family: var(--font-cap);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cercle-commitment-tag::before {
  content: '';
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.cercle-commitment-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  color: var(--accent-glow);
  margin: 0 0 12px;
}
.cercle-commitment-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-soft);
  margin: 0;
}

/* FINAL CTA — Mega scarcity block */
.cercle-final {
  position: relative;
  z-index: 10;
  max-width: 900px;
  margin: 40px auto 0;
  padding: 0 36px 100px;
}
.cercle-final-card {
  position: relative;
  padding: 80px 60px 70px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 138, 58, 0.18), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 217, 122, 0.1), transparent 55%),
    linear-gradient(180deg, rgba(40, 26, 16, 0.85), rgba(16, 12, 22, 0.95));
  border: 1px solid rgba(255, 154, 74, 0.5);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 120px rgba(255, 138, 58, 0.12);
}
.cercle-final-card::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 217, 122, 0.2);
  border-radius: 16px;
  pointer-events: none;
}
.cercle-final-mega {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(96px, 13vw, 180px);
  line-height: 0.85;
  color: transparent;
  background: linear-gradient(180deg, var(--moon-glow) 0%, var(--accent-glow) 40%, var(--ember) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 60px rgba(255, 138, 58, 0.4));
  margin-bottom: 8px;
  letter-spacing: -0.04em;
  max-width: 100%;
  text-align: center;
}
.cercle-final-card h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.8vw, 48px);
  line-height: 1.1;
  color: var(--accent-glow);
  margin: 0 0 18px;
  max-width: 100%;
  overflow-wrap: break-word;
}
.cercle-final-card p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-soft);
  max-width: 540px;
  margin: 0 auto 36px;
  text-wrap: pretty;
}
.cercle-final-card .cercle-cta-primary {
  margin: 0 auto;
}

/* SIGNATURE */
.cercle-signature {
  text-align: center;
  padding: 30px 24px 80px;
  font-family: var(--font-hand);
  font-size: 26px;
  color: var(--ember);
  transform: rotate(-1deg);
  text-shadow: 0 0 18px rgba(255, 138, 58, 0.3);
  position: relative;
  z-index: 10;
}
.cercle-signature::before {
  content: '— ';
  opacity: 0.7;
}

@media (max-width: 900px) {
  .cercle-hero { padding: 100px 22px 60px; }
  .cercle-hero h1 { font-size: clamp(34px, 7vw, 56px); }
  .cercle-stats { grid-template-columns: 1fr; gap: 36px; padding-top: 36px; }
  .cercle-section { padding: 60px 22px; }
  .cercle-benefits { grid-template-columns: 1fr; gap: 18px; }
  .cercle-commitments { grid-template-columns: 1fr; gap: 16px; }
  .cercle-final { padding: 30px 22px 80px; }
  .cercle-final-card { padding: 60px 28px 50px; }
  .cercle-final-mega { font-size: clamp(80px, 22vw, 140px); }
  .cercle-benefit-num { font-size: 56px; }
  .cercle-benefit { padding: 32px 24px 28px; }
  .cercle-commitment { padding: 28px 22px; }
}
@media (max-width: 480px) {
  .cercle-hero { padding: 90px 18px 50px; }
  .cercle-hero h1 { font-size: clamp(28px, 8vw, 44px); letter-spacing: 0; }
  .cercle-hero-tagline { font-size: 17px; }
  .cercle-section { padding: 50px 18px; }
  .cercle-final { padding: 20px 16px 60px; }
  .cercle-final-card { padding: 50px 20px 40px; }
  .cercle-final-mega { font-size: 96px; }
}

/* ===========================================================
   PANDOUFLE — Three branches cards (Dragard / Grimlune / Mythéor)
   =========================================================== */
.pandoufle-branches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 50px 0;
}
.pandoufle-branch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--branch-bg);
  border: 1px solid var(--branch-border);
  border-radius: 18px;
  padding: 56px 36px 40px;
  min-height: 580px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.5s, box-shadow 0.5s;
}
.pandoufle-branch::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid var(--branch-border);
  border-radius: 12px;
  pointer-events: none;
  opacity: 0.45;
  z-index: 1;
}
.pandoufle-branch:hover {
  transform: translateY(-6px);
  border-color: var(--branch-color);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 80px var(--branch-glow);
}
.branch-blason {
  width: 140px;
  height: 140px;
  margin-bottom: 26px;
  position: relative;
  display: grid;
  place-items: center;
  z-index: 2;
}
.branch-blason::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--branch-glow) 0%, transparent 60%);
  opacity: 0.65;
  filter: blur(14px);
  z-index: -1;
}
.branch-blason img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px var(--branch-glow));
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pandoufle-branch:hover .branch-blason img { transform: scale(1.06); }
.branch-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 42px;
  line-height: 1;
  color: var(--branch-color);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 2;
}
.branch-subtitle {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--branch-color);
  opacity: 0.9;
  margin-bottom: 32px;
  position: relative;
  z-index: 2;
}
.branch-description {
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg-soft);
  margin-bottom: 14px;
  text-wrap: pretty;
  flex: 1;
  position: relative;
  z-index: 2;
}
.branch-divider {
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--branch-color), transparent);
  margin: 18px auto 24px;
  opacity: 0.6;
}
.branch-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--branch-color);
  line-height: 1.55;
  opacity: 0.92;
  text-wrap: pretty;
  margin: 0;
  position: relative;
  z-index: 2;
}

.pandoufle-branch.is-dragard {
  --branch-color: #4ec59c;
  --branch-glow: rgba(78, 197, 156, 0.35);
  --branch-bg: linear-gradient(180deg, rgba(20, 50, 38, 0.55), rgba(8, 18, 14, 0.95));
  --branch-border: rgba(78, 197, 156, 0.32);
}
.pandoufle-branch.is-grimlune {
  --branch-color: #b8c8d8;
  --branch-glow: rgba(180, 200, 220, 0.32);
  --branch-bg: linear-gradient(180deg, rgba(28, 36, 50, 0.55), rgba(10, 13, 24, 0.95));
  --branch-border: rgba(180, 200, 220, 0.3);
}
.pandoufle-branch.is-mytheor {
  --branch-color: #f0c878;
  --branch-glow: rgba(240, 200, 120, 0.35);
  --branch-bg: linear-gradient(180deg, rgba(50, 38, 22, 0.55), rgba(20, 14, 10, 0.95));
  --branch-border: rgba(240, 200, 120, 0.32);
}

@media (max-width: 900px) {
  .pandoufle-branches { grid-template-columns: 1fr; gap: 24px; }
  .pandoufle-branch { min-height: auto; padding: 44px 28px 32px; }
  .branch-blason { width: 120px; height: 120px; }
  .branch-name { font-size: 36px; }
}

/* ===========================================================
   PANDOUFLE — Hymne (audio + lyrics)
   =========================================================== */
.pandoufle-hymne {
  max-width: 880px;
  margin: 0 auto;
}
.hymne-header {
  text-align: center;
  margin-bottom: 44px;
}
.hymne-note {
  font-size: 38px;
  color: var(--accent);
  margin-bottom: 14px;
  display: inline-block;
  text-shadow: 0 0 22px rgba(255, 217, 122, 0.4);
  animation: hymne-note-float 5s ease-in-out infinite;
}
@keyframes hymne-note-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.hymne-header h2 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.1;
  color: var(--fg);
  margin: 0 0 10px;
  text-wrap: balance;
}
.hymne-header p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--fg-soft);
}
.hymne-card {
  position: relative;
  background: linear-gradient(180deg, rgba(40, 28, 70, 0.7), rgba(20, 14, 36, 0.95));
  border: 1px solid rgba(180, 160, 230, 0.25);
  border-radius: 22px;
  padding: 60px 50px 70px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.hymne-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(200, 176, 232, 0.12), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(255, 217, 122, 0.08), transparent 55%);
  pointer-events: none;
}
.hymne-play {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: rgba(20, 16, 30, 0.55);
  color: var(--accent);
  cursor: pointer;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  padding: 0;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s, border-color 0.3s;
  position: relative;
  z-index: 2;
}
.hymne-play svg { width: 28px; height: 28px; transform: translateX(2px); }
.hymne-play:hover {
  transform: scale(1.08);
  box-shadow: 0 0 40px rgba(255, 217, 122, 0.32);
  border-color: var(--accent-glow);
}
.hymne-play.is-playing svg { transform: translateX(0); }
.hymne-cue {
  font-size: 13px;
  color: var(--fg-dim);
  margin-bottom: 54px;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 2;
}
.hymne-lyrics {
  display: grid;
  gap: 22px;
  position: relative;
  z-index: 2;
}
.lyric-major {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  text-wrap: balance;
}
.lyric-minor {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.4;
  color: #c8b0e8;
  margin: 0;
}

@media (max-width: 700px) {
  .hymne-card { padding: 48px 28px 50px; }
  .hymne-play { width: 76px; height: 76px; }
  .hymne-play svg { width: 22px; height: 22px; }
}

/* === "Foyer de Maggie" pin on the origin card === */
.region-card-pin {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  font-family: var(--font-cap);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-glow);
  background: rgba(5, 8, 16, 0.78);
  border: 1px solid var(--accent);
  border-radius: 100px;
  padding: 6px 12px;
  backdrop-filter: blur(6px);
  text-shadow: 0 0 12px var(--accent-glow);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(255, 217, 122, 0.25);
  animation: origin-pulse 3.6s ease-in-out infinite;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@keyframes origin-pulse {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 217, 122, 0.18);
  }
  50% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 32px rgba(255, 217, 122, 0.45);
  }
}
.region-card.is-origin {
  border-color: rgba(255, 217, 122, 0.4);
}
.region-card.is-origin:hover {
  border-color: var(--accent-glow);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 100px rgba(255, 217, 122, 0.28);
}

/* ===========================================================
   CITY PAGES — Immersive hero + tourist guide sections
   =========================================================== */
.city-hero {
  position: relative;
  z-index: 6;
  width: 100%;
  height: clamp(440px, 78vh, 760px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  box-sizing: border-box;
}
.city-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(5, 8, 16, 0.55) 0%, rgba(5, 8, 16, 0.1) 22%, rgba(5, 8, 16, 0.1) 50%, rgba(5, 8, 16, 0.92) 100%);
  pointer-events: none;
}
.city-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.15 0 0 0 0 0.1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.city-hero-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0 36px 64px;
  max-width: 1100px;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: left;
}
.city-hero-eyebrow {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--city-color, var(--accent));
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  border: 1px solid var(--city-color, rgba(232, 176, 80, 0.4));
  border-radius: 100px;
  background: rgba(5, 8, 16, 0.55);
  backdrop-filter: blur(6px);
}
.city-hero-eyebrow span:not(.city-hero-divider) {
  display: inline-block;
}
.city-hero-divider {
  opacity: 0.5;
  font-size: 14px;
}
.city-hero-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(64px, 11vw, 180px);
  line-height: 0.88;
  margin: 0 0 18px;
  background: linear-gradient(180deg, var(--city-glow, var(--moon-glow)) 0%, var(--city-color, var(--honey-light)) 65%, var(--city-color-deep, var(--honey)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.7));
  text-wrap: balance;
}
.city-hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 28px);
  color: rgba(255, 255, 255, 0.86);
  max-width: 620px;
  line-height: 1.45;
  margin: 0;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.7));
}

/* Tourist guide layout */
.city-guide {
  position: relative;
  z-index: 12;
  display: block;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 70px 36px 90px;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.city-guide p { overflow-wrap: break-word; word-wrap: break-word; }
.city-intro {
  max-width: 780px;
}
.city-guide .city-back {
  margin-bottom: 40px;
}
.city-intro {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.85;
  color: var(--fg-soft);
  margin-bottom: 80px;
  padding-left: 28px;
  border-left: 2px solid var(--city-color, var(--accent));
  position: relative;
}
.city-intro::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 30px;
  background: var(--city-glow, var(--accent-glow));
  filter: blur(2px);
}
.city-intro p { margin-bottom: 18px; }
.city-intro p:last-child { margin-bottom: 0; }
.city-intro em {
  color: var(--city-glow, var(--accent-glow));
  font-style: italic;
  font-weight: 500;
}

/* Each guide entry: distinct, immersive section */
.city-guide-section {
  position: relative;
  background: linear-gradient(165deg, rgba(26, 34, 53, 0.55), rgba(10, 13, 24, 0.85));
  border: 1px solid var(--city-color, rgba(200, 216, 240, 0.18));
  border-radius: 18px;
  padding: 44px 44px 40px;
  margin-bottom: 26px;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s, border-color 0.5s;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45);
}
.city-guide-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 0%, var(--city-glow, transparent) 0%, transparent 45%),
    radial-gradient(circle at 100% 100%, var(--city-glow, transparent) 0%, transparent 50%);
  opacity: 0.12;
  pointer-events: none;
}
.city-guide-section:hover {
  transform: translateY(-3px);
  border-color: var(--city-glow, var(--accent));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 60px var(--city-glow, transparent);
}

.city-guide-eyebrow {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--city-color, var(--accent));
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.city-guide-eyebrow::before {
  content: '✦';
  font-size: 14px;
  color: var(--city-color, var(--accent));
  text-shadow: 0 0 12px var(--city-glow, var(--accent-glow));
}
.city-guide-eyebrow::after {
  content: '';
  display: inline-block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, var(--city-color, var(--accent)), transparent);
  opacity: 0.5;
  margin-left: 6px;
}
.city-guide-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  color: var(--city-glow, var(--fg));
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
  text-wrap: balance;
}
.city-guide-section p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--fg-soft);
  position: relative;
  z-index: 2;
  text-wrap: pretty;
}
.city-guide-section p em {
  color: var(--city-glow, var(--accent-glow));
  font-style: italic;
  font-weight: 500;
}
.city-guide-section p + p { margin-top: 14px; }

/* ============ À VOIR — Carte postale (vista) ============ */
.city-guide-section--vista { padding: 0; }
.city-guide-vista-image {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  background: var(--vista-bg, linear-gradient(180deg, #1a2638 0%, #0c1626 70%, #050810 100%));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 17px 17px 0 0;
  overflow: hidden;
}
.city-guide-vista-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 13, 24, 0.85) 100%);
  pointer-events: none;
}
.city-guide-vista-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.city-guide-vista-marker {
  position: absolute;
  bottom: 18px;
  right: 22px;
  z-index: 3;
  font-family: var(--font-cap);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--city-glow, var(--accent-glow));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(5, 8, 16, 0.7);
  border: 1px solid var(--city-color, var(--accent));
  border-radius: 100px;
  padding: 7px 14px;
  backdrop-filter: blur(4px);
}
.city-guide-vista-marker svg { color: var(--city-color); }
.city-guide-vista-content { padding: 36px 44px 40px; position: relative; z-index: 2; }

/* ============ SPÉCIALITÉ — Emblème + menu ============ */
.city-guide-section--menu {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 36px;
  align-items: start;
  padding: 40px 44px 36px;
}
.city-guide-menu-emblem {
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(255, 217, 122, 0.10), rgba(184, 114, 26, 0.04));
  border: 1px solid var(--city-color, var(--accent));
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  z-index: 2;
}
.city-guide-menu-emblem::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--city-glow, transparent) 0%, transparent 60%);
  opacity: 0.35;
  filter: blur(14px);
  z-index: -1;
}
.city-guide-menu-emblem svg {
  width: 60px;
  height: 60px;
  color: var(--city-glow, var(--accent-glow));
  filter: drop-shadow(0 0 14px var(--city-glow, var(--accent-glow)));
}
.city-guide-menu-content { position: relative; z-index: 2; }
.city-guide-menu-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.city-guide-menu-list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.28);
  border-left: 2px solid var(--city-color, var(--accent));
  border-radius: 4px 10px 10px 4px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg-soft);
}
.city-guide-menu-list li::before {
  content: '✦';
  color: var(--city-color, var(--accent));
  font-size: 12px;
  flex-shrink: 0;
}
.city-guide-menu-list .item-name {
  font-style: italic;
  color: var(--city-glow, var(--accent-glow));
  font-weight: 500;
}
@media (max-width: 700px) {
  .city-guide-section--menu { grid-template-columns: 1fr; gap: 24px; padding: 32px 26px 28px; }
  .city-guide-menu-emblem { margin: 0 auto; width: 100px; height: 100px; }
  .city-guide-menu-emblem svg { width: 50px; height: 50px; }
}

/* ============ CONSEIL — Note manuscrite épinglée ============ */
.city-guide-section--note {
  transform: rotate(-0.6deg);
  background:
    radial-gradient(ellipse at 0% 0%, var(--city-glow, transparent) 0%, transparent 40%),
    linear-gradient(165deg, rgba(56, 36, 22, 0.6), rgba(28, 18, 12, 0.92));
  border-color: var(--city-color, var(--accent));
  padding-top: 56px;
}
.city-guide-section--note:hover {
  transform: rotate(0deg) translateY(-3px);
}
.city-guide-note-pin {
  position: absolute;
  top: -16px;
  left: 44px;
  z-index: 4;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe89a, #c88030 60%, #6a4015);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.55),
    inset 0 -4px 8px rgba(0, 0, 0, 0.3),
    inset 0 2px 4px rgba(255, 232, 154, 0.6);
}
.city-guide-note-pin::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.city-guide-section--note .city-guide-title {
  font-family: var(--font-display);
  font-style: italic;
}
.city-guide-note-callout {
  margin-top: 24px;
  padding: 18px 22px;
  background: rgba(0, 0, 0, 0.35);
  border-left: 3px solid var(--city-color, var(--accent));
  border-radius: 0 14px 14px 0;
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--city-glow, var(--accent-glow));
  line-height: 1.45;
  position: relative;
  z-index: 2;
  transform: rotate(0.4deg);
}

@media (max-width: 700px) {
  .city-hero { height: clamp(380px, 65vh, 560px); }
  .city-hero-content { padding: 0 22px 48px; }
  .city-hero-eyebrow { font-size: 10px; padding: 7px 13px; gap: 10px; }
  .city-guide { padding: 50px 22px 70px; }
  .city-guide .city-back { margin-bottom: 28px; }
  .city-intro { font-size: 17px; padding-left: 20px; margin-bottom: 50px; }
  .city-guide-section { padding: 32px 26px 28px; }
  .city-guide-vista-content { padding: 28px 26px 30px; }
  .city-guide-section--note { padding-top: 48px; }
  .city-guide-note-pin { left: 28px; width: 28px; height: 28px; }
  .city-guide-note-callout { font-size: 19px; padding: 14px 18px; }
}

/* ===========================================================
   CITY SPREAD — Magazine layout (alternating image/text)
   =========================================================== */
.city-spread {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 110px;
  position: relative;
}
.city-spread > .city-spread-image { order: 1; }
.city-spread > .city-spread-content { order: 2; }
.city-spread.is-reverse > .city-spread-image { order: 2; }
.city-spread.is-reverse > .city-spread-content { order: 1; }

.city-spread-image {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  background-color: #0a0d18;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(232, 176, 80, 0.18),
    0 0 60px rgba(0, 0, 0, 0.4);
}
.city-spread-image::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 217, 122, 0.22);
  pointer-events: none;
  z-index: 2;
}
.city-spread-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(5, 8, 16, 0.55) 100%);
  z-index: 1;
  pointer-events: none;
}
.city-spread-image-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.city-spread-caption {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 3;
  font-family: var(--font-cap);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--city-glow, var(--accent-glow));
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  background: rgba(5, 8, 16, 0.7);
  border: 1px solid var(--city-color, var(--accent));
  border-radius: 100px;
  backdrop-filter: blur(6px);
}
.city-spread-caption svg { color: var(--city-color); }

.city-spread-content {
  padding: 8px 0;
}
.city-spread-eyebrow {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--city-color, var(--accent));
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.city-spread-eyebrow::before {
  content: '';
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--city-color, var(--accent)));
}
.city-spread-eyebrow::after {
  content: '✦';
  font-size: 13px;
  color: var(--city-color, var(--accent));
  text-shadow: 0 0 12px var(--city-glow, var(--accent-glow));
}
.city-spread-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--city-glow, var(--fg));
  margin-bottom: 22px;
  text-wrap: balance;
}
.city-spread-content p {
  font-size: 18px;
  line-height: 1.8;
  color: var(--fg-soft);
  margin-bottom: 16px;
  text-wrap: pretty;
}
.city-spread-content p:last-of-type { margin-bottom: 0; }
.city-spread-content p em {
  color: var(--city-glow, var(--accent-glow));
  font-style: italic;
  font-weight: 500;
}

.city-spread-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.city-spread-list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-soft);
}
.city-spread-list li::before {
  content: '✦';
  color: var(--city-color, var(--accent));
  font-size: 11px;
  flex-shrink: 0;
}
.city-spread-list .item-name {
  font-style: italic;
  color: var(--city-glow, var(--accent-glow));
  font-weight: 500;
}

.city-spread-callout {
  margin-top: 28px;
  padding: 18px 24px;
  border-left: 3px solid var(--city-color, var(--accent));
  background: linear-gradient(90deg, rgba(232, 176, 80, 0.08), transparent 70%);
  font-family: var(--font-hand);
  font-size: 22px;
  line-height: 1.45;
  color: var(--city-glow, var(--accent-glow));
}

/* ===========================================================
   CHARACTER CARDS — Portrait that overhangs the card (head + feet)
   =========================================================== */
.characters-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: 90px;
  margin: 70px 0;
}

.character-card {
  position: relative;
  min-height: 460px;
  padding: 60px 60px 60px 400px;
  background:
    radial-gradient(ellipse at 0% 100%, rgba(232, 176, 80, 0.16), transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(255, 217, 122, 0.08), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(255, 138, 58, 0.06), transparent 50%),
    linear-gradient(135deg, rgba(36, 28, 22, 0.88), rgba(14, 16, 26, 0.96));
  border: 1px solid rgba(232, 176, 80, 0.32);
  border-radius: 20px;
  overflow: visible;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 232, 154, 0.06);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.5s, box-shadow 0.5s;
  isolation: isolate;
}
.character-card::before {
  /* Inner gold frame */
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 217, 122, 0.18);
  border-radius: 14px;
  pointer-events: none;
  z-index: 1;
}
.character-card::after {
  /* Star ornament top-right */
  content: '✦';
  position: absolute;
  top: 30px;
  right: 36px;
  font-family: var(--font-cap);
  font-size: 26px;
  color: var(--accent);
  text-shadow: 0 0 22px var(--accent-glow), 0 0 44px var(--ember);
  z-index: 2;
  animation: card-star-pulse 4.5s ease-in-out infinite;
}
@keyframes card-star-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.18); }
}
.character-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 217, 122, 0.5);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.75),
    0 0 80px rgba(255, 217, 122, 0.15),
    inset 0 1px 0 rgba(255, 232, 154, 0.1);
}

.character-card .character-portrait {
  position: absolute;
  left: 28px;
  bottom: -60px;
  height: 580px;
  width: auto;
  z-index: 3;
  pointer-events: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
}
.character-card .character-portrait img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 360px;
  margin: 0;
  filter:
    drop-shadow(0 22px 42px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 32px rgba(255, 217, 122, 0.14));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s;
}
.character-card:hover .character-portrait img {
  transform: translateY(-8px);
  filter:
    drop-shadow(0 26px 48px rgba(0, 0, 0, 0.8))
    drop-shadow(0 0 40px rgba(255, 217, 122, 0.22));
}

/* Subtle vertical separator between portrait and content */
.character-card-content {
  position: relative;
  z-index: 2;
  padding-top: 8px;
}
.character-card-content::before {
  content: '';
  position: absolute;
  left: -32px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 217, 122, 0.25) 30%, rgba(255, 217, 122, 0.25) 70%, transparent);
}

.character-card-eyebrow {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.character-card-eyebrow::before {
  content: '';
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.character-card-eyebrow::after {
  content: '✦';
  font-size: 13px;
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent-glow);
}
.character-card-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 0.95;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, var(--moon-glow) 0%, var(--accent-glow) 45%, var(--honey) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 30px rgba(255, 217, 122, 0.3)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}
.character-card-tag {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: 24px;
  color: var(--ember);
  margin-bottom: 24px;
  transform: rotate(-1.5deg);
  text-shadow: 0 0 18px rgba(255, 138, 58, 0.35);
}
.character-card-content p {
  font-size: 17px;
  line-height: 1.78;
  color: var(--fg-soft);
  margin-bottom: 14px;
  text-wrap: pretty;
}
.character-card-content p:last-child { margin-bottom: 0; }
.character-card-content p em {
  color: var(--accent-glow);
  font-style: italic;
  font-weight: 500;
}

@media (max-width: 1000px) {
  .character-card {
    padding: 60px 50px 50px 340px;
    min-height: 420px;
  }
  .character-card .character-portrait { height: 520px; left: 16px; }
}

/* === Characters column grid — vertical cards (image top, content bottom) === */
.characters-column-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 60px 0 30px;
}
.character-vcard {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(232, 176, 80, 0.12), transparent 55%),
    radial-gradient(ellipse at 100% 0%, rgba(255, 217, 122, 0.06), transparent 60%),
    linear-gradient(135deg, rgba(36, 28, 22, 0.85), rgba(14, 16, 26, 0.95));
  border: 1px solid rgba(232, 176, 80, 0.28);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.5s, box-shadow 0.5s;
  isolation: isolate;
}
.character-vcard::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 217, 122, 0.16);
  border-radius: 12px;
  pointer-events: none;
  z-index: 4;
}
.character-vcard::after {
  content: '✦';
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--font-cap);
  font-size: 18px;
  color: var(--accent);
  text-shadow: 0 0 14px var(--accent-glow);
  z-index: 5;
  opacity: 0.7;
  transition: opacity 0.4s, transform 0.4s;
}
.character-vcard:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 217, 122, 0.55);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.7), 0 0 80px rgba(255, 217, 122, 0.18);
}
.character-vcard:hover::after {
  opacity: 1;
  transform: scale(1.2) rotate(8deg);
}

.character-vcard-image {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(232, 176, 80, 0.18), transparent 65%),
    linear-gradient(180deg, rgba(36, 28, 22, 0.55), rgba(8, 10, 18, 0.92));
  overflow: hidden;
  z-index: 1;
}
.character-vcard-image::before {
  /* subtle bottom fade so image meets content seamlessly */
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(14, 16, 26, 0.85));
  z-index: 2;
  pointer-events: none;
}
.character-vcard-image img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.character-vcard:hover .character-vcard-image img {
  transform: scale(1.06);
}

/* Placeholder when no portrait */
.character-vcard-image.is-placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.022) 0 14px, transparent 14px 28px),
    radial-gradient(ellipse at 50% 60%, rgba(232, 176, 80, 0.18), transparent 65%),
    linear-gradient(180deg, rgba(36, 28, 22, 0.6), rgba(8, 10, 18, 0.95));
}
.character-vcard-image.is-placeholder::after {
  content: '✦';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-cap);
  font-size: 56px;
  color: rgba(255, 217, 122, 0.45);
  text-shadow: 0 0 32px rgba(255, 217, 122, 0.4);
  z-index: 1;
  transition: transform 0.6s, color 0.6s;
}
.character-vcard:hover .character-vcard-image.is-placeholder::after {
  transform: scale(1.18) rotate(10deg);
  color: rgba(255, 232, 154, 0.7);
}

.character-vcard-content {
  position: relative;
  z-index: 2;
  padding: 28px 28px 32px;
}
.character-vcard-eyebrow {
  font-family: var(--font-cap);
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.character-vcard-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.character-vcard-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, var(--moon-glow) 0%, var(--accent-glow) 60%, var(--honey) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 217, 122, 0.2));
}
.character-vcard-tag {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: 19px;
  color: var(--ember);
  margin-bottom: 14px;
  transform: rotate(-1.2deg);
}
.character-vcard-content p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-soft);
  margin: 0;
  text-wrap: pretty;
}
.character-vcard-content p em {
  color: var(--accent-glow);
  font-style: italic;
  font-weight: 500;
}

/* Antagonist variant (Morvérus) */
.character-vcard.is-dark {
  border-color: rgba(140, 100, 180, 0.25);
}
.character-vcard.is-dark::after { color: #a888d4; text-shadow: 0 0 14px #a888d4; }
.character-vcard.is-dark .character-vcard-name {
  background: linear-gradient(180deg, #e8d8f8 0%, #d8a8d4 60%, #8a6ab0 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.character-vcard.is-dark .character-vcard-tag { color: #a888d4; }
.character-vcard.is-dark:hover {
  border-color: rgba(168, 136, 212, 0.55);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.7), 0 0 80px rgba(168, 136, 212, 0.25);
}

@media (max-width: 1100px) {
  .characters-column-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .characters-column-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* === Characters grid (tiles) — image + name + role (legacy, unused) === */
.characters-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 50px 0 30px;
}
.character-tile {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(232, 176, 80, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(26, 34, 53, 0.55), rgba(10, 13, 24, 0.88));
  border: 1px solid rgba(232, 176, 80, 0.18);
  border-radius: 14px;
  padding: 18px 18px 22px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s, box-shadow 0.4s;
}
.character-tile::after {
  content: '→';
  position: absolute;
  bottom: 18px;
  right: 18px;
  color: var(--accent);
  font-size: 16px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.35s, transform 0.35s;
  z-index: 3;
}
.character-tile:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 217, 122, 0.55);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.65),
    0 0 50px rgba(255, 217, 122, 0.18);
}
.character-tile:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.character-tile-image {
  position: relative;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 18px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(232, 176, 80, 0.18), transparent 65%),
    linear-gradient(180deg, rgba(36, 28, 22, 0.5), rgba(8, 10, 18, 0.85));
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 217, 122, 0.08);
}
.character-tile-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(5, 8, 16, 0.55));
  z-index: 1;
  pointer-events: none;
}
.character-tile-image img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.65));
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.character-tile:hover .character-tile-image img {
  transform: scale(1.04);
}

/* Placeholder when no portrait yet */
.character-tile-image.is-placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 12px, transparent 12px 24px),
    radial-gradient(ellipse at 50% 60%, rgba(232, 176, 80, 0.14), transparent 65%),
    linear-gradient(180deg, rgba(36, 28, 22, 0.55), rgba(8, 10, 18, 0.92));
}
.character-tile-image.is-placeholder::after {
  content: '✦';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-cap);
  font-size: 38px;
  color: rgba(255, 217, 122, 0.45);
  text-shadow: 0 0 22px rgba(255, 217, 122, 0.35);
  z-index: 2;
  transition: transform 0.5s, color 0.5s;
}
.character-tile:hover .character-tile-image.is-placeholder::after {
  transform: scale(1.15) rotate(8deg);
  color: rgba(255, 232, 154, 0.7);
}

.character-tile-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.1;
  color: var(--accent-glow);
  margin: 0 0 6px;
  text-align: center;
  letter-spacing: -0.005em;
  transition: color 0.3s;
}
.character-tile:hover .character-tile-name {
  color: #fff;
}
.character-tile-role {
  font-family: var(--font-cap);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  display: block;
  opacity: 0.8;
}
.character-tile.is-dark .character-tile-name { color: #d8a8d4; }
.character-tile.is-dark .character-tile-role { color: #a888d4; }
.character-tile.is-dark { border-color: rgba(140, 100, 180, 0.22); }
.character-tile.is-dark:hover {
  border-color: rgba(168, 136, 212, 0.55);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 50px rgba(168, 136, 212, 0.22);
}
.character-tile.is-dark::after { color: #a888d4; }

@media (max-width: 1100px) {
  .characters-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .characters-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .character-tile-name { font-size: 20px; }
}
@media (max-width: 500px) {
  .characters-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .characters-featured { gap: 80px; }
  .character-card {
    padding: 380px 30px 40px;
    min-height: auto;
    text-align: center;
  }
  .character-card::after { right: 24px; top: 22px; font-size: 22px; }
  .character-card-content::before { display: none; }
  .character-card-eyebrow { justify-content: center; }
  .character-card .character-portrait {
    left: 50%;
    bottom: auto;
    top: -40px;
    height: 420px;
    transform: translateX(-50%);
  }
  .character-card-name { font-size: 48px; }
  .character-card-tag { transform: rotate(-1deg); font-size: 21px; }
}

/* Image placeholder when no image yet — keeps the layout clean */
.image-placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 14px, transparent 14px 28px),
    radial-gradient(ellipse at 50% 40%, var(--city-glow, rgba(232, 176, 80, 0.18)), transparent 60%),
    radial-gradient(circle at 20% 80%, var(--city-color, rgba(120, 80, 30, 0.25)), transparent 55%),
    linear-gradient(160deg, #15192a 0%, #07090f 100%);
}
.image-placeholder-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-cap);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--city-color, var(--accent));
  opacity: 0.7;
  text-align: center;
  pointer-events: none;
}
.image-placeholder-label::before {
  content: '✦';
  font-size: 28px;
  opacity: 0.6;
  text-shadow: 0 0 18px var(--city-glow, var(--accent-glow));
}

/* Hero placeholder */
.city-hero.is-placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 18px, transparent 18px 36px),
    radial-gradient(ellipse at 50% 30%, var(--city-glow, rgba(232, 176, 80, 0.18)), transparent 65%),
    radial-gradient(circle at 80% 80%, var(--city-color, rgba(120, 80, 30, 0.22)), transparent 60%),
    linear-gradient(180deg, #0e1220 0%, #060810 100%);
}

/* Decorative chapter break between spreads */
.spread-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  max-width: 480px;
  margin: 0 auto 110px;
  font-family: var(--font-cap);
  font-size: 14px;
  letter-spacing: 0.5em;
  color: var(--city-color, var(--accent));
  opacity: 0.7;
}
.spread-divider::before, .spread-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--city-color, var(--accent)), transparent);
}
.spread-divider span {
  text-shadow: 0 0 14px var(--city-glow, var(--accent-glow));
}

@media (max-width: 800px) {
  .city-spread {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 80px;
  }
  .city-spread.is-reverse > .city-spread-image { order: 1; }
  .city-spread.is-reverse > .city-spread-content { order: 2; }
  .city-spread-image { aspect-ratio: 4 / 3; }
  .city-spread-content { padding: 0; }
  .city-spread-content p { font-size: 17px; }
  .spread-divider { margin-bottom: 80px; }
}

/* ===========================================================
   SECTION INTRO — Heading block before a series of spreads
   =========================================================== */
.spread-section-intro {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.spread-section-intro .city-spread-eyebrow { justify-content: center; }
.spread-section-intro .city-spread-eyebrow::before {
  background: linear-gradient(90deg, transparent, var(--city-color, var(--accent)));
}
.spread-section-intro .city-spread-eyebrow::after {
  content: '✦';
  font-size: 13px;
  color: var(--city-color, var(--accent));
  text-shadow: 0 0 12px var(--city-glow, var(--accent-glow));
}
.spread-section-intro h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1;
  color: var(--city-glow, var(--fg));
  margin-bottom: 20px;
  text-wrap: balance;
}
.spread-section-intro p {
  font-size: 17px;
  color: var(--fg-soft);
  line-height: 1.65;
  text-wrap: pretty;
}

/* ===========================================================
   SPECIALITY CAROUSEL — Section spécialités locales (legacy, unused)
   =========================================================== */
.spec-carousel {
  margin-bottom: 110px;
  position: relative;
}
.spec-carousel-header {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.spec-carousel-header .city-spread-eyebrow { justify-content: center; }
.spec-carousel-header .city-spread-eyebrow::before {
  background: linear-gradient(90deg, transparent, var(--city-color, var(--accent)));
}
.spec-carousel-header .city-spread-eyebrow::after {
  content: '✦';
  font-size: 13px;
  color: var(--city-color, var(--accent));
  text-shadow: 0 0 12px var(--city-glow);
}
.spec-carousel-header h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1;
  color: var(--city-glow, var(--fg));
  margin-bottom: 20px;
  text-wrap: balance;
}
.spec-carousel-header p {
  font-size: 17px;
  color: var(--fg-soft);
  line-height: 1.65;
  text-wrap: pretty;
}

.spec-carousel-viewport {
  overflow: hidden;
  margin-bottom: 36px;
  user-select: none;
}
.spec-carousel-track {
  display: flex;
  transition: transform 0.65s cubic-bezier(0.22, 0.85, 0.25, 1);
  will-change: transform;
}
.spec-slide {
  flex: 0 0 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
  box-sizing: border-box;
}
.spec-slide-image {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  background-color: #0a0d18;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(232, 176, 80, 0.18);
}
.spec-slide-image::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 217, 122, 0.22);
  pointer-events: none;
  z-index: 2;
}
.spec-slide-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(5, 8, 16, 0.4) 100%);
  z-index: 1;
  pointer-events: none;
}
.spec-slide-content { padding: 8px 0; }
.spec-slide-number {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--city-color, var(--accent));
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.spec-slide-number::before {
  content: '';
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--city-color, var(--accent)));
}
.spec-slide-tag {
  display: inline-block;
  font-family: var(--font-cap);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--city-color, var(--accent));
  border: 1px solid var(--city-color, var(--accent));
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 20px;
  background: rgba(5, 8, 16, 0.4);
}
.spec-slide-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1;
  color: var(--city-glow, var(--fg));
  margin-bottom: 22px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.spec-slide-content p {
  font-size: 18px;
  line-height: 1.8;
  color: var(--fg-soft);
  margin-bottom: 14px;
  text-wrap: pretty;
}
.spec-slide-content p:last-child { margin-bottom: 0; }
.spec-slide-content p em {
  color: var(--city-glow, var(--accent-glow));
  font-style: italic;
  font-weight: 500;
}

.spec-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.spec-carousel-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--city-color, var(--accent));
  background: rgba(5, 8, 16, 0.5);
  color: var(--city-glow, var(--accent-glow));
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;
  font-family: inherit;
  padding: 0;
}
.spec-carousel-arrow:hover {
  border-color: var(--city-glow, var(--accent-glow));
  background: rgba(255, 217, 122, 0.08);
  transform: scale(1.06);
  box-shadow: 0 0 22px var(--city-glow, var(--accent-glow));
}
.spec-carousel-arrow svg { width: 18px; height: 18px; }
.spec-carousel-dots {
  display: flex;
  gap: 12px;
  align-items: center;
}
.spec-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--city-color, var(--accent));
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s;
}
.spec-carousel-dot:hover {
  border-color: var(--city-glow, var(--accent-glow));
  transform: scale(1.25);
}
.spec-carousel-dot.is-active {
  background: var(--city-color, var(--accent));
  box-shadow: 0 0 14px var(--city-glow, var(--accent-glow));
  transform: scale(1.3);
}

@media (max-width: 800px) {
  .spec-carousel { margin-bottom: 80px; }
  .spec-slide { grid-template-columns: 1fr; gap: 28px; }
  .spec-slide-image { aspect-ratio: 4 / 3; }
  .spec-carousel-arrow { width: 42px; height: 42px; }
}

/* ===========================================================
   HERO DU RITE — Le Bassin des Reflets (codex landing)
   Brasero animé, flamme vacillante, particules d'ember
   =========================================================== */
.rite-hero {
  position: relative;
  z-index: 10;
  padding: 140px 24px 110px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

/* Aura — halo radial de braise au centre */
.rite-hero-aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(255, 138, 58, 0.18), transparent 65%),
    radial-gradient(ellipse 30% 40% at 50% 45%, rgba(255, 217, 122, 0.12), transparent 70%);
  animation: rite-aura-pulse 4.5s ease-in-out infinite;
}
@keyframes rite-aura-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* Embers — petites étincelles qui montent */
.rite-hero-embers {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.rite-hero-embers span {
  position: absolute;
  bottom: 30%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd078 0%, #ff9a4a 50%, transparent 100%);
  box-shadow: 0 0 8px rgba(255, 154, 74, 0.8);
  opacity: 0;
  animation: rite-ember-rise 5s linear infinite;
}
.rite-hero-embers span:nth-child(1)  { left: 46%; animation-delay: 0s;   animation-duration: 5.2s; }
.rite-hero-embers span:nth-child(2)  { left: 52%; animation-delay: 0.6s; animation-duration: 4.5s; }
.rite-hero-embers span:nth-child(3)  { left: 48%; animation-delay: 1.2s; animation-duration: 6s;   width: 3px; height: 3px; }
.rite-hero-embers span:nth-child(4)  { left: 54%; animation-delay: 1.8s; animation-duration: 5.5s; }
.rite-hero-embers span:nth-child(5)  { left: 50%; animation-delay: 2.4s; animation-duration: 4.8s; width: 5px; height: 5px; }
.rite-hero-embers span:nth-child(6)  { left: 47%; animation-delay: 3s;   animation-duration: 5.3s; }
.rite-hero-embers span:nth-child(7)  { left: 53%; animation-delay: 3.6s; animation-duration: 4.7s; width: 3px; height: 3px; }
.rite-hero-embers span:nth-child(8)  { left: 49%; animation-delay: 0.3s; animation-duration: 6.2s; }
.rite-hero-embers span:nth-child(9)  { left: 51%; animation-delay: 0.9s; animation-duration: 5s; }
.rite-hero-embers span:nth-child(10) { left: 45%; animation-delay: 2.1s; animation-duration: 5.7s; width: 2px; height: 2px; }
.rite-hero-embers span:nth-child(11) { left: 55%; animation-delay: 2.7s; animation-duration: 4.9s; }
.rite-hero-embers span:nth-child(12) { left: 50%; animation-delay: 3.3s; animation-duration: 6.1s; width: 4px; height: 4px; }
@keyframes rite-ember-rise {
  0%   { transform: translate(-50%, 0) scale(0.8); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 0.8; }
  100% { transform: translate(calc(-50% + var(--drift, 30px)), -340px) scale(0.3); opacity: 0; }
}
.rite-hero-embers span:nth-child(odd)  { --drift: 40px; }
.rite-hero-embers span:nth-child(even) { --drift: -35px; }

/* Inner */
.rite-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Eyebrow */
.rite-eyebrow {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 36px;
  position: relative;
  padding: 0 36px;
}
.rite-eyebrow::before,
.rite-eyebrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember));
}
.rite-eyebrow::before { left: 0; }
.rite-eyebrow::after  { right: 0; background: linear-gradient(90deg, var(--ember), transparent); }

/* ─── BRASERO ─────────────────────────────────────────── */
.rite-brazier {
  position: relative;
  width: 160px;
  height: 220px;
  margin: 0 auto 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Glow autour du brasero */
.rite-glow {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(255, 154, 74, 0.35) 0%, rgba(255, 138, 58, 0.15) 30%, transparent 70%);
  filter: blur(12px);
  z-index: 0;
  animation: rite-glow-pulse 3s ease-in-out infinite;
}
@keyframes rite-glow-pulse {
  0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}

/* Flamme — 4 couches superposées */
.rite-flame {
  position: relative;
  width: 70px;
  height: 110px;
  z-index: 3;
  margin-bottom: -18px;
  filter: drop-shadow(0 0 24px rgba(255, 138, 58, 0.7));
}
.rite-flame > span {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform-origin: 50% 100%;
  border-radius: 50% 50% 20% 20% / 60% 60% 40% 40%;
}
.rite-flame-outer {
  width: 70px; height: 110px;
  margin-left: -35px;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 138, 58, 0.55), rgba(255, 100, 40, 0.35) 60%, transparent 90%);
  animation: rite-flicker-1 1.8s ease-in-out infinite;
  filter: blur(2px);
}
.rite-flame-middle {
  width: 50px; height: 88px;
  margin-left: -25px;
  background: radial-gradient(ellipse at 50% 100%, #ff8a3a, #ff9a4a 50%, rgba(255, 154, 74, 0.4) 90%);
  animation: rite-flicker-2 1.4s ease-in-out infinite;
}
.rite-flame-inner {
  width: 32px; height: 64px;
  margin-left: -16px;
  background: radial-gradient(ellipse at 50% 100%, #ffd078, #ffb050 60%, rgba(255, 184, 90, 0.6) 95%);
  animation: rite-flicker-3 1.1s ease-in-out infinite;
}
.rite-flame-core {
  width: 14px; height: 36px;
  margin-left: -7px;
  background: radial-gradient(ellipse at 50% 100%, #ffe89a, #ffd078 70%, transparent 100%);
  animation: rite-flicker-4 0.8s ease-in-out infinite;
}
@keyframes rite-flicker-1 {
  0%, 100% { transform: translateX(-50%) scaleY(1) skewX(-2deg);   opacity: 0.85; }
  25%      { transform: translateX(-50%) scaleY(1.05) skewX(3deg); opacity: 1; }
  50%      { transform: translateX(-50%) scaleY(0.95) skewX(-1deg);opacity: 0.9; }
  75%      { transform: translateX(-50%) scaleY(1.03) skewX(2deg); opacity: 1; }
}
@keyframes rite-flicker-2 {
  0%, 100% { transform: translateX(-50%) scaleY(1) skewX(2deg);    opacity: 0.95; }
  33%      { transform: translateX(-50%) scaleY(1.08) skewX(-3deg);opacity: 1; }
  66%      { transform: translateX(-50%) scaleY(0.92) skewX(1deg); opacity: 0.9; }
}
@keyframes rite-flicker-3 {
  0%, 100% { transform: translateX(-50%) scaleY(1) skewX(-3deg); }
  40%      { transform: translateX(-50%) scaleY(1.1) skewX(4deg); }
  80%      { transform: translateX(-50%) scaleY(0.94) skewX(-2deg); }
}
@keyframes rite-flicker-4 {
  0%, 100% { transform: translateX(-50%) scaleY(1) skewX(0); }
  50%      { transform: translateX(-50%) scaleY(1.15) skewX(2deg); }
}

/* Bowl du brasero (vasque) */
.rite-bowl {
  position: relative;
  z-index: 2;
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rite-bowl-rim {
  width: 140px;
  height: 22px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, #5a3a22 0%, #3a2614 70%, #1f140a 100%);
  box-shadow:
    inset 0 -4px 8px rgba(0, 0, 0, 0.5),
    inset 0 4px 6px rgba(255, 180, 90, 0.25),
    0 0 30px rgba(255, 138, 58, 0.4);
  border: 1px solid rgba(255, 184, 90, 0.3);
  position: relative;
}
.rite-bowl-rim::before {
  /* Charbons brillants dans la vasque */
  content: '';
  position: absolute;
  top: 4px; left: 12px; right: 12px; bottom: 6px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 50%, #ff8a3a 0%, transparent 30%),
    radial-gradient(circle at 65% 40%, #ffb050 0%, transparent 25%),
    radial-gradient(circle at 50% 70%, #ff9a4a 0%, transparent 35%),
    #2a1408;
  animation: rite-coals-pulse 2s ease-in-out infinite;
}
@keyframes rite-coals-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.25); }
}
.rite-bowl-body {
  width: 110px;
  height: 28px;
  margin-top: -3px;
  background: linear-gradient(180deg, #3a2614, #221409);
  clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6);
}
.rite-bowl-base {
  width: 90px;
  height: 60px;
  margin-top: -1px;
  background:
    linear-gradient(180deg, #2a1808 0%, #1a0f06 50%, #0c0703 100%);
  clip-path: polygon(20% 0, 80% 0, 60% 100%, 40% 100%);
  position: relative;
}
.rite-bowl-base::after {
  /* Pied du trépied */
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 10px;
  background: linear-gradient(180deg, #1f140a, #0c0703);
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 50px rgba(255, 138, 58, 0.18);
}

/* ─── TYPOGRAPHIE ─────────────────────────────────────── */
.rite-headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 5.5vw, 68px);
  line-height: 1.05;
  margin: 0 0 22px;
  background: linear-gradient(180deg, var(--moon-glow) 0%, var(--accent-glow) 55%, var(--honey) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 36px rgba(255, 217, 122, 0.28));
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 100%;
}
.rite-headline em {
  display: block;
  font-style: italic;
  background: linear-gradient(180deg, var(--ember) 0%, var(--honey) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: 4px;
}
.rite-subline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.5;
  color: var(--fg);
  max-width: 640px;
  margin: 0 0 48px;
  text-wrap: pretty;
  opacity: 0.92;
}
.rite-subline em {
  color: var(--accent-glow);
  font-style: italic;
  font-weight: 500;
}

/* ─── CTA ─────────────────────────────────────────────── */
.rite-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 22px 44px;
  background: linear-gradient(180deg, #ff9a4a 0%, #d4621a 100%);
  border: 1px solid #ffb050;
  color: #1a0f06;
  font-family: var(--font-cap);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  border-radius: 100px;
  box-shadow:
    0 12px 40px rgba(255, 138, 58, 0.4),
    0 0 80px rgba(255, 138, 58, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s, filter 0.2s;
  position: relative;
  overflow: hidden;
}
.rite-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.8s;
}
.rite-cta:hover {
  transform: translateY(-3px);
  box-shadow:
    0 16px 50px rgba(255, 138, 58, 0.55),
    0 0 120px rgba(255, 138, 58, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  filter: brightness(1.05);
}
.rite-cta:hover::before { transform: translateX(100%); }
.rite-cta-flame {
  width: 14px;
  height: 18px;
  background: radial-gradient(ellipse at 50% 100%, #ffe89a, #ff9a4a 60%, transparent 100%);
  border-radius: 50% 50% 20% 20% / 60% 60% 40% 40%;
  filter: drop-shadow(0 0 6px rgba(255, 217, 122, 0.8));
  animation: rite-flicker-3 1.1s ease-in-out infinite;
}

/* Note de signature Bontwiggle */
.rite-cta-note {
  margin: 24px 0 0;
  font-family: var(--font-hand);
  font-size: 17px;
  color: var(--ember);
  opacity: 0.7;
  transform: rotate(-1deg);
}

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 720px) {
  .rite-hero { padding: 100px 18px 80px; }
  .rite-brazier { width: 130px; height: 190px; margin-bottom: 28px; }
  .rite-flame { width: 56px; height: 92px; }
  .rite-bowl-rim { width: 120px; height: 18px; }
  .rite-bowl-body { width: 92px; height: 24px; }
  .rite-bowl-base { width: 76px; height: 50px; }
  .rite-bowl-base::after { width: 96px; }
  .rite-cta { padding: 18px 30px; font-size: 12px; letter-spacing: 0.25em; }
}

/* ===========================================================
   NAV — Le Rite (rappel persistant en haut à droite)
   =========================================================== */
.nav-link-rite {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(255, 154, 74, 0.4);
  background: rgba(255, 138, 58, 0.06);
  color: var(--ember) !important;
  transition: background 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative;
}
.nav-link-rite::after {
  /* override default underline on hover */
  display: none !important;
}
.nav-link-rite:hover {
  background: rgba(255, 138, 58, 0.18);
  border-color: var(--ember);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(255, 138, 58, 0.25);
}
.nav-link-rite-flame {
  width: 9px;
  height: 12px;
  background: radial-gradient(ellipse at 50% 100%, #ffe89a, #ff9a4a 60%, transparent 100%);
  border-radius: 50% 50% 20% 20% / 60% 60% 40% 40%;
  filter: drop-shadow(0 0 6px rgba(255, 154, 74, 0.85));
  animation: rite-flicker-3 1.1s ease-in-out infinite;
}

/* ===========================================================
   RITE POPUP — In-character modal (Le Bassin te reconnaît)
   Injecté dynamiquement par effects.js sur toutes les pages
   =========================================================== */
.rite-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(ellipse at 50% 50%, rgba(20, 14, 30, 0.85), rgba(2, 4, 10, 0.96));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rite-popup.is-open {
  display: flex;
  opacity: 1;
}
.rite-popup-card {
  position: relative;
  width: 100%;
  max-width: 540px;
  padding: 64px 48px 48px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 138, 58, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(20, 16, 28, 0.96) 0%, rgba(8, 6, 14, 0.98) 100%);
  border: 1px solid rgba(255, 154, 74, 0.32);
  border-radius: 18px;
  text-align: center;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.7),
    0 0 120px rgba(255, 138, 58, 0.18);
  transform: translateY(20px) scale(0.97);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s;
  overflow: hidden;
  box-sizing: border-box;
}
.rite-popup.is-open .rite-popup-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Bouton fermer */
.rite-popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 217, 122, 0.18);
  color: var(--fg-dim);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  z-index: 2;
}
.rite-popup-close:hover {
  background: rgba(255, 138, 58, 0.12);
  color: var(--ember);
  border-color: var(--ember);
}

/* Mini brasero en accent */
.rite-popup-flame {
  width: 42px;
  height: 56px;
  margin: 0 auto 22px;
  background: radial-gradient(ellipse at 50% 100%, #ffe89a, #ff9a4a 60%, transparent 100%);
  border-radius: 50% 50% 20% 20% / 60% 60% 40% 40%;
  filter: drop-shadow(0 0 18px rgba(255, 138, 58, 0.85));
  animation: rite-flicker-3 1.1s ease-in-out infinite;
}

.rite-popup-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.3;
  margin: 0 0 14px;
  color: var(--accent-glow);
  text-wrap: balance;
}
.rite-popup-desc {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-soft);
  margin: 0 0 32px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.rite-popup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.rite-popup-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rite-popup-field label {
  font-family: var(--font-cap);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.75;
  padding-left: 2px;
}
.rite-popup-field-hint {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--fg-dim);
  margin-top: 4px;
  padding-left: 2px;
}
.rite-popup-form input {
  width: 100%;
  padding: 16px 20px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg);
  background: rgba(8, 6, 14, 0.6);
  border: 1px solid rgba(255, 217, 122, 0.22);
  border-radius: 10px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.rite-popup-form input::placeholder { color: var(--fg-dim); opacity: 0.6; }
.rite-popup-form input:focus {
  border-color: var(--ember);
  background: rgba(8, 6, 14, 0.85);
  box-shadow: 0 0 0 3px rgba(255, 154, 74, 0.15);
}
.rite-popup-form input.is-error {
  border-color: rgba(255, 120, 80, 0.7);
  box-shadow: 0 0 0 3px rgba(255, 120, 80, 0.12);
}

.rite-popup-submit {
  margin-top: 12px;
  width: 100%;
  padding: 20px 28px;
  font-family: var(--font-cap);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  color: #1a0f06;
  background: linear-gradient(180deg, #ff9a4a 0%, #d4621a 100%);
  border: 1px solid #ffb050;
  border-radius: 100px;
  cursor: pointer;
  box-shadow:
    0 12px 36px rgba(255, 138, 58, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.3s, box-shadow 0.3s, filter 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.rite-popup-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 16px 44px rgba(255, 138, 58, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.rite-popup-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

.rite-popup-error {
  margin: 14px 0 0;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
  color: #ffc8b0;
  background: rgba(255, 120, 80, 0.10);
  border: 1px solid rgba(255, 120, 80, 0.32);
  display: none;
}
.rite-popup-error.is-visible { display: block; animation: fb-msg-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }

.rite-popup-footer {
  margin: 24px 0 0;
  font-family: var(--font-hand);
  font-size: 16px;
  color: var(--ember);
  opacity: 0.65;
  transform: rotate(-1deg);
}

/* Mobile : popup plein écran */
@media (max-width: 640px) {
  .rite-popup { padding: 0; align-items: stretch; }
  .rite-popup-card {
    border-radius: 0;
    border: none;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 80px 24px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .rite-popup-flame { width: 50px; height: 64px; }
  .rite-popup-close {
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
  }
}

/* ===========================================================
   TRANSITION MAGIQUE — fade to black + particules → /rite/
   =========================================================== */
.rite-transition {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(8, 6, 14, 0.95) 0%, #000 70%);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1.2s ease;
}
.rite-transition.is-active {
  pointer-events: auto;
  opacity: 1;
}
.rite-transition-core {
  position: relative;
  width: 8px;
  height: 8px;
  background: var(--honey-glow);
  border-radius: 50%;
  box-shadow:
    0 0 30px var(--honey-glow),
    0 0 80px rgba(255, 217, 122, 0.6),
    0 0 160px rgba(255, 154, 74, 0.4);
  opacity: 0;
  transform: scale(0.3);
}
.rite-transition.is-active .rite-transition-core {
  animation: rite-core-grow 2.2s 0.4s ease-out forwards;
}
@keyframes rite-core-grow {
  0%   { opacity: 0; transform: scale(0.3); }
  30%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(40); box-shadow: 0 0 200px var(--honey-glow), 0 0 600px rgba(255, 217, 122, 0.8); }
}
.rite-transition-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rite-transition-particles span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, #ffe89a 0%, #ff9a4a 60%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 217, 122, 0.8);
  opacity: 0;
}
.rite-transition.is-active .rite-transition-particles span {
  animation: rite-particle-burst 2.2s ease-out forwards;
}
@keyframes rite-particle-burst {
  0%   { opacity: 0; transform: translate(0, 0) scale(0); }
  20%  { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--px, 0), var(--py, 0)) scale(0.4); }
}

/* ===========================================================
   SPLASH — Le Bassin dans la Plaine
   Scène 100% CSS/SVG : nuit étoilée, lune, plaine, artefact magique
   =========================================================== */
body.splash-plaine {
  background: #02030a;
}
body.splash-plaine .bg-wood,
body.splash-plaine .bg-grain,
body.splash-plaine .bg-trunks,
body.splash-plaine .bg-canopy,
body.splash-plaine .bg-floor { display: none; }

.plaine-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* ─── Ciel ─── */
.plaine-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(40, 50, 90, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 78% 22%, rgba(140, 130, 200, 0.18) 0%, transparent 55%),
    linear-gradient(180deg, #02030a 0%, #060a1a 40%, #0a1228 70%, #060a18 100%);
}

/* ─── Étoiles ─── */
.plaine-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.plaine-stars span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #ffe89a;
  box-shadow: 0 0 6px rgba(255, 232, 154, 0.7), 0 0 12px rgba(255, 217, 122, 0.3);
  opacity: 0.7;
  animation: plaine-star-twinkle 6s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes plaine-star-twinkle {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.3); }
}

/* ─── Lune ─── */
.plaine-moon {
  position: absolute;
  top: 12%;
  right: 14%;
  width: 140px;
  height: 140px;
  pointer-events: none;
}
.plaine-moon-halo {
  position: absolute;
  inset: -80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 230, 255, 0.18) 0%, rgba(180, 200, 240, 0.08) 30%, transparent 60%);
  filter: blur(6px);
  animation: plaine-moon-breath 9s ease-in-out infinite;
}
.plaine-moon-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #f5f0e0 0%, #d8d4c4 50%, #a8a298 100%);
  box-shadow:
    inset -14px -10px 24px rgba(40, 40, 60, 0.4),
    inset 10px 8px 16px rgba(255, 250, 235, 0.3),
    0 0 60px rgba(220, 220, 240, 0.35),
    0 0 120px rgba(180, 190, 230, 0.2);
}
.plaine-moon-disc::before,
.plaine-moon-disc::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(160, 155, 145, 0.18);
}
.plaine-moon-disc::before { top: 22%; left: 30%; width: 18px; height: 18px; }
.plaine-moon-disc::after  { top: 55%; left: 55%; width: 14px; height: 14px; }
@keyframes plaine-moon-breath {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

/* ─── Horizon (plaine) ─── */
.plaine-horizon {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30vh;
  pointer-events: none;
}
.plaine-horizon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ─── Le Bassin ─── */
.plaine-bassin {
  position: absolute;
  bottom: 14vh;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 200px;
  pointer-events: none;
}

/* Halo de lumière au sol projeté par l'orbe */
.plaine-bassin-ground-light {
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 480px;
  height: 140px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 217, 122, 0.4) 0%, rgba(255, 184, 90, 0.15) 30%, transparent 65%);
  filter: blur(8px);
  animation: plaine-light-breath 5s ease-in-out infinite;
}
@keyframes plaine-light-breath {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}

/* Rayons radiants depuis l'orbe */
.plaine-bassin-rays {
  position: absolute;
  top: 30px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
}
.plaine-bassin-rays span {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 180px;
  background: linear-gradient(to bottom, rgba(255, 217, 122, 0.5) 0%, rgba(255, 184, 90, 0.2) 40%, transparent 100%);
  transform-origin: top center;
  filter: blur(1px);
  opacity: 0;
  animation: plaine-rays-pulse 4s ease-in-out infinite;
}
.plaine-bassin-rays span:nth-child(1) { transform: rotate(0deg);   animation-delay: 0s; }
.plaine-bassin-rays span:nth-child(2) { transform: rotate(45deg);  animation-delay: 0.3s; }
.plaine-bassin-rays span:nth-child(3) { transform: rotate(90deg);  animation-delay: 0.6s; }
.plaine-bassin-rays span:nth-child(4) { transform: rotate(135deg); animation-delay: 0.9s; }
.plaine-bassin-rays span:nth-child(5) { transform: rotate(180deg); animation-delay: 1.2s; height: 80px; }
.plaine-bassin-rays span:nth-child(6) { transform: rotate(225deg); animation-delay: 1.5s; }
.plaine-bassin-rays span:nth-child(7) { transform: rotate(270deg); animation-delay: 1.8s; }
.plaine-bassin-rays span:nth-child(8) { transform: rotate(315deg); animation-delay: 2.1s; }
@keyframes plaine-rays-pulse {
  0%, 100% { opacity: 0;   transform-origin: top center; height: 60px; }
  50%      { opacity: 0.6;                                height: 180px; }
}

/* L'orbe qui flotte */
.plaine-bassin-orb {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  animation: plaine-orb-float 5s ease-in-out infinite;
}
.plaine-bassin-orb-glow {
  position: absolute;
  inset: -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 154, 0.5) 0%, rgba(255, 184, 90, 0.25) 35%, transparent 70%);
  filter: blur(8px);
  animation: plaine-orb-pulse 4s ease-in-out infinite;
}
.plaine-bassin-orb-core {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #ffffff 0%, #ffe89a 30%, #ffb050 70%, #d4621a 100%);
  box-shadow:
    0 0 30px rgba(255, 217, 122, 0.9),
    0 0 60px rgba(255, 154, 74, 0.5),
    inset 0 0 12px rgba(255, 232, 154, 0.6);
}
@keyframes plaine-orb-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-12px); }
}
@keyframes plaine-orb-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* La vasque (le bassin lui-même) */
.plaine-bassin-bowl {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 36px;
}
.plaine-bassin-bowl-rim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #2a2018 0%, #1a1208 70%, #0a0604 100%);
  box-shadow:
    inset 0 -3px 5px rgba(0, 0, 0, 0.6),
    inset 0 3px 4px rgba(255, 184, 90, 0.35),
    0 0 30px rgba(255, 138, 58, 0.3);
  border: 1px solid rgba(255, 184, 90, 0.25);
}
.plaine-bassin-bowl-inner {
  /* Reflet liquide à l'intérieur de la vasque */
  position: absolute;
  top: 2px;
  left: 8px;
  right: 8px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 232, 154, 0.55) 0%, rgba(255, 154, 74, 0.25) 50%, #0a0604 100%);
  animation: plaine-bowl-shimmer 3s ease-in-out infinite;
}
.plaine-bassin-bowl::after {
  /* Pied de la vasque */
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 28px;
  background: linear-gradient(180deg, #1a1208 0%, #0a0604 100%);
  clip-path: polygon(15% 0, 85% 0, 70% 100%, 30% 100%);
}
@keyframes plaine-bowl-shimmer {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.3); }
}

/* Étincelles qui montent du bassin */
.plaine-bassin-sparks {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 0;
}
.plaine-bassin-sparks span {
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe89a 0%, #ff9a4a 50%, transparent 100%);
  box-shadow: 0 0 6px rgba(255, 217, 122, 0.8);
  opacity: 0;
  animation: plaine-spark-rise 4s linear infinite;
}
.plaine-bassin-sparks span:nth-child(1) { left: 10%; animation-delay: 0s;   animation-duration: 4.5s; }
.plaine-bassin-sparks span:nth-child(2) { left: 30%; animation-delay: 1s;   animation-duration: 5s; }
.plaine-bassin-sparks span:nth-child(3) { left: 50%; animation-delay: 0.5s; animation-duration: 4s; }
.plaine-bassin-sparks span:nth-child(4) { left: 70%; animation-delay: 2s;   animation-duration: 5.5s; }
.plaine-bassin-sparks span:nth-child(5) { left: 90%; animation-delay: 1.5s; animation-duration: 4.8s; }
@keyframes plaine-spark-rise {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--drift, 8px), -180px) scale(0.3); }
}
.plaine-bassin-sparks span:nth-child(odd)  { --drift: 12px; }
.plaine-bassin-sparks span:nth-child(even) { --drift: -10px; }

/* ─── Ombres rampantes ─── */
.plaine-shadows {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.plaine-shadow {
  position: absolute;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, rgba(2, 4, 12, 0.4) 50%, transparent 80%);
  filter: blur(20px);
  animation: plaine-shadow-creep 14s ease-in-out infinite;
}
.plaine-shadow-left {
  top: 30%;
  left: -10%;
  width: 50%;
  height: 70%;
  animation-delay: 0s;
}
.plaine-shadow-right {
  top: 35%;
  right: -10%;
  width: 50%;
  height: 65%;
  animation-delay: 4s;
  animation-direction: reverse;
}
.plaine-shadow-top {
  top: -20%;
  left: 20%;
  width: 60%;
  height: 50%;
  animation-delay: 7s;
}
@keyframes plaine-shadow-creep {
  0%, 100% { opacity: 0.5; transform: translate(0, 0) scale(1); }
  50%      { opacity: 0.85; transform: translate(3%, 2%) scale(1.06); }
}

/* ─── Vignette + grain ─── */
.plaine-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 0%, rgba(2, 4, 12, 0.6) 75%, rgba(2, 4, 12, 0.92) 100%);
}
.plaine-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.18 0 0 0 0 0.25 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ─── Ajustements typo (mêmes que pour les autres splashes) ─── */
body.splash-plaine .hero-title {
  filter:
    drop-shadow(0 0 40px rgba(200, 216, 240, 0.45))
    drop-shadow(0 8px 36px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 80px rgba(0, 0, 0, 0.6));
}
body.splash-plaine .hero-pitch {
  color: var(--fg);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 0, 0, 0.6);
}
body.splash-plaine .hero-mark {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}
body.splash-plaine .hero-sub-line {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85), 0 0 30px rgba(255, 217, 122, 0.25);
}
body.splash-plaine .hero-cta {
  background: linear-gradient(180deg, rgba(255, 217, 122, 0.18), rgba(184, 114, 26, 0.12));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 0 0 0 rgba(255, 217, 122, 0.4), 0 6px 30px rgba(0, 0, 0, 0.7);
}
body.splash-plaine .hero-cta:hover {
  background: linear-gradient(180deg, rgba(255, 217, 122, 0.3), rgba(184, 114, 26, 0.18));
}

/* Compose le hero en haut, pour laisser le bassin visible en bas-centre */
body.splash-plaine .hero {
  align-items: flex-start;
  padding-top: 12vh;
}

/* Mobile : on remonte un peu le bassin pour ne pas le coller au CTA */
@media (max-width: 720px) {
  .plaine-bassin { bottom: 8vh; width: 160px; height: 160px; }
  .plaine-bassin-ground-light { width: 360px; height: 100px; }
  .plaine-moon { top: 8%; right: 8%; width: 90px; height: 90px; }
  body.splash-plaine .hero { padding-top: 8vh; }
}

/* prefers-reduced-motion : on fige les animations mais on garde l'image */
@media (prefers-reduced-motion: reduce) {
  .plaine-stars span,
  .plaine-moon-halo,
  .plaine-bassin-orb,
  .plaine-bassin-orb-glow,
  .plaine-bassin-ground-light,
  .plaine-bassin-bowl-inner,
  .plaine-shadow { animation: none; }
  .plaine-bassin-rays span,
  .plaine-bassin-sparks span { display: none; }
}

.splash-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #050810;
}

/* ─── Image Ken Burns — zoom ultra-lent + dérive douce ─── */
.splash-scene-image {
  position: absolute;
  inset: -5%;            /* léger débord pour absorber le scale sans cropper */
  width: 110%;
  height: 110%;
  background: url('assets/pandoufle-paysage.webp') center center / cover no-repeat;
  transform-origin: 50% 55%;
  animation: splash-kenburns 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes splash-kenburns {
  0%   { transform: scale(1)    translate(0, 0); }
  100% { transform: scale(1.08) translate(-1%, -1.5%); }
}

/* ─── Fenêtres lumineuses qui respirent ─── */
.splash-scene-windows {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.splash-window {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 217, 122, 0.35) 0%, rgba(255, 154, 74, 0.18) 35%, transparent 70%);
  filter: blur(20px);
  mix-blend-mode: screen;
  animation: splash-window-pulse 4.5s ease-in-out infinite;
}
.splash-window-1 {
  top: 45%; left: 42%;
  width: 260px; height: 260px;
  animation-duration: 5s;
  animation-delay: 0s;
}
.splash-window-2 {
  top: 38%; left: 56%;
  width: 180px; height: 180px;
  animation-duration: 6s;
  animation-delay: 1.2s;
  background: radial-gradient(circle, rgba(255, 184, 90, 0.32) 0%, rgba(255, 138, 58, 0.15) 40%, transparent 70%);
}
.splash-window-3 {
  top: 58%; left: 47%;
  width: 200px; height: 200px;
  animation-duration: 5.8s;
  animation-delay: 2.6s;
  background: radial-gradient(circle, rgba(255, 232, 154, 0.28) 0%, rgba(255, 184, 90, 0.12) 40%, transparent 70%);
}
@keyframes splash-window-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

/* ─── Poussière dorée qui dérive ─── */
.splash-scene-dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.splash-scene-dust span {
  position: absolute;
  bottom: -20px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe89a 0%, #ffb050 50%, transparent 100%);
  box-shadow: 0 0 10px rgba(255, 217, 122, 0.7);
  opacity: 0;
  animation: splash-dust-drift linear infinite;
}
.splash-scene-dust span:nth-child(1) { left: 18%; animation-duration: 26s; animation-delay: 0s;  width: 3px; height: 3px; }
.splash-scene-dust span:nth-child(2) { left: 32%; animation-duration: 32s; animation-delay: 5s;  width: 5px; height: 5px; }
.splash-scene-dust span:nth-child(3) { left: 48%; animation-duration: 28s; animation-delay: 11s; }
.splash-scene-dust span:nth-child(4) { left: 64%; animation-duration: 35s; animation-delay: 3s;  width: 4px; height: 4px; }
.splash-scene-dust span:nth-child(5) { left: 78%; animation-duration: 30s; animation-delay: 14s; width: 3px; height: 3px; }
.splash-scene-dust span:nth-child(6) { left: 88%; animation-duration: 33s; animation-delay: 8s;  width: 5px; height: 5px; }
@keyframes splash-dust-drift {
  0%   { transform: translate(0, 0) scale(0.8);    opacity: 0; }
  10%  { opacity: 0.85; }
  50%  { transform: translate(-30px, -50vh) scale(1); opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translate(30px, -110vh) scale(0.4); opacity: 0; }
}

/* ─── Overlay sombre radial pour lisibilité ─── */
.splash-scene-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 70% at 50% 50%, rgba(5, 8, 16, 0.35) 0%, rgba(5, 8, 16, 0.72) 65%, rgba(5, 8, 16, 0.92) 100%),
    linear-gradient(180deg, rgba(5, 8, 16, 0.45) 0%, transparent 25%, transparent 75%, rgba(5, 8, 16, 0.7) 100%);
}

/* ─── Grain ─── */
.splash-scene-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.18 0 0 0 0 0.25 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ─── Ajustements typo pour ressortir sur l'image ─── */
body.splash-pandoufle .hero-title {
  filter:
    drop-shadow(0 0 40px rgba(200, 216, 240, 0.45))
    drop-shadow(0 8px 36px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 80px rgba(0, 0, 0, 0.6));
}
body.splash-pandoufle .hero-pitch {
  color: var(--fg);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 0, 0, 0.6);
}
body.splash-pandoufle .hero-mark {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}
body.splash-pandoufle .hero-sub-line {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85), 0 0 30px rgba(255, 217, 122, 0.25);
}
body.splash-pandoufle .hero-cta {
  background: linear-gradient(180deg, rgba(255, 217, 122, 0.18), rgba(184, 114, 26, 0.12));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 0 0 0 rgba(255, 217, 122, 0.4), 0 6px 30px rgba(0, 0, 0, 0.7);
}
body.splash-pandoufle .hero-cta:hover {
  background: linear-gradient(180deg, rgba(255, 217, 122, 0.3), rgba(184, 114, 26, 0.18));
}

/* Respect prefers-reduced-motion : on fige le Ken Burns + on calme les animations */
@media (prefers-reduced-motion: reduce) {
  .splash-scene-image { animation: none; transform: scale(1.02); }
  .splash-window      { animation: none; opacity: 0.7; }
  .splash-scene-dust span { animation: none; opacity: 0; }
}

/* ===========================================================
   RITE — Antichambre (scène JRPG, Bontwiggle + Bassin)
   =========================================================== */
body.rite-scene {
  margin: 0;
  background: #02030a;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  cursor: default;
}
/* On cache les couches d'écorce qu'effects.js pourrait laisser tomber */
body.rite-scene .bg-wood,
body.rite-scene .bg-grain,
body.rite-scene .bg-trunks,
body.rite-scene .bg-canopy,
body.rite-scene .bg-floor { display: none; }

/* ─── Image plein écran ─── */
.rite-scene-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.rite-scene-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.4s ease, transform 6s ease-out;
}
.rite-scene-image-1 {
  background-image: url('../assets/rite/scene-1-bontwiggle.webp');
}
.rite-scene-image-2 {
  background-image: url('../assets/rite/scene-2-bassin.webp');
}
.rite-scene-image-3-dragard {
  background-image: url('../assets/rite/resultat-dragard.webp');
}
.rite-scene-image-3-grimlune {
  background-image: url('../assets/rite/resultat-grimlune.webp');
}
.rite-scene-image-3-mytheor {
  background-image: url('../assets/rite/resultat-mytheor.webp');
}
/* Stage 1 actif : image 1 visible */
body.rite-scene.is-ready .rite-scene-image-1 {
  opacity: 1;
  transform: scale(1);
  animation: rite-kenburns 30s ease-in-out 1s infinite alternate;
}
/* Stage 2 actif : crossfade vers image 2 */
body.rite-scene.is-stage-2 .rite-scene-image-1 {
  opacity: 0;
  animation: none;
}
body.rite-scene.is-stage-2 .rite-scene-image-2 {
  opacity: 1;
  transform: scale(1);
  animation: rite-kenburns 40s ease-in-out 1.5s infinite alternate;
}
/* Stage 3 actif : on cache les autres + on affiche la branche */
body.rite-scene.is-stage-3 .rite-scene-image-1,
body.rite-scene.is-stage-3 .rite-scene-image-2 {
  opacity: 0;
  animation: none;
}
body.rite-scene.is-stage-3.is-branch-dragard  .rite-scene-image-3-dragard,
body.rite-scene.is-stage-3.is-branch-grimlune .rite-scene-image-3-grimlune,
body.rite-scene.is-stage-3.is-branch-mytheor  .rite-scene-image-3-mytheor {
  opacity: 1;
  transform: scale(1);
  animation: rite-kenburns 45s ease-in-out 1.5s infinite alternate;
}
@keyframes rite-kenburns {
  0%   { transform: scale(1)    translate(0, 0); }
  100% { transform: scale(1.05) translate(-0.5%, -1%); }
}

.rite-scene-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 75% at 50% 35%, transparent 0%, rgba(2, 4, 12, 0.35) 70%, rgba(2, 4, 12, 0.7) 100%),
    linear-gradient(180deg, rgba(2, 4, 12, 0.35) 0%, transparent 30%, transparent 50%, rgba(2, 4, 12, 0.85) 100%);
}
.rite-scene-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.18 0 0 0 0 0.25 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ─── Zone de clic invisible (toute la scène) ─── */
.rite-clickzone {
  position: fixed;
  inset: 0;
  z-index: 5;
  cursor: pointer;
}

/* ─── Boîte de dialogue ─── */
.rite-dialog {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(40px);
  z-index: 20;
  width: 92%;
  max-width: 920px;
  padding: 0 0 32px;
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s;
  cursor: pointer;
}
.rite-dialog.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.rite-dialog.is-fading {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}

.rite-dialog-inner {
  position: relative;
  padding: 44px 44px 36px;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255, 154, 74, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(18, 14, 26, 0.96) 0%, rgba(8, 6, 14, 0.98) 100%);
  border: 1px solid rgba(255, 217, 122, 0.32);
  border-radius: 14px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.75),
    0 0 100px rgba(255, 138, 58, 0.12),
    inset 0 1px 0 rgba(255, 217, 122, 0.18);
  min-height: 180px;
}
/* Cadre intérieur doré subtil */
.rite-dialog-inner::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 217, 122, 0.12);
  border-radius: 8px;
  pointer-events: none;
}

/* Cartouche du nom (au-dessus de la boîte) */
.rite-dialog-speaker {
  position: absolute;
  top: -18px;
  left: 32px;
  padding: 8px 22px 8px 18px;
  background: linear-gradient(180deg, rgba(40, 28, 18, 0.98), rgba(20, 14, 10, 0.98));
  border: 1px solid rgba(255, 184, 90, 0.5);
  border-radius: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--accent-glow);
  letter-spacing: 0.02em;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(255, 138, 58, 0.18);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.rite-dialog-speaker-mark {
  color: var(--ember);
  font-size: 12px;
  text-shadow: 0 0 8px rgba(255, 138, 58, 0.6);
}

/* Texte de dialogue (typewriter) */
.rite-dialog-text {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.55;
  color: var(--fg);
  min-height: 90px;
  text-wrap: pretty;
  position: relative;
  z-index: 2;
}
/* Curseur clignotant pendant la frappe */
.rite-dialog-text::after {
  content: '▌';
  display: inline-block;
  margin-left: 4px;
  color: var(--ember);
  opacity: 0.85;
  animation: rite-cursor-blink 0.7s steps(2) infinite;
  transform: translateY(-2px);
}
.rite-dialog-text.is-done::after {
  display: none;
}
@keyframes rite-cursor-blink {
  0%, 50%   { opacity: 0.85; }
  51%, 100% { opacity: 0; }
}

/* Indicateur de continuation (▼ qui pulse) */
.rite-dialog-continue {
  position: absolute;
  bottom: 18px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-cap);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.4s ease 0.15s;
  pointer-events: none;
}
.rite-dialog-continue.is-visible {
  opacity: 0.85;
}
.rite-dialog-continue-arrow {
  display: inline-block;
  color: var(--ember);
  font-size: 14px;
  animation: rite-arrow-bounce 1.2s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(255, 138, 58, 0.7);
}
@keyframes rite-arrow-bounce {
  0%, 100% { transform: translateY(0);   opacity: 0.7; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* CTA final */
.rite-dialog-cta[hidden] { display: none !important; }
.rite-dialog-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 24px auto 0;
  padding: 18px 36px;
  background: linear-gradient(180deg, #ff9a4a 0%, #d4621a 100%);
  border: 1px solid #ffb050;
  color: #1a0f06;
  font-family: var(--font-cap);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 100px;
  cursor: pointer;
  box-shadow:
    0 12px 36px rgba(255, 138, 58, 0.45),
    0 0 60px rgba(255, 138, 58, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.3s, box-shadow 0.3s, filter 0.2s, opacity 0.5s;
  position: relative;
  z-index: 3;
  opacity: 0;
  transform: translateY(8px);
  overflow: hidden;
}
.rite-dialog-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.rite-dialog-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.8s;
}
.rite-dialog-cta:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 16px 44px rgba(255, 138, 58, 0.6),
    0 0 80px rgba(255, 138, 58, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.rite-dialog-cta:hover:not(:disabled)::before {
  transform: translateX(100%);
}
.rite-dialog-cta:disabled {
  opacity: 0.7;
  cursor: wait;
}
.rite-dialog-cta.is-pressed {
  filter: brightness(1.2);
}
.rite-dialog-cta-icon {
  font-size: 16px;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}

/* Le CTA se centre sous le texte → on bascule en flex column */
.rite-dialog-inner {
  display: flex;
  flex-direction: column;
}
.rite-dialog-cta {
  align-self: center;
}

/* ─── Coming soon ─── */
.rite-coming-soon {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(ellipse at center, rgba(8, 6, 14, 0.7) 0%, rgba(2, 4, 12, 0.92) 80%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.rite-coming-soon.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.rite-coming-soon-inner {
  text-align: center;
  max-width: 480px;
}
.rite-coming-soon-spark {
  font-size: 36px;
  color: var(--accent-glow);
  margin-bottom: 18px;
  text-shadow: 0 0 30px rgba(255, 217, 122, 0.6);
  animation: rite-arrow-bounce 2s ease-in-out infinite;
}
.rite-coming-soon-inner p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.45;
  color: var(--accent-glow);
  margin: 0 0 12px;
}
.rite-coming-soon-note {
  font-size: 16px !important;
  color: var(--fg-dim) !important;
  margin-top: 12px !important;
}

/* ─── Mobile ─── */
@media (max-width: 720px) {
  .rite-dialog {
    width: 96%;
    padding: 0 0 16px;
  }
  .rite-dialog-inner {
    padding: 36px 24px 28px;
    border-radius: 12px;
    min-height: 200px;
  }
  .rite-dialog-speaker {
    top: -16px;
    left: 20px;
    font-size: 16px;
    padding: 6px 16px;
  }
  .rite-dialog-text {
    font-size: 17px;
    line-height: 1.5;
    min-height: 100px;
  }
  .rite-dialog-continue {
    bottom: 12px;
    right: 16px;
    font-size: 9px;
    letter-spacing: 0.25em;
  }
  .rite-dialog-cta {
    padding: 16px 26px;
    font-size: 12px;
    letter-spacing: 0.25em;
    width: 100%;
    justify-content: center;
  }
}

/* prefers-reduced-motion : on coupe le Ken Burns + animations */
@media (prefers-reduced-motion: reduce) {
  body.rite-scene.is-ready .rite-scene-image { animation: none; transform: scale(1); }
  .rite-dialog-text::after,
  .rite-dialog-continue-arrow,
  .rite-coming-soon-spark { animation: none; }
}

/* ===========================================================
   RITE STAGE 2 — Le Bassin lit l'âme (quiz 5 questions)
   =========================================================== */

/* ─── Container global du stage 2 ─── */
.bassin-stage {
  position: fixed;
  inset: 0;
  z-index: 18;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 80px 32px 56px;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.bassin-stage.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.bassin-stage.is-fading {
  opacity: 0;
  transition: opacity 0.9s ease;
}

/* ─── Indicateur de progression : 5 reflets ─── */
.bassin-progress {
  display: flex;
  gap: 14px;
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.bassin-progress-dot {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: rgba(180, 210, 240, 0.18);
  border: 1px solid rgba(180, 210, 240, 0.18);
  transition: background 0.5s, border-color 0.5s, box-shadow 0.5s;
}
.bassin-progress-dot.is-done {
  background: linear-gradient(90deg, rgba(110, 190, 230, 0.7), rgba(150, 210, 250, 0.55));
  border-color: rgba(140, 200, 240, 0.55);
  box-shadow: 0 0 12px rgba(120, 200, 240, 0.5);
}
.bassin-progress-dot.is-active {
  background: linear-gradient(90deg, rgba(255, 217, 122, 0.85), rgba(255, 184, 90, 0.7));
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(255, 217, 122, 0.6);
  animation: bassin-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes bassin-dot-pulse {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 1; }
}

/* ─── Question (en haut) ─── */
.bassin-question-wrap {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 24px auto 0;
  text-align: center;
  padding: 38px 44px;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(110, 180, 230, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(10, 20, 36, 0.78), rgba(6, 12, 24, 0.88));
  border: 1px solid rgba(140, 200, 240, 0.28);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(110, 180, 230, 0.12),
    inset 0 1px 0 rgba(180, 220, 250, 0.18);
}
.bassin-question-wrap::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(140, 200, 240, 0.10);
  border-radius: 8px;
  pointer-events: none;
}
.bassin-question-eyebrow {
  font-family: var(--font-cap);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(180, 220, 250, 0.7);
  margin-bottom: 16px;
}
.bassin-question {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.5;
  color: var(--fg);
  text-wrap: pretty;
  /* Hauteur fixe = 3 lignes → la bulle ne bouge JAMAIS */
  min-height: calc(1.5em * 3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* Plus de curseur clignotant + plus de translation : la bulle est statique */
.bassin-question.is-fading {
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* ─── Choix (boutons reflets d'eau) ─── */
.bassin-choices {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto 24px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.bassin-choices.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.bassin-choices.is-fading {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.bassin-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 28px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.4;
  text-align: left;
  color: var(--fg);
  background:
    linear-gradient(180deg, rgba(20, 36, 56, 0.72), rgba(8, 16, 28, 0.85));
  border: 1px solid rgba(140, 200, 240, 0.32);
  border-radius: 100px;
  cursor: pointer;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(110, 180, 230, 0.08),
    inset 0 1px 0 rgba(180, 220, 250, 0.15);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.35s,
    box-shadow 0.45s,
    background 0.35s,
    opacity 0.4s;
  animation: bassin-choice-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(0.15s + var(--i, 0) * 0.12s);
}
@keyframes bassin-choice-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Reflet d'eau ondulant en background du bouton */
.bassin-choice::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 100% at 20% 50%, rgba(120, 200, 240, 0.12), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s, transform 0.8s;
  pointer-events: none;
}
.bassin-choice:hover {
  transform: translateY(-3px);
  border-color: rgba(180, 220, 250, 0.65);
  background: linear-gradient(180deg, rgba(28, 50, 75, 0.85), rgba(12, 22, 38, 0.92));
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(120, 200, 240, 0.22),
    inset 0 1px 0 rgba(180, 220, 250, 0.25);
}
.bassin-choice:hover::before {
  opacity: 1;
  transform: translateX(40%);
}
.bassin-choice:active {
  transform: translateY(-1px);
}

.bassin-choice-marker {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(140, 200, 240, 0.15);
  border: 1px solid rgba(180, 220, 250, 0.35);
  color: rgba(200, 230, 250, 0.85);
  font-size: 14px;
  text-shadow: 0 0 8px rgba(140, 200, 240, 0.6);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.bassin-choice:hover .bassin-choice-marker {
  background: rgba(180, 220, 250, 0.3);
  border-color: rgba(220, 240, 255, 0.7);
  color: #fff;
  text-shadow: 0 0 12px rgba(180, 220, 250, 0.85);
}
.bassin-choice-text {
  flex: 1;
}

/* État chosen — celui que l'utilisateur a sélectionné */
.bassin-choice.is-chosen {
  border-color: var(--accent-glow);
  background: linear-gradient(180deg, rgba(60, 80, 50, 0.55), rgba(20, 22, 18, 0.85));
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.65),
    0 0 60px rgba(255, 217, 122, 0.35),
    inset 0 1px 0 rgba(255, 232, 154, 0.3);
  transform: translateY(-3px);
}
.bassin-choice.is-chosen .bassin-choice-marker {
  background: rgba(255, 217, 122, 0.3);
  border-color: var(--accent-glow);
  color: var(--accent-glow);
  text-shadow: 0 0 12px rgba(255, 217, 122, 0.8);
}
/* État dimmed — les autres choix non sélectionnés */
.bassin-choice.is-dimmed {
  opacity: 0.35;
  filter: blur(1px);
  transform: scale(0.99);
  transition: opacity 0.4s, filter 0.4s, transform 0.4s;
}

/* ─── Flash ripple — l'eau pulse depuis le centre ─── */
.bassin-ripple {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 30;
}
.bassin-ripple span {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  border: 2px solid rgba(180, 220, 250, 0.55);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  box-shadow:
    0 0 60px rgba(140, 200, 240, 0.6),
    inset 0 0 40px rgba(180, 220, 250, 0.35);
  width: 80px;
  height: 80px;
}
.bassin-ripple.is-active span {
  animation: bassin-ripple-burst 1.1s ease-out forwards;
}
.bassin-ripple.is-active span:nth-child(1) { animation-delay: 0s; }
.bassin-ripple.is-active span:nth-child(2) { animation-delay: 0.18s; border-color: rgba(255, 217, 122, 0.4); box-shadow: 0 0 60px rgba(255, 184, 90, 0.45), inset 0 0 40px rgba(255, 217, 122, 0.3); }
.bassin-ripple.is-active span:nth-child(3) { animation-delay: 0.32s; }
@keyframes bassin-ripple-burst {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0); border-width: 3px; }
  20%  { opacity: 0.9; }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(28); border-width: 1px; }
}

/* ─── Quand la révélation arrive : flash doré global ─── */
body.rite-scene.is-revealing .rite-scene-vignette {
  background:
    radial-gradient(ellipse 90% 75% at 50% 50%, rgba(255, 217, 122, 0.18) 0%, rgba(2, 4, 12, 0.35) 60%, rgba(2, 4, 12, 0.78) 100%);
  transition: background 1.2s ease;
}

/* ─── Mobile ─── */
@media (max-width: 720px) {
  .bassin-stage {
    padding: 64px 16px 32px;
    justify-content: center;
    gap: 32px;
  }
  .bassin-progress { top: 18px; gap: 10px; }
  .bassin-progress-dot { width: 20px; height: 3px; }
  .bassin-question-wrap {
    padding: 28px 20px;
    margin-top: 18px;
  }
  .bassin-question { font-size: 17px; line-height: 1.45; min-height: calc(1.45em * 4); }
  .bassin-question-eyebrow { font-size: 9px; letter-spacing: 0.3em; }
  .bassin-choice {
    padding: 16px 20px;
    font-size: 14.5px;
    gap: 12px;
    border-radius: 18px;
  }
  .bassin-choice-marker { width: 24px; height: 24px; font-size: 12px; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .bassin-progress-dot.is-active,
  .bassin-question::after { animation: none; }
  .bassin-choice { animation: none; }
  .bassin-ripple.is-active span { animation-duration: 0.4s; }
}

/* ===========================================================
   RITE STAGE 3 — La Révélation (Bontwiggle verdict + Laissez-passer)
   =========================================================== */

/* Variables par défaut (overridées en JS selon la branche) */
body.rite-scene {
  --branch-accent: #ffd078;
  --branch-deep: #3a2814;
}

/* ─── Flash blanc transitionnel (Stage 2 → Stage 3) ─── */
.rite-flash-white {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #f8efdb;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.rite-flash-white.is-active {
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* ─── Container Stage 3 ─── */
.reveal-stage {
  position: fixed;
  inset: 0;
  z-index: 18;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px 24px;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
  overflow-y: auto;
}
.reveal-stage.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Panneau de révélation (texte long sur la branche) ─── */
.reveal-panel {
  position: relative;
  max-width: 720px;
  width: 100%;
  padding: 56px 56px 70px;
  margin: 0 auto;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255, 217, 122, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(18, 14, 26, 0.96) 0%, rgba(8, 6, 14, 0.98) 100%);
  border: 1px solid rgba(255, 217, 122, 0.35);
  border-radius: 18px;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.75),
    0 0 120px rgba(255, 138, 58, 0.18),
    inset 0 1px 0 rgba(255, 217, 122, 0.22);
  text-align: center;
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
}
.reveal-panel::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 217, 122, 0.14);
  border-radius: 12px;
  pointer-events: none;
}
.reveal-panel.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.reveal-panel.is-fading {
  opacity: 0;
  transform: translateY(-20px) scale(0.98);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-panel-eyebrow {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}
.reveal-panel-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.1;
  margin: 0 0 28px;
  background: linear-gradient(180deg, var(--moon-glow) 0%, var(--accent-glow) 60%, var(--honey) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 32px rgba(255, 217, 122, 0.3));
  letter-spacing: -0.01em;
}
.reveal-panel-body {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.65;
  color: var(--fg);
  text-wrap: pretty;
  margin: 0;
}
.reveal-panel-continue {
  position: absolute;
  bottom: 22px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-cap);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.4s ease 0.3s;
  pointer-events: none;
}
.reveal-panel.is-visible .reveal-panel-continue {
  opacity: 0.85;
  animation: rite-arrow-bounce 1.2s ease-in-out infinite;
}

/* ─── Laissez-passer ─── */
.laissez-passer {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  transform: translateY(30px) scale(0.94);
  transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.laissez-passer.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* La carte elle-même */
.laissez-passer-card {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 38px 32px 32px;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, var(--branch-deep) 0%, #0a0712 60%, #02030a 100%);
  border: 2px solid rgba(255, 217, 122, 0.55);
  border-radius: 18px;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.75),
    0 0 120px rgba(255, 217, 122, 0.18),
    inset 0 1px 0 rgba(255, 217, 122, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
/* Halo intérieur de couleur branche */
.laissez-passer-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--branch-accent) 22%, transparent) 0%, transparent 55%);
  pointer-events: none;
}
/* Cadre intérieur doré */
.laissez-passer-card::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 217, 122, 0.25);
  border-radius: 10px;
  pointer-events: none;
}

/* Coins décoratifs */
.lp-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid #ffd078;
  z-index: 2;
}
.lp-corner-tl { top: 22px; left: 22px; border-right: none; border-bottom: none; border-top-left-radius: 4px; }
.lp-corner-tr { top: 22px; right: 22px; border-left: none; border-bottom: none; border-top-right-radius: 4px; }
.lp-corner-bl { bottom: 22px; left: 22px; border-right: none; border-top: none; border-bottom-left-radius: 4px; }
.lp-corner-br { bottom: 22px; right: 22px; border-left: none; border-top: none; border-bottom-right-radius: 4px; }

/* Watermark Nøcturne discret */
.lp-watermark {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.4em;
  color: rgba(255, 217, 122, 0.4);
  margin-bottom: 4px;
}
.lp-eyebrow {
  position: relative;
  z-index: 2;
  font-family: var(--font-cap);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 217, 122, 0.7);
}

/* Blason */
.lp-blason {
  position: relative;
  z-index: 2;
  width: 50%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0;
}
.lp-blason::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, color-mix(in srgb, var(--branch-accent) 35%, transparent) 0%, transparent 60%);
  filter: blur(12px);
  z-index: 0;
}
.lp-blason img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 20px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 24px color-mix(in srgb, var(--branch-accent) 60%, transparent));
}

/* Prénom (au centre, gros, italique) */
.lp-name {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(34px, 6vw, 48px);
  line-height: 1;
  margin: 8px 0 6px;
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-glow) 60%, var(--honey) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 90%;
  overflow-wrap: break-word;
  filter: drop-shadow(0 0 18px rgba(255, 217, 122, 0.3));
}
.lp-branch {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.lp-branch-prefix {
  font-family: var(--font-cap);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 232, 154, 0.6);
}
.lp-branch-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--branch-accent);
  letter-spacing: 0.02em;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--branch-accent) 60%, transparent));
}
.lp-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: rgba(255, 184, 90, 0.6);
  margin-top: 10px;
}
.lp-footer-mark { font-size: 10px; }

/* Boutons d'action */
.laissez-passer-actions {
  display: flex;
  gap: 10px;
  margin: 24px 0 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.lp-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-family: var(--font-cap);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-glow);
  background: rgba(255, 217, 122, 0.07);
  border: 1px solid rgba(255, 217, 122, 0.32);
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.lp-action:hover {
  background: rgba(255, 217, 122, 0.16);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(255, 138, 58, 0.25);
}
.lp-action:disabled {
  opacity: 0.55;
  cursor: wait;
}
.lp-action-icon {
  font-size: 14px;
  letter-spacing: 0;
}
.lp-action-download {
  background: rgba(255, 138, 58, 0.12);
  border-color: rgba(255, 154, 74, 0.55);
  color: var(--ember);
}
.lp-action-download:hover {
  background: rgba(255, 138, 58, 0.22);
  color: var(--accent-glow);
}

/* CTA "Entrer dans l'Antichambre" */
.lp-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 20px 36px;
  font-family: var(--font-cap);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 700;
  color: #1a0f06;
  background: linear-gradient(180deg, #ff9a4a 0%, #d4621a 100%);
  border: 1px solid #ffb050;
  text-decoration: none;
  border-radius: 100px;
  box-shadow:
    0 12px 40px rgba(255, 138, 58, 0.4),
    0 0 80px rgba(255, 138, 58, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.3s, box-shadow 0.3s, filter 0.2s;
  position: relative;
  overflow: hidden;
}
.lp-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.8s;
}
.lp-cta:hover {
  transform: translateY(-3px);
  filter: brightness(1.06);
  box-shadow:
    0 16px 50px rgba(255, 138, 58, 0.55),
    0 0 120px rgba(255, 138, 58, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.lp-cta:hover::before {
  transform: translateX(100%);
}
.lp-cta-arrow {
  font-size: 18px;
  transition: transform 0.3s;
}
.lp-cta:hover .lp-cta-arrow {
  transform: translateX(4px);
}

/* ─── Toast feedback ─── */
.rite-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 999;
  padding: 14px 26px;
  background: rgba(18, 14, 26, 0.96);
  border: 1px solid rgba(255, 217, 122, 0.4);
  border-radius: 100px;
  color: var(--accent-glow);
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 217, 122, 0.18);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.rite-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── Themings par branche (accents subtils sur l'UI globale) ─── */
body.rite-scene.is-branch-dragard {
  --branch-accent: #7cc488;
  --branch-deep: #1a3a26;
}
body.rite-scene.is-branch-grimlune {
  --branch-accent: #c8d4e8;
  --branch-deep: #1a2440;
}
body.rite-scene.is-branch-mytheor {
  --branch-accent: #ffd078;
  --branch-deep: #3a2814;
}

/* ─── Mobile ─── */
@media (max-width: 720px) {
  .reveal-stage { padding: 24px 12px; justify-content: flex-start; padding-top: 32px; }
  .reveal-panel { padding: 36px 22px 56px; border-radius: 14px; }
  .reveal-panel-title { font-size: 26px; }
  .reveal-panel-body { font-size: 16px; line-height: 1.55; }
  .reveal-panel-continue { bottom: 14px; right: 16px; font-size: 9px; }

  .laissez-passer { max-width: 360px; }
  .laissez-passer-card { padding: 28px 20px 22px; border-radius: 14px; }
  .lp-corner { width: 16px; height: 16px; }
  .lp-corner-tl, .lp-corner-tr { top: 14px; }
  .lp-corner-bl, .lp-corner-br { bottom: 14px; }
  .lp-corner-tl, .lp-corner-bl { left: 14px; }
  .lp-corner-tr, .lp-corner-br { right: 14px; }
  .lp-watermark { font-size: 14px; letter-spacing: 0.3em; }
  .lp-name { font-size: 32px; }
  .lp-branch-name { font-size: 18px; }
  .lp-footer { font-size: 11px; }

  .laissez-passer-actions { flex-direction: column; gap: 8px; align-items: stretch; }
  .lp-action { width: 100%; justify-content: center; font-size: 9.5px; padding: 14px 18px; }
  .lp-cta { padding: 16px 24px; font-size: 11px; letter-spacing: 0.25em; }
  .rite-toast { font-size: 10px; padding: 12px 20px; bottom: 20px; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-panel,
  .laissez-passer { transition: opacity 0.3s ease; transform: none; }
  .reveal-panel.is-visible,
  .laissez-passer.is-visible { transform: none; }
  .reveal-panel-continue { animation: none; }
}

/* ===========================================================
   ALCÔVE — Espace permanent post-Rite
   =========================================================== */

body.alcove-body {
  --branch-accent: #ffd078;
  --branch-deep: #3a2814;
}

/* Halo branche : grand cercle de lumière qui pulse derrière le contenu */
.alcove-aura {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, color-mix(in srgb, var(--branch-accent) 18%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 75%, color-mix(in srgb, var(--branch-deep) 60%, transparent) 0%, transparent 70%);
  animation: alcove-aura-breath 9s ease-in-out infinite;
}
@keyframes alcove-aura-breath {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* Particules ambiantes (poussière, plus rare que la plaine) */
.alcove-motes {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.alcove-motes span {
  position: absolute;
  bottom: -20px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--branch-accent) 0%, color-mix(in srgb, var(--branch-accent) 50%, transparent) 50%, transparent 100%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--branch-accent) 70%, transparent);
  opacity: 0;
  animation: alcove-mote-drift linear infinite;
}
.alcove-motes span:nth-child(1) { left: 14%; animation-duration: 28s; animation-delay: 0s;  width: 3px; height: 3px; }
.alcove-motes span:nth-child(2) { left: 26%; animation-duration: 34s; animation-delay: 6s;  width: 5px; height: 5px; }
.alcove-motes span:nth-child(3) { left: 38%; animation-duration: 30s; animation-delay: 12s; }
.alcove-motes span:nth-child(4) { left: 52%; animation-duration: 36s; animation-delay: 3s;  width: 4px; height: 4px; }
.alcove-motes span:nth-child(5) { left: 64%; animation-duration: 32s; animation-delay: 18s; width: 3px; height: 3px; }
.alcove-motes span:nth-child(6) { left: 76%; animation-duration: 38s; animation-delay: 9s;  }
.alcove-motes span:nth-child(7) { left: 86%; animation-duration: 30s; animation-delay: 22s; width: 4px; height: 4px; }
.alcove-motes span:nth-child(8) { left: 92%; animation-duration: 34s; animation-delay: 15s; width: 3px; height: 3px; }
@keyframes alcove-mote-drift {
  0%   { transform: translate(0, 0) scale(0.8);     opacity: 0; }
  12%  { opacity: 0.7; }
  50%  { transform: translate(-20px, -50vh) scale(1); opacity: 1; }
  90%  { opacity: 0.5; }
  100% { transform: translate(20px, -110vh) scale(0.4); opacity: 0; }
}

/* Conteneur principal */
.alcove-main {
  position: relative;
  z-index: 10;
  max-width: 760px;
  margin: 0 auto;
  padding: 140px 28px 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Header */
.alcove-header {
  margin-bottom: 50px;
}
.alcove-eyebrow {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--branch-accent);
  margin-bottom: 22px;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--branch-accent) 50%, transparent));
}
.alcove-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.15;
  margin: 0;
  color: var(--fg);
  text-wrap: balance;
  letter-spacing: -0.01em;
}
.alcove-title-place {
  background: linear-gradient(180deg, var(--branch-accent) 0%, color-mix(in srgb, var(--branch-accent) 60%, #ffe89a) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--branch-accent) 35%, transparent));
}
.alcove-title-comma {
  color: var(--fg-soft);
}
.alcove-title-name {
  background: linear-gradient(180deg, var(--moon-glow) 0%, var(--accent-glow) 60%, var(--honey) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 217, 122, 0.3));
}

/* Section blason */
.alcove-blason-section {
  margin-bottom: 70px;
}
.alcove-blason {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alcove-blason-halo {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--branch-accent) 40%, transparent) 0%, color-mix(in srgb, var(--branch-accent) 12%, transparent) 35%, transparent 70%);
  filter: blur(14px);
  animation: alcove-halo-pulse 4.5s ease-in-out infinite;
}
@keyframes alcove-halo-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
.alcove-blason img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 14px 30px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 30px color-mix(in srgb, var(--branch-accent) 65%, transparent));
  animation: alcove-blason-float 6s ease-in-out infinite;
}
@keyframes alcove-blason-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.alcove-branch-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--fg-soft);
}
.alcove-branch-tag em {
  color: var(--branch-accent);
  font-weight: 500;
  font-style: italic;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--branch-accent) 50%, transparent));
}

/* Section intro */
.alcove-intro {
  max-width: 620px;
  margin: 0 auto 56px;
}
.alcove-intro-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.3vw, 26px);
  line-height: 1.45;
  color: var(--accent-glow);
  margin: 0 0 22px;
  text-wrap: pretty;
}
.alcove-intro-lead em {
  color: var(--branch-accent);
  font-style: italic;
  font-weight: 500;
}
.alcove-intro-text {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.7;
  color: var(--fg-soft);
  margin: 0;
  text-wrap: pretty;
}
.alcove-intro-text em {
  color: var(--accent-glow);
  font-style: italic;
}

/* Note Bontwiggle — lien magique */
.alcove-furet {
  max-width: 600px;
  margin: 0 auto 70px;
}
.alcove-furet-inner {
  position: relative;
  padding: 32px 38px 30px;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255, 154, 74, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(18, 14, 26, 0.85) 0%, rgba(8, 6, 14, 0.92) 100%);
  border: 1px solid rgba(255, 217, 122, 0.28);
  border-radius: 14px;
  text-align: left;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 217, 122, 0.12);
}
.alcove-furet-inner::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 217, 122, 0.12);
  border-radius: 8px;
  pointer-events: none;
}
.alcove-furet-mark {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(40, 28, 18, 0.98), rgba(20, 14, 10, 0.98));
  border: 1px solid rgba(255, 184, 90, 0.5);
  border-radius: 50%;
  color: var(--ember);
  font-size: 12px;
  text-shadow: 0 0 8px rgba(255, 138, 58, 0.6);
}
.alcove-furet-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.alcove-furet-text em {
  color: var(--accent-glow);
  font-style: italic;
}
.alcove-furet-text strong {
  color: var(--ember);
  font-weight: 600;
  font-style: normal;
}
.alcove-furet-signature {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 17px;
  color: var(--ember);
  opacity: 0.7;
  transform: rotate(-1deg);
  display: inline-block;
}

/* Compass — liens vers le reste du site */
.alcove-compass {
  width: 100%;
  max-width: 720px;
}
.alcove-compass-eyebrow {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.7;
  margin-bottom: 22px;
}
.alcove-compass-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.alcove-compass-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 18px;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--branch-accent) 6%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(18, 14, 26, 0.7), rgba(8, 6, 14, 0.85));
  border: 1px solid rgba(255, 217, 122, 0.18);
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s, box-shadow 0.35s, background 0.35s;
}
.alcove-compass-link:hover {
  transform: translateY(-3px);
  border-color: var(--branch-accent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 50px color-mix(in srgb, var(--branch-accent) 25%, transparent);
}
.alcove-compass-link-mark {
  color: var(--branch-accent);
  font-size: 14px;
  opacity: 0.65;
}
.alcove-compass-link-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--accent-glow);
}
.alcove-compass-link-sub {
  font-family: var(--font-cap);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fg-dim);
  opacity: 0.75;
}

/* ─── Mode verrouillé (pas de prenom/branche) ─── */
.alcove-locked {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 24px 80px;
  text-align: center;
}
.alcove-locked-inner {
  max-width: 580px;
}
.alcove-locked-mark {
  font-size: 36px;
  color: var(--ember);
  text-shadow: 0 0 30px rgba(255, 138, 58, 0.7);
  margin-bottom: 18px;
  animation: alcove-halo-pulse 3.5s ease-in-out infinite;
}
.alcove-locked-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.25;
  margin: 0 0 26px;
  color: var(--accent-glow);
  text-wrap: balance;
}
.alcove-locked-title em {
  color: var(--ember);
  font-style: italic;
  font-weight: 500;
}
.alcove-locked-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
  color: var(--fg-soft);
  margin: 0 0 36px;
  text-wrap: pretty;
}
.alcove-locked-text em {
  color: var(--accent-glow);
  font-style: italic;
}
.alcove-locked-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 38px;
  background: linear-gradient(180deg, #ff9a4a 0%, #d4621a 100%);
  border: 1px solid #ffb050;
  color: #1a0f06;
  font-family: var(--font-cap);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  border-radius: 100px;
  box-shadow: 0 12px 40px rgba(255, 138, 58, 0.4), 0 0 80px rgba(255, 138, 58, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.3s, box-shadow 0.3s, filter 0.2s;
}
.alcove-locked-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 16px 50px rgba(255, 138, 58, 0.55), 0 0 120px rgba(255, 138, 58, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.alcove-locked-cta-flame {
  width: 11px;
  height: 14px;
  background: radial-gradient(ellipse at 50% 100%, #ffe89a, #ff9a4a 60%, transparent 100%);
  border-radius: 50% 50% 20% 20% / 60% 60% 40% 40%;
  filter: drop-shadow(0 0 6px rgba(255, 217, 122, 0.8));
  animation: rite-flicker-3 1.1s ease-in-out infinite;
}
.alcove-locked-note {
  margin: 32px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--fg-dim);
  line-height: 1.55;
}
.alcove-locked-note em {
  color: var(--accent);
}

/* ─── Mobile ─── */
@media (max-width: 720px) {
  .alcove-main { padding: 110px 18px 60px; }
  .alcove-header { margin-bottom: 36px; }
  .alcove-eyebrow { letter-spacing: 0.35em; }
  .alcove-blason { width: 150px; height: 150px; }
  .alcove-blason-section { margin-bottom: 50px; }
  .alcove-intro { margin-bottom: 40px; }
  .alcove-furet-inner { padding: 26px 22px 22px; }
  .alcove-compass-links { grid-template-columns: 1fr; }
}

/* ===========================================================
   ALCÔVE — Sections de contenu (Carte, Vidéo, Lexique)
   =========================================================== */

/* Header commun aux sections */
.alcove-section {
  width: 100%;
  max-width: 760px;
  margin: 0 auto 70px;
  text-align: center;
}
.alcove-section-eyebrow {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--branch-accent);
  margin-bottom: 18px;
  opacity: 0.85;
}
.alcove-section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--accent-glow);
  text-wrap: balance;
}
.alcove-section-title em {
  background: linear-gradient(180deg, var(--branch-accent) 0%, color-mix(in srgb, var(--branch-accent) 65%, var(--honey)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.alcove-section-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  color: var(--fg-soft);
  margin: 0 auto 36px;
  max-width: 540px;
  text-wrap: pretty;
}

/* ─── Carte d'Andar ─── */
.alcove-carte-frame {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 2px solid rgba(255, 217, 122, 0.32);
  border-radius: 16px;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 100px rgba(255, 138, 58, 0.12);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.5s, box-shadow 0.5s;
}
.alcove-carte-frame::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 217, 122, 0.15);
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
}
.alcove-carte-frame img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s;
}
.alcove-carte-frame:hover {
  transform: translateY(-4px);
  border-color: var(--branch-accent);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 130px color-mix(in srgb, var(--branch-accent) 25%, transparent);
}
.alcove-carte-frame:hover img {
  transform: scale(1.03);
  filter: brightness(1.05);
}
.alcove-carte-zoom {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--accent-glow);
  background: rgba(8, 6, 14, 0.75);
  border: 1px solid rgba(255, 217, 122, 0.4);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  z-index: 3;
  transition: transform 0.3s, background 0.3s;
}
.alcove-carte-frame:hover .alcove-carte-zoom {
  transform: scale(1.1);
  background: rgba(255, 138, 58, 0.85);
  color: #1a0f06;
}

/* Lightbox */
.alcove-lightbox[hidden] { display: none !important; }
.alcove-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: radial-gradient(ellipse at center, rgba(8, 6, 14, 0.92), rgba(2, 4, 12, 0.98));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.alcove-lightbox.is-open { opacity: 1; }
.alcove-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255, 217, 122, 0.32);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.85);
  cursor: zoom-out;
  transform: scale(0.96);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.alcove-lightbox.is-open img { transform: scale(1); }
.alcove-lightbox-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(8, 6, 14, 0.8);
  border: 1px solid rgba(255, 217, 122, 0.4);
  color: var(--accent-glow);
  font-size: 22px;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s, transform 0.2s, color 0.2s;
}
.alcove-lightbox-close:hover {
  background: rgba(255, 138, 58, 0.85);
  color: #1a0f06;
  transform: scale(1.08);
}

/* ─── Vidéo de présentation ─── */
.alcove-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(18, 14, 26, 0.85), rgba(8, 6, 14, 0.95));
  border: 1px solid rgba(255, 217, 122, 0.28);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 217, 122, 0.12);
}
.alcove-video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.alcove-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 138, 58, 0.10) 0%, transparent 65%),
    linear-gradient(180deg, rgba(18, 14, 26, 0.96), rgba(8, 6, 14, 0.98));
  opacity: 1;
  transition: opacity 0.4s ease;
}
/* Quand la vidéo a chargé (et n'est pas en erreur), on cache le placeholder */
.alcove-video-frame.has-video:not(.video-error) .alcove-video-placeholder {
  opacity: 0;
  visibility: hidden;
}
.alcove-video-placeholder-mark {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--ember);
  background: rgba(8, 6, 14, 0.85);
  border: 2px solid var(--ember);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(255, 138, 58, 0.4);
  padding-left: 4px; /* centre visuel du ▶ */
}
.alcove-video-placeholder-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--fg-soft);
  letter-spacing: 0.02em;
}

/* ─── Lexique ─── */
.alcove-lexique-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  text-align: left;
}
.alcove-lex-entry {
  padding: 22px 24px;
  background: linear-gradient(180deg, rgba(18, 14, 26, 0.75), rgba(8, 6, 14, 0.92));
  border: 1px solid rgba(255, 217, 122, 0.18);
  border-radius: 12px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.alcove-lex-entry:hover {
  border-color: rgba(255, 217, 122, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 40px color-mix(in srgb, var(--branch-accent) 14%, transparent);
}
.alcove-lex-entry dt {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  color: var(--branch-accent);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--branch-accent) 30%, transparent));
}
.alcove-lex-entry dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-soft);
  text-wrap: pretty;
}

/* ─── Mobile : ajustements ─── */
@media (max-width: 720px) {
  .alcove-section { margin-bottom: 50px; }
  .alcove-section-title { font-size: 22px; }
  .alcove-section-lede { font-size: 15px; }

  .alcove-carte-zoom { width: 36px; height: 36px; font-size: 16px; top: 12px; right: 12px; }
  .alcove-lightbox { padding: 18px; }
  .alcove-lightbox-close { width: 40px; height: 40px; top: 14px; right: 14px; }

  .alcove-video-placeholder-mark { width: 52px; height: 52px; font-size: 18px; }
  .alcove-video-placeholder-text { font-size: 14px; padding: 0 18px; text-align: center; }

  .alcove-lexique-list { grid-template-columns: 1fr; gap: 10px; }
  .alcove-lex-entry { padding: 18px 20px; }
  .alcove-lex-entry dt { font-size: 19px; }
  .alcove-lex-entry dd { font-size: 14px; }
}

/* ===========================================================
   ALCÔVE — Refonte rich layout (overrides + new spreads)
   =========================================================== */

/* On élargit le main pour accommoder les spreads */
.alcove-main {
  max-width: 1100px;
  padding: 130px 32px 100px;
  align-items: stretch;
  text-align: left;
}

/* ─── HERO ASYMÉTRIQUE ─── */
.alcove-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 70px;
  padding: 32px 0 24px;
}
.alcove-hero-blason {
  display: flex;
  justify-content: center;
  align-items: center;
}
.alcove-hero-blason .alcove-blason {
  width: 240px;
  height: 240px;
  margin: 0;
}
.alcove-hero-text {
  position: relative;
  padding-left: 36px;
  border-left: 1px solid rgba(255, 217, 122, 0.25);
}
.alcove-hero-text::before {
  /* Ornement vertical doré */
  content: '';
  position: absolute;
  top: 50%;
  left: -3px;
  transform: translateY(-50%);
  width: 5px;
  height: 60px;
  background: linear-gradient(180deg, transparent, var(--branch-accent) 50%, transparent);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--branch-accent) 50%, transparent));
}
.alcove-hero .alcove-title {
  font-size: clamp(38px, 5.5vw, 64px);
  margin-bottom: 22px;
}
.alcove-hero-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--fg-soft);
  margin: 0;
  max-width: 520px;
  text-wrap: pretty;
}

/* ─── Divider décoratif ─── */
.alcove-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 90px auto;
  max-width: 600px;
  color: var(--branch-accent);
  font-size: 14px;
  position: relative;
  opacity: 0.85;
}
.alcove-divider::before,
.alcove-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--branch-accent) 45%, transparent), transparent);
}
.alcove-divider span {
  text-shadow: 0 0 16px color-mix(in srgb, var(--branch-accent) 60%, transparent);
}

/* ─── SPREAD (image + text alternés) ─── */
.alcove-spread {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
  position: relative;
}
.alcove-spread.is-reverse {
  grid-template-columns: 0.85fr 1.15fr;
}
.alcove-spread.is-reverse .alcove-spread-media {
  order: 2;
}
.alcove-spread.is-reverse .alcove-spread-content {
  order: 1;
}

/* Media (image OU vidéo) */
.alcove-spread-media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: linear-gradient(180deg, rgba(18, 14, 26, 0.55), rgba(8, 6, 14, 0.85));
  border: 1px solid rgba(255, 217, 122, 0.28);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 80px color-mix(in srgb, var(--branch-accent) 12%, transparent);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.5s, box-shadow 0.5s;
}
.alcove-spread-media::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 217, 122, 0.12);
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
}
button.alcove-spread-media {
  cursor: zoom-in;
}
button.alcove-spread-media:hover {
  transform: translateY(-3px);
  border-color: var(--branch-accent);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.7),
    0 0 130px color-mix(in srgb, var(--branch-accent) 25%, transparent);
}
.alcove-spread-media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s;
}
button.alcove-spread-media:hover img {
  transform: scale(1.03);
  filter: brightness(1.05);
}
/* Caption ✦ overlay */
.alcove-spread-caption {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 3;
  padding: 8px 16px;
  background: rgba(8, 6, 14, 0.82);
  border: 1px solid rgba(255, 217, 122, 0.35);
  border-radius: 100px;
  font-family: var(--font-cap);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-glow);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.alcove-spread-caption span[aria-hidden] {
  color: var(--branch-accent);
  letter-spacing: 0;
}

/* Vidéo dans le spread — garde l'aspect-ratio */
.alcove-spread-media.alcove-video-frame {
  aspect-ratio: 16 / 9;
}
.alcove-spread-media.alcove-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Contenu texte du spread */
.alcove-spread-content {
  padding: 0 8px;
}
.alcove-spread-eyebrow {
  font-family: var(--font-cap);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--branch-accent);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  opacity: 0.9;
}
.alcove-spread-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--branch-accent));
}
.alcove-spread-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1;
  margin: 0 0 26px;
  color: var(--accent-glow);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.alcove-spread-title em {
  display: block;
  margin-top: 6px;
  background: linear-gradient(180deg, var(--branch-accent) 0%, color-mix(in srgb, var(--branch-accent) 60%, var(--honey)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--branch-accent) 30%, transparent));
  font-style: italic;
}
.alcove-spread-content p {
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.7;
  color: var(--fg-soft);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.alcove-spread-content p em {
  color: var(--accent-glow);
  font-style: italic;
  font-weight: 500;
}
.alcove-spread-hint {
  margin-top: 8px !important;
  font-family: var(--font-cap);
  font-size: 10px !important;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent) !important;
  opacity: 0.65;
}
.alcove-spread-signature {
  margin-top: 14px !important;
  font-family: var(--font-hand);
  font-size: 22px !important;
  color: var(--ember);
  opacity: 0.75;
  transform: rotate(-1deg);
  display: inline-block;
  line-height: 1 !important;
}

/* ─── Lexique — Refonte ─── */
.alcove-lexique-section {
  position: relative;
}
.alcove-lexique-header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 46px;
}
.alcove-lexique-header .alcove-spread-eyebrow {
  justify-content: center;
}
.alcove-lexique-header .alcove-spread-eyebrow::before {
  display: none;
}
.alcove-lexique-header .alcove-spread-eyebrow {
  position: relative;
  padding: 0 28px;
}
.alcove-lexique-header .alcove-spread-eyebrow::after {
  display: none;
}
.alcove-lexique-title {
  font-size: clamp(32px, 4.4vw, 48px);
}
.alcove-lexique-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(15px, 1.7vw, 18px);
  color: var(--fg-soft);
  line-height: 1.55;
  margin: 14px 0 0;
}
.alcove-lexique-lede em {
  color: var(--accent-glow);
}

/* 3 colonnes denses sur desktop, avec décoration */
.alcove-lexique-list {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.alcove-lex-entry {
  position: relative;
  padding: 22px 22px 22px 26px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--branch-deep) 25%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, rgba(18, 14, 26, 0.82), rgba(8, 6, 14, 0.95));
  border: 1px solid rgba(255, 217, 122, 0.15);
  border-left: 2px solid color-mix(in srgb, var(--branch-accent) 50%, transparent);
}
.alcove-lex-entry:hover {
  border-color: rgba(255, 217, 122, 0.32);
  border-left-color: var(--branch-accent);
}

/* Ornement ✦ flottant en arrière-plan de chaque entrée */
.alcove-lex-entry::before {
  content: '✦';
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--branch-accent);
  font-size: 11px;
  opacity: 0.35;
  transition: opacity 0.3s;
}
.alcove-lex-entry:hover::before {
  opacity: 0.75;
}

/* ─── Compass : un peu plus chaleureux ─── */
.alcove-compass {
  margin-top: 60px;
}
.alcove-compass-eyebrow {
  text-align: center;
}
.alcove-compass-link {
  padding: 26px 20px;
  border-radius: 14px;
}

/* ─── Mobile : ajustements du nouveau layout ─── */
@media (max-width: 900px) {
  .alcove-hero { grid-template-columns: 1fr; gap: 28px; text-align: center; padding: 16px 0; }
  .alcove-hero-blason .alcove-blason { width: 180px; height: 180px; }
  .alcove-hero-text { padding-left: 0; border-left: none; }
  .alcove-hero-text::before { display: none; }
  .alcove-hero-lede { margin-left: auto; margin-right: auto; }

  .alcove-spread,
  .alcove-spread.is-reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .alcove-spread.is-reverse .alcove-spread-media { order: 0; }
  .alcove-spread.is-reverse .alcove-spread-content { order: 1; }
  .alcove-spread-content { text-align: center; padding: 0; }
  .alcove-spread-eyebrow { justify-content: center; }

  .alcove-divider { margin: 60px auto; }

  .alcove-lexique-list { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .alcove-main { padding: 110px 18px 70px; }
  .alcove-hero-blason .alcove-blason { width: 150px; height: 150px; }
  .alcove-spread-title { font-size: 26px; }
}