/* ===========================================================
   DOFORIA — complements de style propres au wiki.
   Ne redefinit rien de app.css : uniquement des utilitaires
   pour les fiches denses (effets, grades, filtres).
   =========================================================== */

/* Barre de filtres compacte au-dessus des listes */
.wk-filters{
  display:grid;gap:12px;align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  padding:16px 18px;margin-bottom:18px;
}
.wk-filters .field{margin-bottom:0}
.wk-filters .actions{display:flex;gap:8px}
.wk-range{display:flex;gap:8px;align-items:center}
.wk-range input{width:100%}
.wk-range span{color:var(--tx-3);font-size:.8rem}

/* Ligne de resume au-dessus d'un tableau */
.wk-count{color:var(--tx-3);font-size:.85rem;font-family:var(--f-mono)}

/* Liste d'effets d'un objet / d'un sort */
.wk-effects{list-style:none;padding:0;margin:0}
.wk-effects li{
  display:flex;align-items:baseline;gap:8px;
  padding:7px 0;border-bottom:1px solid var(--rule);font-size:.94rem;
}
.wk-effects li:last-child{border-bottom:none}
.wk-effects .neg{color:var(--blood)}
.wk-effects .pos{color:var(--jade)}
.wk-effects .raw{color:var(--tx-2);font-style:italic}

/* Grille de caracteristiques (fiche objet, fiche monstre) */
.wk-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.wk-specs div{background:linear-gradient(180deg,#1c1d19,var(--surface));padding:12px 15px;transition:background var(--med)}
.wk-specs div:hover{background:linear-gradient(180deg,#23241e,var(--surface-2))}
.wk-specs .k{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3)}
.wk-specs .v{font-weight:600;color:var(--tx);font-variant-numeric:tabular-nums}

/* Cartes de section sur l'accueil du wiki */
.wk-card{
  display:flex;flex-direction:column;padding:22px 24px;height:100%;position:relative;
}
.wk-card h3{
  color:var(--gold);margin-bottom:7px;display:flex;align-items:center;gap:9px;
}
/* chevron discret qui avance au survol */
.wk-card h3::after{
  content:'';width:7px;height:7px;flex:0 0 auto;
  border-right:1.5px solid var(--gold-2);border-top:1.5px solid var(--gold-2);
  transform:rotate(45deg);opacity:.5;
  transition:transform var(--med),opacity var(--med);
}
.wk-card:hover h3::after{opacity:1;transform:rotate(45deg) translate(2px,-2px)}
.wk-card p{color:var(--tx-2);font-size:.9rem;margin:0}
.wk-card .n{
  font-family:var(--f-mono);font-size:.75rem;color:var(--gold-2);
  margin-top:auto;padding-top:14px;display:block;
  letter-spacing:.06em;
}

/* Barre de recherche pleine largeur */
.wk-search{display:flex;gap:10px;max-width:640px}
.wk-search input{flex:1}

/* Petites listes en colonnes (pieces de panoplie, ingredients) */
.wk-cols{columns:2;column-gap:26px}
@media (max-width:700px){ .wk-cols{columns:1} }
.wk-cols li{break-inside:avoid}

/* Bloc palier de panoplie */
.wk-tier{border:1px solid var(--rule);border-radius:var(--radius-sm);padding:14px 16px;background:var(--surface-2)}
.wk-tier h4{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}

/* Taux de drop */
.wk-rates{display:flex;gap:5px;flex-wrap:wrap}
.wk-rates b{font-family:var(--f-mono);font-size:.74rem;font-weight:500;color:var(--tx-2);background:var(--surface-2);border-radius:4px;padding:1px 6px}
.wk-rates b.z{color:var(--tx-3);opacity:.45}

/* Etat vide compact a l'interieur d'une carte */
.empty.tight{padding:26px 16px}

/* --- Vignettes du jeu -------------------------------------------------
   Images extraites des archives du client (public/jeu/), servies avec un
   cache d'un an. Les fichiers sont TOUS carres (objets 60x60, monstres
   80x80, sorts 44x44) : un cote unique suffit donc en width/height, sans
   jamais deformer.

   `width` et `height` sont poses en dur sur chaque <img> dans les vues, pas
   seulement ici : c'est ce que lit le navigateur AVANT le CSS pour reserver
   la place. Sans eux la ligne saute au chargement — defaut releve par
   l'audit SEO. Le CSS ne fait que confirmer la taille.

   `tbody td` fait deja padding:12px 15px et vertical-align:middle : une
   vignette de 28px se loge dans la hauteur de ligne existante sans la faire
   grandir. Au-dela, les listes respirent visiblement.                     */
.wk-icone {
  display: block;
  flex: none;
  object-fit: contain;
  image-rendering: auto;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--lip);
}

/* Vignette de liste : collee au nom, dans la meme cellule. */
.wk-nom {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wk-nom .wk-icone { width: 28px; height: 28px; }

/* Vignette d'en-tete de fiche. `.sec-title` est un flex vertical : on ne
   peut pas y poser l'image a cote du titre sans ce conteneur horizontal. */
.wk-entete {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.wk-entete > .wk-icone { width: 72px; height: 72px; padding: 4px; }
.wk-entete > div { min-width: 0; }

@media (max-width: 560px) {
  .wk-entete { gap: 12px; }
  .wk-entete > .wk-icone { width: 52px; height: 52px; }
}