/* ==========================================================================
   HouseTradery — composants
   ========================================================================== */

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(15,15,16,.82);
  backdrop-filter: blur(10px);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 66px;
}
.brand { display: flex; align-items: center; gap: 9px; }
/* Le logo prend la couleur de marque par `currentColor` : un seul fichier SVG
   pour l'en-tête sombre, le pied de page et le futur fond clair. */
/* `flex: 0 0 auto` : .brand est un conteneur flex, et un SVG y est un élément
   flexible comme un autre. Sans ça, dès que l'en-tête est à l'étroit (mobile,
   bouton « Vendre une maison » déplié), le navigateur rétrécit le logo au lieu
   des boutons — mesuré à 12 px au lieu de 26. */
.brand-mark {
  flex: 0 0 auto;
  width: 30px; height: auto;
  display: block;
  color: var(--brand);
}
.brand:hover .brand-mark { color: var(--brand-strong); }
.brand-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.brand-name span { color: var(--brand-strong); }

.main-nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--text-dim);
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  transition: background .12s ease, color .12s ease;
}
.nav-link:hover { background: var(--bg-deep); color: var(--text); }
/* État actif en neutre : il est juste à côté du CTA corail, il ne doit pas
   lui disputer l'attention. */
.nav-link.active { background: var(--bg-deep); color: var(--text); font-weight: 600; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.user-menu { position: relative; }
.avatar-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border-strong);
  background: var(--bg-deep);
  display: grid; place-items: center;
  transition: border-color .12s ease;
  padding: 2px;
}
.avatar-btn:hover { border-color: var(--brand); }
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
.avatar-fallback { font-family: var(--font-display); font-weight: 700; color: var(--text-dim); }

.user-dropdown {
  position: absolute;
  right: 0; top: calc(100% + 10px);
  min-width: 216px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 7px;
  z-index: 50;
}
.dd-head { padding: 9px 12px 11px; border-bottom: 1px solid var(--border); margin-bottom: 5px; }
.dd-head strong { display: block; font-size: 14.5px; }
.dd-head span { display: block; font-size: 12px; color: var(--text-faint); word-break: break-all; }
.user-dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-dim);
}
.user-dropdown a:hover { background: var(--bg-deep); color: var(--text); }
.user-dropdown .dd-danger { color: var(--danger); }
.user-dropdown .dd-danger:hover { background: var(--danger-soft); }

@media (max-width: 760px) {
  .header-inner { height: 60px; gap: 10px; }
  .main-nav { display: none; }
  .brand-name { font-size: 17px; }
  .brand-mark { width: 26px; }
  .header-actions .btn { font-size: 13.5px; padding: 8px 13px; }
}

/* Barre de navigation mobile, en bas de l'écran */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 45;
  background: rgba(15,15,16,.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
.mobile-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 5px 0;
  border-radius: var(--radius-sm);
}
.mobile-nav a svg { display: block; }
.mobile-nav a.active { color: var(--brand-strong); }
@media (max-width: 760px) {
  .mobile-nav { display: flex; }
  body { padding-bottom: 62px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  padding: 26px 0 34px;
  margin-top: 20px;
}
.safety-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.safety-icon { font-size: 20px; line-height: 1.3; }
.safety-note p { font-size: 13.5px; color: var(--text-dim); }
.footer-links {
  display: flex; flex-wrap: wrap; gap: 18px;
  font-size: 13.5px; color: var(--text-dim);
}
.footer-links a:hover { color: var(--brand-strong); }
.footer-disclaimer { margin-top: 12px; font-size: 12px; color: var(--text-faint); }

/* ==========================================================================
   Hero (page d'accueil)
   ========================================================================== */
.hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 30px 28px;
  margin-bottom: 24px;
}
.hero h1 { font-size: 32px; margin-bottom: 8px; }
.hero p { color: var(--text-dim); max-width: 60ch; font-size: 15.5px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.hero-stats { display: flex; gap: 26px; margin-top: 22px; flex-wrap: wrap; }
.hero-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
}
.hero-stat span { font-size: 12.5px; color: var(--text-dim); }
@media (max-width: 720px) {
  .hero { padding: 22px 18px; }
  .hero h1 { font-size: 25px; }
}

/* ==========================================================================
   Filtres
   ========================================================================== */
.filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
/* Contrôles compacts : la barre de filtres ne doit pas repousser les maisons
   sous la ligne de flottaison. */
.filters-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters-row .select, .filters-row .input {
  width: auto; min-width: 138px; flex: 0 1 auto;
  padding: 8px 12px; font-size: 14px; border-radius: var(--radius);
}
.filters-row .select { padding-right: 32px; background-position: right 11px center; }
/* Le champ de recherche prend la place qui reste : c'est le contrôle le plus utilisé. */
.filters-row .grow { flex: 3 1 250px; min-width: 190px; }
.filter-toggle { display: none; }

.tag-scroller {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 9px 2px 1px;
  /* La barre de défilement reprend l'aplat des pastilles qu'elle fait défiler,
     au lieu du gris de bordure : elle se lit comme une pastille couchée. */
  scrollbar-width: thin;
  scrollbar-color: var(--bg-deep) transparent;
  /* Fondu à droite : indique qu'il reste des tags à faire défiler. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
}
.tag-scroller::-webkit-scrollbar { height: 6px; }
.tag-scroller::-webkit-scrollbar-track { background: transparent; }
.tag-scroller::-webkit-scrollbar-thumb {
  background: var(--bg-deep);
  border-radius: var(--radius-pill);
}
.tag-scroller::-webkit-scrollbar-thumb:hover { background: var(--fill-active); }
.tag-pill {
  flex: 0 0 auto;
  font-size: 13.5px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: var(--bg-deep);
  color: var(--text-dim);
  border: 1.5px solid transparent;
  transition: all .12s ease;
}
.tag-pill:hover { color: var(--text); }
/* Filtre actif = pilule sombre, comme les onglets. Le corail reste à l'action. */
.tag-pill.active { background: var(--fill-active); color: #fff; }

.active-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.active-filters .chip { padding-right: 6px; }
.chip-x {
  display: inline-grid; place-items: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  font-size: 11px; line-height: 1;
}
.chip-x:hover { background: rgba(255,255,255,.24); }

@media (max-width: 760px) {
  .filter-toggle { display: inline-flex; }
  .filters[data-collapsed="1"] { display: none; }
  .filters-row .select, .filters-row .input { width: 100%; min-width: 0; }
  .filters-row .grow { flex: 1 1 100%; }
}

/* ==========================================================================
   Grille d'annonces
   ========================================================================== */
.house-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
@media (max-width: 900px) { .house-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .house-grid { grid-template-columns: 1fr; } }

.house-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: background .15s ease;
}
/* Pas de bordure, pas d'ombre, pas de soulèvement : la carte s'éclaircit
   simplement au survol. C'est toute la sobriété de la maquette. */
.house-card:hover { background: var(--surface-2); }
.house-cover {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-deep);
  overflow: hidden;
}
.house-cover img { width: 100%; height: 100%; object-fit: cover; }
.house-cover .cover-badges {
  position: absolute; top: 10px; left: 10px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.cover-badges .chip {
  background: rgba(15,15,16,.78);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  font-size: 12px;
}
.cover-count {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}
.house-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.house-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* « Looking for » : pastilles colorées par rareté */
.house-lf {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
  min-height: 24px;
}
.house-lf .lf-plain { font-size: 13px; color: var(--text-faint); }

.rchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-dim);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Le point de rareté est la seule couleur : le texte reste lisible. */
.rchip::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rc, var(--r-common));
  flex: 0 0 auto;
}
.rchip.more { color: var(--text-faint); }
.rchip.more::before { display: none; }

.rchip.rarity-common     { --rc: var(--r-common); }
.rchip.rarity-uncommon   { --rc: var(--r-uncommon); }
.rchip.rarity-rare       { --rc: var(--r-rare); }
.rchip.rarity-ultra_rare { --rc: var(--r-ultra); }
.rchip.rarity-legendary  { --rc: var(--r-legendary); color: var(--text); }
.house-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-faint);
}
.seller { display: flex; align-items: center; gap: 7px; min-width: 0; }
.seller img, .seller .avatar-fallback {
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover; background: var(--bg-deep);
  display: grid; place-items: center; font-size: 11px;
}
.seller b {
  font-size: 13px; font-weight: 700; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==========================================================================
   Page annonce
   ========================================================================== */
.listing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
@media (max-width: 900px) { .listing-layout { grid-template-columns: 1fr; gap: 20px; } }

/* Titre de l'annonce, au-dessus de la galerie */
.listing-head { margin-bottom: 14px; }
.listing-head h1 { margin-bottom: 10px; }

.gallery-main {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(15,15,16,.78);
  display: grid; place-items: center;
  font-size: 17px; color: #fff;
}
.gallery-nav:hover { background: rgba(0,0,0,.9); }
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.gallery-thumbs button {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--bg-deep);
}
.gallery-thumbs button.active { border-color: var(--brand); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.92);
  display: grid; place-items: center;
  padding: 24px;
}
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: var(--radius); }
.lightbox-close {
  position: absolute; top: 18px; right: 20px;
  color: #fff; font-size: 30px; line-height: 1;
}

.listing-side { position: sticky; top: 86px; }
@media (max-width: 900px) { .listing-side { position: static; } }

.side-block { padding: 20px; }
.side-block + .side-block { margin-top: 16px; }
.side-block h3 { margin-bottom: 12px; }

.want-list { display: flex; flex-direction: column; gap: 8px; }
.want-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.want-item .pet-icon { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; background: var(--bg-deep); }
.want-item .pet-name { font-weight: 700; font-size: 14px; }
.want-item .pet-meta { font-size: 12px; color: var(--text-dim); }
.want-qty {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-dim);
}

.rarity-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--r-common); flex: 0 0 auto;
}
/* Ces règles doivent rester CONFINÉES à la puce. Sans le préfixe
   `.rarity-dot`, elles peignaient un aplat doré ou violet sur tout élément
   portant la classe — pastilles de texte comprises, d'où des fonds criards et
   un contraste catastrophique. */
.rarity-dot.rarity-common     { background: var(--r-common); }
.rarity-dot.rarity-uncommon   { background: var(--r-uncommon); }
.rarity-dot.rarity-rare       { background: var(--r-rare); }
.rarity-dot.rarity-ultra_rare { background: var(--r-ultra); }
.rarity-dot.rarity-legendary  { background: var(--r-legendary); }

.seller-card { display: flex; align-items: center; gap: 12px; }
.seller-card .avatar-lg {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; background: var(--bg-deep);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; color: var(--text-dim);
}
.seller-card .name { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.rep-line { font-size: 13px; color: var(--text-dim); }

/* ----- Badges ------------------------------------------------------------ */
/* Trois rôles, trois couleurs, une seule forme : ce qui distingue un badge d'un
   autre doit être la couleur et l'icône, pas la taille ou le dessin — sinon on
   ne peut plus les comparer d'un coup d'œil.

   Le vert est exclu : c'est l'accent du site, porté par les boutons d'action.
   Un badge vert entrerait en concurrence avec le bouton « Faire une offre » à
   quelques centimètres de là. */
.badge-role {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 800;
  padding: 3px 9px; border-radius: var(--radius-pill);
  /* Une pastille qui passe à la ligne cesse d'en être une. Les libellés
     traduits sont plus longs que l'anglais (« Fondateur »), donc la règle
     compte : c'est la colonne qui s'élargit, jamais le badge qui se casse. */
  white-space: nowrap;
}
.badge-verified { background: var(--sky-soft);   color: var(--sky); }
.badge-creator  { background: var(--clay-soft);  color: var(--clay); }
.badge-founder  { background: var(--honey-soft); color: var(--honey); }

/* L'écusson prend la couleur du badge par `currentColor` : rien à redéclarer
   ici, et impossible qu'une couleur de trait dérive de celle du libellé. */
.badge-mark { flex: 0 0 auto; display: block; }
.badge-role .badge-mark { width: 14px; height: 14px; }

/* Version compacte : derrière un pseudo, dans une liste ou une carte, il ne
   reste que l'écusson. Il hérite de la même couleur, sans l'aplat — une pastille
   pleine à cette taille ferait une tache.
   Taille en `em` et non en pixels : le même badge suit le pseudo d'un titre de
   profil comme celui d'une ligne de liste, sans qu'aucune vue n'ait à choisir
   une taille. Le décalage vertical le pose sur la hauteur d'x plutôt que sur la
   ligne de base, là où l'œil l'attend à côté d'un nom. */
.badge-tick {
  display: inline-block;
  line-height: 1;
  background: none;
  padding: 0;
  vertical-align: -0.16em;
}
.badge-tick .badge-mark { width: 1.05em; height: 1.05em; }
.badge-tick.badge-verified { color: var(--sky); }
.badge-tick.badge-creator  { color: var(--clay); }
.badge-tick.badge-founder  { color: var(--honey); }

/* Signalements confirmés. Volontairement dans la famille des badges, et
   volontairement DIFFÉRENT d'eux : même gabarit de pastille pour se lire au
   même endroit et d'un coup d'œil, mais le rouge d'alerte du site et pas une
   des trois teintes de badge — celles-là disent « c'est bien lui », celle-ci
   dit l'inverse, elles ne doivent jamais se confondre. */
.report-flag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 800;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--danger-soft); color: var(--danger);
  white-space: nowrap;
}

/* Légende de /safety : le badge et son explication sur une ligne.
   Grille et non flex : les trois libellés n'ont pas la même longueur, et en
   flex les explications démarraient à trois abscisses différentes — ce qui
   rendait justement les trois badges plus durs à comparer. */
/* La grille est portée par la LISTE, pas par chaque <li> : trois grilles
   séparées dimensionneraient leur colonne chacune de leur côté, et les
   explications repartiraient à trois abscisses différentes. `display: contents`
   sur le <li> fait remonter le badge et son texte comme cellules de l'unique
   grille — c'est ce qui aligne les trois. */
.badge-legend {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px 14px;
  align-items: start;
}
.badge-legend li { display: contents; }
.badge-legend .badge-role { margin-top: 1px; }
@media (max-width: 520px) {
  /* Sous 520 px, la colonne du badge ne laisse plus assez de place au texte. */
  .badge-legend { grid-template-columns: 1fr; gap: 4px; }
  .badge-legend li + li .badge-role { margin-top: 10px; }
}

.meta-list { font-size: 14px; }
.meta-list div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; }
.meta-list div + div { border-top: 1px dashed var(--border); }
.meta-list dt, .meta-list .k { color: var(--text-dim); }
.meta-list .v { font-weight: 700; text-align: right; display: flex; align-items: center; gap: 7px; justify-content: flex-end; }
.inline-icon { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }

/* ==========================================================================
   Sélecteur de pets (wishlist + composition d'offre)
   ========================================================================== */
/* ----- Catalogue : grille de tuiles ------------------------------------- */
.pet-picker {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.pet-picker-head {
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.pet-picker-head .input { width: 100%; }
.rarity-filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.rarity-filters button {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--bg-deep);
  color: var(--text-dim);
  border: 1.5px solid transparent;
}
.rarity-filters button:hover { color: var(--text); }
.rarity-filters button.active { background: var(--fill-active); color: #fff; }
.rarity-filters button.active .rarity-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }

.pet-grid {
  max-height: 330px;
  overflow-y: auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 8px;
}
.pet-tile {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 6px 8px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  background: var(--surface-2);
  text-align: center;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.pet-tile:hover { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-1px); }
/* Le point fort du correctif : l'image est bornée, quelle que soit sa taille source. */
.pet-tile .pet-art {
  width: 100%; height: 54px;
  object-fit: contain;
  /* Pas de `image-rendering: -webkit-optimize-contrast` : c'était un pansement
     sur des icônes stockées en 80 px. Maintenant qu'elles gardent leur
     résolution native, le lissage du navigateur rend mieux qu'un contraste
     forcé, qui faisait ressortir les escaliers sur les rendus 3D. */
}
.pet-tile .pet-art-empty {
  width: 100%; height: 54px;
  display: grid; place-items: center;
  font-size: 22px; color: var(--text-faint);
}
.pet-tile .pet-name {
  font-size: 12px; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pet-tile .rarity-dot { width: 7px; height: 7px; }
.pet-empty { grid-column: 1 / -1; padding: 24px 12px; text-align: center; color: var(--text-dim); }

/* ----- Sélection : une carte compacte par pet ---------------------------- */
.selected-pets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.selected-pet {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
}
.selected-pet .pet-art { width: 52px; height: 52px; object-fit: contain; }
.selected-pet .pet-art-empty { width: 52px; height: 52px; display: grid; place-items: center; }
.selected-pet .sp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.selected-pet .pet-name {
  font-weight: 700; font-size: 14px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.selected-pet .sp-remove {
  margin-left: auto; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; color: var(--text-faint);
  background: var(--bg-deep);
}
.selected-pet .sp-remove:hover { background: var(--danger-soft); color: var(--danger); }
.sp-controls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.variant-group { display: inline-flex; gap: 3px; background: var(--bg-deep); border-radius: var(--radius-pill); padding: 2px; }
.variant-btn {
  font-size: 11.5px; font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  color: var(--text-dim);
  white-space: nowrap;
}
.variant-btn:hover { color: var(--text); }
.variant-btn.active { background: var(--lilac); color: var(--on-brand); }

.flag-btn {
  font-size: 11.5px; font-weight: 800;
  min-width: 27px; height: 25px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-deep);
  color: var(--text-faint);
}
.flag-btn:hover { color: var(--text); }
.flag-btn.active { background: var(--sky-fill); color: var(--on-brand); }

.qty-stepper {
  display: inline-flex; align-items: center;
  margin-left: auto;
  background: var(--bg-deep);
  border-radius: var(--radius-pill);
  padding: 2px;
}
.qty-stepper button {
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 14px; font-weight: 700; line-height: 1;
  color: var(--text-dim);
}
.qty-stepper button:hover { background: var(--surface); color: var(--text); }
.qty-stepper .qty-value {
  min-width: 24px; text-align: center;
  font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .pet-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); max-height: 290px; }
  .selected-pets { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Formulaire d'annonce
   ========================================================================== */
.form-layout { max-width: 720px; margin: 0 auto; }
.form-step { padding: 22px; margin-bottom: 18px; }
.form-step-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.step-num {
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--brand-fill); color: var(--on-brand);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.form-step-head h2 { font-size: 18px; }

/* ----- Interrupteurs (réglages de notifications) -------------------------
   La case native reste en place, simplement rendue invisible : elle garde le
   focus clavier, l'espace pour cocher et la lecture d'écran. Ce qu'on dessine
   n'est que son apparence. */
.switch-row {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 0; border-top: 1px solid var(--border);
}
.switch-row:first-child { border-top: 0; }
.switch-row b { display: block; font-size: 14.5px; }
.switch-row .hint { display: block; margin-top: 2px; }

.switch { position: relative; flex: 0 0 auto; margin-top: 2px; line-height: 0; }
.switch input {
  position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
/* Flex, et l'espace autour du rond en `padding` du rail — pas en `margin` sur
   le rond. Avec une marge, le rail n'ayant ni bordure ni padding, la marge
   haute FUSIONNE avec son bord : elle sort du rail au lieu de pousser le rond
   vers le bas, et le rond se colle en haut. C'est le rail entier qui
   descendait de 3 px, pas le rond qui montait. */
.switch-track {
  display: flex;
  align-items: center;
  width: 42px; height: 24px;
  padding: 0 3px;
  border-radius: var(--radius-pill);
  background: var(--bg-deep);
  transition: background .15s ease;
}
.switch-track::after {
  content: '';
  width: 18px; height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform .15s ease, background .15s ease;
}
.switch input:checked + .switch-track { background: var(--brand-fill); }
.switch input:checked + .switch-track::after {
  transform: translateX(18px);
  background: var(--on-brand);
}
.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--brand-strong);
  outline-offset: 2px;
}

.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  padding: 30px 20px;
  text-align: center;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--brand); background: var(--brand-soft); }
.dropzone-emoji { font-size: 32px; margin-bottom: 6px; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.photo-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-deep);
  cursor: grab;
}
.photo-item img { width: 100%; height: 100%; object-fit: cover; }
.photo-item.dragging { opacity: .45; }
.photo-item .photo-remove {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(15,15,16,.78);
  box-shadow: var(--shadow-sm);
  display: grid; place-items: center;
  font-size: 13px; color: var(--danger);
}
.photo-item .cover-flag {
  position: absolute; bottom: 6px; left: 6px;
  background: var(--brand-fill); color: var(--on-brand);
  font-size: 10.5px; font-weight: 800;
  padding: 2px 8px; border-radius: var(--radius-pill);
}
.photo-item .photo-progress {
  position: absolute; inset: 0;
  background: rgba(15,15,16,.72);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: var(--text-dim);
}

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.choice {
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 13px 15px;
  text-align: left;
  transition: all .12s ease;
}
.choice:hover { border-color: var(--brand); }
.choice.active { border-color: var(--brand); background: var(--brand-soft); }
.choice b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; }
.choice span { font-size: 12.5px; color: var(--text-dim); }

.tag-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-check { position: relative; }
.tag-check input { position: absolute; opacity: 0; pointer-events: none; }
.tag-check span {
  display: inline-block;
  font-size: 13.5px; font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-deep);
  color: var(--text-dim);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all .12s ease;
}
.tag-check input:checked + span { background: var(--fill-active); color: #fff; border-color: transparent; }
.tag-check input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }

.form-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 4px;
}
@media (max-width: 560px) {
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }
}

/* ==========================================================================
   Offres
   ========================================================================== */
.tabs { display: flex; gap: 6px; margin-bottom: 20px; }
.tab {
  font-family: var(--font-display);
  font-weight: 600; font-size: 15px;
  padding: 9px 17px;
  border-radius: var(--radius-pill);
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--fill-active); color: #fff; border-color: transparent; }

.offer-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px;
  margin-bottom: 12px;
}
.offer-row .thumb {
  width: 74px; height: 60px; border-radius: var(--radius-sm);
  object-fit: cover; background: var(--bg-deep); flex: 0 0 auto;
}
.offer-row .info { min-width: 0; flex: 1; }
.offer-row .info b { display: block; font-size: 15px; font-family: var(--font-display); font-weight: 600; }
.offer-row .info span { font-size: 13px; color: var(--text-dim); }
.offer-row .status { flex: 0 0 auto; }
@media (max-width: 560px) {
  .offer-row { flex-wrap: wrap; }
  .offer-row .status { width: 100%; }
}

.status-pending   { background: var(--bg-deep); color: var(--honey); }
.status-accepted  { background: var(--bg-deep); color: var(--brand); }
.status-declined  { background: var(--bg-deep); color: var(--danger); }
.status-withdrawn { background: var(--bg-deep);    color: var(--text-dim); }
.status-cancelled { background: var(--bg-deep);    color: var(--text-dim); }
.status-completed { background: var(--bg-deep); color: var(--plum); }

.trade-panel {
  background: var(--surface);
  border: 0;
}
.trade-steps { counter-reset: step; margin-top: 12px; }
.trade-steps li {
  position: relative;
  padding: 9px 0 9px 34px;
  font-size: 14.5px;
}
.trade-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: 8px;
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--brand-fill); color: var(--on-brand);
  font-size: 12px; font-weight: 800;
  display: grid; place-items: center;
}
.username-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 15px;
  margin-top: 12px;
}
.username-box .u {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  /* La boîte sert aussi à afficher une adresse de profil complète : sur un petit
     écran elle doit pouvoir se couper plutôt que déborder du conteneur. */
  min-width: 0; overflow-wrap: anywhere;
}

/* Fil de discussion : uniquement des phrases pré-écrites */
.thread { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 14px; }
.msg { max-width: 78%; display: flex; flex-direction: column; gap: 3px; }
.msg .bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14.5px;
  font-weight: 600;
  background: var(--bg-deep);
  color: var(--text);
}
.msg time { font-size: 11.5px; color: var(--text-faint); padding: 0 6px; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
/* Bulles « moi » en bleu ciel : une grande surface corail volerait l'attention
   des vrais boutons d'action de la page. */
.msg.mine .bubble { background: var(--sky-fill); color: var(--on-brand); border-bottom-right-radius: 5px; }
.msg.theirs .bubble { border-bottom-left-radius: 5px; }

.reply-bar { border-top: 1px solid var(--border); padding-top: 14px; }
.reply-cats { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.reply-cat {
  font-size: 12.5px; font-weight: 800;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--bg-deep); color: var(--text-dim);
}
.reply-cat.active { background: var(--fill-active); color: #fff; }
.reply-options { display: flex; flex-wrap: wrap; gap: 8px; }
.reply-option {
  font-size: 13.5px; font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  color: var(--text);
  text-align: left;
}
.reply-option:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }

/* Le panneau le plus fourni compte onze phrases. Sur un écran large elles
   tiennent en quelques rangées et la place est libre en dessous : rien à
   plafonner, une barre de défilement y serait gratuite. Au téléphone, les
   mêmes phrases empilent une dizaine de lignes et repoussent le fil de
   discussion hors de l'écran — là, on plafonne. */
@media (max-width: 560px) {
  .reply-options { max-height: 240px; overflow-y: auto; }
}

/* ==========================================================================
   Profil
   ========================================================================== */
.profile-head {
  display: flex; align-items: center; gap: 18px;
  padding: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.profile-head .avatar-xl {
  width: 78px; height: 78px; border-radius: 50%;
  object-fit: cover; background: var(--bg-deep);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--text-dim);
  flex: 0 0 auto;
}
.profile-head h1 { font-size: 26px; }
.profile-stats { display: flex; gap: 22px; margin-top: 8px; flex-wrap: wrap; }
.profile-stats b { font-family: var(--font-display); font-size: 17px; }
.profile-stats span { font-size: 12.5px; color: var(--text-dim); display: block; }
/* ----- Sélecteur de langue ------------------------------------------------ */
.lang-switch { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.lang-switch a { color: var(--text-faint); }
.lang-switch a:hover { color: var(--text); }
.lang-current { color: var(--text); font-weight: 600; }
@media (max-width: 620px) { .lang-switch { margin-left: 0; width: 100%; } }

/* ----- Historique des trades --------------------------------------------- */
/* Sert à la fois dans la colonne étroite d'une annonce et pleine largeur sur un
   profil : tout est en flex qui passe à la ligne, aucune largeur fixe. */
.trade-list { display: flex; flex-direction: column; }
.trade-row {
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.trade-row:first-child { border-top: 0; padding-top: 2px; }
/* Avec vignette : deux colonnes. `min-width: 0` sur le corps, sinon un long
   titre de maison pousse la ligne au-delà du conteneur au lieu de se couper. */
.trade-row.has-thumb { display: flex; gap: 12px; align-items: flex-start; }
.trade-body { flex: 1; min-width: 0; }
.trade-thumb {
  flex: 0 0 auto;
  width: 76px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-deep);
}
.trade-thumb img { width: 100%; height: 100%; object-fit: cover; }
.trade-row.has-thumb:hover .trade-thumb img { opacity: .88; }
@media (max-width: 480px) { .trade-thumb { width: 60px; } }
.trade-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.trade-house { font-weight: 600; font-size: 14.5px; }
.trade-house:hover { color: var(--brand); }
.trade-when {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-faint);
  white-space: nowrap;
}
.trade-parties {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-dim);
  margin-top: 3px;
}
.trade-parties a { font-weight: 600; color: var(--text); }
.trade-parties a:hover { color: var(--brand); }
.trade-verb, .trade-arrow { color: var(--text-faint); }

.trade-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.trade-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px 4px 5px;
  border-radius: var(--radius-pill);
  background: var(--bg-deep);
  font-size: 12.5px; font-weight: 600;
}
.trade-item img { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.trade-item .rarity-dot { margin-left: 4px; }
.trade-house-mark { margin-left: 3px; }
.trade-empty { font-size: 12.5px; color: var(--text-faint); }

/* Pendule locale : rien de plus qu'une statistique de plus dans la rangée.
   Le fuseau n'apparaît nulle part, seulement l'heure. */
.local-clock .lc-moon { font-style: normal; }
.local-clock .lc-moon[hidden] { display: none; }

.profile-head .actions { margin-left: auto; display: flex; gap: 8px; }
@media (max-width: 560px) { .profile-head .actions { margin-left: 0; width: 100%; } }

/* ==========================================================================
   Login
   ========================================================================== */
.auth-card {
  max-width: 400px;
  margin: 26px auto;
  padding: 30px;
  text-align: center;
}
.auth-card h1 { font-size: 25px; margin-bottom: 6px; }
.auth-card > p { color: var(--text-dim); margin-bottom: 22px; }
.auth-emoji { font-size: 40px; margin-bottom: 8px; }
.auth-card .field { text-align: left; }
.auth-alt { margin-top: 18px; font-size: 13.5px; color: var(--text-dim); }
.auth-alt button { color: var(--brand-strong); font-weight: 800; }

/* Le champ-piège du formulaire de connexion (auth_honeypot_field()).
   Sorti de l'écran, et surtout PAS `display: none` : les robots un peu sérieux
   ignorent ce qui est explicitement masqué, alors qu'un champ simplement
   déplacé reste un champ ordinaire pour qui ne rend pas les styles.
   `position: absolute` sans parent positionné : le point de référence est la
   page, donc -9999px le sort bien du cadre quelle que soit la carte. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Admin
   ========================================================================== */
.admin-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-table { font-size: 14px; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; }
.admin-table th {
  text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: var(--text-dim); padding: 11px 14px; background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.admin-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
/* Menu compact dans une cellule : la hauteur d'un champ de formulaire ferait
   doubler celle de la ligne. */
.admin-table .select-sm {
  width: auto;
  padding: 5px 30px 5px 9px;
  font-size: 13px;
  background-position: right 9px center;
}
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }

/* ==========================================================================
   Modale
   ========================================================================== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.68);
  display: grid; place-items: center;
  padding: 20px;
}
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px;
}
.modal h2 { margin-bottom: 6px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
@media (max-width: 560px) {
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
}

/* ==========================================================================
   Divers
   ========================================================================== */
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 30px; }
.pagination a, .pagination span {
  min-width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  font-weight: 700; font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 0 12px;
}
.pagination a:hover { border-color: var(--brand); color: var(--brand-strong); }
.pagination .current { background: var(--fill-active); color: #fff; border-color: transparent; }

.toast-host { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: #f4f4f5; color: #0f0f10;
  padding: 11px 20px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow-lg);
  animation: toast-in .2s ease;
}
.toast.err { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.prose { font-size: 15px; color: var(--text-dim); max-width: 72ch; }
.prose h2 { margin: 26px 0 10px; color: var(--text); }
.prose h3 { margin: 18px 0 6px; color: var(--text); }
.prose ul { list-style: disc; padding-left: 20px; margin-bottom: 12px; }
.prose li { margin-bottom: 5px; }

/* ==========================================================================
   Prix des maisons Adopt Me (/houses)
   ========================================================================== */
.hprice-intro { margin-bottom: 20px; font-size: 14.5px; color: var(--text-dim); }
.hprice-intro strong { color: var(--text); }

.hprice-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.hprice-controls .tabs { margin-bottom: 0; flex-wrap: wrap; }
.tab-count {
  margin-left: 7px;
  font-size: 11.5px;
  color: var(--text-faint);
}
.tab.active .tab-count { color: rgba(255,255,255,.62); }
.hprice-sort { display: flex; align-items: center; gap: 8px; }
.hprice-sort .select { width: auto; padding-top: 8px; padding-bottom: 8px; font-size: 14px; }

.hprice-list {
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Quatre colonnes : la maison respire, le prix et le compteur sont étroits et
   alignés, l'état prend ce qui reste — c'est lui qui porte la phrase. */
.hprice-head,
.hprice-row {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) 128px minmax(0, 1.9fr) 104px;
  gap: 16px;
  align-items: center;
  padding: 12px 18px;
}
.hprice-head {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-top: 14px;
  padding-bottom: 10px;
}
.hprice-row { border-top: 1px solid var(--border); }
.hprice-row:hover { background: var(--surface-2); }

.hp-house { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* Les visuels du wiki sont importés à 256 px : à 46 px on n'en voyait ni la
   forme du toit ni la couleur des murs, alors que c'est exactement ce qui
   permet de reconnaître une maison sans lire son nom. On monte à 84 px, la
   taille où le détail revient sans que la ligne devienne un pavé.
   `padding` + `contain` : les visuels n'ont pas tous le même cadrage, et sans
   marge les plus larges touchaient le bord de leur pastille. */
.hp-icon {
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  object-fit: contain;
  padding: 4px;
  border-radius: var(--radius);
  background: var(--bg-deep);
}
.hp-icon-empty { display: grid; place-items: center; font-size: 34px; }
.hp-id { min-width: 0; }
.hp-id b { display: block; font-size: 14.5px; font-weight: 600; }
.hp-sub {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-faint);
}

.hp-price { display: flex; align-items: center; gap: 7px; }
.hp-price b { font-size: 16px; }
.hp-free { font-size: 13px; color: var(--text-faint); }

/* Icônes de monnaie. Le billet des Bucks est une image en couleurs ; le logo
   Robux est un tracé qui prend la couleur du texte, sans quoi il resterait
   gris foncé sur fond noir — donc invisible. */
.cur-icon { flex: 0 0 auto; }
.cur-bucks { object-fit: contain; }
.cur-robux { color: var(--sky); }
/* Sur l'onglet actif, le fond s'éclaircit : le logo suit pour rester lisible. */
.tab.active .cur-robux { color: #fff; }

/* .tab est un lien en flux : une icône dedans décalerait le texte de sa ligne
   de base. On passe ces onglets-là en flex, sans toucher au composant partagé
   (la page des offres s'en sert aussi). */
.hprice-controls .tab { display: inline-flex; align-items: center; gap: 7px; }
.hprice-controls .tab-count { margin-left: 0; }

.hp-status { min-width: 0; }
.hp-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-deep);
}
.hp-ok     { color: var(--brand); }
.hp-warn   { color: var(--honey); }
.hp-danger { color: var(--danger); }
.hp-detail {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-faint);
}

.hp-here { text-align: right; }
.hp-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-strong);
  white-space: nowrap;
}
.hp-count:hover { text-decoration: underline; }
.hp-none { font-size: 13px; color: var(--text-faint); }

/* La seule maison inéchangeable du jeu : un liseré rouge, pas seulement un mot
   dans une colonne. C'est l'information la plus coûteuse de la page si on la
   rate. */
.hprice-row.is-untradable {
  border-left: 3px solid var(--danger);
  padding-left: 15px;
  background: var(--danger-soft);
}
.hprice-row.is-untradable:hover { background: var(--danger-soft); }

.hprice-source {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--text-faint);
}

@media (max-width: 860px) {
  /* L'en-tête de colonnes n'a plus de sens dès que la grille se replie :
     chaque valeur redevient lisible seule, avec son propre libellé. */
  .hprice-head { display: none; }
  .hprice-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 14px;
    padding: 14px 16px;
  }
  .hp-house  { grid-column: 1; }
  .hp-price  { grid-column: 2; justify-content: flex-end; }
  .hp-status { grid-column: 1 / -1; }
  .hp-here   { grid-column: 1 / -1; text-align: left; }
  /* « Aucune » sous l'en-tête « Ici » se comprend ; seul sur une ligne, il ne
     dit plus de quoi il parle. Sans lien, la ligne est déjà muette : on la
     supprime plutôt que d'ajouter un libellé de colonne au téléphone. */
  .hp-none   { display: none; }
  .hprice-row.is-untradable { padding-left: 13px; }
}

@media (max-width: 560px) {
  /* Le chapeau est utile, mais il ne doit pas repousser le premier prix hors
     de l'écran : on le resserre plutôt que d'en couper une phrase. */
  .hprice-intro { font-size: 13.5px; padding: 16px; margin-bottom: 14px; }
  /* 84 px laissaient trop peu de place au nom sur un écran de 375 px : la
     ligne des étages passait à la ligne. */
  .hp-icon { width: 64px; height: 64px; }
  .hp-icon-empty { font-size: 26px; }
  .hprice-controls { align-items: stretch; }
  .hprice-sort { width: 100%; }
  .hprice-sort .select { flex: 1; }

  /* Quatre onglets empilés mangeraient un demi-écran avant le premier prix :
     ils défilent latéralement, comme la barre de tags de l'accueil. */
  .hprice-controls .tabs {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
    padding-bottom: 4px;
    margin: 0 -14px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .hprice-controls .tab { flex: 0 0 auto; }
  .hprice-controls .tabs::-webkit-scrollbar { height: 6px; }
  .hprice-controls .tabs::-webkit-scrollbar-track { background: transparent; }
  .hprice-controls .tabs::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-pill);
  }
}

/* ==========================================================================
   Credits (/credits)
   ========================================================================== */
.credits-intro { margin-bottom: 4px; }

.founders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin-bottom: 14px;
}

.founder {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}

/* Ronds et bordés comme l'avatar du menu : deux traitements différents pour la
   même chose — la tête d'un joueur — se remarqueraient. */
.founder-avatar {
  flex: 0 0 auto;
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--bg-deep);
  object-fit: cover;
}

.founder-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* En chasse fixe, et non dans la police de titre : « noveIIie » s'écrit avec
   deux I majuscules, que Valley Sans dessine exactement comme des l minuscules.
   La page demande juste au-dessous de comparer un pseudo lettre par lettre —
   autant qu'elles se distinguent. JetBrains Mono barre ses I et donne une
   queue à ses l. */
.founder-id b {
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--text);
  /* Un pseudo est une chaîne exacte : on le coupe plutôt que de le laisser
     déborder de la carte sur un écran étroit. */
  overflow-wrap: anywhere;
}
.founder-role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brand);
}
.founder-link { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.founder-link:hover { color: var(--brand-strong); }

.founders-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 22px;
  font-size: 13.5px;
  color: var(--text-dim);
}
.founders-note-icon { font-size: 18px; line-height: 1.3; }

@media (max-width: 620px) {
  .founders { grid-template-columns: 1fr; }
  .founder { padding: 15px; gap: 14px; }
  .founder-avatar { width: 66px; height: 66px; }
}

/* ==========================================================================
   Mobilier de plateforme d'échange
   Ce bloc est en fin de feuille à dessein : il doit l'emporter sur les règles
   de composant définies plus haut (notamment font-family sur .want-qty).
   ========================================================================== */

/* Chiffres en chasse fixe : rep, quantités, compteurs. */
.num,
.qty-value,
.want-qty,
.hero-stat b,
.profile-stats b,
.rep-line,
.seller-card .rep-line {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

/* Liseré de rareté sur les lignes de pets voulus/offerts. */
.want-item {
  border-left: 3px solid var(--rc, var(--border-strong));
}
.want-item.rarity-common     { --rc: var(--r-common); }
.want-item.rarity-uncommon   { --rc: var(--r-uncommon); }
.want-item.rarity-rare       { --rc: var(--r-rare); }
.want-item.rarity-ultra_rare { --rc: var(--r-ultra); }
.want-item.rarity-legendary  { --rc: var(--r-legendary); }

/* Variante en petites capitales : « NEON · FLY · RIDE ». */
.want-item .pet-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--text-faint);
}

/* Micro-titres de panneaux en capitales, comme sur les sites de trading. */
.side-block h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
}