/* ============================================================
   HOME.CSS — Page d'accueil — Thème LOTR
   ============================================================ */

body.page-home { font-family: var(--font-ui,'Inter',system-ui,sans-serif); }
body.page-home p, body.page-home span, body.page-home .stat-lbl,
body.page-home .hero-tagline, body.page-home .step p,
body.page-home .faction-card p, body.page-home .shot-desc,
body.page-home .discord-text p { font-family: var(--font-ui,'Inter',system-ui,sans-serif) !important; }

/* ─── FOND : texture parchemin/pierre gravée (SVG inline) ─── */
body.page-home {
  background-color: var(--bg-deep);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ╔══════════════════════════════════════════
   ║  HERO
   ╚══════════════════════════════════════════ */
.hero {
  position: relative;
  height: 100svh; min-height: 600px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
  margin-top: calc(-1 * var(--header-height, 76px));
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.2s ease;
  animation: kenBurns 14s ease-in-out infinite;
}
.hero-slide.active { opacity: 1; }
@keyframes kenBurns {
  0%   { transform: scale(1.00) translate(0,0); }
  50%  { transform: scale(1.06) translate(-8px,-4px); }
  100% { transform: scale(1.00) translate(0,0); }
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.10) 0%, rgba(0,0,0,.20) 35%,
    rgba(0,0,0,.58) 68%, rgba(0,0,0,.88) 100%);
}
.hero-caption {
  position: absolute; bottom: 76px; left: 40px; z-index: 4;
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.4); backdrop-filter: blur(6px);
  padding: 5px 14px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.08);
}
.hero-dots {
  position: absolute; bottom: 30px; left: 50%;
  transform: translateX(-50%); z-index: 4;
  display: flex; gap: 8px;
}
.hero-dot {
  width: 30px; height: 3px; border-radius: 1px; border: none;
  background: rgba(255,255,255,.25); cursor: pointer; padding: 0;
  transition: background .3s, transform .3s;
}
.hero-dot.active { background: var(--accent); transform: scaleX(1.4); }
.hero-content {
  position: relative; z-index: 2; text-align: center;
  padding: 140px 24px 120px;
  display: flex; flex-direction: column; align-items: center;
  max-width: 920px;
}
.hero-logo {
  width: 110px; height: 110px;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,.65))
          drop-shadow(0 0 28px var(--accent-glow));
  animation: heroFloat 5s ease-in-out infinite;
  margin-bottom: 10px;
}
@keyframes heroFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.hero-title { margin: 0 0 10px; line-height: 0; font-size: 0; }
.hero-title img {
  max-width: min(760px,90vw); height: auto;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.8))
          drop-shadow(0 0 38px color-mix(in srgb,var(--accent) 55%,transparent));
}
.hero-tagline {
  font-size: .88rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  margin: 0 0 28px;
}
.hero-ip-row {
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; justify-content: center; margin-bottom: 24px;
}
.hero-ip-pill, .hero-status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 4px; font-size: .88rem; color: white;
}
.hero-ip-label {
  font-family: var(--font-display); font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.4);
}
.hero-ip-pill code {
  font-family: 'JetBrains Mono',monospace; font-size: .95rem;
  color: var(--accent); background: none; border: none; padding: 0;
}
.hero-copy-btn {
  background: none; border: none; padding: 2px 4px;
  color: rgba(255,255,255,.3); cursor: pointer; transition: color .2s;
}
.hero-copy-btn:hover { color: var(--accent); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-mute); }
.status-dot.status-online  { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.status-dot.status-offline { background: var(--evil); }
.status-dot.status-loading { animation: blink 1.3s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:.3} 50%{opacity:1} }
.hero-status-pill .status-text { font-size: .82rem; color: rgba(255,255,255,.6); }
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero-scroll {
  position: absolute; bottom: 24px; right: 36px; z-index: 4;
  color: rgba(255,255,255,.35); text-decoration: none; transition: color .3s;
  animation: arrowB 2s ease-in-out infinite;
}
.hero-scroll:hover { color: var(--accent); }
@keyframes arrowB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* ╔══════════════════════════════════════════
   ║  SÉPARATEUR ORNEMENTÉ LOTR
   ╚══════════════════════════════════════════ */
.lotr-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin: 0; padding: 0; overflow: hidden;
  height: 32px; opacity: 0.45;
}
.lotr-divider svg { display: block; }

/* ╔══════════════════════════════════════════
   ║  STATS BAR
   ╚══════════════════════════════════════════ */
.stats-bar {
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}
/* Ornement haut de la stats bar */
.stats-bar::before {
  content: "";
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.stats-bar-inner {
  max-width: 860px; margin: 0 auto;
  padding: 22px 24px;
  display: flex; align-items: center; justify-content: space-around;
  flex-wrap: wrap; gap: 10px;
}
.stat-item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stat-num {
  font-family: var(--font-decor);
  font-size: clamp(1.8rem,4vw,2.5rem); font-weight: 700;
  color: var(--accent); line-height: 1;
}
.stat-lbl { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.stat-divider {
  color: var(--accent); opacity: .3; font-size: 1rem;
  /* Rune naine simple au lieu du point générique */
}

/* ╔══════════════════════════════════════════
   ║  SECTIONS
   ╚══════════════════════════════════════════ */
.section { padding: 88px 0; }
.eyebrow-tag {
  display: inline-block; font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); padding: 5px 14px;
  /* Ornement : pseudo-bordure avec angles stylisés */
  border: 1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  border-radius: 2px; background: color-mix(in srgb,var(--accent) 7%,transparent);
  margin-bottom: 16px; position: relative;
}
/* Petits angles décoratifs aux coins */
.eyebrow-tag::before, .eyebrow-tag::after {
  content: "✦"; position: absolute;
  font-size: .45rem; color: var(--accent); opacity: .6; top: 50%; transform: translateY(-50%);
}
.eyebrow-tag::before { left: -14px; }
.eyebrow-tag::after  { right: -14px; }

.s-monde-head, .s-factions-head, .s-join-head {
  text-align: center; max-width: 660px; margin: 0 auto 50px;
}
.s-monde-head h2, .s-factions-head h2, .s-join-head h2 {
  font-size: clamp(1.9rem,4.5vw,3rem); margin: 8px 0 12px; color: var(--text);
}
.s-monde-head p, .s-factions-head p {
  color: var(--text-soft); line-height: 1.7; font-size: 1rem;
}

/* ╔══════════════════════════════════════════
   ║  SHOTS GRID
   ╚══════════════════════════════════════════ */
.shots-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 14px;
}
.shot-card {
  border-radius: 6px; overflow: hidden;
  background: var(--bg-card);
  /* Bordure avec accent médiéval, pas bleue */
  border: 1px solid color-mix(in srgb,var(--accent) 20%,var(--border));
  display: flex; flex-direction: column;
  transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s;
  position: relative;
}
.shot-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb,var(--accent) 5%,transparent), transparent 50%);
  pointer-events: none; z-index: 0;
}
.shot-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb,var(--accent) 50%,transparent);
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb,var(--accent) 15%,transparent) inset;
}
.shot-large { grid-row: 1 / 3; }
.shot-img {
  width: 100%; background-size: cover; background-position: center;
  transition: transform .6s ease; aspect-ratio: 16/9;
}
.shot-large .shot-img { flex: 1; aspect-ratio: unset; min-height: 240px; }
.shot-card:hover .shot-img { transform: scale(1.04); }
.shot-info { padding: 16px 20px; position: relative; z-index: 1; }
.shot-name { font-family: var(--font-display); font-size: 1.05rem; color: var(--accent); margin-bottom: 4px; }
.shot-desc { font-size: .85rem; color: var(--text-mute); margin-bottom: 8px; line-height: 1.5; }
.shot-link { font-size: .82rem; font-weight: 600; color: var(--accent); text-decoration: none; transition: letter-spacing .3s; }
.shot-link:hover { letter-spacing: .05em; }
.shot-more {
  display: flex; align-items: center; justify-content: center; padding: 28px;
  background: linear-gradient(135deg, color-mix(in srgb,var(--accent) 8%,var(--bg-card)), var(--bg-base));
}
.shot-more-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.shot-more-inner img { filter: drop-shadow(0 0 12px var(--accent-glow)); opacity: .8; }
.shot-more-inner p { font-family: var(--font-display); color: var(--text-soft); font-size: .95rem; }
@media (max-width: 768px) { .shots-grid { grid-template-columns: 1fr; } .shot-large { grid-row: auto; } }

/* ╔══════════════════════════════════════════
   ║  FACTIONS GRID — redesign LOTR
   ╚══════════════════════════════════════════ */
.s-factions { background: var(--bg-deep); }
.factions-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 14px; }

.faction-card {
  padding: 28px 22px 24px; border-radius: 4px;
  background: linear-gradient(155deg,var(--bg-card),var(--bg-base));
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .35s;
  /* Bordure à double trait style enluminure médiévale */
  border: 1px solid color-mix(in srgb,var(--accent) 18%,var(--border));
  box-shadow: inset 0 0 0 3px color-mix(in srgb,var(--accent) 4%,transparent);
}
/* Coin ornemental en haut à gauche et droite */
.faction-card::before, .faction-card::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border-color: color-mix(in srgb,var(--accent) 30%,transparent);
  border-style: solid;
  pointer-events: none;
  transition: border-color .35s;
}
.faction-card::before { top: 6px; left: 6px; border-width: 1px 0 0 1px; }
.faction-card::after  { top: 6px; right: 6px; border-width: 1px 1px 0 0; }
.faction-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent);
}
.faction-card:hover::before, .faction-card:hover::after {
  border-color: color-mix(in srgb,var(--accent) 60%,transparent);
}
/* Barre colorée en haut selon l'allégeance */
.faction-card .faction-stripe {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  opacity: .85;
}
.faction-bien   .faction-stripe { background: linear-gradient(90deg, #3b8f4a, #6dbf7e); }
.faction-mal    .faction-stripe { background: linear-gradient(90deg, var(--evil), #c75a20); }
.faction-neutre .faction-stripe { background: linear-gradient(90deg, var(--accent), var(--primary)); }
.faction-cta    .faction-stripe { background: linear-gradient(90deg, color-mix(in srgb,var(--accent) 80%,#fff), var(--accent)); }

/* Icônes redesignées : illustrations SVG LOTR au lieu d'émojis */
.faction-crest {
  width: 52px; height: 52px;
  color: var(--accent);
  filter: drop-shadow(0 0 10px var(--accent-glow));
  margin-bottom: 4px;
  flex: 0 0 auto;
}
.faction-bien   .faction-crest { color: #6dbf7e; filter: drop-shadow(0 0 10px rgba(109,191,126,.35)); }
.faction-mal    .faction-crest { color: #d96a2a; filter: drop-shadow(0 0 10px rgba(217,106,42,.35)); }
.faction-neutre .faction-crest { color: var(--accent); }
.faction-cta    .faction-crest { color: var(--accent); }

.faction-card h3 { font-family: var(--font-display); font-size: 1.15rem; color: var(--text); margin: 0; }
.faction-card p  { font-size: .88rem; color: var(--text-mute); line-height: 1.5; margin: 0; }
.faction-card-examples {
  font-size: .75rem; color: var(--accent); font-family: var(--font-display);
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid color-mix(in srgb,var(--accent) 15%,var(--border));
}
.faction-card-link { display:inline-flex; align-items:center; font-size:.82rem; font-weight:600; color:var(--accent); text-decoration:none; transition:letter-spacing .3s; margin-top:4px; }
.faction-card-link:hover { letter-spacing:.06em; }

/* ╔══════════════════════════════════════════
   ║  SECTION REJOINDRE (steps)
   ╚══════════════════════════════════════════ */
.s-join { position:relative; overflow:hidden; }
.s-join-bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center 30%; filter:brightness(.12) saturate(.3); }
.s-join .wrapper { position:relative; z-index:1; }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:36px; }
.step {
  padding:26px 22px; text-align:center;
  background: linear-gradient(160deg, var(--bg-card), var(--bg-base));
  border: 1px solid color-mix(in srgb,var(--accent) 15%,var(--border));
  border-radius: 4px; position: relative;
}
/* Coins ornementaux sur les steps */
.step::before, .step::after {
  content: ""; position: absolute;
  width: 14px; height: 14px;
  border-color: color-mix(in srgb,var(--accent) 25%,transparent);
  border-style: solid; pointer-events: none;
}
.step::before { bottom: 6px; left: 6px; border-width: 0 0 1px 1px; }
.step::after  { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; }
.step-num { font-family:var(--font-decor); font-size:2.2rem; font-weight:900; color:var(--accent); opacity:.2; line-height:1; margin-bottom:10px; }
.step h3  { font-family:var(--font-display); font-size:1.02rem; color:var(--text); margin:0 0 8px; }
.step p   { font-size:.86rem; color:var(--text-mute); line-height:1.6; }
.step code { font-size:.8em; background:rgba(255,255,255,.06); border:1px solid color-mix(in srgb,var(--accent) 20%,transparent); padding:1px 6px; border-radius:3px; color:var(--accent); }
.steps-cta { text-align:center; }
@media (max-width:640px) { .steps-grid { grid-template-columns:1fr; } }

/* ╔══════════════════════════════════════════
   ║  DISCORD — plus de "fenêtre bleue"
   ║  Intégré sobrement dans une bannière
   ╚══════════════════════════════════════════ */
.s-discord {
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.discord-block {
  display: flex; align-items: center; gap: 32px;
  padding: 40px 0; flex-wrap: wrap;
  /* Plus de cadre bleu type "fenêtre" — juste le contenu */
  background: none; border: none;
}
.discord-logo {
  color: #5865F2; flex: 0 0 auto;
  filter: drop-shadow(0 0 16px rgba(88,101,242,.4));
}
.discord-text { flex: 1 1 240px; }
.discord-text h2 {
  font-family: var(--font-display); font-size: 1.65rem;
  margin: 0 0 5px; color: var(--text);
}
.discord-text p { color: var(--text-mute); font-size: .93rem; }
/* Ligne décorative entre le logo et le texte */
.discord-block::before {
  display: none;
}
/* Séparateur ornementé au-dessus de la section discord */
.s-discord-sep {
  text-align: center;
  padding: 20px 0 0;
  color: var(--accent);
  opacity: .35;
  font-size: 1.2rem;
  letter-spacing: .4em;
}

/* ╔══════════════════════════════════════════
   ║  QUICK NAV — ornements LOTR
   ╚══════════════════════════════════════════ */
.s-quicknav { padding: 40px 0 60px; }
.quicknav-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.qn-card {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  background: linear-gradient(155deg, var(--bg-card), var(--bg-base));
  /* Bordure à coins ornementés — pas de bleu générique */
  border: 1px solid color-mix(in srgb,var(--accent) 18%,var(--border));
  border-radius: 4px;
  text-decoration: none; color: var(--text);
  font-size: .93rem; font-weight: 500;
  position: relative; overflow: hidden;
  transition: transform .3s, border-color .3s, box-shadow .3s, color .3s;
}
/* Ligne d'accent en haut au hover */
.qn-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--accent); opacity: 0; transition: opacity .3s;
}
.qn-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb,var(--accent) 45%,var(--border));
  box-shadow: 0 8px 24px rgba(0,0,0,.35); color: var(--accent);
}
.qn-card:hover::before { opacity: 1; }
.qn-icon { font-size: 1.3rem; flex: 0 0 auto; filter: drop-shadow(0 0 6px var(--accent-glow)); }
.qn-label { flex: 1 1 auto; }
.qn-arr { color: var(--text-mute); font-size: .88rem; transition: transform .3s, color .3s; }
.qn-card:hover .qn-arr { transform: translateX(3px); color: var(--accent); }
@media (max-width: 768px) { .quicknav-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .quicknav-grid { grid-template-columns: 1fr; } }

/* ╔══════════════════════════════════════════
   ║  BOUTONS CTA
   ╚══════════════════════════════════════════ */
.cta-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; border-radius:4px;
  font-size:.94rem; font-weight:600; text-decoration:none;
  border:none; cursor:pointer; white-space:nowrap;
  transition:transform .22s, box-shadow .22s, filter .22s;
}
.cta-btn:hover { transform:translateY(-2px); }
.cta-primary {
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#000));
  color:#0a0e18; box-shadow:0 4px 18px var(--accent-glow);
}
.cta-primary:hover { box-shadow:0 8px 28px var(--accent-glow); filter:brightness(1.08); }
.cta-discord {
  background:linear-gradient(135deg,#5865F2,#4752C4);
  color:#fff; box-shadow:0 4px 18px rgba(88,101,242,.4);
}
.cta-discord:hover { box-shadow:0 8px 28px rgba(88,101,242,.55); filter:brightness(1.06); }
.cta-outline {
  background:transparent; color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
}
.cta-outline:hover { background:color-mix(in srgb,var(--accent) 10%,transparent); }
.cta-xl { padding:15px 30px; font-size:1rem; }

/* ╔══════════════════════════════════════════
   ║  REVEAL
   ╚══════════════════════════════════════════ */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease,transform .6s ease; }
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.12s; }
.reveal-delay-2 { transition-delay:.22s; }
.reveal-delay-3 { transition-delay:.32s; }