/* Mysteria — landing cinematic */
:root {
  --bg: #07050d;
  --bg2: #0e0a16;
  --bg3: #16101f;
  --gold: #c084fc;
  --gold2: #e9d5ff;
  --amber: #a855f7;
  --purple: #a78bfa;
  --disc: #7c3aed;
  --green: #10b981;
  --cyan: #d8b4fe;
  --txt: #f4f3fb;
  --sub: #b8a8cc;
  --muted: #6b5a7a;
  --mx: 50%;
  --my: 30%;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: Barlow, sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
  cursor: default;
  position: relative;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gold2), var(--gold));
  border-radius: 0;
}

#prog {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, #6d28d9, var(--gold), #f5d0fe, var(--cyan));
  box-shadow: 0 0 16px rgba(168,85,247,.9);
  z-index: 9999;
}

#fx-stars {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
}
#fx-spot {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(420px 420px at var(--mx) var(--my), rgba(192,132,252,.22), rgba(124,58,237,.06) 42%, transparent 62%);
  mix-blend-mode: screen;
}
.noise {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb {
  position: absolute; border-radius: 50%; filter: blur(50px);
  animation: orbFloat 18s ease-in-out infinite;
}
.orb.a { width: 420px; height: 420px; background: rgba(168,85,247,.16); top: -80px; right: 8%; animation-duration: 16s; }
.orb.b { width: 360px; height: 360px; background: rgba(88,101,242,.16); bottom: 10%; left: -80px; animation-duration: 22s; animation-delay: -4s; }
.orb.c { width: 280px; height: 280px; background: rgba(103,232,249,.1); top: 42%; left: 38%; animation-duration: 20s; animation-delay: -8s; }
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.12); }
}

#fx-bus {
  position: absolute; top: 0; left: 0;
  width: 100%; z-index: 2;
  pointer-events: none; overflow: hidden;
}
.fx-bus-craft {
  position: absolute; left: 0; top: 0;
  width: min(120px, 15vw);
  opacity: .42;
  will-change: transform;
  transform-origin: 50% 55%;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.4));
}
.fx-bus-craft img {
  width: 100%; height: auto; display: block;
}

.hero-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg-photo { display: none; }
.hero-bg-base {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 80% at 78% 42%, rgba(124,58,237,.16) 0%, rgba(88,28,135,.08) 38%, transparent 68%),
    var(--bg);
}

.wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

/* ── Barre de navigation ─────────────────────────────────────────────────────
   Trois colonnes : le blason à gauche, une barre de liens en segments au
   centre, le compte et Discord à droite. La barre centrale est un seul
   panneau translucide découpé par des filets fins : toutes les cases ont le
   même poids, seule celle de la section affichée à l'écran s'allume. */
#nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 800; height: 88px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 2rem; gap: 20px;
  --nav-h: 46px;
  --nav-glass: rgba(24,15,40,.62);
  --nav-line: rgba(192,132,252,.15);
}
#nav::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 130px;
  background: linear-gradient(to bottom, rgba(4,4,10,.92) 0%, rgba(4,4,10,.55) 50%, transparent 100%);
  pointer-events: none; z-index: -1; opacity: 0; transition: opacity .4s;
}
#nav.solid::before { opacity: 1; }
#nav.solid { border-bottom: 1px solid rgba(168,85,247,.18); }
.nav-brand { justify-self: start; display: flex; align-items: center; text-decoration: none; }
.nav-logo {
  width: 58px; height: 58px; object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(168,85,247,.45));
  transition: transform .25s, filter .25s;
}
.nav-brand:hover .nav-logo { transform: scale(1.06) rotate(-2deg); filter: drop-shadow(0 0 18px rgba(192,132,252,.75)); }
.nav-links { display: contents; }
.nav-bar {
  grid-column: 2;
  display: flex; align-items: stretch; height: var(--nav-h);
  background: var(--nav-glass);
  border: 1px solid var(--nav-line);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.nav-bar a {
  position: relative; display: flex; align-items: center; gap: 7px;
  padding: 0 clamp(12px, 1.55vw, 30px);
  font-family: Rajdhani, sans-serif; font-weight: 700; font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  color: rgba(244,243,251,.72); text-decoration: none;
  transition: color .2s, background .2s;
}
.nav-bar a + a { border-left: 1px solid var(--nav-line); }
/* filet lumineux qui s'ouvre sous la case survolée ou active */
.nav-bar a::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 2px;
  background: var(--gold); box-shadow: 0 0 10px var(--gold);
  transition: left .25s, right .25s;
}
.nav-bar a:hover, .nav-bar a.is-active { color: #fff; background: rgba(168,85,247,.14); }
.nav-bar a:hover::after, .nav-bar a.is-active::after { left: 0; right: 0; }
/* « Connect » : l'action de jeu, à peine plus lumineuse que ses voisines */
.nav-bar a.nav-play { color: var(--gold2); }
.nav-bar a.nav-play svg { width: 11px; height: 11px; color: var(--gold); filter: drop-shadow(0 0 6px rgba(192,132,252,.9)); }
.nav-actions { grid-column: 3; justify-self: end; display: flex; gap: 8px; align-items: center; }
.nav-account, .nav-discord {
  height: var(--nav-h); display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--nav-glass); border: 1px solid var(--nav-line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-family: Rajdhani, sans-serif; font-weight: 700; font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  color: rgba(244,243,251,.85);
  transition: color .2s, background .2s, border-color .2s, box-shadow .25s;
}
.nav-account { padding: 0 18px; }
.nav-account svg { width: 15px; height: 15px; }
.nav-account:hover { color: #fff; background: rgba(168,85,247,.18); border-color: rgba(192,132,252,.45); }
/* Discord : un carré bleu que le reflet continue de traverser */
.nav-discord {
  width: var(--nav-h); position: relative; overflow: hidden; isolation: isolate;
  background: rgba(88,101,242,.32); border-color: rgba(140,150,255,.6); color: #fff;
  box-shadow: 0 0 16px rgba(88,101,242,.35);
}
.nav-discord::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(170,180,255,.5) 50%, transparent 70%);
  animation: discordShine 2.6s ease-in-out infinite;
}
.nav-discord svg { width: 20px; height: 20px; flex: none; }
.nav-discord:hover { background: #5865f2; border-color: #8c96ff; box-shadow: 0 6px 24px rgba(88,101,242,.6); }
.nav-discord-txt { display: none; }
.nav-toggle {
  display: none; width: var(--nav-h); height: var(--nav-h); cursor: pointer;
  background: var(--nav-glass); border: 1px solid var(--nav-line); border-radius: 0;
  color: var(--txt); font-size: 1.1rem;
}
/* Sous 1100 px la barre ne tient plus : elle se range dans un menu déroulant */
@media (max-width: 1100px) {
  #nav { display: flex; justify-content: space-between; padding: 0 1rem; }
  .nav-logo { width: 50px; height: 50px; }
  .nav-toggle { display: grid; place-items: center; }
  .nav-links {
    display: none; position: absolute; top: 78px; left: 12px; right: 12px;
    flex-direction: column; gap: 10px; padding: 12px;
    background: rgba(10,7,18,.97); border: 1px solid var(--nav-line);
  }
  #nav.open .nav-links { display: flex; }
  .nav-bar { flex-direction: column; height: auto; box-shadow: none; }
  .nav-bar a { height: 46px; padding: 0 16px; }
  .nav-bar a + a { border-left: 0; border-top: 1px solid var(--nav-line); }
  .nav-bar a::after { left: 0; right: auto; top: 0; bottom: 0; width: 0; height: auto; transition: width .2s; }
  .nav-bar a:hover::after, .nav-bar a.is-active::after { left: 0; right: auto; width: 2px; }
  .nav-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .nav-discord { width: auto; gap: 9px; }
  .nav-discord-txt { display: inline; }
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: Rajdhani, sans-serif; font-weight: 700; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  border: 0; cursor: pointer; border-radius: 0; padding: .72rem 1.15rem;
  position: relative; overflow: hidden;
  transition: transform .18s, box-shadow .25s, background .2s, border-color .2s;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .55s;
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(180deg, #e9d5ff, var(--gold) 50%, #6d28d9);
  color: #1a0b2a;
  box-shadow: 0 4px 22px rgba(168,85,247,.4), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.btn-primary:hover { box-shadow: 0 10px 40px rgba(168,85,247,.62); }
.btn-discord {
  background: linear-gradient(180deg, #7380f5, var(--disc));
  color: #fff;
  box-shadow: 0 4px 22px rgba(88,101,242,.32);
}
.btn-discord:hover { box-shadow: 0 10px 36px rgba(88,101,242,.55); }
/* Boutons Discord : vrai bleu Discord, halo + onde qui s'echappe du bouton,
   et un reflet qui balaie le bouton en continu (pas seulement au survol). */
.btn-discord {
  /* Fond plus fonce pour que le blanc ressorte */
  background: linear-gradient(180deg, #5865f2 0%, #4450d6 55%, #333db0 100%);
  color: #fff !important;
  font-weight: 800;
  /* Ombre sombre nette : le texte blanc se detache du fond bleu */
  text-shadow: 0 1px 0 rgba(10,12,50,1), 0 0 4px rgba(10,12,50,.9), 0 2px 8px rgba(10,12,50,.8);
  border: 2px solid #fff;
  isolation: isolate;
  box-shadow: 0 4px 22px rgba(88,101,242,.45);
}
/* Le reflet passe sous le texte, plus par-dessus */
.btn-discord::after {
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  animation: discordShine 2.6s ease-in-out infinite;
  transition: none;
}
.btn-discord:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 0 0 3px rgba(140,150,255,.45), 0 0 30px rgba(140,150,255,.95), 0 0 70px rgba(88,101,242,.7);
}
.btn-discord svg { width: 1.3em; height: 1.3em; flex: none; filter: drop-shadow(0 1px 2px rgba(10,12,50,.8)); }
@keyframes discordShine {
  0%, 55% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}
/* Lien Forum : petite pastille « Nouveau » */
.nav-new {
  font-size: .56rem; font-weight: 700; letter-spacing: .1em; line-height: 1;
  padding: 3px 5px 2px; color: #1a0b2a;
  background: linear-gradient(180deg, #e9d5ff, var(--gold));
  box-shadow: 0 0 10px rgba(192,132,252,.55);
}
.btn-douane {
  background: linear-gradient(180deg, #5aa4e8 0%, #2e6bb8 42%, #163a78 100%);
  color: #fff;
  box-shadow: 0 4px 22px rgba(46,107,184,.45), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.btn-douane:hover { box-shadow: 0 10px 36px rgba(90,164,232,.55); }
.btn-outline {
  background: rgba(255,255,255,.03);
  border: 1.5px solid rgba(168,85,247,.32);
  color: var(--txt);
}
.btn-outline:hover { border-color: var(--gold); background: rgba(168,85,247,.08); }
.btn-shop {
  background: linear-gradient(180deg, #f8e7a8 0%, #e4c15a 32%, #c9a227 68%, #8a6a12 100%);
  color: #1a1404;
  box-shadow: 0 0 18px rgba(228,193,90,.55), 0 0 36px rgba(201,162,39,.28);
  animation: shopGlow 2.2s ease-in-out infinite;
}
.btn-shop:hover {
  box-shadow: 0 0 28px rgba(248,231,168,.8), 0 0 56px rgba(201,162,39,.5);
}
@keyframes shopGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(228,193,90,.4), 0 0 28px rgba(201,162,39,.2); }
  50% { box-shadow: 0 0 28px rgba(248,231,168,.75), 0 0 52px rgba(201,162,39,.45); }
}
.btn-lg { padding: .95rem 2.25rem; font-size: .9rem; }


.castle-bleed {
  position: relative;
  z-index: 4;
  overflow: hidden;
}
#hero {
  position: relative;
  z-index: 2;
  padding: 0;
  min-height: auto;
}
.hero-stage {
  position: relative;
  min-height: min(86vh, 780px);
}
.hero-castle {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 16%, #000 52%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.45) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 16%, #000 52%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.45) 88%, transparent 100%);
}
.hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,5,13,.78) 0%, rgba(7,5,13,.34) 50%, rgba(7,5,13,.2) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 18%, #000 38%, rgba(0,0,0,.35) 55%, transparent 72%);
  mask-image: linear-gradient(to bottom, #000 18%, #000 38%, rgba(0,0,0,.35) 55%, transparent 72%);
}
.hero-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  min-height: min(86vh, 780px);
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding: 108px 0 36px;
  gap: 12px;
}
.hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  max-width: 620px;
}
.hero-right {
  position: relative; z-index: 2;
  display: grid; place-items: center;
  perspective: 900px;
}
.hero-art { position: relative; width: min(100%, 460px); }
.hero-art-inner { position: relative; animation: floatArt 6.5s ease-in-out infinite; }
@keyframes floatArt {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.art-glow {
  position: absolute; inset: 12%;
  background: radial-gradient(circle, rgba(168,85,247,.35), transparent 68%);
  filter: blur(22px); z-index: -1; animation: pulse 3s ease-in-out infinite;
}
.hero-art img {
  width: 100%; height: auto; position: relative; z-index: 1; background: transparent;
  filter: drop-shadow(0 0 48px rgba(168,85,247,.55));
}
.shop-stamp {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
  text-align: center; text-decoration: none; z-index: 2;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  background: rgba(124,58,237,.18); border: 1px solid rgba(216,180,254,.45);
  backdrop-filter: blur(8px);
  padding: .55rem 1rem; border-radius: 0; white-space: nowrap;
  box-shadow: 0 0 24px rgba(168,85,247,.25);
  transition: transform .2s, box-shadow .2s;
}
.shop-stamp:hover { transform: translateX(-50%) translateY(-3px); box-shadow: 0 0 32px rgba(168,85,247,.4); }
.shop-stamp small { display: block; color: var(--gold); font-size: .7rem; }
.shop-stamp b { font-size: 1.05rem; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  border: 1px solid rgba(16,185,129,.45);
  color: var(--green); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .4rem .85rem; border-radius: 0;
  background: rgba(16,185,129,.1);
  margin-bottom: 1.4rem;
  box-shadow: 0 0 24px rgba(16,185,129,.15);
}
.badge::before {
  content: ''; width: 7px; height: 7px; border-radius: 0;
  background: var(--green); box-shadow: 0 0 10px var(--green);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; transform: scale(.7); } }

#hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: clamp(44px, 7vw, 84px);
  line-height: .88; letter-spacing: -.03em; text-transform: uppercase;
  animation: titleIn .9s cubic-bezier(.16,1,.3,1) both;
}
#hero h1 span {
  display: block;
  background: linear-gradient(100deg, #6d28d9 0%, var(--gold2) 35%, #faf5ff 50%, var(--gold2) 65%, #6d28d9 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 4.5s linear infinite;
  filter: drop-shadow(0 0 28px rgba(168,85,247,.35));
}
@keyframes shine { to { background-position: 220% center; } }
@keyframes titleIn {
  from { opacity: 0; transform: translateY(28px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes spin { to { transform: rotate(1turn); } }

.section { position: relative; z-index: 4; padding: 56px 0; }
.section-tight { padding-top: 8px; margin-top: 0; padding-bottom: 80px; }

#chateau .wrap { position: relative; z-index: 1; }
.lore-block { position: relative; max-width: 72ch; }
.lore-glow {
  position: absolute;
  inset: -32px -40px -48px -40px;
  z-index: -1;
  pointer-events: none;
  background: rgba(0,0,0,.58);
  filter: blur(22px);
}
#chateau h2 {
  filter: none;
}
#chateau .kicker {
  text-shadow: 0 0 18px rgba(168,85,247,.35);
}
#chateau .lore-one { color: #f4f3fb; }

.kicker {
  display: flex; align-items: center; gap: 14px;
  font-size: .72rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
  text-shadow: 0 0 18px rgba(168,85,247,.35);
}
.kicker::after {
  content: ''; flex: 1; max-width: 180px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.section h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(32px, 5vw, 52px); font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1;
  margin-bottom: 10px;
}
.sub { color: var(--sub); margin-bottom: 28px; max-width: 56ch; }
.lore-one {
  color: var(--sub); font-size: 1.05rem; line-height: 1.75;
  max-width: 72ch; margin: 8px 0 0;
}

.lieux-slider { margin: 12px auto 24px; max-width: 820px; }
.lieux-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: #05030a;
}
.lieux-slide {
  position: absolute; inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .55s ease;
  pointer-events: none;
}
.lieux-slide.is-on { opacity: 1; z-index: 1; pointer-events: auto; }
.lieux-slide img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.lieux-slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.4rem 1.2rem 1rem;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.32) 58%, transparent 100%);
}
.lieux-slide strong {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gold2);
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
.lieux-slide span {
  display: block; margin-top: 4px;
  max-width: 42ch;
  font-size: .82rem; line-height: 1.4; color: #f4f3fb;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
}
.lieux-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-top: 12px;
}
.lieux-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid rgba(192,132,252,.55);
  color: var(--gold);
  cursor: pointer;
}
.lieux-btn:hover { background: rgba(168,85,247,.14); border-color: var(--gold2); }
.lieux-btn i {
  display: block; width: 9px; height: 9px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
}
.lieux-btn[data-dir="1"] i { transform: rotate(-135deg); }
.lieux-dots { display: flex; align-items: center; gap: 8px; }
.lieux-dots button {
  width: 7px; height: 7px; padding: 0;
  border: 0; background: rgba(255,255,255,.28);
  cursor: pointer;
}
.lieux-dots button.is-on {
  width: 10px; height: 10px;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(168,85,247,.7);
}

.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.in { opacity: 1; transform: none; }

.feat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 0; overflow: hidden;
  background: rgba(255,255,255,.03); gap: 1px;
}
.feat-card {
  background: var(--bg2); padding: 2.2rem 1.8rem;
  position: relative; overflow: hidden;
  transition: background .3s, transform .3s;
}
.feat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--cyan), transparent);
  opacity: .4; transition: opacity .3s, height .3s;
}
.feat-card:hover::before { opacity: 1; height: 2px; }
.feat-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(280px 140px at var(--cx, 50%) var(--cy, 0%), rgba(168,85,247,.12), transparent 70%);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.feat-card:hover { background: var(--bg3); }
.feat-card:hover::before, .feat-card:hover::after { opacity: 1; }
.feat-num {
  font-family: 'Barlow Condensed', sans-serif;
  position: absolute; right: 12px; top: 4px;
  font-size: 4.6rem; font-weight: 900; line-height: 1;
  letter-spacing: -.04em; color: rgba(192,132,252,.1);
  pointer-events: none; transition: color .3s;
}
.feat-card:hover .feat-num { color: rgba(192,132,252,.22); }
.feat-card .ic { font-size: 1.6rem; margin-bottom: 8px; display: inline-block; transition: transform .35s; }
.feat-card:hover .ic { transform: scale(1.18) rotate(-8deg); }
.feat-card h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.35rem; font-weight: 800; text-transform: uppercase; margin-bottom: 8px;
  position: relative; z-index: 1; padding-right: 3.2rem;
}
.feat-card p { color: var(--sub); font-size: .95rem; line-height: 1.55; position: relative; z-index: 1; }

.lore-grid { display: grid; gap: 12px; counter-reset: lore; }
.lore-card {
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 40%), var(--bg2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 0; padding: 22px 24px;
  position: relative;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  counter-increment: lore;
}
.lore-card:hover {
  border-color: rgba(168,85,247,.28);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 24px rgba(168,85,247,.08);
}
.lore-card h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.2rem; font-weight: 800; text-transform: uppercase;
  color: var(--gold2); margin-bottom: 10px;
}
.lore-card h3::before {
  content: counter(lore, decimal-leading-zero) "  ";
  color: var(--gold); font-size: .78em; letter-spacing: .12em;
  opacity: .85;
}
.lore-card p { color: var(--sub); font-size: 1rem; line-height: 1.65; }
.lore-card p + p { margin-top: 10px; }
.places { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.places span {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 0;
  border: 1px solid rgba(255,255,255,.1); color: var(--sub);
  transition: border-color .2s, color .2s, background .2s;
}
.places span:hover { border-color: var(--gold); color: var(--gold2); background: rgba(168,85,247,.08); }

.houses { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.house {
  /* En colonne, pour pouvoir pousser la citation tout en bas (voir .quote) */
  display: flex; flex-direction: column;
  background:
    linear-gradient(160deg, rgba(255,255,255,.04), transparent 45%),
    var(--bg2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 0; padding: 28px 26px; position: relative; overflow: hidden;
  transition: transform .35s, border-color .3s, box-shadow .35s;
  scroll-margin-top: 96px;
  border-left-width: 3px;
}
.house::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 180px at 100% 0, var(--glow, rgba(168,85,247,.16)), transparent 70%);
  transition: opacity .3s;
}
/* Halo tournant aux couleurs de la maison. Il ne se montre qu'au survol, et
   ne tourne qu'a ce moment-la : anime en permanence sous une opacite nulle,
   il faisait travailler le processeur graphique pour quelque chose que
   personne ne voyait. */
.house::after {
  content: ''; position: absolute; inset: -40%;
  background: conic-gradient(from 180deg, transparent, var(--ring, rgba(168,85,247,.2)), transparent 30%);
  opacity: 0; transition: opacity .45s;
  animation: spin 8s linear infinite;
  animation-play-state: paused;
  pointer-events: none;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
}
.house:hover::after { opacity: .5; animation-play-state: running; }
.house:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(0,0,0,.4), 0 0 40px var(--glow, rgba(168,85,247,.12));
}
.house.rougemont:hover { border-color: rgba(230,110,25,.55); }
.house.valombre:hover { border-color: rgba(196,184,122,.55); }
.house.hautecime:hover { border-color: rgba(176,32,42,.55); }
.house.brumelune:hover { border-color: rgba(142,180,200,.55); }
.house.rougemont { --glow: rgba(230,110,25,.42); --ring: rgba(255,176,112,.4); border-left-color: #e66e19; }
.house.valombre { --glow: rgba(61,139,114,.38); --ring: rgba(212,204,138,.35); border-left-color: #c4b87a; }
.house.hautecime { --glow: rgba(176,32,42,.4); --ring: rgba(212,180,131,.4); border-left-color: #b0202a; }
.house.brumelune { --glow: rgba(90,140,168,.38); --ring: rgba(232,220,200,.35); border-left-color: #8eb4c8; }
.house-head { display: flex; gap: 10px; align-items: center; position: relative; margin-bottom: 12px; }
.crest-img {
  width: 40px; height: 40px; object-fit: contain; flex: none;
  mix-blend-mode: lighten;
}
.house h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.7rem; font-weight: 800; text-transform: uppercase;
}
.house.rougemont h3, .house.rougemont .traits { color: #ffb070; }
.house.valombre h3, .house.valombre .traits { color: #d4cc8a; }
.house.hautecime h3, .house.hautecime .traits { color: #e6c48a; }
.house.brumelune h3, .house.brumelune .traits { color: #dce6ee; }
.traits { font-size: .85rem; letter-spacing: .06em; margin-top: 2px; }
/* Le corps prend toute la hauteur libre de la carte, et la citation se cale
   contre son bas. Sans cela, deux maisons voisines de la meme rangee ont bien
   la meme hauteur — la grille s'en charge — mais leurs citations flottent a
   des niveaux differents selon la longueur du recit, ce qui donne un bas de
   carte de travers. */
.house .body {
  position: relative; color: var(--sub); font-size: .98rem; line-height: 1.65;
  flex: 1; display: flex; flex-direction: column;
}
.house .body p + p { margin-top: 10px; }
.house .body > p:last-of-type { margin-bottom: 18px; }
.house .body strong { color: var(--txt); font-weight: 600; }
.house .quote { margin-top: auto; }
.quote {
  margin-top: 16px; padding: 16px 16px 14px 18px;
  border-left: 2px solid var(--gold); color: var(--gold2);
  font-style: italic; background: rgba(168,85,247,.06);
  box-shadow: -8px 0 20px rgba(168,85,247,.06);
  position: relative;
}
.house.rougemont .quote { border-left-color: #e66e19; background: rgba(230,110,25,.1); color: #ffd0a8; }
.house.valombre .quote { border-left-color: #c4b87a; background: rgba(26,61,40,.35); color: #e4dc9c; }
.house.hautecime .quote { border-left-color: #b0202a; background: rgba(112,16,24,.28); color: #f0d6a8; }
.house.brumelune .quote { border-left-color: #8eb4c8; background: rgba(42,74,92,.32); color: #e8f0f6; }

.shop-box {
  text-align: center; padding: 52px 28px;
  border-radius: 0; border: 1px solid rgba(168,85,247,.18);
  background:
    radial-gradient(500px 180px at 50% 0, rgba(168,85,247,.2), transparent 70%),
    var(--bg2);
  box-shadow: 0 0 80px rgba(168,85,247,.08) inset;
  position: relative; overflow: hidden;
}
.shop-box::before {
  content: ''; position: absolute; inset: -50%;
  background: conic-gradient(from 0deg, transparent, rgba(168,85,247,.12), transparent 28%);
  animation: spin 12s linear infinite;
  pointer-events: none;
}
.shop-box > * { position: relative; z-index: 1; }
.shop-box p { color: var(--sub); max-width: 52ch; margin: 10px auto 22px; }
.shop-note { font-size: .78rem; color: var(--muted) !important; margin-top: 14px !important; }

.discord-cta {
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
  background: var(--bg2); border: 1px solid rgba(88,101,242,.35);
  border-radius: 0; padding: 28px 26px;
  box-shadow: 0 0 40px rgba(88,101,242,.12);
  position: relative;
}
.discord-cta .kicker::after { display: none; }

#cursor { display: none; }
body.cursor-on { cursor: auto; }

footer {
  position: relative; z-index: 4;
  padding: 40px 0 48px;
  color: var(--muted);
  border-top: 1px solid rgba(168,85,247,.14);
  background: linear-gradient(180deg, rgba(168,85,247,.04), transparent 40%);
}
.foot {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 24px; align-items: end;
}
.foot b {
  display: block; font-family: Rajdhani, sans-serif;
  font-size: 1.25rem; color: var(--gold); letter-spacing: .1em;
  text-transform: uppercase;
}
.foot > div span {
  display: block; margin-top: 4px;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
}
.foot nav { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; }
.foot nav a {
  color: var(--sub); text-decoration: none;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}
.foot nav a:hover { color: var(--gold2); }
.foot p {
  text-align: right; margin: 0;
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
}
.foot-panel {
  display: none; width: fit-content; margin: 28px auto 0;
  font-size: .62rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; text-decoration: none;
  color: var(--muted);
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.08);
}
body.is-staff .foot-panel { display: block; }
.foot-panel:hover { color: var(--gold2); border-color: rgba(168,85,247,.35); }

@media (max-width: 980px) {
  #hero { padding: 0; min-height: auto; }
  .hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 108px 0 24px;
    width: min(1180px, calc(100% - 24px));
  }
  .hero-stage { min-height: auto; }
  .hero-copy { padding: 0; max-width: none; }
  .hero-right { order: -1; }
  .hero-art { width: min(72vw, 320px); }
  .fx-bus-craft { width: min(92px, 22vw); }
  .houses { grid-template-columns: 1fr; }
  .discord-cta { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; text-align: center; }
  .foot nav { justify-content: center; }
  .foot p { text-align: center; }
  #cursor, body.cursor-on { cursor: auto; }
  #cursor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  #fx-stars, #fx-spot, #cursor, #fx-bus { display: none; }
}


/* ---- Accessibilite : respecte le reglage systeme "reduire les animations" ----
   Certaines personnes sont sujettes au mal des transports ou aux migraines
   declenchees par le mouvement. Le site reste identique, sans les effets. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  #fx-stars, #fx-bus, #fx-spot, .orbs, #cursor { display: none !important; }
}


/* ---- Parcours d'inscription : les trois etapes pour rejoindre ---- */
.steps {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.step {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 32px 22px 24px;
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,.08);
  border-top: 2px solid var(--gold);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.step:hover {
  transform: translateY(-5px);
  border-color: rgba(192,132,252,.45);
  box-shadow: 0 22px 46px rgba(0,0,0,.4), 0 0 34px rgba(168,85,247,.14);
}
.step-num {
  position: absolute; top: -17px; left: 20px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 1.02rem;
  color: #1a0b2a;
  background: linear-gradient(180deg, #e9d5ff, var(--gold) 55%, #6d28d9);
  box-shadow: 0 4px 16px rgba(168,85,247,.45);
}
.step h3 {
  margin: 2px 0 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.36rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--gold2);
}
.step p {
  margin: 0; flex: 1;
  color: var(--sub); font-size: .95rem; line-height: 1.62;
}
.step .btn { margin-top: 8px; align-self: flex-start; }

@media (max-width: 980px) {
  .steps { grid-template-columns: 1fr; gap: 30px; }
}



/* Aide sous la boutique : ou se connecter, ou demander de l'aide */
.shop-help {
  max-width: 560px; margin: 4px auto 20px;
  color: var(--sub); font-size: .95rem; line-height: 1.65;
}
.shop-help b { color: var(--gold2); }
.shop-help a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(192,132,252,.4); }
.shop-help a:hover { color: var(--gold2); border-color: var(--gold2); }