/* Wiki Nimoria Apocalypse — même monde que la page du serveur : papier punaisé
   sur contreplaqué, encre de pochoir. Ici, la lecture prime : une seule feuille
   par dossier, large, calme, et des tableaux filtrables pour les longues listes. */
@import url("/apocalypse/apocalypse-20260920.css");
@import url("/apocalypse/tole-20260921c.css");

.page-wiki {
  position: relative;
  max-width: 62rem; margin: 0 auto;
  padding: clamp(1.8rem, 4vw, 3.5rem) clamp(1rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}

/* ---------------------------------------------------------- sommaire --- */
.wiki-entete { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.wiki-entete h1 {
  font-family: "Big Shoulders Display", system-ui, sans-serif;
  font-weight: 800; font-size: clamp(2.4rem, 6vw, 4rem); line-height: .95; margin: 0 0 .5rem;
}
.wiki-entete p { margin: 0; max-width: 58ch; color: rgba(236, 228, 210, .72); }

.dossiers { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
.groupe h2 {
  font-family: "Big Shoulders Display", system-ui, sans-serif;
  font-size: 1.4rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rubalise); margin: 0 0 .8rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--trait);
}
.groupe-grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.dossier {
  display: grid; gap: .3rem; text-decoration: none;
  background: linear-gradient(174deg, var(--papier) 0%, var(--papier-ombre) 100%);
  color: var(--encre); padding: 1.1rem 1.15rem 1rem;
  box-shadow: 5px 6px 0 rgba(0,0,0,.32);
  transition: transform .18s ease, box-shadow .18s ease;
}
.dossier:nth-child(2n) { transform: rotate(.7deg); }
.dossier:nth-child(3n) { transform: rotate(-.8deg); }
.dossier:hover, .dossier:focus-visible { transform: rotate(0) translateY(-3px); box-shadow: 7px 9px 0 rgba(0,0,0,.4); color: var(--encre); }
.dossier-icone { font-size: 1.6rem; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif; }
.dossier-titre { font-family: "Big Shoulders Display", system-ui, sans-serif; font-weight: 800; font-size: 1.5rem; line-height: 1; }
.dossier-resume { color: var(--encre-pale); font-size: .93rem; }
.dossier-compte { margin-top: .35rem; font-size: .78rem; letter-spacing: .06em; color: rgba(29,26,21,.55); }

/* ------------------------------------------------------------ feuille --- */
.feuille {
  position: relative;
  background: linear-gradient(174deg, var(--papier) 0%, var(--papier-ombre) 100%);
  color: var(--encre);
  padding: clamp(1.6rem, 4vw, 3rem) clamp(1.2rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
  box-shadow: 8px 10px 0 rgba(0,0,0,.35), 0 20px 40px rgba(0,0,0,.35);
}
.feuille::before {
  content: ""; position: absolute; top: -.6rem; left: 50%; transform: translateX(-50%);
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e2564a, #7c1410 70%);
  box-shadow: 0 3px 6px rgba(0,0,0,.5);
}
.feuille-icone { margin: 0; font-size: 2rem; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif; }
.feuille h1 {
  font-family: "Big Shoulders Display", system-ui, sans-serif;
  font-weight: 800; font-size: clamp(2.2rem, 5.5vw, 3.4rem); line-height: .95;
  margin: .2rem 0 .4rem; color: var(--encre);
}
.feuille-resume { margin: 0 0 1.4rem; color: var(--encre-pale); font-size: 1.05rem; max-width: 62ch; }

.sommaire-local { border-top: 2px dashed rgba(29,26,21,.25); border-bottom: 2px dashed rgba(29,26,21,.25); padding: .8rem 0; margin-bottom: 1.6rem; }
.sommaire-local p { margin: 0 0 .4rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(29,26,21,.55); }
.sommaire-local ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.sommaire-local a { color: var(--sang); font-weight: 600; }
.sommaire-local a:hover { color: var(--encre); }

.bloc + .bloc { margin-top: 2rem; }
.bloc h2 {
  font-family: "Big Shoulders Display", system-ui, sans-serif;
  font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1;
  margin: 0 0 .7rem; color: var(--encre); scroll-margin-top: 5rem;
}
.bloc p { margin: 0 0 .8rem; max-width: 72ch; }
.bloc ul { margin: 0 0 .9rem; padding-left: 1.2rem; max-width: 72ch; }
.bloc li + li { margin-top: .35rem; }
.feuille a { color: var(--sang); }
.feuille a:hover { color: var(--encre); }

.encadre { margin: 1rem 0; padding: .85rem 1rem; border-left: 5px solid var(--sang); background: rgba(29,26,21,.06); }
.encadre p { margin: 0; }
.encadre-astuce { border-left-color: #2f5130; }
.encadre-danger { border-left-color: var(--sang-vif); background: rgba(192,32,26,.08); }

/* ----------------------------------------------------------- tableaux --- */
.tableau-cadre { margin: 1rem 0 1.4rem; }
.filtre {
  width: min(22rem, 100%); font: inherit; font-size: .95rem; margin-bottom: .6rem;
  padding: .45rem .7rem; color: var(--encre);
  background: rgba(255,255,255,.35); border: 2px solid rgba(29,26,21,.3);
}
.filtre::placeholder { color: rgba(29,26,21,.5); }
.tableau-cadre .tableau { width: 100%; border-collapse: collapse; font-size: .95rem; display: table; }
.tableau-cadre { overflow-x: auto; }
.tableau th, .tableau td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid rgba(29,26,21,.18); vertical-align: top; }
.tableau thead th { position: sticky; top: 0; background: var(--papier); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-pale); }
.tableau tbody th { font-weight: 700; }
.tableau tbody tr:nth-child(2n) { background: rgba(29,26,21,.04); }
.tableau-vide { color: var(--encre-pale); font-style: italic; }

/* ------------------------------------------------------------ voisins --- */
.voisins { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: 2.2rem; }
.voisin {
  display: grid; gap: .1rem; text-decoration: none; color: var(--os);
  border: 1px solid var(--trait); padding: .8rem 1rem; background: rgba(236,228,210,.04);
}
.voisin:hover { border-color: var(--rubalise); color: var(--os); background: rgba(242,194,27,.08); }
.voisin span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(236,228,210,.55); }
.voisin strong { font-family: "Big Shoulders Display", system-ui, sans-serif; font-size: 1.4rem; font-weight: 700; }
.voisin-apres { text-align: right; }