/* Wiki d'Ascension : theme celeste sombre (nuit, or, bleu ciel). */
:root {
  --fond: #0e0c13;
  --fond-2: #15121c;
  --carte: #1b1724;
  --carte-2: #221d2d;
  --bord: #2f2839;
  --texte: #ece6d8;
  --doux: #a9a1b6;
  --or: #e8c35a;
  --or-clair: #fff0b8;
  --ciel: #7cc8f8;
  --rouge: #ef6a5c;
  --vert: #7fd18b;
  --violet: #b48cf2;
  --rayon: 10px;
  --largeur-menu: 260px;
  --titre: "Cinzel", Georgia, serif;
  --corps: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--fond);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(232, 195, 90, 0.07), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(124, 200, 248, 0.05), transparent 60%);
  background-attachment: fixed;
  color: var(--texte);
  font: 16px/1.65 var(--corps);
}
a { color: var(--ciel); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ---------- en-tete ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  height: 64px; padding: 0 20px;
  background: rgba(14, 12, 19, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bord);
}
.logo { font-family: var(--titre); font-weight: 700; font-size: 1.35rem; color: var(--or); letter-spacing: 0.06em; white-space: nowrap; }
.logo:hover { text-decoration: none; color: var(--or-clair); }
.logo span { color: var(--doux); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.02em; margin-left: 6px; }
.badge-version {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 999px;
  color: var(--ciel); border: 1px solid rgba(124, 200, 248, 0.45); background: rgba(124, 200, 248, 0.08);
}
.entete .adresse { margin-left: auto; color: var(--doux); font-size: 0.9rem; white-space: nowrap; }
.entete .adresse code { color: var(--or-clair); }
.bouton-menu {
  display: none; margin-left: auto;
  background: var(--carte); color: var(--texte); border: 1px solid var(--bord);
  border-radius: 8px; padding: 6px 12px; font: inherit; cursor: pointer;
}

/* ---------- mise en page ---------- */
.cadre { display: flex; max-width: 1280px; margin: 0 auto; }
.menu {
  position: sticky; top: 64px; align-self: flex-start;
  width: var(--largeur-menu); flex: none;
  height: calc(100vh - 64px); overflow-y: auto;
  padding: 24px 16px 40px 20px;
  border-right: 1px solid var(--bord);
}
.menu h4 {
  margin: 20px 0 6px; font: 600 0.72rem/1 var(--corps);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--doux);
}
.menu h4:first-child { margin-top: 0; }
.menu a {
  display: block; padding: 6px 10px; margin: 1px 0;
  border-radius: 7px; color: var(--texte); font-size: 0.95rem;
}
.menu a:hover { background: var(--carte); text-decoration: none; }
.menu a.actif { background: var(--carte-2); color: var(--or); box-shadow: inset 2px 0 0 var(--or); }

main { flex: 1; min-width: 0; padding: 36px 48px 80px; }
.contenu { max-width: 880px; }

/* ---------- typographie ---------- */
h1, h2, h3 { font-family: var(--titre); color: var(--or); line-height: 1.25; }
h1 { font-size: 2.3rem; margin: 0 0 8px; letter-spacing: 0.02em; }
h2 { font-size: 1.5rem; margin: 48px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--bord); }
h3 { font-size: 1.15rem; margin: 30px 0 10px; color: var(--or-clair); }
.chapeau { color: var(--doux); font-size: 1.08rem; margin: 0 0 26px; }
p { margin: 0 0 14px; }
ul, ol { padding-left: 22px; margin: 0 0 14px; }
li { margin: 4px 0; }
strong { color: #fff; }
code { font: 0.9em ui-monospace, "Cascadia Code", Consolas, monospace; background: var(--carte-2); border: 1px solid var(--bord); padding: 1px 6px; border-radius: 5px; color: var(--or-clair); }
hr { border: 0; border-top: 1px solid var(--bord); margin: 36px 0; }

blockquote.citation {
  margin: 0 0 22px; padding: 12px 18px;
  border-left: 3px solid var(--or); background: linear-gradient(90deg, rgba(232, 195, 90, 0.08), transparent);
  font-family: var(--titre); font-style: italic; color: var(--or-clair);
}

/* ---------- tableaux ---------- */
.tableau { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--bord); border-radius: var(--rayon); }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bord); }
th { background: var(--carte-2); color: var(--doux); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
tr:last-child td { border-bottom: 0; }
td { background: var(--carte); }
td:first-child { white-space: nowrap; }
table.attaques td:first-child { color: var(--or-clair); font-weight: 600; }

/* ---------- encadres ---------- */
.encadre { margin: 0 0 20px; padding: 14px 18px; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--carte); }
.encadre > :last-child { margin-bottom: 0; }
.encadre .titre-encadre { display: block; font-weight: 700; margin-bottom: 4px; }
.encadre.astuce { border-color: rgba(127, 209, 139, 0.4); background: rgba(127, 209, 139, 0.06); }
.encadre.astuce .titre-encadre { color: var(--vert); }
.encadre.attention { border-color: rgba(239, 106, 92, 0.45); background: rgba(239, 106, 92, 0.07); }
.encadre.attention .titre-encadre { color: var(--rouge); }
.encadre.cle { border-color: rgba(232, 195, 90, 0.5); background: rgba(232, 195, 90, 0.07); }
.encadre.cle .titre-encadre { color: var(--or); }
.encadre.info { border-color: rgba(124, 200, 248, 0.4); background: rgba(124, 200, 248, 0.06); }
.encadre.info .titre-encadre { color: var(--ciel); }

/* ---------- fiche (image + caracteristiques) ---------- */
.fiche { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; margin: 0 0 24px; }
.fiche .caracs { margin: 0; }
.fiche .portrait {
  width: 210px; display: flex; align-items: center; justify-content: center;
  padding: 12px; border-radius: var(--rayon); border: 1px solid var(--bord);
  background: radial-gradient(circle at 50% 40%, var(--carte-2), var(--fond-2));
}
.fiche .portrait img { max-height: 220px; image-rendering: auto; }
dl.caracs { display: grid; grid-template-columns: max-content 1fr; gap: 0; border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; }
dl.caracs dt, dl.caracs dd { margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--bord); background: var(--carte); }
dl.caracs dt { color: var(--doux); font-size: 0.88rem; background: var(--carte-2); }
dl.caracs dt:last-of-type, dl.caracs dd:last-of-type { border-bottom: 0; }
.danger { color: var(--or); letter-spacing: 2px; }

/* ---------- cartes de navigation ---------- */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 0 0 24px; }
.carte {
  display: block; padding: 18px; border-radius: var(--rayon);
  border: 1px solid var(--bord); background: var(--carte); color: var(--texte);
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.carte:hover { text-decoration: none; border-color: rgba(232, 195, 90, 0.55); background: var(--carte-2); transform: translateY(-2px); }
.carte .ico { font-size: 1.6rem; line-height: 1; }
.carte h3 { margin: 10px 0 6px; font-size: 1.05rem; }
.carte p { margin: 0; color: var(--doux); font-size: 0.92rem; }
.carte img.vignette { height: 90px; display: block; margin: 0 auto 8px; object-fit: contain; }

/* ---------- accueil ---------- */
.heros { text-align: center; padding: 30px 0 18px; }
.heros .embleme { display: block; width: 200px; max-width: 50%; height: auto; margin: 0 auto 12px; border-radius: 50%; box-shadow: 0 0 40px rgba(232, 195, 90, 0.25); }
.heros h1 { font-size: 3rem; letter-spacing: 0.08em; }
.heros h1 .etoile { color: var(--or-clair); font-size: 0.7em; vertical-align: middle; }
.heros .chapeau { max-width: 620px; margin: 8px auto 20px; }
.heros .connexion {
  display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center;
  padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(232, 195, 90, 0.45); background: rgba(232, 195, 90, 0.07);
}
.heros .connexion code { font-size: 1.05rem; background: transparent; border: 0; }

/* ---------- barres de boss (ornements pixel) ---------- */
.barre-boss { display: block; width: 100%; max-width: 600px; margin: 6px auto 22px; image-rendering: pixelated; }

/* ---------- objets ---------- */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.filtres input {
  flex: 1 1 220px; min-width: 0; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--bord); background: var(--carte); color: var(--texte); font: inherit;
}
.filtres button {
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--bord);
  background: var(--carte); color: var(--doux); font: 600 0.82rem var(--corps); cursor: pointer;
}
.filtres button.actif { color: var(--fond); background: var(--or); border-color: var(--or); }
.objet-ico { width: 32px; min-width: 32px; max-width: none; height: 32px; image-rendering: pixelated; vertical-align: middle; }
.objet-ico.vide { display: inline-block; text-align: center; line-height: 32px; color: var(--doux); }
td.nom-objet { font-weight: 600; }
.rarete { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; border: 1px solid; }
.r-commun { color: #d8d8d8; border-color: #6b6b6b; }
.r-rare { color: #7fb6ff; border-color: #3b6fbf; }
.r-epique { color: #c99bff; border-color: #7a4cc0; }
.r-legendaire { color: #ffcf5a; border-color: #b3861c; }
.r-maudit { color: #ff7a6b; border-color: #a33a30; }
.r-insolite { color: #8be0c8; border-color: #2f8a72; }
.r-peu-commun { color: #7fe07f; border-color: #2f8a3a; }
.r-divin { color: #fff3b0; border-color: #d8c25a; }
.r-mythique { color: #ff4f8b; border-color: #b0305e; }
.compteur { color: var(--doux); font-size: 0.9rem; margin: 0 0 10px; }

/* ---------- sets ---------- */
.set { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; margin: 0 0 30px; }
.set .vitrine { border-radius: var(--rayon); border: 1px solid var(--bord); background: radial-gradient(circle at 50% 40%, var(--carte-2), var(--fond-2)); padding: 10px; text-align: center; }
.plus { color: var(--vert); font-weight: 700; }
.moins { color: var(--rouge); font-weight: 700; }

/* ---------- sommaire de page ---------- */
.sommaire { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 26px; padding: 12px 16px; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--fond-2); font-size: 0.92rem; }
.sommaire b { color: var(--doux); font-weight: 600; white-space: nowrap; }
.sommaire a { white-space: nowrap; }

/* ---------- artisanat ---------- */
.etapes { counter-reset: etape; list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.etapes li { counter-increment: etape; position: relative; padding: 14px 18px 14px 58px; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--carte); }
.etapes li::before {
  content: counter(etape); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--or); color: var(--fond); font-weight: 700; text-align: center; line-height: 28px;
}
.etapes li b.titre-etape { display: block; color: var(--or-clair); margin-bottom: 2px; }
.recettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 0 0 24px; }
.recette { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--carte); }
.recette .infos { min-width: 0; }
.recette .infos b { display: block; }
.recette .infos small { display: block; color: var(--doux); font-size: 0.8rem; }
.recette .talent { display: inline-block; margin-top: 4px; font-size: 0.75rem; color: var(--ciel); }
.etabli { display: grid; grid-template-columns: repeat(3, 28px); grid-template-rows: repeat(3, 28px); gap: 2px; padding: 3px; flex: none; background: var(--fond-2); border: 1px solid var(--bord); border-radius: 4px; }
.etabli span { display: flex; align-items: center; justify-content: center; background: var(--carte-2); border-radius: 2px; font-size: 0.55rem; color: var(--doux); overflow: hidden; text-align: center; line-height: 1; }
.etabli img { width: 24px; height: 24px; image-rendering: pixelated; }

/* ---------- pied ---------- */
.pied { margin-top: 60px; padding-top: 18px; border-top: 1px solid var(--bord); color: var(--doux); font-size: 0.85rem; }

/* ---------- mobile ---------- */
@media (max-width: 920px) {
  .bouton-menu { display: block; }
  .entete { padding: 0 16px; gap: 10px; }
  .entete .adresse, .logo span { display: none; }
  .menu {
    position: fixed; top: 64px; left: 0; z-index: 15; height: calc(100vh - 64px);
    background: var(--fond-2); transform: translateX(-100%); transition: transform 0.2s;
  }
  body.menu-ouvert .menu { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); }
  main { padding: 24px 16px 60px; }
  h1 { font-size: 1.9rem; }
  .heros h1 { font-size: 2.2rem; }
  .fiche, .set { grid-template-columns: 1fr; }
  .fiche .portrait { width: 100%; }
  td:first-child { white-space: normal; }
}