/* Onglet Wiki : rail de categories, filtres, grille de heros.

   Charge en dernier, apres dispos.css : il ne surcharge rien et n'est
   surcharge par rien. Les couleurs reprennent celles du picker (.tile) pour
   que la grille du wiki se lise comme un selecteur deja connu. */

.wiki-categories{
  display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px
}
.wiki-category{
  appearance:none;cursor:pointer;font:inherit;min-height:44px;
  background:var(--obsidian-2);color:var(--parchment);
  border:1px solid var(--line);border-radius:999px;padding:6px 18px;
  transition:.14s
}
.wiki-category:hover{border-color:var(--gold-deep)}
.wiki-category.active{border-color:var(--gold-bright);color:var(--gold-bright)}

.wiki-filters{
  display:grid;gap:12px;margin:0 0 16px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))
}
.wiki-field{display:flex;flex-direction:column;gap:4px}
.wiki-field>span{font-size:12.5px;color:var(--muted)}
.wiki-field input,.wiki-field select{
  min-height:44px;background:var(--panel-2);color:inherit;
  border:1px solid var(--line);border-radius:8px;padding:0 10px;font:inherit
}

.wiki-state,.wiki-empty{color:var(--muted);margin:0 0 16px}

.wiki-grid{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr))
}
/* `position:relative` sert de repere au ::after de collection.css — la coche
   et le cadenas s'ancrent au coin de la tuile. */
.wiki-tile{
  position:relative;
  appearance:none;cursor:pointer;font:inherit;
  border:1px solid var(--line);background:var(--obsidian-2);
  border-radius:9px;padding:8px 6px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:.14s;color:var(--parchment)
}
.wiki-tile:hover{border-color:var(--gold-deep);transform:translateY(-2px)}
.wiki-tile img{
  width:100%;aspect-ratio:1/1;border-radius:6px;object-fit:cover;
  background:var(--vignette-fond,#0b0910)
}
.wiki-tile-name{
  font-size:11px;line-height:1.2;text-align:center;word-break:break-word
}

/* ---------- Fiche d'un heros ---------- */

/* L'en-tete est la seule piece ou la fiche se permet d'etre spectaculaire :
   portrait en losange, lueur teintee par l'element du heros (--aura, posee
   en ligne par la vue). Tout le reste reste sobre — une seule audace. */
.wiki-hero-head{
  position:relative;display:flex;gap:18px;align-items:center;
  padding:6px 2px 18px;margin:0 0 4px;
  border-bottom:1px solid var(--line)
}
/* La lueur doit s'eteindre AVANT les bords de sa boite, sinon on voit le carre.

   L'ancienne version le montrait : dans une boite de 220x150 avec le centre a
   (60,60), `farthest-corner` vaut 182px, donc `transparent 68%` ne s'eteignait
   qu'a 124px — alors que les bords gauche et haut n'etaient qu'a 60px. Le
   degrade y etait encore opaque et se faisait trancher net. A droite, le bord
   etant a 160px, rien ne se voyait : d'ou un carre qui semblait decale.

   Deux precautions ici. La boite est CARREE et le centre au centre, si bien que
   `closest-side` vaut la meme distance dans les quatre directions — 150px. Et
   le fondu se termine a 72% de cette distance, soit 108px, ce qui laisse 42px
   de marge transparente sur tout le pourtour.

   Les decalages placent ce centre sur le portrait, mesure a (43,47) dans
   l'en-tete. En mobile le cadre retrecit et le centre glisse de quelques
   pixels : la marge l'absorbe, et une lueur diffuse ne se lit pas au pixel. */
.wiki-hero-head::before{
  content:"";position:absolute;left:-107px;top:-103px;width:300px;height:300px;
  background:radial-gradient(circle closest-side,var(--aura),transparent 72%);
  opacity:.22;pointer-events:none
}
.wiki-hero-frame{
  position:relative;z-index:1;flex:none;
  width:82px;height:82px;overflow:hidden;
  transform:rotate(45deg);border-radius:14px;
  border:2px solid var(--aura);background:var(--vignette-fond,#0b0910);
  box-shadow:0 0 26px -8px var(--aura)
}
/* Le portrait est contre-tourne et deborde : la diagonale d'un carre de 82
   fait 116, il faut donc au moins ca pour que les angles restent couverts. */
.wiki-hero-portrait{
  width:118px;height:118px;object-fit:cover;
  transform:rotate(-45deg);margin:-18px 0 0 -18px;display:block
}
.wiki-hero-id{position:relative;z-index:1;min-width:0}
.wiki-hero-name{
  font-family:var(--display);font-weight:700;font-size:30px;line-height:1.05;
  letter-spacing:.02em;color:var(--parchment);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap
}
/* La rarete en gemme, comme le petit losange dore de la fiche de reference. */
.wiki-hero-gem{
  font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.08em;
  color:var(--obsidian);background:linear-gradient(160deg,var(--gold-bright),var(--gold-deep));
  padding:3px 9px;border-radius:4px;transform:skewX(-12deg)
}
.wiki-hero-chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.wiki-chip{
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:4px;
  padding:3px 9px
}
.wiki-chip-element{color:var(--aura);border-color:var(--aura)}
.wiki-hero-hint{color:var(--muted)}

/* Les armes en cartes a icone : c'est l'icone que le membre reconnait du jeu,
   pas le libelle. */
.wiki-hero-weapons{
  display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 18px
}
.wiki-hero-weapon{
  appearance:none;cursor:pointer;font:inherit;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  min-width:92px;min-height:44px;padding:10px 12px;
  background:var(--obsidian-2);color:var(--muted);
  border:1px solid var(--line);border-radius:9px;transition:.14s
}
.wiki-hero-weapon:hover{border-color:var(--gold-deep);color:var(--parchment)}
.wiki-hero-weapon-icon{width:28px;height:28px;opacity:.65;transition:.14s}
.wiki-hero-weapon-label{font-size:12px;letter-spacing:.02em}
.wiki-hero-weapon.active{
  border-color:var(--gold-bright);color:var(--gold-bright);
  background:linear-gradient(180deg,rgba(217,164,65,.12),transparent)
}
.wiki-hero-weapon.active .wiki-hero-weapon-icon{opacity:1}

/* Titre barre : un filet, puis le libelle. La couleur porte la categorie —
   l'or pour ce que le heros est en permanence, le pourpre pour l'ultime. */
.wiki-section{display:flex;align-items:center;gap:10px;margin:18px 0 10px}
.wiki-section-rule{width:26px;height:1px;flex:none;background:currentColor}
.wiki-section-label{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase
}
.wiki-section-passif{color:var(--gold)}
.wiki-section-ultime{color:var(--crimson-bright)}
.wiki-section-normal{color:var(--muted)}

.wiki-skill{
  border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin:0 0 8px;
  background:var(--obsidian-2)
}
.wiki-skill-head{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
/* Le medaillon de competence, tel que le jeu l'affiche. Le fond sombre
   et le liseré evitent qu'une icone claire flotte sans attache. */
.wiki-skill-icon{
  width:34px;height:34px;flex:none;border-radius:8px;
  background:var(--vignette-fond,#0b0910);border:1px solid var(--line);padding:2px
}
/* La touche en pastille : Q, E, R se lisent d'un coup d'oeil, et « Passif »
   ou « Attaque sautee » gardent leur mot entier plutot qu'un pictogramme. */
.wiki-skill-kind{
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold-deep);border-radius:4px;
  padding:2px 7px;flex:none
}
.wiki-skill-name{
  font-family:var(--display);font-weight:600;font-size:15px;
  color:var(--parchment)
}
.wiki-skill-cd{
  margin-left:auto;font-size:11.5px;letter-spacing:.04em;color:var(--muted);
  font-variant-numeric:tabular-nums
}
.wiki-skill-desc{margin:8px 0 0;line-height:1.55}
/* Une description que le jeu ne publie pas : la note se distingue du texte
   d'une competence pour qu'on ne la lise pas comme une regle du jeu. */
.wiki-skill-absente{color:var(--muted);font-style:italic}

.wiki-fold{border-top:1px solid var(--line-soft);margin:12px 0 0;padding:4px 0 0}
.wiki-fold>summary{
  cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)
}
.wiki-fold>summary:hover{color:var(--gold)}
.wiki-fold[open]>summary{color:var(--gold)}
.wiki-pot{margin:8px 0 4px;padding-left:18px}
.wiki-pot li{margin:0 0 6px}
.wiki-pot-tier{font-weight:700;color:var(--gold);margin-right:6px}
/* Le renforcement auquel un palier de transcendance se debloque. Meme pastille
   que le palier de potentiel juste au-dessus : c'est la meme question posee au
   membre — a partir d'ou ce bonus existe-t-il. La largeur fixe aligne les trois
   paliers en colonne, « +5 » sous « +10 » sous « +14 ». */
.wiki-palier-seuil{
  display:inline-block;min-width:2.4em;font-weight:700;color:var(--gold);
  margin-right:6px;font-variant-numeric:tabular-nums
}
/* Le nom d'une transcendance passe sur sa propre ligne, au-dessus de sa
   description : ils se liraient sinon comme une seule phrase. Les noms sont
   longs — « Transcendance de puissance : Frappe mortelle » — et se
   ressemblent beaucoup d'un heros a l'autre. */
.wiki-transcendance-nom{display:block;color:var(--gold);margin-bottom:2px}
.wiki-stats{margin:8px 0 4px;padding:0;list-style:none}
/* Le repli se decide sur la LARGEUR REELLE du libelle, d'ou `flex-basis:auto`
   plutot qu'un forfait : avec 12em, « Defense crit. » renvoyait sa valeur a la
   ligne alors que les deux tenaient cote a cote. Un libelle court garde donc
   ses deux colonnes ; un libelle long fait basculer la valeur sous lui, ou
   `margin-left:auto` la garde a droite. `nowrap` protege la fourchette
   entiere, fleche comprise, pour qu'aucune valeur ne soit coupee en deux. */
.wiki-stat{
  display:flex;flex-wrap:wrap;gap:2px 12px;padding:5px 0;
  border-bottom:1px solid var(--line-soft)
}
.wiki-stat:last-child{border-bottom:0}
.wiki-stat-name{color:var(--muted);flex:1 1 auto;min-width:0}
.wiki-stat-value{
  font-variant-numeric:tabular-nums;color:var(--parchment);
  flex:0 0 auto;margin-left:auto;white-space:nowrap
}

/* Les armures gravees de la fiche de heros : la vignette a gauche, le nom et
   la transcendance qu'elle donne a droite. La liste remplace la rangee
   d'images seules — un membre doit voir QUELLE piece porte quel bonus. */
.wiki-gravees-note{
  margin:6px 0 10px;color:var(--muted);font-size:.85rem;line-height:1.4
}
.wiki-gravees{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wiki-gravee{display:flex;gap:12px;align-items:flex-start}
.wiki-gravee img{
  width:56px;height:56px;flex:0 0 56px;border-radius:8px;background:var(--vignette-fond,#0b0910);
  border:1px solid var(--line)
}
.wiki-gravee-corps{min-width:0;display:flex;flex-direction:column;gap:2px}
.wiki-gravee-nom{color:var(--parchment)}
/* Chaque tenue ouvre sa fiche. Le bouton garde l'allure du nom, souligne au
   survol et au focus pour dire qu'il mene quelque part. */
.wiki-gravee[data-fichier]{cursor:pointer}
button.wiki-gravee-nom{
  all:unset;cursor:pointer;font-weight:700;color:var(--parchment);
  min-height:24px;text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:3px;transition:text-decoration-color .15s
}
.wiki-gravee[data-fichier]:hover button.wiki-gravee-nom,
button.wiki-gravee-nom:focus-visible{text-decoration-color:var(--gold,currentColor)}
button.wiki-gravee-nom:focus-visible{outline:2px solid var(--gold,currentColor);outline-offset:2px}
.wiki-gravee-trans{display:block;font-size:.9rem;line-height:1.45}
/* L'arme de la transcendance : un reperage, pas un titre. */
.wiki-gravee-arme{
  display:block;color:var(--muted);font-size:.8rem;margin-bottom:2px
}

/* ---------- Fiche d'objet : arme, piece, armure gravee ---------- */
/* L'en-tete reprend la composition de la fiche de heros — vignette a gauche,
   identite a droite — mais SANS le losange : une arme n'est pas un portrait,
   et la faire pivoter couperait sa lame. */
.wiki-item-head{display:flex;gap:16px;align-items:center;margin:0 0 6px}
.wiki-item-frame{
  width:78px;height:78px;flex:none;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,#211d2b,#0d0b12);
  border:1px solid var(--gold-deep);border-radius:12px;
  box-shadow:0 0 22px -10px var(--gold)
}
.wiki-item-image{width:64px;height:64px;object-fit:contain;display:block}
.wiki-item-id{min-width:0}
.wiki-item-name{
  font-family:var(--display);font-size:23px;line-height:1.15;
  color:var(--parchment)
}
.wiki-item-chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.wiki-chip-fort{color:var(--gold-bright);border-color:var(--gold-deep)}
.wiki-item-note{margin:8px 0 4px;color:var(--muted);font-size:12.5px}

/* Les pastilles de niveau : le chiffre porte l'information, rien d'autre. */
.wiki-levels{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.wiki-level{
  min-width:34px;height:34px;padding:0 8px;
  background:var(--panel-2);color:var(--muted);
  border:1px solid var(--line);border-radius:9px;cursor:pointer;
  font-variant-numeric:tabular-nums;font-size:13px;transition:.14s
}
.wiki-level:hover{border-color:var(--gold-deep);color:var(--parchment)}
.wiki-level.active{
  border-color:var(--gold-bright);color:var(--ink);
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  font-weight:700
}

/* Les statistiques par rarete d'une arme : un bloc par grade. */
.wiki-grades{display:flex;flex-direction:column;gap:12px;margin:8px 0 4px}
.wiki-grade-title{
  margin:0;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold)
}

/* L'ensemble : son nom, ses paliers, puis ses pieces. */
.wiki-set{
  background:var(--panel-2);border:1px solid var(--line-soft);
  border-radius:12px;padding:12px 14px;margin:0 0 4px
}
.wiki-set-name{
  font-family:var(--display);font-size:17px;color:var(--gold-bright);
  margin:0 0 8px
}
.wiki-set-tier{margin:0 0 10px}
.wiki-set-count{
  display:inline-block;padding:2px 9px;border-radius:999px;
  background:rgba(217,164,65,.14);border:1px solid var(--gold-deep);
  color:var(--gold-bright);font-size:11.5px;letter-spacing:.05em
}
.wiki-set-text{margin:6px 0 0;line-height:1.55}
.wiki-set-pieces{
  display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 0;
  border-top:1px solid var(--line-soft);padding:12px 0 0
}
.wiki-set-piece{
  width:50px;height:50px;padding:0;cursor:pointer;
  background:var(--vignette-fond,#0b0910);border:1px solid var(--line);border-radius:8px;
  transition:.14s
}
.wiki-set-piece img{width:100%;height:100%;object-fit:contain;display:block}
.wiki-set-piece:hover{border-color:var(--gold-deep);transform:translateY(-2px)}
/* La piece courante n'est pas cliquable : elle marque ou l'on est. */
.wiki-set-piece.active{border-color:var(--gold-bright);cursor:default}
.wiki-set-piece.active:hover{transform:none}

/* Le heros d'une armure gravee : le seul chemin d'un objet vers un
   personnage, donc il doit se voir comme un lien. */
.wiki-linked-hero{
  display:flex;align-items:center;gap:11px;width:100%;padding:8px 12px 8px 8px;
  background:var(--panel-2);border:1px solid var(--line-soft);
  border-radius:12px;cursor:pointer;color:var(--parchment);
  text-align:left;transition:.14s
}
.wiki-linked-hero:hover{border-color:var(--gold-deep);color:var(--gold-bright)}
.wiki-linked-hero img{
  width:44px;height:44px;border-radius:8px;object-fit:cover;
  background:var(--vignette-fond,#0b0910);flex:none
}

@media (max-width:520px){
  .wiki-hero-name{font-size:24px}
  .wiki-hero-frame{width:66px;height:66px}
  .wiki-hero-portrait{width:96px;height:96px;margin:-15px 0 0 -15px}
  .wiki-hero-weapon{min-width:0;flex:1 1 0;padding:9px 6px}
  .wiki-item-name{font-size:20px}
  .wiki-item-frame{width:64px;height:64px}
  .wiki-item-image{width:52px;height:52px}
  .wiki-set{padding:10px 11px}
}

@media (prefers-reduced-motion:reduce){
  .wiki-hero-weapon,.wiki-hero-weapon-icon,.wiki-tile,.wiki-category,
  .wiki-level,.wiki-set-piece,.wiki-linked-hero{
    transition:none
  }
  .wiki-set-piece:hover{transform:none}
}