/* Section objets : catégories en tuiles, tableaux d'objets avec leur dessin dans sa case d'inventaire (.case-objet, site.css). */

/* Emplacement du dessin : largeur fixe (la plus grande case du jeu, 66 points, plus ses filets), pour que les noms s'alignent ;
   sans dessin, une case vide aux couleurs de la page. */
.emplacement { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 70px; }
.case-objet.vide { width: 44px; height: 44px; background: none; border: 1px dashed var(--bord); box-shadow: none; }

/* Index : recherche et tuiles des catégories. Un nom ne se coupe jamais entre deux lettres (« Braceletes », « Armaduras ») :
   la tuile laisse toujours au nom la place de son plus long mot, plus une marge pour les polices des téléphones. Deux
   colonnes sur téléphone, image plus petite ; une seule sous 340 px. */
.groupe h2 { margin-top: 22px; }
.tuiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 184px), 1fr)); gap: 10px; }
.tuiles a { height: 100%; display: flex; align-items: center; gap: 10px; min-height: 76px; padding: 10px; background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); color: var(--texte); font-weight: 600; text-decoration: none; }
.tuiles a:hover { border-color: var(--or); color: var(--brun); }
@media (max-width: 560px) {
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tuiles a { gap: 8px; min-height: 64px; padding: 8px; }
}
@media (max-width: 340px) { .tuiles { grid-template-columns: minmax(0, 1fr); } }
.resultats { list-style: none; margin: 0 0 16px; padding: 0; max-width: 520px; }
.resultats a { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-bottom: 1px solid #efe4d2; text-decoration: none; }
.resultats a:hover { background: #f3e7cf; }
.resultats small { color: var(--doux); white-space: nowrap; }

/* Catégories voisines : des pastilles qui passent à la ligne, comme le menu (une bande qui défilait sans signe coupait les
   libellés aux bords et cachait les dernières catégories). */
.categories { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.categories a { flex: none; font-size: 14px; padding: 5px 12px; border: 1px solid var(--bord); border-radius: 999px; background: var(--carte);
  color: var(--texte); text-decoration: none; white-space: nowrap; }
.categories a[aria-current] { background: var(--bleu); border-color: var(--bleu); color: #fff; }
@media (max-width: 760px) { .categories { gap: 5px; } .categories a { font-size: 13.5px; padding: 3px 10px; line-height: 20px; } }

/* Filtres : spec d'une classe et niveau. */
.reglages { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 12px; font-size: 14px; }
.reglages label { display: inline-flex; align-items: center; gap: 6px; }
/* Bord des champs à 3,3:1 sur la page (--bord-champ de site.css, WCAG 1.4.11) : la zone de saisie se voit. */
.reglages select, .reglages input { font: inherit; font-size: 16px; padding: 5px 8px; border: 1px solid var(--bord-champ); border-radius: 8px;
  background: #fffdf8; color: var(--texte); }
.reglages input { width: 5.5em; }

/* Tableau borné à la hauteur de l'écran (.defile-borne de site.css) : l'en-tête des colonnes reste visible ; à l'arrivée par
   une ancre, le script ramène le haut du tableau en haut de l'écran. Première colonne fixe pendant le défilement
   horizontal ; rayures tenues par le script après filtrage. */
.objets th, .objets td { padding: 6px 8px; }
/* En-têtes sur deux lignes au besoin (« Velocidade da arma » au-dessus d'un seul chiffre) : le tableau tient en largeur ;
   une ancre laisse la place d'un en-tête de deux lignes. */
.objets thead th { white-space: normal; vertical-align: bottom; }
.defile-borne { scroll-padding-top: 58px; }
.objets td { vertical-align: middle; }
.objets .fin { white-space: nowrap; }
.objets .ligne { display: block; }
.objets .doux { color: var(--doux); font-size: 12px; white-space: normal; }
.objets .spec { font-size: 13px; min-width: 150px; max-width: 260px; white-space: normal; }
.objets .spec .ligne { white-space: nowrap; }
.objets abbr { text-decoration: none; color: var(--doux); }
.objets .objet { display: flex; align-items: center; gap: 10px; }
.objets .nom { font-weight: 600; white-space: normal; min-width: 7em; max-width: 11em; }
.objets .nom .doux { font-weight: 400; }
/* Attaque d'une arme à plages : l'exemplaire au plus bas et l'exemplaire parfait, une ligne chacun. */
.objets .attaque .ligne, .objets .attaque .doux { white-space: nowrap; }
/* « Dropped by » : ligne discrète sous le nom, qui revient à la ligne entre deux monstres, jamais dans un nom (le plus long
   tient dans la largeur du nom de l'objet : le tableau ne s'élargit pas). */
.objets .lache { font-size: 12px; font-weight: 400; line-height: 1.35; margin-top: 2px; }
.objets .lache .monstres a, .objets .lache .paire { white-space: nowrap; }
.objets .lache .plus { font: inherit; font-size: 11px; line-height: 1.3; padding: 0 5px; margin-left: 2px; border: 1px solid var(--bord);
  border-radius: 999px; background: var(--carte); color: var(--brun); cursor: pointer; vertical-align: 1px; }
.objets .lache .plus:hover { border-color: var(--or); }
.objets .mains { vertical-align: -2px; margin-left: 2px; }
.objets thead th:first-child { left: 0; z-index: 2; }
.objets tbody td:first-child { position: sticky; left: 0; z-index: 1; background: var(--carte); box-shadow: 1px 0 0 #efe4d2; }
.objets tbody tr:nth-child(even) { background: var(--carte); }
.objets tbody tr.pair, .objets tbody tr.pair td:first-child { background: #fbf6ec; }
.objets tbody tr:hover, .objets tbody tr:hover td:first-child { background: #f3e7cf; }
.objets tbody tr:target, .objets tbody tr:target td:first-child, .objets tbody tr.cible, .objets tbody tr.cible td:first-child { background: #f6e1b0; }
@media (max-width: 760px) {
  .objets .nom { max-width: 8.5em; }
  /* Téléphone, objet avec sa ligne « Dropped by » : l'image flotte à gauche du nom, et les lignes qui passent sous elle
     prennent toute la largeur de la case (celle qu'elle avait, image et nom). Le dernier monstre et son « +n », trop larges
     à côté de l'image (Golden Wolverine +39), descendent ensemble sous elle au lieu de laisser « +n » seul sur sa ligne. */
  .objets .objet:has(.lache) { display: flow-root; width: calc(70px + 10px + 8.5em); }
  .objets .objet:has(.lache) > .emplacement { float: left; margin: 0 10px 2px 0; }
  .objets .objet:has(.lache) > .nom { display: block; max-width: none; min-width: 0; }
}

/* Menu des serveurs (comme celui des compétences) : il ne sert qu'avec le script de la page ; sans lui, la page montre la vue du
   premier serveur de la langue. Ce qui est propre à certains serveurs (vues, tuiles, catégories voisines) porte data-s : les
   règles de l'en-tête de page cachent ce qui n'est pas pour le serveur choisi. */
.choix-serveur { display: none; align-items: center; gap: 8px; margin: 0 0 10px; }
.js .choix-serveur { display: flex; }
.choix-serveur label { font-size: 14px; color: var(--doux); }
.choix-serveur select { min-width: 0; max-width: 100%; font: inherit; font-size: 15px; padding: 6px 10px; border: 1px solid var(--bord-champ); border-radius: 8px;
  background: #fffdf8; color: var(--texte); }
.vue-obj { min-width: 0; }