/* ===========================================================================
   Terraverde — feuille de style « chancellerie héraldique »
   Palette dérivée du blason. Sombre, sobre, médiéval-fantasy.
   =========================================================================== */
:root {
  --ink: #0B130D;        /* fond encre forêt */
  --fir: #14241A;        /* panneaux sapin */
  --moss: #2E5340;       /* filets mousse */
  --jade: #8FBE9F;       /* accents */
  --bronze: #B08D57;     /* bordures */
  --copper: #D9BC8C;     /* titres */
  --parch: #E8E0CC;      /* texte parchemin */
  --parch-dim: #b8b09a;
  --danger: #9c2b22;

  --font-title: 'Cinzel', Georgia, serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Coins arrondis (look moderne) — un seul token pour tout le site.
     `inset(0 round Npx)` clippe la boîte avec des angles arrondis. */
  --radius: 16px;
  --plaque-clip: inset(0 round var(--radius));
  --maxw: 1200px;          /* largeur des sections larges */
  --maxw-read: 860px;      /* largeur de lecture (texte) */
  --gutter: clamp(1.1rem, 4vw, 2.2rem);
  --nav-h: 68px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;              /* les bandes pleine largeur ne débordent pas */
  background:
    radial-gradient(1200px 600px at 50% -10%, #16271b 0, transparent 60%),
    var(--ink);
  color: var(--parch);
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--font-title); font-weight: 700; letter-spacing: 0.03em; }

a { color: var(--jade); text-decoration: none; }
a:hover { color: var(--copper); }

img { max-width: 100%; }

/* --- Accessibilité : focus & lien d'évitement ----------------------------- */
:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--copper);
  color: var(--ink);
  padding: 0.6rem 1rem;
  z-index: 200;
  font-family: var(--font-title);
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* --- Plaque de bronze biseautée (élément signature) ----------------------- */
.plaque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-title);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg, var(--copper), var(--bronze));
  clip-path: var(--plaque-clip);
  padding: 0.85rem 1.6rem;
  border: 0;
  cursor: pointer;
  font-size: 0.95rem;
  transition: filter 0.18s ease, transform 0.18s ease;
}
.plaque:hover { filter: brightness(1.08); transform: translateY(-1px); }
.plaque:active { transform: translateY(0); }
.plaque-sm { padding: 0.6rem 1.1rem; font-size: 0.8rem; }
.plaque-cta { font-size: 1.05rem; padding: 1rem 2rem; }

/* Panneau sapin (cartes / blocs) avec liseré octogonal */
.plaque-panel {
  background: linear-gradient(180deg, rgba(20, 36, 26, 0.78), rgba(14, 28, 19, 0.78));
  clip-path: var(--plaque-clip);
  border: 1px solid rgba(176, 141, 87, 0.18);
  padding: 1.6rem;
  position: relative;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.link-btn {
  background: none;
  border: 0;
  color: var(--parch-dim);
  font-family: var(--font-title);
  letter-spacing: 0.08em;
  cursor: pointer;
  font-size: 0.8rem;
  text-transform: uppercase;
}
.link-btn:hover { color: var(--copper); }

.mono { font-family: var(--font-mono); }
.muted { color: var(--parch-dim); }

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--copper);
  margin: 2.8rem 0;
  font-size: 1.05rem;
}
.ornament::before, .ornament::after {
  content: '';
  width: 130px; height: 16px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2016'%3E%3Cg%20fill='none'%20stroke='%23B08D57'%20stroke-width='1.4'%3E%3Cpath%20d='M0,8%20H78'/%3E%3Cpath%20d='M78,8%20c6,0%208,-5%2014,-5%20c7,0%207,10%200,10%20c-5,0%20-7,-4%20-3,-7'/%3E%3Ccircle%20cx='110'%20cy='8'%20r='2.4'%20fill='%23D9BC8C'%20stroke='none'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.ornament::before { transform: scaleX(-1); }

/* --- En-tête / navigation -------------------------------------------------- */
.site-header {
  border-bottom: 1px solid rgba(176, 141, 87, 0.16);
  background: rgba(11, 19, 13, 0.6);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem var(--gutter);
  gap: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand-logo { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.brand-name {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--copper);
  letter-spacing: 0.14em;
}
.nav-menu { display: flex; align-items: center; gap: 1.5rem; }
.nav-links { display: flex; gap: 1.2rem; }
.nav-link {
  font-family: var(--font-title);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--parch);
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}
.nav-link:hover, .nav-link.is-active {
  color: var(--copper);
  border-bottom-color: var(--bronze);
}

/* CTA mis en avant dans la nav (Boutique / Admin) — pastille contour discrète
   assortie au bouton Discord ; se remplit en bronze au survol/actif. */
.nav-cta {
  color: var(--copper);
  background: rgba(176, 141, 87, 0.1);
  border: 1px solid rgba(176, 141, 87, 0.5);
  border-radius: 10px;
  padding: 0.4rem 0.9rem;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.nav-cta:hover, .nav-cta.is-active {
  color: var(--ink);
  background: linear-gradient(180deg, var(--copper), var(--bronze));
  border-color: var(--bronze);
  transform: translateY(-1px);
}
.nav-cta::after { display: none; }
.nav-account-wrap { display: flex; align-items: center; gap: 0.8rem; }
.nav-account { display: flex; align-items: center; gap: 0.5rem; color: var(--parch); }
.nav-avatar { border: 1px solid var(--bronze); image-rendering: pixelated; }
.nav-pseudo { font-family: var(--font-mono); font-size: 0.9rem; }
.nav-logout { margin: 0; }

.nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--copper); display: block; }

/* --- Contenu principal -----------------------------------------------------
   Le <main> occupe toute la largeur ; chaque section est recentrée par défaut
   (colonne lisible), sauf les bandes pleine largeur (.hero, .band) qui filent
   d'un bord à l'autre pour le look « site de serveur MC » moderne. */
.site-main {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 4rem;
}
/* Recentrage par défaut de chaque section de flux. */
.site-main > * {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-main > *:first-child { margin-top: 0; }
/* Les pages sans hero commencent juste sous la nav : on aère le haut. */
.site-main > section:first-child:not(.hero) { padding-top: clamp(2rem, 5vw, 3.4rem); }
/* Espace vertical généreux entre les grandes sections. */
.features, .lore, .stats-section, .join { margin-top: clamp(3.5rem, 8vw, 6rem); }
/* Bandes pleine largeur (opt-out du recentrage). */
.site-main > .hero,
.site-main > .band,
.site-main > .marquee { max-width: none; padding-inline: 0; }

.section-title { color: var(--copper); font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 0.8rem; line-height: 1.1; }
.page-head { text-align: center; padding-top: 2.5rem; }

/* --- En-tête de section (kicker + titre), façon leafsmp/wynncraft ---------- */
.section-head { text-align: center; margin: 0 auto clamp(1.8rem, 4vw, 2.8rem); max-width: 720px; }
.kicker {
  display: inline-block;
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  color: var(--jade);
  margin-bottom: 0.7rem;
  padding-bottom: 0.35rem;
  position: relative;
}
.kicker::after {
  content: '';
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 42px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--bronze), transparent);
}

/* --- Hero accueil (immersif, pleine hauteur) ------------------------------- */
.hero {
  text-align: center;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: clamp(2rem, 6vh, 5rem) var(--gutter) clamp(4rem, 9vh, 7rem);
}
/* Contenu du hero recentré sur une colonne lisible. */
.hero > * { max-width: 46rem; }
.hero-eyebrow {
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 0.74rem;
  color: var(--jade);
  padding: 0.4rem 1.1rem;
  border: 1px solid rgba(143, 190, 159, 0.3);
  border-radius: 999px;
  background: rgba(143, 190, 159, 0.06);
  margin-bottom: 1.4rem;
}
.hero-blason { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6)); }
.hero-title {
  max-width: none;           /* le nom tient sur une seule ligne */
  white-space: nowrap;
  font-size: clamp(2.4rem, 9vw, 6rem);
  margin: 0.4rem 0 0.2rem;
  color: var(--copper);
  letter-spacing: 0.14em;
}
.hero-sub { color: var(--parch); font-size: clamp(1.1rem, 2.2vw, 1.35rem); max-width: 44ch; margin: 0 auto 1.8rem; opacity: 0.9; }
.hero-cta { margin-top: 1.6rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Indice de défilement animé sous le hero. */
.hero-scroll {
  margin-top: clamp(1.8rem, 5vh, 3.5rem);
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.55rem;
  color: var(--parch-dim);
}
.hero-scroll:hover { color: var(--copper); }
.hero-scroll-mouse {
  width: 22px; height: 36px; border: 2px solid currentColor; border-radius: 12px;
  position: relative; opacity: 0.8;
}
.hero-scroll-mouse::before {
  content: ''; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px;
  margin-left: -1.5px; border-radius: 2px; background: currentColor;
  animation: scroll-wheel 1.8s ease-in-out infinite;
}
.hero-scroll-label {
  font-family: var(--font-title); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 0.66rem;
}
@keyframes scroll-wheel {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(11px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* --- Bouton fantôme (CTA secondaire) --------------------------------------- */
.plaque-ghost {
  background: rgba(20, 36, 26, 0.5);
  color: var(--copper);
  border: 1px solid var(--bronze);
  box-shadow: none;
}
.plaque-ghost:hover { background: rgba(46, 83, 64, 0.35); filter: none; }

/* --- Bloc IP --------------------------------------------------------------- */
.ip-block { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: 1.4rem 0; }
.ip-label { font-family: var(--font-title); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.75rem; color: var(--parch-dim); }
.ip-plaque { font-family: var(--font-mono); text-transform: none; letter-spacing: 0.04em; }
.ip-text { font-size: 1.1rem; font-weight: 700; }
.ip-action { font-size: 0.7rem; opacity: 0.75; border-left: 1px solid rgba(11,19,13,0.4); padding-left: 0.6rem; }
.ip-feedback { min-height: 1.2em; color: var(--jade); font-size: 0.85rem; font-family: var(--font-mono); }

/* --- Statut live ----------------------------------------------------------- */
.status-card {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1.4rem;
  margin: 0.4rem auto;
  font-family: var(--font-mono);
  font-size: 0.95rem;
}
.status-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--parch-dim); box-shadow: 0 0 8px currentColor; }
.status-card.is-online .status-dot { background: var(--jade); }
.status-card.is-offline .status-dot { background: var(--danger); }
.status-players { color: var(--copper); font-weight: 700; }

/* --- Cartes / tuiles de gameplay ------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.card {
  --accent: var(--jade);
  display: flex;
  flex-direction: column;
  padding-top: 1.9rem;
  overflow: hidden;
}
/* Filet d'accent coloré en haut de chaque tuile. */
.card::after {
  content: '';
  position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.75;
  transition: opacity 0.3s ease;
}
.card-icon {
  display: inline-grid; place-items: center;
  width: 54px; height: 54px; margin-bottom: 1rem;
  font-size: 1.5rem; color: var(--accent);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 14px;
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent);
}
.card-title { color: var(--parch); font-size: 1.3rem; margin: 0 0 0.6rem; letter-spacing: 0.02em; }
.card > p { color: var(--parch-dim); margin: 0 0 1.1rem; flex: 1; }
.card-more {
  align-self: flex-start;
  font-family: var(--font-title); font-size: 1.3rem; color: var(--accent);
  transition: transform 0.3s ease; opacity: 0.85;
}
.card:hover .card-more { transform: translateX(6px); }
.card:hover::after { opacity: 1; }
.join { text-align: center; }

/* --- Actualités ------------------------------------------------------------ */
.news { text-align: left; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.news-card { display: flex; flex-direction: column; color: inherit; }
a.news-card:hover { color: inherit; }
.news-meta {
  display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem;
}
.news-tag {
  font-family: var(--font-title); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.66rem; color: var(--ink);
  background: linear-gradient(180deg, var(--jade), var(--moss));
  padding: 0.2rem 0.6rem; border-radius: 6px;
}
.news-date { font-size: 0.78rem; color: var(--parch-dim); }
.news-title { color: var(--copper); font-size: 1.2rem; margin: 0 0 0.5rem; letter-spacing: 0.02em; }
.news-card > p { color: var(--parch-dim); margin: 0 0 0.9rem; flex: 1; }
.news-card .card-more { align-self: flex-start; color: var(--jade); font-size: 1.2rem; transition: transform 0.3s ease; }
.news-card:hover .card-more { transform: translateX(6px); }

/* --- Discord (nav + footer) ------------------------------------------------ */
.nav-discord {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--parch); font-family: var(--font-title);
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem;
  padding: 0.4rem 0.8rem; border-radius: 10px;
  border: 1px solid rgba(136, 145, 242, 0.4);
  background: rgba(88, 101, 242, 0.12);
  transition: background 0.2s ease, color 0.2s ease, transform 0.18s ease, border-color 0.2s ease;
}
.nav-discord .ico { color: #8891f2; transition: color 0.2s ease; }
.nav-discord:hover {
  color: #fff; background: #5865F2; border-color: #5865F2; transform: translateY(-1px);
}
.nav-discord:hover .ico { color: #fff; }

.footer-social { display: flex; justify-content: center; margin: 0.6rem 0 0.9rem; }
.footer-discord {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--parch-dim); font-family: var(--font-title);
  letter-spacing: 0.06em; font-size: 0.82rem;
  padding: 0.45rem 1rem; border-radius: 10px;
  border: 1px solid rgba(136, 145, 242, 0.35);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.footer-discord .ico { color: #8891f2; }
.footer-discord:hover { color: #fff; background: #5865F2; border-color: #5865F2; }
.footer-discord:hover .ico { color: #fff; }

/* --- Vote ------------------------------------------------------------------ */
.vote-identity { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.vote-avatar { border: 1px solid var(--bronze); image-rendering: pixelated; }
.vote-id-label { display: block; font-size: 0.75rem; color: var(--parch-dim); text-transform: uppercase; letter-spacing: 0.12em; }
.vote-pseudo { font-size: 1.3rem; color: var(--copper); }
.vote-login { text-align: center; }
.vote-login p { margin-top: 0; }

.vote-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.vote-item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(180deg, var(--fir), #0e1c13);
  clip-path: var(--plaque-clip);
  border: 1px solid var(--moss);
  padding: 1.1rem 1.4rem;
}
.vote-item-info { display: flex; flex-direction: column; gap: 0.2rem; }
.vote-site-name { font-family: var(--font-title); letter-spacing: 0.06em; font-size: 1.1rem; color: var(--parch); }
.vote-reward { font-size: 0.85rem; color: var(--jade); }
.vote-cooldown { font-family: var(--font-mono); font-size: 0.85rem; color: var(--parch-dim); }
.vote-btn-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

.vote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.lb-list { margin: 0; padding-left: 1.4rem; }
.lb-list li { margin: 0.35rem 0; }
.lb-list .lb-name { color: var(--parch); }
.lb-list .lb-votes { color: var(--copper); font-family: var(--font-mono); }
.rewards-list { list-style: none; padding: 0; margin: 0 0 0.8rem; }
.rewards-list li { padding: 0.3rem 0; border-bottom: 1px solid rgba(46,83,64,0.4); }
.rewards-list .rank { display: inline-block; min-width: 3.2em; color: var(--copper); font-family: var(--font-title); }
.rewards-note { font-size: 0.8rem; color: var(--parch-dim); }

/* --- Profil ---------------------------------------------------------------- */
.profil-head { display: flex; align-items: center; gap: 1.2rem; }
.profil-avatar { border: 2px solid var(--bronze); image-rendering: pixelated; }
.profil-name { color: var(--copper); margin: 0; font-size: 2rem; }
.profil-uuid { color: var(--parch-dim); font-size: 0.8rem; margin: 0.2rem 0 0; }
.profil-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.stat-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin: 0; }
.stat-dl dt { color: var(--parch-dim); }
.stat-dl dd { margin: 0; text-align: right; color: var(--parch); }
.prof-list, .hist-list { list-style: none; padding: 0; margin: 0; }
.prof-list li { display: flex; justify-content: space-between; padding: 0.3rem 0; border-bottom: 1px solid rgba(46,83,64,0.35); }
.prof-lvl { color: var(--copper); }
.hist-list li { padding: 0.25rem 0; font-size: 0.92rem; }
.sub-h { color: var(--jade); font-size: 1rem; margin: 1rem 0 0.4rem; }
.sync-note { font-size: 0.78rem; color: var(--parch-dim); margin-top: 0.8rem; }
.vote-total { font-size: 1.05rem; }

/* --- Boutique -------------------------------------------------------------- */
.boutique { text-align: center; position: relative; }
.seal {
  display: inline-block;
  transform: rotate(-12deg);
  border: 3px solid var(--danger);
  color: var(--danger);
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.5rem 1.4rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  box-shadow: 0 0 0 2px rgba(156,43,34,0.25) inset;
  opacity: 0.92;
}
.boutique-card { max-width: 540px; margin: 1.5rem auto 0; }
.boutique-lead { font-size: 1.2rem; }

/* --- Règlement ------------------------------------------------------------- */
.reglement { max-width: 760px; margin: 0 auto; }
.charte-list { padding-left: 1.3rem; }
.charte-list li { margin: 0.7rem 0; }
.charte-list strong { color: var(--copper); }
.charte-note { color: var(--parch-dim); font-size: 0.9rem; margin-top: 1rem; }

/* --- Connexion (code de liaison) ------------------------------------------ */
.login-page { max-width: 560px; margin: 0 auto; text-align: center; }
.login-card { margin-top: 1rem; text-align: left; }
.login-steps { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.login-steps li { margin: 0.4rem 0; }
.login-form { display: flex; flex-direction: column; gap: 0.7rem; align-items: stretch; }
.login-label { font-family: var(--font-title); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; color: var(--parch-dim); }
.login-input {
  font-size: 1.5rem; text-align: center; letter-spacing: 0.35em;
  padding: 0.7rem 1rem; text-transform: uppercase;
  background: #0e1c13; color: var(--copper);
  border: 1px solid var(--moss); clip-path: var(--plaque-clip);
}
.login-input::placeholder { color: var(--parch-dim); letter-spacing: 0.25em; opacity: 0.5; }
.auth-input {
  font-size: 1.05rem; padding: 0.7rem 1rem;
  background: #0e1c13; color: var(--parch);
  border: 1px solid var(--moss); clip-path: var(--plaque-clip);
}
.auth-input::placeholder { color: var(--parch-dim); opacity: 0.5; }
.login-form .plaque { justify-content: center; margin-top: 0.3rem; }
.nav-unverified { gap: 0.5rem; }
.nav-badge {
  font-family: var(--font-title); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink); background: var(--copper);
  padding: 0.15rem 0.45rem; clip-path: var(--plaque-clip);
}
.login-error {
  background: rgba(156, 43, 34, 0.15); border: 1px solid var(--danger);
  color: #e8b9b4; padding: 0.7rem 1rem; clip-path: var(--plaque-clip); margin: 0 0 1rem;
}
.login-help { font-size: 0.85rem; margin-top: 1rem; }

.login-success {
  background: rgba(143, 190, 159, 0.15); border: 1px solid var(--jade);
  color: var(--jade); padding: 0.7rem 1rem; clip-path: var(--plaque-clip); margin: 0 0 1rem;
}
.profil-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.6rem; }

/* --- Panel admin ----------------------------------------------------------- */
.admin-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 1.5rem; border-bottom: 1px solid var(--moss); }
.admin-tab {
  font-family: var(--font-title); letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 0.8rem; color: var(--parch); padding: 0.5rem 0.9rem; border-bottom: 2px solid transparent;
}
.admin-tab:hover, .admin-tab.is-active { color: var(--copper); border-bottom-color: var(--bronze); }
.admin-status { display: block; width: 100%; margin: 0 0 1.5rem; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.admin-stat { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 1rem; }
.admin-stat-n { font-size: 2rem; color: var(--copper); }
.admin-stat-l { font-size: 0.8rem; color: var(--parch-dim); text-align: center; }
.admin-quick { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.admin-search { display: flex; gap: 0.6rem; margin: 0 0 1.2rem; }
.admin-search .auth-input { flex: 1; }
.admin-table-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.admin-table th, .admin-table td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid rgba(46,83,64,0.4); }
.admin-table th { font-family: var(--font-title); letter-spacing: 0.05em; font-size: 0.72rem; text-transform: uppercase; color: var(--parch-dim); }
.admin-table td.small, .admin-table .small { font-size: 0.8rem; color: var(--parch-dim); }
.admin-row-actions { display: flex; gap: 0.6rem; }
.admin-row-actions form { margin: 0; }
.link-btn.danger { color: #e0796f; }
.link-btn.danger:hover { color: #ff6b5e; }
.tag { font-size: 0.7rem; padding: 0.1rem 0.45rem; border: 1px solid var(--parch-dim); color: var(--parch-dim); border-radius: 3px; }
.tag-ok { border-color: var(--jade); color: var(--jade); }
.admin-grant { padding: 1.2rem; margin-bottom: 1.5rem; }
.grant-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.grant-row label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--parch-dim); }
.grant-row .auth-input { min-width: 120px; }

/* --- 404 / erreurs --------------------------------------------------------- */
.notfound { text-align: center; padding: 2rem 0; }
.nf-code { font-family: var(--font-title); font-size: clamp(4rem, 14vw, 8rem); color: var(--moss); line-height: 1; }

/* --- Pied de page ---------------------------------------------------------- */
.site-footer { text-align: center; padding: 2rem 1rem 2.5rem; border-top: 1px solid var(--moss); color: var(--parch-dim); }
.footer-tag { font-family: var(--font-title); letter-spacing: 0.12em; color: var(--bronze); margin: 0.2rem 0; }
.footer-fine { font-size: 0.78rem; margin: 0.2rem 0; }

/* ===========================================================================
   Couche dynamique — animations & fond héraldique vivant.
   La barre du haut (.site-header) reste fixe et statique ; tout le reste vit.
   =========================================================================== */

/* --- Fond héraldique animé (décoratif, derrière le contenu) --------------- */
.bg-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-glow {
  position: absolute; top: -30%; left: 50%;
  width: 120vmax; height: 120vmax; margin-left: -60vmax;
  background: radial-gradient(closest-side, rgba(46, 83, 64, 0.30), transparent 70%);
  will-change: transform;
  animation: bg-drift 26s ease-in-out infinite;
}
.bg-embers {
  position: absolute; inset: -12% 0 0 0;
  background-image:
    radial-gradient(2px 2px at 18% 82%, rgba(176, 141, 87, 0.55), transparent 60%),
    radial-gradient(2px 2px at 72% 60%, rgba(217, 188, 140, 0.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 92%, rgba(143, 190, 159, 0.40), transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 74%, rgba(176, 141, 87, 0.40), transparent 60%),
    radial-gradient(2px 2px at 55% 86%, rgba(217, 188, 140, 0.38), transparent 60%);
  background-size: 60% 60%;
  opacity: 0.5;
  will-change: transform;
  animation: bg-rise 32s linear infinite;
}
@keyframes bg-drift {
  0%, 100% { transform: translate3d(-3%, -2%, 0) scale(1); }
  50%      { transform: translate3d(3%, 2%, 0) scale(1.08); }
}
@keyframes bg-rise {
  from { transform: translateY(7%); }
  to   { transform: translateY(-7%); }
}

/* --- Révélation au scroll (progressive : actif seulement si JS présent) ---
   Utilise translate/scale (propriétés indépendantes) pour laisser `transform`
   libre au tilt 3D piloté en JS — les deux se composent sans conflit. */
.js [data-reveal] {
  opacity: 0;
  translate: 0 48px;
  scale: 0.93;
  filter: blur(6px);
  transition: opacity 0.85s ease,
              translate 0.85s cubic-bezier(0.2, 0.7, 0.2, 1),
              scale 0.85s cubic-bezier(0.2, 0.7, 0.2, 1),
              filter 0.85s ease;
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
  will-change: opacity, translate, scale, filter;
}
.js [data-reveal].is-visible { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }

/* --- Signatures animées --------------------------------------------------- */
/* Le blason flotte via `translate` (keyframe) ; `transform` reste libre pour le
   tilt 3D piloté à la souris (app.js). */
.hero-blason {
  animation: blason-float 6s ease-in-out infinite;
  transition: transform 0.25s ease;
  transform-style: preserve-3d;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.6));
}
@keyframes blason-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}

.hero-title {
  background: linear-gradient(100deg, var(--copper) 20%, #f3dfac 50%, var(--copper) 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: title-sheen 9s linear infinite;
}
@keyframes title-sheen { to { background-position: -220% 0; } }

.ornament { animation: orn-pulse 4.5s ease-in-out infinite; }
@keyframes orn-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; text-shadow: 0 0 12px rgba(217, 188, 140, 0.45); }
}

.status-card.is-online .status-dot { animation: dot-pulse 1.8s ease-in-out infinite; }
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 6px var(--jade); }
  50%      { box-shadow: 0 0 14px var(--jade), 0 0 22px rgba(143, 190, 159, 0.5); }
}

.plaque-cta { animation: cta-glow 3.2s ease-in-out infinite; }
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(217, 188, 140, 0); }
  50%      { box-shadow: 0 0 18px rgba(217, 188, 140, 0.45); }
}

/* ===========================================================================
   Profondeur 3D — tilt interactif, parallaxe, glyphes flottants, god-rays.
   `transform` est réservé au tilt (JS) ; révélation/flottement utilisent
   translate/scale pour éviter tout conflit.
   =========================================================================== */

/* Scène : un peu de perspective globale pour les enfants 3D. */
.site-main { perspective: 1500px; perspective-origin: 50% 30%; }

/* --- Tilt 3D des cartes (classe .tilt ajoutée par app.js) ------------------ */
.tilt {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.3s ease, border-color 0.3s ease;
  will-change: transform;
}
.tilt:hover {
  border-color: var(--bronze);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(176, 141, 87, 0.25);
  z-index: 2;
}
/* Reflet spéculaire suivant le curseur — renforce l'illusion de relief. */
.tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: var(--plaque-clip);
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 246, 224, 0.22),
    rgba(255, 246, 224, 0.06) 30%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  mix-blend-mode: screen;
}
.tilt:hover::after { opacity: 1; }
/* Le titre des cartes se détache vers l'avant pendant le survol (vraie 3D). */
.tilt .card-title { transition: transform 0.3s ease; transform: translateZ(0); }
.tilt:hover .card-title { transform: translateZ(40px); }
.tilt > p, .tilt > .stat-dl, .tilt > .prof-list, .tilt > .hist-list,
.tilt > .rewards-list, .tilt > .lb-list { transform: translateZ(18px); }

/* --- Boutons plaque : relief, enfoncement & balayage lumineux -------------- */
.plaque {
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
  transform: translateZ(0);
}
.plaque:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4); }
.plaque:active { transform: translateY(1px); box-shadow: 0 5px 12px rgba(0, 0, 0, 0.38); }
.plaque::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.plaque:hover::before { left: 130%; }

/* Lueur spéculaire qui suit le curseur : les CTA « réagissent » à la souris SANS
   se déplacer (remplace l'ancien effet magnétique qui suivait le pointeur). */
.plaque-cta::after,
.nav-login::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 246, 224, 0.3),
    rgba(255, 246, 224, 0.08) 35%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  mix-blend-mode: screen;
}
.plaque-cta:hover::after,
.nav-login:hover::after { opacity: 1; }

/* --- Fond : rayons divins en rotation + glyphes héraldiques flottants ------ */
.bg-rays {
  position: absolute;
  top: -40%; left: 50%;
  width: 160vmax; height: 160vmax; margin-left: -80vmax;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(143, 190, 159, 0.05) 12deg, transparent 24deg,
    transparent 90deg, rgba(176, 141, 87, 0.06) 102deg, transparent 114deg,
    transparent 180deg, rgba(143, 190, 159, 0.05) 192deg, transparent 204deg,
    transparent 270deg, rgba(176, 141, 87, 0.05) 282deg, transparent 294deg
  );
  opacity: 0.6;
  will-change: transform;
  animation: rays-spin 90s linear infinite;
}
@keyframes rays-spin { to { transform: rotate(360deg); } }

.bg-glyphs { position: absolute; inset: 0; }
.bg-glyph {
  position: absolute;
  font-family: var(--font-title);
  color: var(--bronze);
  opacity: 0.12;
  user-select: none;
  will-change: transform;
  animation: glyph-float calc(18s + var(--g) * 3s) ease-in-out infinite;
  animation-delay: calc(var(--g) * -2.5s);
}
.bg-glyph:nth-child(1) { left: 8%;  top: 70%; font-size: 2.4rem; }
.bg-glyph:nth-child(2) { left: 22%; top: 30%; font-size: 1.6rem; opacity: 0.08; }
.bg-glyph:nth-child(3) { left: 40%; top: 80%; font-size: 3.2rem; opacity: 0.1; }
.bg-glyph:nth-child(4) { left: 58%; top: 22%; font-size: 2rem; }
.bg-glyph:nth-child(5) { left: 72%; top: 64%; font-size: 1.4rem; opacity: 0.09; }
.bg-glyph:nth-child(6) { left: 84%; top: 36%; font-size: 2.8rem; opacity: 0.11; }
.bg-glyph:nth-child(7) { left: 14%; top: 50%; font-size: 1.8rem; opacity: 0.07; }
.bg-glyph:nth-child(8) { left: 90%; top: 78%; font-size: 2.2rem; opacity: 0.1; }
@keyframes glyph-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(12px, -38px, 0) rotate(18deg); }
}

/* Champ de particules 3D (scene.js) — couvre tout le fond. */
.bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Fond aurora WebGL (aurora.js) — le calque le plus profond. */
.bg-aurora {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.55;
}

/* --- Blason : halo lumineux rotatif (héros) ------------------------------- */
.crest { position: relative; display: inline-grid; place-items: center; }
.crest .hero-blason { position: relative; z-index: 2; grid-area: 1 / 1; }
.crest-ring, .crest-beam { grid-area: 1 / 1; pointer-events: none; border-radius: 50%; }
.crest-beam {
  width: 320px; height: 320px; z-index: 0;
  background: radial-gradient(closest-side, rgba(143, 190, 159, 0.20), rgba(176, 141, 87, 0.10) 45%, transparent 72%);
  animation: crest-pulse 5s ease-in-out infinite;
}
.crest-ring {
  width: 240px; height: 240px; z-index: 1;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(217, 188, 140, 0.55) 40deg, transparent 90deg,
    transparent 180deg, rgba(143, 190, 159, 0.5) 220deg, transparent 270deg, transparent 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 71%, #000 73%, #000 79%, transparent 81%);
  mask: radial-gradient(closest-side, transparent 71%, #000 73%, #000 79%, transparent 81%);
  filter: blur(0.4px) drop-shadow(0 0 6px rgba(217, 188, 140, 0.4));
  animation: crest-spin 14s linear infinite;
}
@keyframes crest-spin { to { transform: rotate(360deg); } }
@keyframes crest-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.12); opacity: 1; }
}

/* ===========================================================================
   Touches « grand studio » — curseur, lettrage, marquee, balancement continu.
   =========================================================================== */

/* --- Curseur personnalisé ------------------------------------------------- */
.cursor-dot, .cursor-ring { display: none; }
body.custom-cursor { cursor: none; }
body.custom-cursor a, body.custom-cursor button,
body.custom-cursor input, body.custom-cursor .plaque { cursor: none; }
body.custom-cursor .cursor-dot, body.custom-cursor .cursor-ring {
  display: block;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.cursor-dot {
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: var(--copper);
  box-shadow: 0 0 12px var(--copper);
}
.cursor-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid var(--bronze);
  transition: width 0.2s ease, height 0.2s ease, margin 0.2s ease,
              background 0.2s ease, border-color 0.2s ease;
}
.cursor-ring.is-active {
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-color: var(--jade);
  background: rgba(143, 190, 159, 0.10);
}

/* --- Lettrage animé du titre héros ---------------------------------------- */
.hero-title.split {
  background: none;
  -webkit-text-fill-color: var(--copper);
  color: var(--copper);
  animation: none;
}
.hero-title.split .hl {
  display: inline-block;
  will-change: transform;
  animation: hl-wave 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.05s);
}
@keyframes hl-wave {
  0%, 100% { transform: translateY(0); text-shadow: 0 0 0 transparent; }
  50%      { transform: translateY(-12px); text-shadow: 0 8px 22px rgba(217, 188, 140, 0.45); }
}

/* --- Bandeau marquee infini ----------------------------------------------- */
.marquee {
  overflow: hidden;
  margin: 3rem 0;
  padding: 0.9rem 0;
  border-top: 1px solid var(--moss);
  border-bottom: 1px solid var(--moss);
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 30s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.mq-item {
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--copper);
  font-size: 1.05rem;
}
.mq-sep { color: var(--jade); opacity: 0.7; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Balancement continu des cartes (rien n'est jamais figé) --------------
   `rotate` est indépendant de `transform` (tilt) et `translate`/`scale`
   (révélation) : tout se compose sans conflit. */
.card, .news-card, .vote-item, .leaderboard, .rewards-month, .boutique-card, .charte {
  animation: card-sway 7s ease-in-out infinite;
  animation-delay: calc(var(--reveal-i, 0) * -1.3s);
}
@keyframes card-sway {
  0%, 100% { rotate: 0.35deg; }
  50%      { rotate: -0.35deg; }
}

/* ===========================================================================
   Scroll 3D (façon Wynncraft) — blocs qui pivotent + horizon en parallaxe.
   `rotate` (scroll, axe X) est indépendant de `transform`/`translate`/`scale`.
   =========================================================================== */
[data-scene] {
  transform-style: preserve-3d;
  transition: rotate 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: rotate;
}

/* Héros : recul/zoom au défilement (origine en haut pour un effet de caméra). */
.hero {
  position: relative;
  transform-origin: 50% 0;
  will-change: transform, opacity;
}

/* --- Horizon de collines en parallaxe (profondeur Wynncraft) -------------- */
.bg-hills { position: absolute; left: 0; right: 0; bottom: 0; height: 48vh; }
.bg-hill {
  position: absolute;
  left: -6%; right: -6%; bottom: -2vh;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 112% 100%;
  will-change: translate;
}
.bg-hill-back {
  opacity: 0.55;
  filter: blur(1px);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20320'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%231b3024'%20d='M0,224C180,180,360,260,540,224C720,188,900,256,1080,220C1260,184,1380,236,1440,216L1440,320L0,320Z'/%3E%3C/svg%3E");
}
.bg-hill-mid {
  opacity: 0.72;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20320'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23122017'%20d='M0,256C200,224,380,288,600,250C820,212,1040,284,1260,246C1360,228,1410,260,1440,250L1440,320L0,320Z'/%3E%3C/svg%3E");
}
.bg-hill-front {
  opacity: 0.92;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20320'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%230a130d'%20d='M0,288C240,260,480,300,720,284C960,268,1200,304,1440,286L1440,320L0,320Z'/%3E%3C/svg%3E");
}

/* ===========================================================================
   La Chronique — récit en petits fragments révélés un à un au défilement.
   =========================================================================== */
.lore { max-width: 860px; margin: 0 auto; text-align: center; }
.lore-intro {
  color: var(--parch-dim);
  font-style: italic;
  font-size: 1.2rem;
  max-width: 56ch;
  margin: 0.4rem auto 2.8rem;
}
.lore-track {
  position: relative;
  text-align: left;
  padding-left: 2.6rem;
  margin: 0 auto;
  max-width: 720px;
}
.lore-track::before {
  content: '';
  position: absolute;
  left: 0.7rem; top: 0.4rem; bottom: 0.4rem;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--moss) 12%, var(--bronze), var(--moss) 88%, transparent);
}
.lore-beat {
  position: relative;
  margin: 0 0 1.5rem;
  padding: 1.05rem 1.3rem;
  background: linear-gradient(180deg, rgba(20, 36, 26, 0.72), rgba(14, 28, 19, 0.72));
  clip-path: var(--plaque-clip);
  border: 1px solid rgba(46, 83, 64, 0.55);
}
.lore-beat p { margin: 0; font-size: 1.08rem; }
.lore-node {
  position: absolute;
  left: -2.25rem; top: 1.05rem;
  color: var(--copper);
  font-size: 0.9rem;
  text-shadow: 0 0 10px rgba(217, 188, 140, 0.6);
}
.lore-closing {
  margin-top: 2.6rem;
  font-family: var(--font-title);
  color: var(--copper);
  font-size: 1.4rem;
  letter-spacing: 0.06em;
}
/* Entrée latérale alternée des fragments (gauche / droite). */
.js .lore-beat[data-reveal] { translate: -46px 18px; }
.js .lore-beat:nth-child(even)[data-reveal] { translate: 46px 18px; }
.js .lore-beat[data-reveal].is-visible { translate: 0 0; }

/* ===========================================================================
   Micro-animations supplémentaires.
   =========================================================================== */

/* --- Barre de progression de défilement ----------------------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--moss), var(--bronze), var(--copper));
  transform: scaleX(0); transform-origin: left;
  z-index: 300; pointer-events: none;
  box-shadow: 0 0 10px rgba(217, 188, 140, 0.5);
}

/* --- Bandeau de chiffres animés (count-up) -------------------------------- */
.stats-section { text-align: center; }
.stats-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem; max-width: 920px; margin: 0 auto; text-align: center;
}

/* --- Bande CTA pleine largeur (façon « Ready to play? ») ------------------- */
.band {
  position: relative;
  text-align: center;
  padding: clamp(3rem, 8vw, 5.5rem) var(--gutter);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(46, 83, 64, 0.35), transparent 60%),
    linear-gradient(180deg, rgba(20, 36, 26, 0.55), rgba(11, 19, 13, 0.2));
  border-top: 1px solid rgba(176, 141, 87, 0.2);
  border-bottom: 1px solid rgba(176, 141, 87, 0.2);
}
.band-inner { max-width: 640px; margin: 0 auto; }
.band-inner > p { color: var(--parch-dim); margin: 0.4rem 0 1.4rem; }
.band .ip-block { margin-bottom: 1.6rem; }
.stat-orb {
  padding: 1.5rem 0.6rem;
  background: linear-gradient(180deg, rgba(20, 36, 26, 0.6), rgba(14, 28, 19, 0.6));
  clip-path: var(--plaque-clip);
  border: 1px solid rgba(46, 83, 64, 0.5);
}
.stat-num {
  display: block; font-size: 2.7rem; line-height: 1; color: var(--copper);
  text-shadow: 0 0 18px rgba(217, 188, 140, 0.35);
}
.stat-label {
  display: block; margin-top: 0.5rem;
  font-family: var(--font-title); text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.78rem; color: var(--parch-dim);
}

/* --- Titres scintillants (balayage doré continu) -------------------------- */
.section-title:not(.split) {
  background: linear-gradient(100deg, var(--copper) 25%, #f3dfac 50%, var(--copper) 75%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: title-sheen 9s linear infinite;
}

/* --- Soulignement animé de la navigation ---------------------------------- */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--bronze); transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-link:hover, .nav-link.is-active { border-bottom-color: transparent; }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }

/* --- Logo réactif --------------------------------------------------------- */
.brand-logo { transition: transform 0.3s ease; }
.brand:hover .brand-logo { transform: rotate(-8deg) scale(1.1); }

/* --- Pop de copie d'IP ---------------------------------------------------- */
.ip-plaque.copied { animation: copy-pop 0.5s ease; }
@keyframes copy-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* ===========================================================================
   Carte live.
   =========================================================================== */
.map-wrap { margin-top: 1.5rem; padding: 1rem; }
.map-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.8rem;
}
.map-status { font-family: var(--font-mono); color: var(--jade); font-size: 0.95rem; }
.map-legend { display: flex; gap: 1.1rem; font-size: 0.85rem; font-family: var(--font-title); letter-spacing: 0.06em; }
.leg-player { color: var(--jade); }
.leg-city { color: var(--copper); }
.map-stage {
  position: relative;
  height: 62vh; min-height: 380px;
  background: radial-gradient(1200px 600px at 50% 30%, rgba(22, 39, 27, 0.6), rgba(11, 19, 13, 0.92));
  border: 1px solid var(--moss);
  clip-path: var(--plaque-clip);
  overflow: hidden;
}
.map-canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.map-canvas:active { cursor: grabbing; }
.map-hint { text-align: center; font-size: 0.8rem; margin: 0.7rem 0 0; }

/* ===========================================================================
   Couche artistique — grain, vignette, enluminures, encadrements dorés.
   =========================================================================== */

/* Grain de pellicule + vignette par-dessus tout le contenu (décoratif). */
.art-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 250; }
.art-grain {
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.05;
  mix-blend-mode: overlay;
}
.art-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 38%, transparent 52%, rgba(6, 11, 8, 0.5) 100%);
}

/* Encadrement doré intérieur (effet « œuvre encadrée ») sur les panneaux. */
.plaque-panel::before {
  content: '';
  position: absolute; inset: 7px;
  border: 1px solid rgba(176, 141, 87, 0.22);
  border-radius: calc(var(--radius) - 7px);
  pointer-events: none;
}

/* Lueur peinte derrière le titre du héros. */
.hero::before {
  content: '';
  position: absolute; left: 50%; top: 6%;
  width: 82%; height: 72%;
  transform: translateX(-50%);
  z-index: -1; pointer-events: none;
  filter: blur(30px);
  background:
    radial-gradient(50% 60% at 50% 40%, rgba(143, 190, 159, 0.14), transparent 70%),
    radial-gradient(46% 46% at 27% 24%, rgba(176, 141, 87, 0.13), transparent 70%),
    radial-gradient(46% 46% at 73% 30%, rgba(217, 188, 140, 0.11), transparent 70%);
}

/* Lettrine enluminée sur le premier fragment de la Chronique. */
.lore-beat:first-of-type p::first-letter {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 3.2em;
  line-height: 0.78;
  float: left;
  margin: 0.04em 0.12em 0 0;
  color: var(--copper);
  text-shadow: 0 2px 12px rgba(217, 188, 140, 0.45);
}

/* ===========================================================================
   Intro d'ouverture — voile qui révèle le site (une fois par session).
   =========================================================================== */
.intro {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  background:
    radial-gradient(900px 600px at 50% 36%, rgba(22, 39, 27, 0.6), transparent 72%),
    var(--ink);
  overflow: hidden;
}
html.intro-seen .intro { display: none; }
html.intro-playing, html.intro-playing body { overflow: hidden; }

.intro-inner { display: grid; justify-items: center; gap: 1.5rem; text-align: center; padding: 1rem; }

.intro-crest {
  position: relative; display: inline-grid; place-items: center;
  animation: intro-crest 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.intro-crest img {
  grid-area: 1 / 1; z-index: 2; width: 120px; height: 120px;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.6));
}
.intro-ring {
  grid-area: 1 / 1; z-index: 1; width: 196px; height: 196px; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(217, 188, 140, 0.6) 45deg, transparent 95deg,
    transparent 180deg, rgba(143, 190, 159, 0.5) 225deg, transparent 275deg, transparent 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 70%, #000 72%, #000 80%, transparent 82%);
  mask: radial-gradient(closest-side, transparent 70%, #000 72%, #000 80%, transparent 82%);
  filter: drop-shadow(0 0 8px rgba(217, 188, 140, 0.4));
  animation: crest-spin 8s linear infinite;
}
@keyframes intro-crest {
  from { opacity: 0; transform: scale(0.6) translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Éventail de rayons lumineux derrière le blason. */
.intro-rays {
  grid-area: 1 / 1; z-index: 0; width: 460px; height: 460px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    transparent 0deg 5deg, rgba(217, 188, 140, 0.08) 5deg 6deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 74%);
  mask: radial-gradient(closest-side, #000 18%, transparent 74%);
  opacity: 0;
  animation: intro-fade 1s ease 0.3s forwards, crest-spin 50s linear infinite reverse;
}
@keyframes intro-fade { to { opacity: 1; } }

/* Runes héraldiques en orbite autour du blason. */
.intro-runes {
  grid-area: 1 / 1; z-index: 1; width: 300px; height: 300px;
  animation: crest-spin 26s linear infinite;
}
.intro-runes span {
  position: absolute; left: 50%; top: 50%;
  font-family: var(--font-title); font-size: 1.1rem; color: var(--bronze);
  text-shadow: 0 0 8px rgba(176, 141, 87, 0.5);
  transform: rotate(var(--a)) translateY(-150px) rotate(calc(-1 * var(--a)));
  animation: intro-fade 1.2s ease 0.4s both;
}

/* Voile lumineux du dévoilement (flash). */
.intro-flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 42%,
    rgba(243, 223, 172, 0.9), rgba(143, 190, 159, 0.35) 28%, transparent 62%);
}

.intro-tag {
  margin: 0; max-width: 30ch;
  font-style: italic; color: var(--parch-dim); font-size: 1.05rem;
  animation: intro-letter 0.8s ease 1.15s both;
}

.intro-word {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: 0.14em;
  display: flex;
  color: var(--copper);
  text-shadow: 0 2px 20px rgba(217, 188, 140, 0.4);
}
.intro-word span {
  display: inline-block; opacity: 0; transform: translateY(16px);
  animation: intro-letter 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: calc(0.5s + var(--i) * 0.06s);
}
@keyframes intro-letter { to { opacity: 1; transform: none; } }

.intro-bar {
  width: 190px; height: 2px; border-radius: 2px; overflow: hidden;
  background: rgba(176, 141, 87, 0.25);
}
.intro-bar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--moss), var(--copper));
  animation: intro-bar 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}
@keyframes intro-bar { to { width: 100%; } }

.intro-skip {
  margin: 0; cursor: pointer;
  font-family: var(--font-title); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 0.7rem; color: var(--parch-dim);
  animation: intro-letter 0.6s ease 1.5s both;
}
.intro-skip:hover { color: var(--copper); }

/* Dévoilement : on « traverse » le blason (zoom) + flash doré, puis fondu. */
.intro.is-leaving { animation: intro-leave 0.9s cubic-bezier(0.5, 0, 0.2, 1) forwards; }
@keyframes intro-leave { to { opacity: 0; visibility: hidden; } }
.intro.is-leaving .intro-inner { animation: intro-zoom 0.9s cubic-bezier(0.5, 0, 0.2, 1) forwards; }
@keyframes intro-zoom {
  to { transform: scale(2.7); opacity: 0; filter: blur(9px); }
}
.intro.is-leaving .intro-flash { animation: intro-flash 0.9s ease forwards; }
@keyframes intro-flash {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 1rem;
    background: var(--fir); border-bottom: 1px solid var(--moss);
    padding: 1.2rem; display: none;
  }
  .nav-menu.is-open { display: flex; }
  .nav-links { flex-direction: column; gap: 0.8rem; }
  .nav-account-wrap { justify-content: space-between; }
  .vote-grid { grid-template-columns: 1fr; }
}

/* Nav dense (tablette) : Discord en icône seule pour gagner de la place. */
@media (max-width: 1040px) { .nav-discord-label { display: none; } }
@media (max-width: 760px) { .nav-discord-label { display: inline; } }

/* --- Mouvement réduit ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* Garantir que le contenu à révéler reste visible sans animation. */
  .js [data-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; transform: none !important; filter: none !important; }
  .scroll-progress { display: none; }
  .section-title:not(.split) { -webkit-text-fill-color: var(--copper); color: var(--copper); }
  .tilt { transform: none !important; }
  .tilt::after { display: none; }
  .plaque { box-shadow: none; }
  .bg-fx { display: none; }
  [data-scene] { rotate: none !important; }
  .hero { transform: none !important; opacity: 1 !important; }
  .intro { display: none !important; }
  /* Restaurer le titre en couleur pleine (le dégradé clippé devient transparent sinon). */
  .hero-title { color: var(--copper); -webkit-text-fill-color: var(--copper); }
}