/* ============================================================================
   bffr.fr/raid/joueur/<id> - Fiche de joueur (refonte du 2026-09-26)
   ----------------------------------------------------------------------------
   Chargée par la route /raid/joueur/:id (option head de shell()), APRÈS ds.css. Remplace
   l'ancienne raid_hunt.css et le <style> inline des familiers (renvoyé à chaque vue).
   HTML : renderHero, renderStats, renderBuild, renderFamiliers, renderHunt, renderMasteries
   (routes_raid_game.mjs). Vie de la page : scripts/raid_hunt.js (compteurs, filtres,
   « Afficher tout »). Fiche d'objet au clic sur une pièce : raid_inspect.js ([data-inst]).

   Préfixes : .rgjx- (fiche) ; .rghx- (tableau de chasse + maîtrises, historique, gardé car
   raid_hunt.js s'en sert).
   Couleurs : variables de ds.css (médailles du rang comprises : --medal-or/ar/br). Couleurs
   d'INFORMATION gardées : raretés (posées en style inline par le serveur : --rar, --rc),
   étoiles et éveil des familiers (teintes de l'ancienne fiche, variables --star* ci-dessous).
   Téléphone : aucun texte sous 13 px (charte §4.4), petits libellés en casse normale.
   Perf : collections résumées côté serveur (familiers regroupés par espèce, au plus 48
   cartes visibles) ; aucune ombre portée, aucun filtre, aucune animation infinie sur les
   éléments répétés.
   ============================================================================ */

.rgp-joueur {
  --star: #ffc94f; --star-awk: #ff7a45;
  --star-awk-dim: rgba(255, 110, 60, .14); --star-awk-line: rgba(255, 122, 69, .5); --star-awk-txt: #ffd9c2;
}
.rgjx-bi { display: inline-flex; align-items: center; font-size: .95em; line-height: 1; }
.rgjx-bi .re, .rgjx-bi img { width: 1.15em; height: 1.15em; }

/* ── En-tête (bandeau illustré) ─────────────────────────────────────────────── */
body.raidnew .rgjx-hero { min-height: 250px; justify-content: flex-end; gap: 0; }
body.raidnew .rgjx-hero > .rgjx-top, body.raidnew .rgjx-hero > .rgjx-jump { max-width: none; }
.rgjx-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; }
.rgjx-id { display: flex; align-items: center; gap: 20px; min-width: 0; flex: 1 1 420px; }
.rgjx-av {
  flex: 0 0 112px; width: 112px; height: 112px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--accent); background: var(--bg2); box-shadow: 0 0 0 6px rgba(7, 7, 9, .55);
}
.rgjx-idt { min-width: 0; flex: 1; }
body.raidnew .rghero h1.rgjx-name { margin: 0 0 12px; font-size: clamp(1.7rem, 1.05rem + 2.1vw, 2.6rem); overflow-wrap: anywhere; }
.rgjx-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.rgjx-badge {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border-radius: 999px;
  background: rgba(7, 7, 9, .62); border: 1px solid var(--line2); color: var(--txt); font-size: .84rem; font-weight: 650; white-space: nowrap;
}
.rgjx-badge .rgt-title { margin-left: 0; font-size: .92rem; }
.rgjx-badge-reb { border-color: var(--accent-line); color: var(--accent2); }
.rgjx-badge-card { border-color: var(--accent-line); }
.rgjx-badge-card .rgpc-ic { width: 1.05em; height: 1.05em; color: var(--accent2); }
/* Relance (palmarès, 2026-09-30) : titre d'honneur, sans bonus (icône Lucide « medal » en SVG inline). */
body.raidnew .rgjx-badge-honor { border-color: var(--accent-line); }
body.raidnew .rgjx-badge-honor .rgjx-bi { flex: none; width: 16px; height: 16px; color: var(--accent2); }

.rgjx-pow {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 240px;
  padding: 16px 20px; border-radius: var(--r-l); background: rgba(7, 7, 9, .66); border: 1px solid var(--line2);
}
.rgjx-pow-k { display: inline-flex; align-items: center; gap: 7px; color: var(--mut); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.rgjx-pow-v { color: var(--txt); font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.35rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rgjx-rank {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border-radius: 999px;
  background: var(--accent-dim); border: 1px solid var(--accent-line); color: var(--accent2); font-size: .82rem; font-weight: 650;
}
.rgjx-rank b { color: inherit; font-weight: 800; }
.rgjx-rank:hover { color: var(--txt); border-color: var(--accent); }
.rgjx-rank.is-or { color: var(--medal-or); background: var(--medal-or-dim); border-color: var(--medal-or-line); }
.rgjx-rank.is-ar { color: var(--medal-ar); background: var(--medal-ar-dim); border-color: var(--medal-ar-line); }
.rgjx-rank.is-br { color: var(--medal-br); background: var(--medal-br-dim); border-color: var(--medal-br-line); }

.rgjx-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.rgjx-jump a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: rgba(7, 7, 9, .55); border: 1px solid var(--line2); color: var(--txt2); font-size: .84rem; font-weight: 650;
}
.rgjx-jump a:hover { color: var(--txt); border-color: var(--accent-line); }
/* Le retour au classement n'est plus dans ce sommaire : a.rgx-back au-dessus du bandeau (ds.css). */

/* ── Sections ───────────────────────────────────────────────────────────────── */
body.raidnew .rgjx-sec { margin-top: 34px; }
.rgjx-h2n { padding: 2px 10px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); color: var(--mut); font-size: .76rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.rgjx-h3 { display: flex; align-items: center; gap: 8px; margin: 20px 0 10px; color: var(--txt); font-size: .95rem; font-weight: 700; }
.rgjx-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 18px; text-align: center;
  background: var(--card); border: 1px dashed var(--line2); border-radius: var(--r-l); color: var(--mut); font-size: .88rem;
}
.rgjx-empty b { color: var(--txt); font-size: 1rem; }
.rgjx-empty .rgempty-ic { font-size: 2rem; line-height: 1; }
.rgjx-404 { max-width: 520px; margin: 40px auto; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }

/* ── Statistiques ───────────────────────────────────────────────────────────── */
.rgjx-statwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 12px; }
.rgjx-statwrap.no-origin { grid-template-columns: minmax(0, 1fr); }
.rgjx-origin {
  display: flex; flex-direction: column; gap: 14px; padding: 18px 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--hl);
}
.rgjx-origin-h { display: flex; flex-direction: column; gap: 2px; }
.rgjx-origin-h b { color: var(--txt); font-size: .98rem; }
.rgjx-origin-h span { color: var(--mut); font-size: .8125rem; line-height: 1.4; }
.rgjx-split { display: flex; gap: 2px; height: 12px; border-radius: 99px; overflow: hidden; background: var(--bg2); }
.rgjx-split i { display: block; height: 100%; min-width: 3px; }
.rgjx-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rgjx-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: .88rem; color: var(--txt2); }
.rgjx-legend li i { width: 10px; height: 10px; border-radius: 3px; }
.rgjx-legend li b { color: var(--txt); font-variant-numeric: tabular-nums; }
.rgjx-split .s1, .rgjx-legend .s1 { background: var(--accent); }
.rgjx-split .s2, .rgjx-legend .s2 { background: var(--accent2); }
/* Nuances de l'accent tirées de la variable (suivent le thème du joueur) ; la ligne rgba est le repli
   des navigateurs sans color-mix (5 segments seulement : aucun coût). */
.rgjx-split .s3, .rgjx-legend .s3 { background: rgba(167, 139, 255, .5); background: color-mix(in srgb, var(--accent) 50%, transparent); }
.rgjx-split .s4, .rgjx-legend .s4 { background: rgba(167, 139, 255, .3); background: color-mix(in srgb, var(--accent) 30%, transparent); }
.rgjx-split .s5, .rgjx-legend .s5 { background: var(--line2); }
.rgjx-combat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rgjx-collect { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.rgjx-tile, .rghx-stat {
  position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--hl);
}
.rgjx-tile-k, .rghx-stat-k { display: flex; align-items: center; gap: 7px; color: var(--mut); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.rgjx-tile-v, .rghx-stat-v { color: var(--txt); font-size: 1.5rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rghx-stat-v.rghx-hl { color: var(--accent2); }
.rgjx-tile-s, .rghx-stat-s { color: var(--mut); font-size: .76rem; }
.rgjx-tile-bar { display: block; height: 4px; margin-top: 8px; border-radius: 99px; background: var(--bg2); overflow: hidden; }
.rgjx-tile-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.rghx-stat-ic { display: inline-flex; align-items: center; font-size: .95em; line-height: 1; }
.rghx-stat-ic .re, .rghx-stat-ic img { width: 1.15em; height: 1.15em; }

/* ── Build actif ────────────────────────────────────────────────────────────── */
.rgjx-build { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 10px; }
.rgjx-slot {
  --rar: var(--line2);
  display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 76px; padding: 11px 12px;
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--rar); border-radius: var(--r-m);
  box-shadow: var(--hl); color: var(--txt2); font: inherit; text-align: left; cursor: pointer;
  transition: background-color .14s, border-color .14s;
}
.rgjx-slot:hover { background: var(--card2); border-top-color: var(--line2); border-right-color: var(--line2); border-bottom-color: var(--line2); }
.rgjx-slot-ic { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.rgjx-slot-ic img { width: 40px; height: 40px; object-fit: contain; }
.rgjx-slot-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rgjx-slot-k { color: var(--mut); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rgjx-rar { color: var(--rar); }
.rgjx-slot-n { color: var(--txt); font-size: .9rem; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rgjx-slot-m { color: var(--mut); font-size: .74rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rgjx-slot-tier { flex: 0 0 auto; align-self: flex-start; padding: 2px 7px; border-radius: 7px; background: var(--bg2); border: 1px solid var(--line); font-size: .78rem; font-weight: 800; }
.rgjx-slot.is-empty { cursor: default; background: transparent; box-shadow: none; border-style: dashed; border-left: 1px dashed var(--line2); }
.rgjx-slot.is-empty .rgjx-slot-ic { background: transparent; border-style: dashed; }
.rgjx-slot.is-empty .rgjx-slot-n { color: var(--mut); font-weight: 600; font-size: .84rem; }
/* Visiteur non connecté : pièces affichées, pas cliquables (le détail demande une session). */
.rgjx-slot.is-static { cursor: default; }
.rgjx-slot.is-static:hover { background: var(--card); border-top-color: var(--line); border-right-color: var(--line); border-bottom-color: var(--line); }
.rgjx-hint { margin: 10px 0 0; color: var(--mut); font-size: .86rem; line-height: 1.5; }
.rgjx-hint a { font-weight: 700; }

/* ── Familiers (une carte par espèce) ───────────────────────────────────────── */
.rgjx-famsum { margin: 0 0 14px; }
.rgjx-fams { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 10px; }
.rgjx-fam {
  --rc: var(--line2);
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--hl); color: var(--txt2);
  transition: background-color .14s, border-color .14s;
}
.rgjx-fam:hover { background: var(--card2); border-color: var(--line2); color: var(--txt2); }
.rgjx-fam.is-on { border-color: var(--rc); }
.rgjx-fam.is-more { display: none; }
.rgjx-fams.is-all .rgjx-fam.is-more { display: flex; }
.rgjx-fam-ic { position: relative; flex: 0 0 50px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); overflow: hidden; font-size: 1.4rem; }
.rgjx-fam-ic::before { content: ""; position: absolute; inset: 0; background: var(--rc); opacity: .14; }
.rgjx-fam-ic img { position: relative; width: 40px; height: 40px; object-fit: contain; }
.rgjx-fam-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.rgjx-fam-n { color: var(--txt); font-size: .9rem; font-weight: 700; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rgjx-fam-st { display: flex; align-items: center; flex-wrap: wrap; gap: 1px; font-size: .84rem; line-height: 1; }
.rgjx-fam-st i { font-style: normal; color: var(--line2); }
.rgjx-fam-st i.on { color: var(--star); }
.rgjx-fam-st.awake i.on { color: var(--star-awk); }
.rgjx-fam-awk { margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--star-awk-line); background: var(--star-awk-dim); color: var(--star-awk-txt); font-size: .68rem; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.rgjx-fam-m { color: var(--mut); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgjx-fam-m b { font-weight: 750; }
.rgjx-fam-side { flex: 0 0 auto; align-self: flex-start; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.rgjx-fam-act { padding: 2px 8px; border-radius: 999px; background: var(--rc); color: var(--on-accent); font-size: .64rem; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.rgjx-fam-x { padding: 2px 9px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line2); color: var(--txt); font-size: .76rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── Tableau de chasse ──────────────────────────────────────────────────────── */
.rghx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 6px; }
.rghx-prog { margin: 16px 0 6px; }
.rghx-prog-t { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 7px; }
.rghx-prog-t b { color: var(--txt); font-size: .95rem; }
.rghx-prog-t span { color: var(--mut); font-size: .8rem; }
.rghx-bar { height: 8px; border-radius: 99px; background: var(--bg2); overflow: hidden; }
.rghx-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transform-origin: left center; animation: rghx-fill .9s var(--ease) both; }
@keyframes rghx-fill { from { transform: scaleX(0); } to { transform: none; } }

.rghx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 14px; }
.rghx-tab {
  --rar: var(--accent);
  display: inline-flex; align-items: center; gap: 0; min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: var(--bg2); border: 1px solid var(--line2); color: var(--txt2); font: 650 .82rem var(--font); cursor: pointer;
  transition: color .14s, border-color .14s, background-color .14s;
}
.rghx-tab:hover { color: var(--txt); border-color: var(--accent-line); }
.rghx-tab[aria-pressed="true"] { background: var(--accent-dim); border-color: var(--accent); color: var(--txt); }
.rghx-tab[style*="--rar"] { color: var(--rar); }
.rghx-tab[style*="--rar"][aria-pressed="true"] { border-color: var(--rar); color: var(--rar); background: var(--bg2); box-shadow: inset 0 0 0 1px var(--rar); }
.rghx-tab span { margin-left: 6px; color: var(--mut); font-variant-numeric: tabular-nums; }
.rghx-tab sup { font-size: .7em; margin-left: 1px; }
.rghx-count { margin-left: auto; color: var(--mut); font-size: .8rem; font-variant-numeric: tabular-nums; }

.rghx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 10px; }
/* Cartes repliées au-delà de 24 (JX_CARD_CAP) : « Afficher tout » ou un filtre les montre. */
.rghx-grid:not(.is-all) > .rghx-card.is-more, .rghx-mgrid:not(.is-all) > .rghx-mcard.is-more { display: none; }
.rghx-card {
  --rar: var(--line2);
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--hl);
  transition: border-color .15s;
}
.rghx-card:hover { border-color: var(--rar); }
.rghx-card.is-hidden { display: none; }
.rghx-art { position: relative; isolation: isolate; aspect-ratio: 1 / 1; display: grid; place-items: center; background: var(--bg2); }
.rghx-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(closest-side, var(--rar), transparent); opacity: .24; }
.rghx-art img { width: 80%; height: 80%; object-fit: contain; transition: transform .3s var(--ease); }
.rghx-card:hover .rghx-art img { transform: scale(1.05); }
.rghx-art.rghx-noart { font-size: 2.2rem; }
.rghx-card.is-lost .rghx-art img, .rghx-card.is-lost .rghx-art > span[aria-hidden] { opacity: .42; }
.rghx-kills {
  position: absolute; top: 8px; right: 8px; padding: 2px 9px; border-radius: 99px;
  background: rgba(7, 7, 9, .78); border: 1px solid var(--line2); color: var(--txt);
  font-size: .76rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.rghx-kills.is-zero { color: var(--mut); font-size: .66rem; font-weight: 650; }
.rghx-first { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: .7rem; font-weight: 800; }
.rghx-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 11px 12px; }
.rghx-name { color: var(--txt); font-size: .86rem; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rghx-rar { color: var(--rar, var(--mut)); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.rghx-meta { color: var(--mut); font-size: .73rem; font-variant-numeric: tabular-nums; }
.rghx-empty { grid-column: 1 / -1; padding: 28px 16px; text-align: center; color: var(--mut); border: 1px dashed var(--line2); border-radius: var(--r-m); }

/* ── Maîtrises de panoplie ──────────────────────────────────────────────────── */
.rgjx-mbonus { margin: 14px 0 4px; }
.rghx-cap { background: var(--accent-dim) !important; border-color: var(--accent-line) !important; color: var(--accent2) !important; font-weight: 800; }
.rghx-note { margin: 8px 0 0; color: var(--mut); font-size: .8rem; line-height: 1.55; max-width: 820px; }
.rghx-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; margin-top: 12px; }
.rghx-mcard {
  --rar: var(--line2);
  display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 11px 13px;
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--rar); border-radius: var(--r-m); box-shadow: var(--hl);
}
.rghx-mcard.is-hidden { display: none; }
.rghx-mcard.is-done { background: var(--card2); }
.rghx-mtop { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rghx-mname { flex: 1; min-width: 0; color: var(--txt); font-size: .88rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rghx-mfrac { flex: 0 0 auto; color: var(--mut); font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rghx-mdone { flex: 0 0 auto; font-size: .95rem; line-height: 1; }
.rghx-mdone .re, .rghx-mdone img { width: 16px; height: 16px; }
.rghx-mbar { height: 5px; margin: 2px 0 1px; border-radius: 99px; background: var(--bg2); overflow: hidden; }
.rghx-mbar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--rar); }

/* ── Tablette ───────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .rgjx-statwrap { grid-template-columns: minmax(0, 1fr); }
}

/* ── Téléphone ──────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body.raidnew .rgjx-hero { min-height: 0; }
  .rgjx-top { flex-direction: column; align-items: stretch; gap: 14px; }
  /* Avatar et pseudo côte à côte, badges en dessous sur toute la largeur (.rgjx-idt s'efface). */
  .rgjx-id { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "av name" "badges badges"; align-items: center; gap: 14px; flex: 0 0 auto; }
  .rgjx-idt { display: contents; }
  .rgjx-av { grid-area: av; width: 84px; height: 84px; box-shadow: 0 0 0 4px rgba(7, 7, 9, .6); }
  body.raidnew .rghero h1.rgjx-name { grid-area: name; font-size: 1.55rem; margin-bottom: 0; }
  .rgjx-badges { grid-area: badges; gap: 6px; }
  .rgjx-badge { min-height: 30px; font-size: .78rem; padding: 0 10px; white-space: normal; }
  .rgjx-pow { align-items: flex-start; min-width: 0; padding: 12px 14px; flex-direction: row; flex-wrap: wrap; column-gap: 12px; row-gap: 4px; }
  .rgjx-pow-k { flex-basis: 100%; }
  .rgjx-pow-v { font-size: 1.8rem; }
  .rgjx-rank { align-self: center; }
  /* Sommaire : une seule ligne qui défile au doigt (à l'intérieur du bandeau, jamais la page). */
  .rgjx-jump { gap: 6px; margin: 16px -18px 0; padding: 14px 18px 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rgjx-jump::-webkit-scrollbar { display: none; }
  .rgjx-jump a { flex: 0 0 auto; min-height: 40px; padding: 0 13px; font-size: .82rem; white-space: nowrap; }

  body.raidnew .rgjx-sec { margin-top: 28px; }
  .rgjx-combat, .rgjx-collect, .rghx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rgjx-tile, .rghx-stat { padding: 12px 13px; }
  .rgjx-tile-v, .rghx-stat-v { font-size: 1.22rem; }
  .rgjx-tile-k, .rghx-stat-k { font-size: .64rem; letter-spacing: .08em; }
  .rgjx-tile-s, .rghx-stat-s { font-size: .72rem; }
  .rgjx-origin { padding: 16px; }

  /* Build : deux colonnes, carte en hauteur (icône + rang, puis le texte sur toute la largeur) */
  .rgjx-build { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rgjx-slot { flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; min-height: 0; padding: 10px; }
  .rgjx-slot-ic { flex-basis: 42px; width: 42px; height: 42px; }
  .rgjx-slot-ic img { width: 34px; height: 34px; }
  .rgjx-slot-tier { order: 1; margin-left: auto; }
  .rgjx-slot-tx { order: 2; flex: 1 1 100%; }
  .rgjx-slot-n { font-size: .84rem; }

  .rgjx-fams { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rghx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rghx-art { aspect-ratio: 4 / 3; }
  .rghx-art img { width: 70%; height: 86%; }
  .rghx-tools { gap: 6px; }
  .rghx-tab { min-height: 40px; padding: 0 13px; }
  .rghx-count { flex-basis: 100%; margin-left: 0; }
  .rghx-mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rghx-mcard { padding: 10px 11px; }
  .rghx-mname { font-size: .8125rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
  .rghx-mtop { align-items: flex-start; }

  /* Textes à 13 px minimum (charte §4.4). Les petits libellés passent en casse normale, sans
     espacement : à 13 px, des capitales espacées débordaient des tuiles de deux colonnes. */
  .rgjx-pow-k, .rgjx-tile-k, .rghx-stat-k, .rgjx-slot-k, .rghx-rar { font-size: .8125rem; letter-spacing: 0; text-transform: none; }
  .rgjx-tile-k, .rghx-stat-k { font-weight: 650; }
  .rgjx-tile-s, .rghx-stat-s, .rgjx-slot-m, .rgjx-slot-tier, .rgjx-fam-m, .rgjx-fam-x, .rgjx-h2n, .rgjx-badge,
  .rghx-meta, .rghx-note, .rghx-prog-t span, .rghx-count, .rghx-mfrac { font-size: .8125rem; }
  .rgp-joueur .rgin { font-size: .8125rem; }
  .rgjx-fam-act, .rgjx-fam-awk { font-size: .8125rem; letter-spacing: .04em; }
  /* « 1er » n'existe qu'avec au moins une victoire (moteur : rank = 1 ET defeated = 1) : il ne croise
     jamais « Jamais abattu », les deux pastilles tiennent côte à côte. */
  .rghx-kills, .rghx-kills.is-zero, .rghx-first { font-size: .8125rem; }
}
@media (max-width: 380px) {
  .rghx-mgrid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .rghx-bar i { animation: none; }
  .rghx-art img { transition: none; }
  .rghx-card:hover .rghx-art img { transform: none; }
}