/* =========================================================
   OverGiving — feuille de style
   Palette « forge » : suie, fer, parchemin, or, braise
   ========================================================= */
:root {
  --suie: #17120f;
  --suie-2: #1e1814;
  --fer: #261f1a;
  --cendre: #3b3029;
  --cendre-2: #57483d;
  --parchemin: #ede3cf;
  --parchemin-2: #b9ac95;
  --parchemin-3: #857a68;
  --or: #d9b35b;
  --or-clair: #f3d88f;
  --braise: #f06a24;
  --braise-2: #ff9a3d;
  --acier: #8fa3b1;

  --r-f: #8f8a85;  /* fer */
  --r-e: #c86f3e;  /* cuivre */
  --r-d: #a97c42;  /* bronze */
  --r-c: #cfd6db;  /* argent */
  --r-b: #ebc251;  /* or */
  --r-a: #a6cdf5;  /* pierre de lune */
  --r-s: #ff4b1f;  /* infernal */

  --font-logo: "Cinzel Decorative", "Cinzel", serif;
  --font-titre: "Cinzel", serif;
  --font-texte: "Spectral", Georgia, serif;

  --wrap: 1240px;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--suie);
  color: var(--parchemin);
  font-family: var(--font-texte);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* grain léger sur tout le site */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: .07;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--or); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--or-clair); }
img { max-width: 100%; display: block; }
::selection { background: var(--braise); color: var(--suie); }
:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 { font-family: var(--font-titre); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: .01em; }
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1.1em; max-width: 68ch; }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.muted { color: var(--parchemin-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Boutons ---------- */
.btn {
  --bg: transparent; --fg: var(--parchemin); --bd: var(--cendre-2);
  display: inline-flex; align-items: center; gap: .6em;
  padding: .85em 1.5em;
  font-family: var(--font-titre); font-size: .95rem; font-weight: 600; letter-spacing: .04em;
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--bd);
  text-decoration: none; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { --bd: var(--or); color: var(--or-clair); }
.btn--or {
  --bg: linear-gradient(180deg, #f1d37f, #c99a3c 60%, #a87a26);
  --fg: #23180c; --bd: #f6dc95;
  text-shadow: 0 1px 0 rgba(255,240,200,.5);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: 0 0 0 rgba(240,106,36,0);
}
.btn--or:hover { --fg: #120b04; filter: brightness(1.08); box-shadow: 0 0 40px rgba(240,140,50,.35); color: #120b04; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; filter: grayscale(.4); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- En-tête ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 500;
  height: var(--header-h);
  transition: background .4s var(--ease), backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: rgba(23,18,15,.82);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom-color: rgba(217,179,91,.14);
}
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
.logo {
  font-family: var(--font-logo); font-weight: 700; font-size: 1.45rem;
  text-decoration: none; letter-spacing: .02em;
  background: linear-gradient(180deg, #fbe7ad 0%, #d9b35b 55%, #9c6f22 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap;
}
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  position: relative;
  padding: .5em .9em;
  font-family: var(--font-titre); font-size: .92rem; font-weight: 600; letter-spacing: .05em;
  color: var(--parchemin-2); text-decoration: none;
  transition: color .2s;
}
.nav a::after {
  content: ""; position: absolute; left: .9em; right: .9em; bottom: .2em; height: 1px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
  transform: scaleX(0); transition: transform .35s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--parchemin); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-actions .btn { padding: .6em 1.1em; font-size: .85rem; }

/* bouton musique */
.music-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 14px;
  background: transparent; border: 1px solid var(--cendre-2); color: var(--parchemin-2);
  font-family: var(--font-titre); font-size: .8rem; letter-spacing: .05em; cursor: pointer;
  border-radius: 999px; transition: border-color .2s, color .2s;
}
.music-toggle:hover { border-color: var(--or); color: var(--parchemin); }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.bars i { width: 3px; height: 3px; background: currentColor; border-radius: 1px; transition: height .3s; }
.music-toggle.is-on { color: var(--or-clair); border-color: rgba(217,179,91,.6); }
.music-toggle.is-on .bars i { animation: bar 1.1s ease-in-out infinite; }
.music-toggle.is-on .bars i:nth-child(2) { animation-delay: -.4s; }
.music-toggle.is-on .bars i:nth-child(3) { animation-delay: -.8s; }
.music-toggle.is-on .bars i:nth-child(4) { animation-delay: -.2s; }
@keyframes bar { 0%,100% { height: 3px; } 50% { height: 14px; } }

.burger { display: none; width: 42px; height: 42px; background: none; border: 1px solid var(--cendre-2); color: var(--parchemin); cursor: pointer; }
.burger span { display: block; width: 18px; height: 1.5px; margin: 4px auto; background: currentColor; transition: transform .3s; }

@media (max-width: 960px) {
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; gap: 0; padding: 12px 24px 24px;
    background: rgba(23,18,15,.97); border-bottom: 1px solid var(--cendre);
    transform: translateY(-120%); visibility: hidden; transition: transform .4s var(--ease), visibility .4s;
  }
  .nav.is-open { transform: none; visibility: visible; }
  .nav a { padding: .9em 0; font-size: 1.1rem; border-bottom: 1px solid var(--cendre); }
  .nav a::after { display: none; }
  .burger { display: block; }
  .header-actions .btn { display: none; }
  .music-toggle .lbl { display: none; }
}

/* ---------- Voile de transition ---------- */
.veil {
  position: fixed; inset: 0; z-index: 800; pointer-events: none;
  background: radial-gradient(ellipse at 50% 120%, #4a1c08 0%, var(--suie) 60%);
  opacity: 0; transition: opacity .32s var(--ease);
}
.veil.is-on { opacity: 1; }

/* ---------- Écran d'entrée ---------- */
.gate {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(ellipse at 50% 100%, #2a140a 0%, var(--suie) 65%);
  transition: opacity .9s var(--ease), visibility .9s;
}
.gate.is-gone { opacity: 0; visibility: hidden; }
.gate__inner { display: grid; gap: 28px; justify-items: center; padding: 24px; }
.gate__logo { font-family: var(--font-logo); font-size: clamp(2rem, 6vw, 3.4rem); color: #5a4a3e; letter-spacing: .03em; }
.gate__hint { color: var(--parchemin-3); font-size: 1rem; margin: 0; }
.gate__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.gate .link-btn { background: none; border: 0; color: var(--parchemin-2); font: inherit; font-size: .95rem; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.gate .link-btn:hover { color: var(--parchemin); }

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; place-items: center; text-align: center;
  overflow: hidden; isolation: isolate;
  padding: calc(var(--header-h) + 40px) 24px 120px;
}
.hero__glow {
  position: absolute; inset: auto -20% -35% -20%; height: 90%; z-index: -2;
  background:
    radial-gradient(ellipse 45% 55% at 50% 100%, rgba(255,120,40,.55), rgba(240,90,20,.18) 45%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(120,40,10,.6), transparent 70%);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
.hero canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hero__anvil {
  position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); z-index: -1;
  width: min(560px, 90vw); opacity: .9;
}
.hero__status {
  display: inline-flex; align-items: center; gap: 10px;
  padding: .35em 1em; margin-bottom: 26px;
  border: 1px solid rgba(217,179,91,.35); border-radius: 999px;
  font-family: var(--font-titre); font-size: .82rem; letter-spacing: .06em; color: var(--or-clair);
  background: rgba(23,18,15,.5);
}
.hero__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--braise); box-shadow: 0 0 10px var(--braise); animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .35; } }

.forged {
  font-family: var(--font-logo); font-weight: 900;
  font-size: clamp(2.2rem, 11vw, 10rem);
  line-height: .95; margin: 0; letter-spacing: .01em;
  display: flex; justify-content: center; flex-wrap: nowrap;
}
.forged span {
  display: inline-block;
  background: linear-gradient(180deg, #fff3cf 0%, #f7d27a 30%, #d9a440 55%, #8d5b1c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 0 rgba(255,140,40,0));
  animation: heat 2.6s var(--ease) both;
  animation-delay: calc(var(--i) * 90ms + .3s);
}
.forged.is-waiting span { animation-play-state: paused; }
@media (max-width: 600px) { .forged { font-size: 9.6vw; } .hero__cta .btn { width: 100%; justify-content: center; } .hero { padding-inline: 20px; } }
@keyframes heat {
  0%   { opacity: 0; transform: translateY(.18em); filter: brightness(.25) saturate(0) drop-shadow(0 0 0 rgba(255,120,30,0)); }
  25%  { opacity: 1; filter: brightness(2.2) saturate(1.4) drop-shadow(0 0 28px rgba(255,120,30,.95)); }
  60%  { transform: none; filter: brightness(1.35) drop-shadow(0 0 18px rgba(255,140,40,.55)); }
  100% { opacity: 1; transform: none; filter: brightness(1) drop-shadow(0 4px 24px rgba(240,106,36,.28)); }
}
.hero__tagline {
  font-family: var(--font-titre); font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem); color: var(--parchemin);
  margin: 28px auto 12px; max-width: 32ch; letter-spacing: .02em;
}
.hero__lead { color: var(--parchemin-2); margin: 0 auto 36px; max-width: 58ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.hero .fade-late { animation: lateIn 1.2s var(--ease) both; animation-delay: 1.9s; }
.hero.is-waiting .fade-late { animation-play-state: paused; }
@keyframes lateIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.scroll-cue {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 36px; border: 1px solid var(--parchemin-3); border-radius: 12px;
}
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 7px; width: 2px; height: 7px; margin-left: -1px; background: var(--or); border-radius: 2px; animation: cue 1.8s infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Sections ---------- */
.section { padding: clamp(80px, 12vw, 160px) 0; position: relative; }
.section--tight { padding: 80px 0; }
.kicker { font-family: var(--font-titre); color: var(--or); font-size: 1rem; margin-bottom: 14px; letter-spacing: .03em; }
.lead { font-size: 1.3rem; color: var(--parchemin); line-height: 1.55; }

/* Pitch */
.pitch { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: end; }
.pitch h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); margin: 0; }
.pitch .lead { margin: 0; }
@media (max-width: 860px) { .pitch { grid-template-columns: 1fr; gap: 28px; } }

/* Monde — parallaxe */
.world {
  position: relative; height: 180vh; /* hauteur de défilement */
}
.world__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.world__sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0f1420 0%, #2a2230 38%, #6a3a2a 70%, #c76a32 100%);
}
.world__sun { position: absolute; left: 66%; top: 46%; width: 260px; height: 260px; border-radius: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,220,150,.95) 0%, rgba(255,150,70,.6) 30%, rgba(255,120,40,0) 70%); }
.world__layer { position: absolute; left: -5%; width: 110%; bottom: 0; will-change: transform; }
.world__layer svg { width: 100%; height: auto; display: block; }
.world__dragon { position: absolute; top: 18%; left: -15%; width: 180px; will-change: transform; opacity: .9; }
.world__text {
  position: absolute; left: 0; right: 0; top: 14vh; z-index: 5;
}
.world__text .card {
  max-width: 520px; padding: 34px 36px;
  background: rgba(23,18,15,.72); backdrop-filter: blur(6px);
  border: 1px solid rgba(217,179,91,.2);
}
.world__text h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.places { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.places li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; font-size: 1rem; border-top: 1px solid var(--cendre); padding-top: 12px; }
.places b { font-family: var(--font-titre); color: var(--or-clair); font-weight: 600; }
.places span { color: var(--parchemin-2); }

/* Village — étapes */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 60px; counter-reset: step; }
.step { position: relative; padding: 28px 22px 0 0; border-top: 1px solid var(--cendre-2); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -17px; left: 0;
  width: 34px; height: 34px; display: grid; place-items: center;
  font-family: var(--font-titre); font-size: .95rem; color: var(--suie);
  background: var(--or); transform: rotate(45deg);
}
.step::before { transform: none; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.step h3 { font-size: 1.15rem; margin-top: 14px; }
.step p { font-size: 1rem; color: var(--parchemin-2); }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* Échelle des rangs */
.ranks-section { background: linear-gradient(180deg, var(--suie) 0%, #120e0c 100%); }
.ranks { display: grid; grid-template-columns: 340px 1fr; gap: 60px; align-items: center; margin-top: 50px; }
.ranks__ladder { display: flex; flex-direction: column-reverse; gap: 8px; }
.rank-btn {
  --c: var(--r-f);
  display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 16px;
  padding: 10px 16px 10px 10px; text-align: left;
  background: rgba(255,255,255,.02); border: 1px solid var(--cendre); color: var(--parchemin-2);
  font: inherit; cursor: pointer; transition: border-color .25s, background .25s, color .25s, transform .25s var(--ease);
}
.rank-btn .letter {
  width: 44px; height: 44px; display: grid; place-items: center;
  font-family: var(--font-logo); font-weight: 900; font-size: 1.5rem; color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
  background: color-mix(in srgb, var(--c) 10%, transparent);
}
.rank-btn .ore { font-family: var(--font-titre); font-size: 1rem; }
.rank-btn .bar { width: 70px; height: 4px; background: var(--cendre); position: relative; overflow: hidden; }
.rank-btn .bar i { position: absolute; inset: 0 auto 0 0; background: var(--c); width: var(--w); }
.rank-btn:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); color: var(--parchemin); }
.rank-btn[aria-pressed="true"] {
  border-color: var(--c); color: var(--parchemin); transform: translateX(10px);
  background: color-mix(in srgb, var(--c) 8%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--c) 22%, transparent);
}
.rank-stage {
  --c: var(--r-f);
  position: relative; min-height: 440px; display: grid; place-items: center;
  border: 1px solid var(--cendre);
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c) 20%, transparent), transparent 60%);
  transition: background .6s;
  overflow: hidden;
}
.rank-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rank-stage__letter {
  font-family: var(--font-logo); font-weight: 900; font-size: clamp(8rem, 18vw, 15rem); line-height: 1;
  color: var(--c);
  text-shadow: 0 0 40px color-mix(in srgb, var(--c) 70%, transparent), 0 0 120px color-mix(in srgb, var(--c) 40%, transparent);
  transition: color .5s, text-shadow .5s;
  position: relative;
}
.rank-stage__info { position: absolute; left: 28px; right: 28px; bottom: 24px; display: flex; justify-content: space-between; gap: 20px; align-items: end; }
.rank-stage__info h3 { margin: 0; font-size: 1.5rem; }
.rank-stage__info p { margin: 4px 0 0; font-size: 1rem; color: var(--parchemin-2); max-width: 46ch; }
@media (max-width: 900px) { .ranks { grid-template-columns: 1fr; } .rank-stage { min-height: 360px; } .rank-stage__info { flex-direction: column; align-items: start; } }

/* Combat */
.combat { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.combat__art { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; }
.combat__art svg { width: 100%; height: 100%; }
.facts { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 18px; }
.facts li { padding-left: 26px; position: relative; color: var(--parchemin-2); }
.facts li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 9px; background: var(--braise); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.facts b { color: var(--parchemin); font-weight: 600; }
@media (max-width: 900px) { .combat { grid-template-columns: 1fr; gap: 40px; } }

/* News cartes */
.news-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; }
.news-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; }
.news-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--fer); border: 1px solid var(--cendre);
  transition: border-color .3s, transform .4s var(--ease);
}
.news-card:hover { border-color: rgba(217,179,91,.5); color: inherit; }
.news-card:hover .news-card__img > * { transform: scale(1.05); }
.news-card__img { aspect-ratio: 16/10; overflow: hidden; position: relative; background: #000; }
.news-card__img > * { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.news-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.news-card__meta { display: flex; gap: 12px; align-items: center; font-size: .9rem; color: var(--parchemin-3); }
.tag { display: inline-block; padding: .1em .6em; font-family: var(--font-titre); font-size: .78rem; letter-spacing: .03em; color: var(--or-clair); border: 1px solid rgba(217,179,91,.35); }
.news-card h3 { font-size: 1.25rem; margin: 4px 0 0; }
.news-card p { font-size: 1rem; color: var(--parchemin-2); margin: 0; }
.news-card--big h3 { font-size: 1.7rem; }
@media (max-width: 960px) { .news-grid { grid-template-columns: 1fr; } }

/* bannière Discord */
.cta-band {
  position: relative; overflow: hidden;
  padding: 70px 60px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
  background: linear-gradient(110deg, #2a1d14 0%, #3a2414 50%, #5a2c12 100%);
  border: 1px solid rgba(217,179,91,.3);
}
.cta-band::before { content: ""; position: absolute; right: -10%; top: -60%; width: 60%; height: 220%; background: radial-gradient(circle, rgba(255,140,50,.28), transparent 60%); pointer-events: none; }
.cta-band h2 { margin: 0 0 8px; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.cta-band p { margin: 0; color: var(--parchemin-2); }
@media (max-width: 760px) { .cta-band { grid-template-columns: 1fr; padding: 44px 28px; } }

/* ---------- En-tête de page intérieure ---------- */
.page-head {
  position: relative; padding: calc(var(--header-h) + 90px) 0 70px; overflow: hidden;
  border-bottom: 1px solid var(--cendre);
  background: radial-gradient(ellipse 60% 120% at 80% 120%, rgba(240,106,36,.22), transparent 60%), var(--suie);
}
.page-head h1 { margin: 0 0 12px; }
.page-head p { color: var(--parchemin-2); margin: 0; font-size: 1.2rem; }
.page-head__emblem { position: absolute; right: 4%; top: 50%; transform: translateY(-40%); width: 300px; opacity: .1; pointer-events: none; }

/* ---------- Actus ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 40px 0 34px; }
.chip {
  padding: .45em 1.1em; border: 1px solid var(--cendre-2); background: transparent; color: var(--parchemin-2);
  font-family: var(--font-titre); font-size: .88rem; cursor: pointer; border-radius: 999px; transition: all .2s;
}
.chip:hover { color: var(--parchemin); border-color: var(--parchemin-3); }
.chip[aria-pressed="true"] { background: var(--or); border-color: var(--or); color: var(--suie); }
.news-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-bottom: 120px; }
.news-list .news-card:first-child { grid-column: span 2; }
@media (max-width: 960px) { .news-list { grid-template-columns: 1fr; } .news-list .news-card:first-child { grid-column: auto; } }

.article { padding: calc(var(--header-h) + 60px) 0 120px; }
.article__back { display: inline-flex; gap: 8px; font-family: var(--font-titre); font-size: .9rem; text-decoration: none; color: var(--parchemin-2); margin-bottom: 30px; }
.article__back:hover { color: var(--or-clair); }
.article__hero { aspect-ratio: 21/9; overflow: hidden; margin: 34px 0 50px; border: 1px solid var(--cendre); }
.article__hero > * { width: 100%; height: 100%; object-fit: cover; }
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.8rem; margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--or); }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--braise); color: var(--parchemin); font-style: italic; font-size: 1.2rem; }

/* ---------- Wiki ---------- */
.wiki { display: grid; grid-template-columns: 270px minmax(0, 1fr) 220px; gap: 50px; padding: calc(var(--header-h) + 40px) 0 120px; align-items: start; }
.wiki__side, .wiki__toc { position: sticky; top: calc(var(--header-h) + 30px); max-height: calc(100vh - var(--header-h) - 60px); overflow: auto; }
.wiki__search { position: relative; margin-bottom: 26px; }
.wiki__search input {
  width: 100%; padding: .75em 1em .75em 2.6em;
  background: var(--fer); border: 1px solid var(--cendre-2); color: var(--parchemin);
  font: inherit; font-size: 1rem;
}
.wiki__search input:focus { outline: none; border-color: var(--or); }
.wiki__search svg { position: absolute; left: .9em; top: 50%; transform: translateY(-50%); width: 1em; color: var(--parchemin-3); }
.wiki__cat { margin-bottom: 22px; }
.wiki__cat h4 { font-size: .95rem; color: var(--or); margin: 0 0 6px; }
.wiki__cat a { display: block; padding: .3em 0 .3em 14px; color: var(--parchemin-2); text-decoration: none; font-size: 1rem; border-left: 1px solid var(--cendre); transition: color .2s, border-color .2s; }
.wiki__cat a:hover { color: var(--parchemin); }
.wiki__cat a[aria-current="true"] { color: var(--or-clair); border-left-color: var(--or); }
.wiki__crumbs { font-size: .92rem; color: var(--parchemin-3); margin-bottom: 14px; }
.wiki__crumbs a { color: var(--parchemin-2); text-decoration: none; }
.wiki__body h1 { font-size: clamp(2.1rem, 4vw, 3rem); }
.wiki__body .intro { font-size: 1.25rem; color: var(--parchemin); }
.status { display: inline-flex; gap: 8px; align-items: center; font-family: var(--font-titre); font-size: .8rem; padding: .25em .8em; margin-bottom: 18px; border: 1px solid; }
.status--dev { color: var(--braise-2); border-color: rgba(255,154,61,.4); }
.status--plan { color: var(--acier); border-color: rgba(143,163,177,.4); }
.wiki__toc h4 { font-size: .9rem; color: var(--parchemin-3); margin-bottom: 10px; }
.wiki__toc a { display: block; font-size: .95rem; color: var(--parchemin-2); text-decoration: none; padding: .25em 0; }
.wiki__toc a:hover { color: var(--or-clair); }
.wiki__pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 70px; }
.wiki__pager a { padding: 18px 22px; border: 1px solid var(--cendre); text-decoration: none; color: var(--parchemin); }
.wiki__pager a:hover { border-color: var(--or); }
.wiki__pager small { display: block; color: var(--parchemin-3); font-size: .85rem; }
.wiki__pager .next { text-align: right; grid-column: 2; }
.wiki-home { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 30px; }
.wiki-home a { padding: 22px 24px; background: var(--fer); border: 1px solid var(--cendre); text-decoration: none; color: inherit; transition: border-color .25s; }
.wiki-home a:hover { border-color: var(--or); color: inherit; }
.wiki-home h3 { font-size: 1.15rem; margin-bottom: 6px; color: var(--or-clair); }
.wiki-home p { margin: 0; font-size: 1rem; color: var(--parchemin-2); }
.no-result { color: var(--parchemin-3); font-size: 1rem; }
.mark { background: rgba(240,106,36,.3); color: inherit; }
@media (max-width: 1100px) { .wiki { grid-template-columns: 240px minmax(0,1fr); } .wiki__toc { display: none; } }
@media (max-width: 760px) { .wiki { grid-template-columns: 1fr; } .wiki__side { position: static; max-height: none; } .wiki-home { grid-template-columns: 1fr; } }

/* tableaux (wiki) */
.table { width: 100%; border-collapse: collapse; margin: 1.4em 0 2em; font-size: 1rem; }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--cendre); }
.table th { font-family: var(--font-titre); font-weight: 600; color: var(--or); font-size: .92rem; border-bottom-color: var(--cendre-2); }
.table tr:hover td { background: rgba(255,255,255,.02); }
.rank-pill { display: inline-grid; place-items: center; width: 30px; height: 30px; font-family: var(--font-logo); font-weight: 900; color: var(--c); border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.callout { padding: 18px 22px; margin: 1.6em 0; background: rgba(217,179,91,.06); border-left: 2px solid var(--or); font-size: 1.02rem; }
.callout p:last-child { margin: 0; }

/* ---------- Boutique ---------- */
.notice {
  display: flex; gap: 14px; align-items: center; padding: 16px 22px; margin: 40px 0 0;
  background: rgba(143,163,177,.07); border: 1px solid rgba(143,163,177,.3); color: var(--parchemin-2); font-size: 1rem;
}
.notice b { color: var(--parchemin); }
.shop-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin: 34px 0 30px; }
.shop-bar .filters { margin: 0; }
.cart-btn { position: relative; }
.cart-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--braise); color: var(--suie); font-size: .78rem; font-weight: 700; }
.featured {
  position: relative; display: grid; grid-template-columns: 1.1fr 1fr; min-height: 420px; margin-bottom: 40px;
  border: 1px solid rgba(217,179,91,.4); overflow: hidden;
  background: radial-gradient(ellipse at 20% 60%, rgba(240,106,36,.25), transparent 60%), var(--fer);
}
.featured__art { position: relative; display: grid; place-items: center; }
.featured__art svg { width: 70%; max-width: 380px; }
.featured__body { padding: 50px 50px 50px 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.featured__body ul { margin: 10px 0 22px; padding-left: 1.1em; color: var(--parchemin-2); font-size: 1rem; }
.price { font-family: var(--font-titre); font-size: 1.8rem; color: var(--or-clair); }
.price small { font-size: 1rem; color: var(--parchemin-3); text-decoration: line-through; margin-left: 10px; }
@media (max-width: 860px) { .featured { grid-template-columns: 1fr; } .featured__body { padding: 0 28px 36px; } }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; padding-bottom: 120px; }
.item {
  --c: var(--or);
  display: flex; flex-direction: column; background: var(--fer); border: 1px solid var(--cendre);
  transition: border-color .3s, box-shadow .3s;
}
.item:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--c) 12%, transparent); }
.item__art { aspect-ratio: 1; display: grid; place-items: center; position: relative; overflow: hidden;
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--c) 28%, transparent), transparent 62%), #15110e; }
.item__art svg { width: 56%; transition: transform .6s var(--ease); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--c) 50%, transparent)); }
.item:hover .item__art svg { transform: translateY(-6px) scale(1.04); }
.item__rar { position: absolute; top: 12px; left: 12px; }
.item__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.item__body h3 { font-size: 1.1rem; margin: 0; }
.item__body p { font-size: .95rem; color: var(--parchemin-2); margin: 0 0 14px; }
.item__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.item__foot .price { font-size: 1.25rem; }
.item__foot .btn { padding: .55em 1em; font-size: .82rem; }

.drawer { position: fixed; inset: 0; z-index: 700; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__bg { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .3s; }
.drawer.is-open .drawer__bg { opacity: 1; }
.drawer__panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(420px, 100%);
  background: var(--suie-2); border-left: 1px solid var(--cendre-2);
  transform: translateX(100%); transition: transform .4s var(--ease);
  display: flex; flex-direction: column;
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 22px 26px; border-bottom: 1px solid var(--cendre); }
.drawer__head h3 { margin: 0; }
.drawer__close { background: none; border: 0; color: var(--parchemin-2); font-size: 1.6rem; cursor: pointer; line-height: 1; }
.drawer__list { flex: 1; overflow: auto; padding: 10px 26px; }
.line { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--cendre); font-size: 1rem; }
.line button { background: none; border: 0; color: var(--parchemin-3); cursor: pointer; font-size: 1.1rem; }
.line button:hover { color: var(--braise); }
.drawer__foot { padding: 22px 26px; border-top: 1px solid var(--cendre); display: grid; gap: 14px; }
.drawer__total { display: flex; justify-content: space-between; font-family: var(--font-titre); font-size: 1.2rem; }
.drawer__foot small { color: var(--parchemin-3); font-size: .9rem; }

/* ---------- Télécharger ---------- */
.dl-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 80px 0 100px; }
.dl-panel {
  padding: 40px; background: var(--fer); border: 1px solid rgba(217,179,91,.3); position: relative;
}
.dl-panel h2 { font-size: 1.6rem; }
.dl-platforms { display: flex; gap: 10px; margin: 18px 0 26px; flex-wrap: wrap; }
.platform { display: inline-flex; gap: 8px; align-items: center; padding: .45em .9em; border: 1px solid var(--cendre-2); font-size: .95rem; color: var(--parchemin-2); }
.platform.is-on { border-color: var(--or); color: var(--parchemin); }
.platform svg { width: 16px; height: 16px; }
.dl-panel .btn { width: 100%; justify-content: center; padding: 1.1em; font-size: 1.05rem; }
.dl-panel small { display: block; margin-top: 14px; color: var(--parchemin-3); font-size: .9rem; text-align: center; }
@media (max-width: 900px) { .dl-hero { grid-template-columns: 1fr; } }

.road { list-style: none; margin: 50px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.road::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--braise) 0 30%, var(--cendre-2) 30%); }
.road li { position: relative; padding: 38px 24px 0 0; }
.road li::before { content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--suie); border: 2px solid var(--cendre-2); }
.road li.done::before { background: var(--braise); border-color: var(--braise); }
.road li.now::before { background: var(--suie); border-color: var(--braise); box-shadow: 0 0 0 6px rgba(240,106,36,.2); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 12px rgba(240,106,36,0); } }
.road h3 { font-size: 1.2rem; margin-bottom: 4px; }
.road .when { font-family: var(--font-titre); font-size: .85rem; color: var(--or); }
.road p { font-size: 1rem; color: var(--parchemin-2); }
@media (max-width: 860px) { .road { grid-template-columns: 1fr; gap: 30px; } .road::before { left: 9px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: var(--cendre-2); } .road li { padding: 0 0 0 44px; } }

.reqs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.reqs > div { padding: 30px; border: 1px solid var(--cendre); }
.reqs h3 { color: var(--or-clair); font-size: 1.2rem; }
.reqs dl { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 10px 16px; font-size: 1rem; }
.reqs dt { color: var(--parchemin-3); }
.reqs dd { margin: 0; }
@media (max-width: 760px) { .reqs { grid-template-columns: 1fr; } }

.faq { margin-top: 30px; max-width: 820px; }
.faq details { border-bottom: 1px solid var(--cendre); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-family: var(--font-titre); font-size: 1.12rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--or); transition: transform .3s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--parchemin-2); padding-bottom: 12px; }

/* ---------- Pied de page ---------- */
.site-footer { border-top: 1px solid var(--cendre); padding: 70px 0 40px; background: #120e0c; }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.foot h4 { font-size: .95rem; color: var(--or); margin-bottom: 14px; }
.foot a { display: block; color: var(--parchemin-2); text-decoration: none; font-size: 1rem; padding: .2em 0; }
.foot a:hover { color: var(--parchemin); }
.foot p { font-size: 1rem; color: var(--parchemin-3); }
.foot__bottom { margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--cendre); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: .9rem; color: var(--parchemin-3); }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr 1fr; } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 900; transform: translate(-50%, 30px);
  padding: 14px 22px; background: var(--fer); border: 1px solid var(--or); color: var(--parchemin);
  font-size: 1rem; opacity: 0; transition: all .35s var(--ease); pointer-events: none;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.world__sticky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(180deg, transparent, var(--suie)); z-index: 4; pointer-events: none; }

/* ---------- Vraies captures du jeu ---------- */
.world__photo { position: absolute; inset: -4%; background-size: cover; background-position: center 40%; will-change: transform; transform: scale(1.12); }
.world__shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(23,18,15,.88) 0%, rgba(23,18,15,.55) 34%, rgba(23,18,15,0) 62%),
  linear-gradient(180deg, rgba(23,18,15,.55) 0%, rgba(23,18,15,0) 22%); }
.world__text .card { background: rgba(23,18,15,.55); }

.page-head--img { border-bottom-color: rgba(217,179,91,.2); min-height: 420px; display: flex; align-items: flex-end; background: var(--suie); }
.page-head--img .wrap { position: relative; z-index: 1; }
.page-head__img { position: absolute; inset: 0; background-size: cover; animation: headZoom 18s ease-out both; }
.page-head__img::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(23,18,15,.75) 0%, rgba(23,18,15,0) 28%),
  linear-gradient(0deg, var(--suie) 0%, rgba(23,18,15,.55) 45%, rgba(23,18,15,.35) 100%),
  linear-gradient(90deg, rgba(23,18,15,.7), rgba(23,18,15,0) 70%); }
@keyframes headZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.page-head--slim { min-height: 300px; padding-bottom: 40px; }
.page-head + .wiki { padding-top: 50px; }
.page-head--img h1 { text-shadow: 0 2px 30px rgba(0,0,0,.6); }

.gallery-section { padding-top: 40px; }
.gallery {
  width: min(var(--wrap), 100% - 48px); margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 14px;
}
.shot { position: relative; overflow: hidden; padding: 0; border: 1px solid var(--cendre); background: #000; cursor: zoom-in; }
.shot--big { grid-column: span 2; grid-row: span 2; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.92); }
.shot:hover img { transform: scale(1.06); filter: saturate(1.05); }
.shot span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px; text-align: left;
  font-family: var(--font-titre); font-size: .95rem; color: var(--parchemin);
  background: linear-gradient(0deg, rgba(10,7,5,.85), transparent);
}
.shot:hover { border-color: rgba(217,179,91,.5); }
@media (max-width: 860px) { .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; } }
.lightbox { position: fixed; inset: 0; z-index: 950; background: rgba(8,6,5,.94); display: grid; place-items: center; padding: 40px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 82vh; border: 1px solid var(--cendre-2); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox p { margin: 14px 0 0; text-align: center; font-family: var(--font-titre); color: var(--parchemin-2); }
.lightbox__close { position: absolute; top: 18px; right: 24px; background: none; border: 0; color: var(--parchemin); font-size: 2.2rem; cursor: pointer; }

.prose figure { margin: 1.6em 0 2em; }
.prose figure img { width: 100%; border: 1px solid var(--cendre); }
.prose figcaption { font-size: .92rem; color: var(--parchemin-3); margin-top: 8px; }

/* ---------- Curseur du jeu ---------- */
html { cursor: url("../game/cursors/FO_Default.png") 0 0, auto; }
a, button, summary, label[for], .chip, .shot, .rank-btn, .btn, .music-toggle, [data-add] { cursor: url("../game/cursors/FO_Hand.png") 0 0, pointer !important; }
input[type="search"], input[type="text"] { cursor: text; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: url("../game/cursors/FO_Default.png") 0 0, not-allowed !important; }

/* ---------- Visuels du jeu ---------- */
.orn { display: block; width: 180px; height: auto; margin: 0 0 10px -6px; opacity: .9; }
.cta-band .orn { width: 150px; }
.step__icon { width: 64px; height: 64px; margin: 18px 0 2px; filter: drop-shadow(0 4px 14px rgba(240,140,40,.25)); }
.steps .step h3 { margin-top: 10px; }

.weapons { position: relative; }
.weapons__glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(240,106,36,.35), transparent 65%); }
.weapons .w { position: absolute; left: 18%; top: 14%; width: 64%; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); transition: transform .8s var(--ease); }
.weapons .w1 { transform: rotate(-35deg) translateX(-12%); }
.weapons .w2 { transform: rotate(0deg) scale(1.05); z-index: 1; }
.weapons .w3 { transform: rotate(35deg) translateX(12%); }
.weapons:hover .w1 { transform: rotate(-42deg) translateX(-16%); }
.weapons:hover .w3 { transform: rotate(42deg) translateX(16%); }

.rank-btn .letter { width: 52px; height: 44px; border: 0; background: none; }
.rank-btn .letter img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 0 transparent); transition: filter .3s; }
.rank-btn[aria-pressed="true"] .letter img, .rank-btn:hover .letter img { filter: drop-shadow(0 0 10px var(--c)); }
.rank-btn .ore b { font-family: var(--font-logo); color: var(--c); margin-right: 6px; }
.rank-stage__letter { position: absolute; font-size: clamp(14rem, 26vw, 22rem); opacity: .16; text-shadow: none; }
.rank-stage__ingot { position: relative; width: min(320px, 60%); filter: drop-shadow(0 0 40px color-mix(in srgb, var(--c) 70%, transparent)) drop-shadow(0 20px 30px rgba(0,0,0,.6)); animation: float 5s ease-in-out infinite; }
.rank-stage__ingot.is-in { animation: ingotIn .7s var(--ease), float 5s ease-in-out .7s infinite; }
@keyframes ingotIn { from { opacity: 0; transform: translateY(20px) scale(.9); filter: brightness(2.5); } }
@keyframes float { 50% { transform: translateY(-10px); } }
.rank-stage__ore { position: absolute; right: 26px; top: 22px; width: 96px; opacity: .95; filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); }

.featured__art img { width: 60%; max-width: 300px; filter: drop-shadow(0 0 40px rgba(240,140,40,.35)); }
.item__art img { width: 52%; transition: transform .6s var(--ease); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--c) 45%, transparent)); }
.item:hover .item__art img { transform: translateY(-6px) scale(1.05); }

.cover { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative;
  background: radial-gradient(ellipse at 50% 70%, rgba(240,106,36,.45), rgba(60,20,8,.6) 45%, #120a08 75%); }
.cover--ingots { gap: 0; padding: 0 6%; }
.cover--ingots img { width: 15%; margin: 0 -1.5%; transform: translateY(calc((var(--i) - 3) * (var(--i) - 3) * 3px)) rotate(calc((var(--i) - 3) * 6deg)); filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.cover--weapons img { height: 92%; width: auto; margin: 0 -6%; filter: drop-shadow(0 14px 24px rgba(0,0,0,.6)); }
.cover--weapons img:nth-child(1) { transform: rotate(-24deg); } .cover--weapons img:nth-child(2) { transform: rotate(-8deg); }
.cover--weapons img:nth-child(3) { transform: rotate(8deg); } .cover--weapons img:nth-child(4) { transform: rotate(24deg); }

.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; margin: 1.2em 0 2em; max-width: 70ch; }
.icon-grid figure { margin: 0; padding: 16px 10px 12px; text-align: center; background: var(--fer); border: 1px solid var(--cendre); }
.icon-grid img { width: 72px; height: 72px; object-fit: contain; margin: 0 auto 8px; border: 0 !important; }
.icon-grid--tall img { width: 100%; height: 150px; }
.icon-grid figcaption { font-family: var(--font-titre); font-size: .9rem; color: var(--parchemin); margin: 0; }
.cell-item { display: inline-flex; align-items: center; gap: 6px; }
.cell-item img { width: 34px; height: 34px; object-fit: contain; }
.smelt { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 1.4em 0 2em; max-width: 70ch; }
.smelt__row { display: grid; grid-template-columns: 48px 12px 48px 1fr; align-items: center; gap: 6px; padding: 8px 12px; background: var(--fer); border: 1px solid var(--cendre); }
.smelt__row img { width: 48px; height: 48px; object-fit: contain; }
.smelt__row span { color: var(--or); text-align: center; }
.smelt__row b { font-family: var(--font-titre); font-weight: 600; font-size: .95rem; }

/* ---------- Fond de l'accueil : capture du jeu ---------- */
.hero__bg { position: absolute; inset: 0; z-index: -3; background-size: cover; background-position: center 55%;
  animation: heroBg 2.4s var(--ease) both, heroDrift 40s ease-in-out 2.4s infinite alternate; }
.hero.is-waiting .hero__bg { animation-play-state: paused; }
@keyframes heroBg { from { opacity: 0; transform: scale(1.12); filter: brightness(.3); } to { opacity: 1; transform: scale(1.04); filter: none; } }
@keyframes heroDrift { from { transform: scale(1.04); } to { transform: scale(1.12) translateY(-1.5%); } }
.hero__shade { position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(ellipse 70% 55% at 50% 48%, rgba(23,18,15,.55), rgba(23,18,15,.25) 70%),
  linear-gradient(180deg, rgba(23,18,15,.75) 0%, rgba(23,18,15,.15) 30%, rgba(23,18,15,.35) 65%, var(--suie) 100%); }

/* ---------- Réseaux sociaux ---------- */
.socials { display: flex; gap: 10px; align-items: center; }
.socials a { width: 40px; height: 40px; display: grid; place-items: center; color: var(--parchemin-2); border: 1px solid var(--cendre-2); border-radius: 50%; transition: color .2s, border-color .2s, background .2s, transform .25s var(--ease); }
.socials a:hover { color: var(--suie); background: var(--or); border-color: var(--or); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; }
.socials--head { gap: 6px; margin-right: 4px; }
.socials--head a { width: 34px; height: 34px; border-color: transparent; }
.socials--head a:hover { background: transparent; color: var(--or-clair); border-color: rgba(217,179,91,.5); }
.socials--head svg { width: 16px; height: 16px; }
.socials--foot { margin-bottom: 14px; }
.socials--foot a { display: grid; padding: 0; }
.hero .socials { justify-content: center; margin-top: 26px; }
.cta-band .socials { margin-top: 18px; }
.page-head .socials { margin-top: 20px; }
@media (max-width: 1180px) { .socials--head { display: none; } }

/* =========================================================
   Comptes joueurs
   ========================================================= */
.account-link {
  font-family: var(--font-titre); font-size: .85rem; letter-spacing: .04em; font-weight: 600;
  color: var(--parchemin); text-decoration: none; padding: .55em 1em; border: 1px solid var(--cendre-2);
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color .2s, color .2s;
}
.account-link:hover { border-color: var(--or); color: var(--or-clair); }
.account-link.is-logged { border-color: rgba(217,179,91,.5); color: var(--or-clair); }
.account-link.is-logged::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #6fcf6f; vertical-align: middle; }
@media (max-width: 960px) { .account-link { padding: .5em .8em; font-size: .8rem; max-width: 110px; } }

.acc-wrap { padding: 50px 0 140px; }
.acc-wrap--narrow .acc-card { max-width: 520px; margin-inline: auto; }
.acc-card {
  background: var(--fer); border: 1px solid var(--cendre); padding: 34px 36px; position: relative;
}
.acc-card h2 { font-size: 1.7rem; margin-bottom: 10px; }
.acc-card h3 { font-size: 1.25rem; color: var(--or-clair); margin-bottom: 18px; }
.acc-card--center { text-align: center; }
.acc-card--center p { margin-inline: auto; }
.acc-icon { width: 80px; margin: 0 auto 14px; }
.acc-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: -34px -36px 28px; border-bottom: 1px solid var(--cendre); }
.acc-tabs button {
  padding: 18px; background: transparent; border: 0; color: var(--parchemin-2);
  font-family: var(--font-titre); font-size: 1rem; font-weight: 600; letter-spacing: .04em; border-bottom: 2px solid transparent;
}
.acc-tabs button[aria-selected="true"] { color: var(--or-clair); border-bottom-color: var(--or); background: rgba(217,179,91,.05); }
.acc-form { display: grid; gap: 16px; }
.acc-form label { display: grid; gap: 7px; font-family: var(--font-titre); font-size: .9rem; font-weight: 600; letter-spacing: .02em; color: var(--parchemin); }
.acc-form label small { font-family: var(--font-texte); font-weight: 400; color: var(--parchemin-3); letter-spacing: 0; margin-left: 6px; }
.acc-form input, .acc-form select, .acc-form textarea,
.admin-bar input, .admin-bar select, .admin-table select {
  width: 100%; padding: .75em .9em; font: inherit; font-family: var(--font-texte); font-size: 1rem; font-weight: 400;
  background: var(--suie); color: var(--parchemin); border: 1px solid var(--cendre-2); border-radius: 0;
  transition: border-color .2s, box-shadow .2s;
}
.acc-form textarea { resize: vertical; min-height: 110px; }
.acc-form input:focus, .acc-form select:focus, .acc-form textarea:focus,
.admin-bar input:focus, .admin-bar select:focus, .admin-table select:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px rgba(217,179,91,.15); }
.acc-form input[type="file"] { padding: .6em; }
.acc-form .btn { justify-content: center; margin-top: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.otp-input { font-family: "Courier New", monospace !important; font-size: 1.8rem !important; letter-spacing: .5em; text-align: center; }
.form-msg { padding: 12px 14px; font-size: .95rem; border-left: 2px solid; }
.form-msg--error { color: #ffb4a0; background: rgba(240,106,36,.08); border-color: var(--braise); }
.form-msg--ok { color: #c6e8b8; background: rgba(111,207,111,.07); border-color: #6fcf6f; margin-bottom: 18px; }
.acc-form .form-msg--ok { margin-bottom: 0; }
.acc-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .92rem; }
.acc-links a { color: var(--parchemin-2); }
.acc-links a:hover { color: var(--or-clair); }
.acc-small { font-size: .88rem; color: var(--parchemin-3); margin: 0; }
.pw-meter { height: 4px; background: var(--cendre); margin-top: -8px; }
.pw-meter i { display: block; height: 100%; width: 0; background: var(--braise); transition: width .3s, background .3s; }
.pw-meter i[data-level="mid"] { background: var(--or); }
.pw-meter i[data-level="high"] { background: #6fcf6f; }

.acc-dash { display: grid; gap: 22px; max-width: 900px; margin-inline: auto; }
.acc-profile { display: grid; grid-template-columns: 72px 1fr auto; gap: 20px; align-items: center; }
.acc-profile h2 { margin: 0 0 4px; }
.acc-profile p { margin: 0; font-size: .95rem; }
.acc-avatar { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(240,140,40,.3)); }
@media (max-width: 640px) { .acc-profile { grid-template-columns: 56px 1fr; } .acc-profile .role-badge { grid-column: 1 / -1; justify-self: start; } .acc-card { padding: 26px 22px; } .acc-tabs { margin: -26px -22px 24px; } .form-row { grid-template-columns: 1fr; } }
.role-badge { font-family: var(--font-titre); font-size: .85rem; font-weight: 700; letter-spacing: .05em; padding: .4em 1em; border: 1px solid; white-space: nowrap; }
.role-badge--membre { color: var(--parchemin-2); border-color: var(--cendre-2); }
.role-badge--testeur { color: var(--r-a); border-color: rgba(166,205,245,.5); background: rgba(166,205,245,.06); }
.role-badge--staff { color: #9fe0a5; border-color: rgba(159,224,165,.5); background: rgba(159,224,165,.06); }
.role-badge--admin { color: var(--or-clair); border-color: var(--or); background: rgba(217,179,91,.1); }
.acc-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--cendre); }
.acc-row p { margin: 2px 0 0; font-size: .92rem; }
.acc-more { border-bottom: 1px solid var(--cendre); }
.acc-more summary { cursor: pointer; padding: 16px 0; font-family: var(--font-titre); font-weight: 600; color: var(--parchemin); list-style: none; }
.acc-more summary::-webkit-details-marker { display: none; }
.acc-more summary::after { content: "+"; float: right; color: var(--or); font-size: 1.2rem; }
.acc-more[open] summary::after { content: "−"; }
.acc-more .acc-form { padding: 0 0 22px; max-width: 460px; }
.acc-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.link-danger { background: none; border: 0; color: #e98c76; font: inherit; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; margin-left: auto; }
.link-danger:hover { color: #ffb4a0; }
.pill { display: inline-block; font-size: .82rem; padding: .25em .8em; border: 1px solid var(--cendre-2); color: var(--parchemin-3); white-space: nowrap; }
.pill--on { color: #9fe0a5; border-color: rgba(159,224,165,.45); }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch span { width: 46px; height: 26px; background: var(--cendre); border-radius: 13px; position: relative; transition: background .25s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--parchemin-2); transition: transform .25s var(--ease), background .25s; }
.switch input:checked + span { background: rgba(217,179,91,.5); }
.switch input:checked + span::after { transform: translateX(20px); background: var(--or-clair); }
.switch input:focus-visible + span { outline: 2px solid var(--or-clair); outline-offset: 3px; }
.switch em { font-style: normal; font-size: .9rem; color: var(--parchemin-2); min-width: 80px; }

.locked { display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: start; }
.locked img { width: 72px; opacity: .85; }
.locked p { margin: 6px 0 14px; }
.builds { display: grid; gap: 14px; margin-bottom: 16px; }
.build { display: grid; grid-template-columns: 56px 1fr auto; gap: 18px; align-items: center; padding: 18px 20px; background: var(--suie); border: 1px solid var(--cendre); }
.build--admin { border-color: rgba(217,179,91,.5); background: linear-gradient(90deg, rgba(217,179,91,.07), transparent 60%), var(--suie); }
.build img { width: 56px; height: 56px; object-fit: contain; }
.build h4 { margin: 0 0 4px; font-size: 1.1rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.build p { margin: 0; font-size: .92rem; }
.build__notes { margin-top: 8px !important; color: var(--parchemin-2); white-space: pre-line; }
.tag--admin { color: var(--suie); background: var(--or); border-color: var(--or); }
@media (max-width: 640px) { .build { grid-template-columns: 44px 1fr; } .build .btn { grid-column: 1 / -1; justify-content: center; } .locked { grid-template-columns: 1fr; } }

/* Panel admin */
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 26px; border-bottom: 1px solid var(--cendre); }
.admin-tabs button { padding: 14px 18px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--parchemin-2); font-family: var(--font-titre); font-weight: 600; font-size: .95rem; letter-spacing: .03em; margin-bottom: -1px; }
.admin-tabs button[aria-selected="true"] { color: var(--or-clair); border-bottom-color: var(--or); }
.admin-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.admin-bar input { flex: 1 1 280px; width: auto; }
.admin-bar select { width: auto; }
.table-wrap { overflow-x: auto; border: 1px solid var(--cendre); }
.admin-table { margin: 0; }
.admin-table td, .admin-table th { white-space: nowrap; }
.admin-table select { padding: .45em .6em; width: auto; font-size: .95rem; }
.admin-pager { display: flex; gap: 14px; align-items: center; justify-content: flex-end; margin-top: 16px; }
.admin-pager .btn { padding: .55em 1em; font-size: .85rem; }
.admin-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: start; }
@media (max-width: 960px) { .admin-grid { grid-template-columns: 1fr; } }
.progress { position: relative; height: 26px; background: var(--suie); border: 1px solid var(--cendre-2); }
.progress i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #a87a26, var(--or)); transition: width .2s; }
.progress span { position: relative; display: grid; place-items: center; height: 100%; font-size: .85rem; font-weight: 600; color: var(--parchemin); }
.mail-card { max-width: 760px; }
.dl-panel .btn + .btn { margin-top: 12px; }
#accountRoot > .acc-card, #adminRoot > .acc-card { max-width: 560px; margin-inline: auto; }
.nav a { white-space: nowrap; }
@media (max-width: 1440px) { .socials--head { display: none; } }
@media (max-width: 1180px) { .site-header .wrap { gap: 16px; } .nav a { padding: .5em .6em; font-size: .86rem; } }