/* Catalogue et collection — gabarit à colonne de droite (handoff « Cards Collection », 2026-09-07).

   La MISE EN PAGE vient du prototype : bandeau de statistiques, grille pleine largeur, colonne
   collante à droite. Les COULEURS et la TYPO restent celles du site (tokens.css). Le prototype
   propose sa propre palette et trois polices, mais la carte est un composant partagé avec le
   marché, l'échange et l'ouverture de pack : adopter ses couleurs de rareté ferait rendre la MÊME
   carte différemment d'une page à l'autre — exactement le défaut corrigé la veille. */

/* Ces deux pages sont plus larges que le reste du site : la colonne de droite prend 304 px, et
   avec le .wrap standard de 1180 px il ne restait que 850 px de grille, soit 4 colonnes au lieu
   des 6 du design. Meme mecanisme que la boutique, qui se resserre au contraire (base.css). */
body.page-browse .wrap { max-width: 1440px; }

/* Polices du handoff, portees SUR CES DEUX PAGES seulement (retour Noe 2026-09-08) : Chakra Petch
   pour les titres et les noms de cartes, Manrope pour l'interface, IBM Plex Mono pour les nombres.

   On surcharge les variables plutot que chaque regle : tout ce qui lit --font-display ou
   --font-body suit, y compris le composant carte, sans une seule regle en double.

   A savoir : le nom d'une carte s'affichera donc en Chakra Petch ici et en Jost sur le marche ou
   l'echange. C'est le prix d'un changement limite a deux pages — passer les variables dans
   tokens.css les alignerait toutes d'un coup. */
body.page-browse {
  --font-display: 'Chakra Petch', 'Jost', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Manrope', 'Jost', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-family: var(--font-body);
}
/* Les nombres passent en mono : compteurs, valeurs, ratios. C'est ce qui donne au bandeau et a la
   colonne leur alignement colonne par colonne. */
body.page-browse .br-tile-val,
body.page-browse .br-rar-count,
body.page-browse .br-bar-ratio,
body.page-browse .br-meta,
body.page-browse .br-row-end,
body.page-browse .tcg-foot .price { font-family: var(--font-mono); }
body.page-browse .br-eyebrow,
body.page-browse .br-tile-lbl,
body.page-browse .br-head,
body.page-browse .br-row-sub { font-family: var(--font-mono); }
body.page-browse .br-title,
body.page-browse .br-big strong,
body.page-browse .tcg .nm { font-family: var(--font-display); }

.br-head-block { margin-bottom: var(--s5); }
.br-eyebrow { display: block; font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase;
              color: var(--ink-faint); }
.br-title { margin-top: var(--s2); letter-spacing: -0.01em; }
.br-sub { display: block; margin-top: var(--s2); font-size: 0.85rem; color: var(--ink-dim); }

/* Tuiles de statistiques — auto-fit : de quatre colonnes à une seule sans point de rupture. */
.br-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
            gap: 12px; margin-top: var(--s4); }
.br-tile { padding: 15px 17px; border-radius: 13px; border: 1px solid var(--border);
           background: linear-gradient(180deg, rgba(188, 215, 255, 0.05), rgba(188, 215, 255, 0.015)); }
.br-tile-val { font-family: var(--font-display); font-size: 1.45rem; line-height: 1;
               font-variant-numeric: tabular-nums; }
.br-tile-val.is-accent { color: var(--accent); }
.br-tile-val.is-good { color: var(--success); }
.br-tile-val.is-dim { color: var(--ink-dim); }
.br-tile-lbl { margin-top: 8px; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
               color: var(--ink-faint); }

/* Corps : grille + colonne. La colonne passe SOUS la grille quand la largeur manque (wrap). */
.br-body { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; margin-top: var(--s5); }
.br-grid { flex: 1 1 420px; min-width: 0; }
.br-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr));
            gap: 16px; }

/* ── Colonne de droite ──
   Collee sous l'en-tete et dotee de son PROPRE defilement, comme le handoff le prevoit. Le
   max-height est ce qui rend l'ensemble coherent : la colonne ne depasse jamais la hauteur de
   l'ecran, donc elle reste entierement atteignable par sa barre a elle, sans jamais dependre du
   defilement de la page.

   Je l'avais retiree le 2026-09-08 en croyant qu'elle masquait du contenu — c'etait une erreur de
   lecture de ma part : le contenu n'etait pas cache, il etait derriere cette barre. Remise en
   place le meme jour (retour Noe), avec une barre nettement plus visible qu'auparavant.

   `flex: 0 0 auto` sur chaque enfant est indispensable : sans lui, le flex comprime les panneaux
   pour les faire tenir au lieu de laisser defiler. */
.br-rail { flex: 1 1 272px; max-width: 304px; min-width: 0;
           display: flex; flex-direction: column; gap: 16px;
           position: sticky; top: 90px; max-height: calc(100vh - 110px);
           overflow-y: auto; overscroll-behavior: contain; padding-right: 12px;
           scrollbar-width: thin; scrollbar-color: var(--accent-deep) rgba(188, 215, 255, 0.08); }
.br-rail > * { flex: 0 0 auto; }
.br-rail::-webkit-scrollbar { width: 9px; }
.br-rail::-webkit-scrollbar-track { background: rgba(188, 215, 255, 0.07); border-radius: 99px; margin: 2px 0; }
.br-rail::-webkit-scrollbar-thumb { border-radius: 99px; border: 2px solid transparent;
    background-clip: padding-box; background-color: var(--accent-deep);
    box-shadow: inset 0 0 0 1px rgba(188, 215, 255, 0.5); }
.br-rail::-webkit-scrollbar-thumb:hover { background-color: var(--accent); }

.br-panel { padding: 18px; border-radius: 16px; border: 1px solid var(--border);
            background: linear-gradient(180deg, rgba(188, 215, 255, 0.05), rgba(188, 215, 255, 0.015)); }
.br-head { display: flex; align-items: center; gap: var(--s2); font-size: 0.66rem;
           letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
.br-more { margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px;
           border: 1px solid var(--border-strong); border-radius: 8px; color: var(--ink-dim);
           font-size: 1rem; line-height: 1; transition: 0.16s; }
.br-more:hover { border-color: var(--accent); color: var(--accent); }

/* Recherche : le rond est un repère dessiné en CSS, pas une icône à charger. */
.br-search { position: relative; }
.br-search-ico { position: absolute; left: 15px; top: 14px; width: 13px; height: 13px;
                 border: 1.5px solid var(--ink-faint); border-radius: 999px; pointer-events: none; }
.br-search-input { width: 100%; height: 42px; padding: 0 14px 0 38px; border-radius: 10px;
                   border: 1px solid var(--border); background: var(--bg-deep); color: var(--ink);
                   font: inherit; font-size: 0.85rem; }
.br-search-input:focus { outline: none; border-color: var(--border-strong); background: var(--bg-card); }

/* nowrap (retour Noe 2026-09-08) : avec flex-wrap: wrap, un bouton trop large passe A LA LIGNE
   au lieu de retrecir — c'est la regle du flex. « Possedees » se retrouvait donc seul en dessous
   des que le tri affichait un libelle long. Sans wrap, c'est le bouton de tri qui cede et tronque. */
.br-controls { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 10px; }
/* Le bouton ne porte plus que la valeur. `flex: 1 1 auto` + `min-width: 0` le laissent RETRECIR
   plutot que pousser « Possedees » a la ligne : le libelle se tronque en dernier recours, ce qui
   vaut mieux qu'une rangee sur deux lignes. Necessaire car le plus long — « Identifiant » en
   francais — depasse la place disponible dans une colonne de 272 px. */
.br-sort { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center;
           height: 40px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--border);
           background: var(--bg-deep); color: var(--ink-soft); font: inherit; font-size: 0.8rem;
           cursor: pointer; transition: 0.16s; }
.br-sort:hover, .br-dir:hover { border-color: var(--border-strong); color: var(--ink); }
.br-sort-key { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-dir { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto;
          border-radius: 10px; border: 1px solid var(--border); background: var(--bg-deep);
          color: var(--ink-soft); cursor: pointer; transition: 0.16s; }
/* Triangle en bordures : pas d'image, et il suit la couleur du texte. */
.br-tri { display: block; border-left: 5px solid transparent; border-right: 5px solid transparent;
          border-top: 7px solid currentColor; transition: transform 0.18s ease; }
.br-dir.is-asc .br-tri { transform: rotate(180deg); }

.br-owned { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; white-space: nowrap;
            height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border);
            background: var(--bg-deep); color: var(--ink-dim); font-size: 0.8rem; cursor: pointer;
            transition: 0.16s; }
.br-owned input { position: absolute; opacity: 0; pointer-events: none; }
.br-owned-dot { width: 8px; height: 8px; border-radius: 999px; border: 1px solid var(--border-strong); }
.br-owned.is-on { background: var(--accent-soft); border-color: var(--border-strong); color: var(--ink); }
.br-owned.is-on .br-owned-dot { background: var(--accent); }

/* Liste de raretés : cases à cocher habillées en lignes. Multi-sélection, comme le menu du marché. */
.br-rarities { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.br-rar { display: flex; align-items: center; gap: var(--s2); padding: 9px 13px; border-radius: 9px;
          border: 1px solid rgba(188, 215, 255, 0.1); background: var(--bg-deep); cursor: pointer;
          transition: 0.16s; }
.br-rar:hover { border-color: var(--border-strong); }
.br-rar input { position: absolute; opacity: 0; pointer-events: none; }
.br-rar-name { flex: 1; min-width: 0; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap; color: var(--ink-dim); }
.br-rar-count { flex: 0 0 auto; font-size: 0.72rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.br-rar.is-active { background: var(--accent-soft); border-color: var(--border-strong); }
.br-rar.is-active .br-rar-name { color: var(--ink); }
.br-rar-all { font-weight: 600; }

.br-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 10px 0 18px; }
.br-big strong { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--ink); }
.br-pct { font-size: 1rem; font-weight: 700; color: var(--accent); }
.br-meta { font-size: 0.7rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* Barres : le nom se comprime, le ratio jamais — c'est la valeur, elle doit rester lisible. */
.br-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s2); margin-top: 13px; }
.br-bar-name { font-size: 0.75rem; font-weight: 500; color: var(--ink-soft); overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.br-bar-ratio { font-size: 0.7rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.br-track { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: rgba(188, 215, 255, 0.1); overflow: hidden; }
.br-fill { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.br-fill.is-accent { background: var(--accent); box-shadow: 0 0 10px var(--accent-soft); }
.br-fill.t-m { background: var(--tier-m); }
.br-fill.t-l { background: var(--tier-l); }
.br-fill.t-e { background: var(--tier-e); }
.br-fill.t-r { background: var(--tier-r); }
.br-fill.t-u { background: var(--tier-u); }
.br-fill.t-c { background: var(--tier-c); }

.br-row { display: flex; align-items: center; gap: var(--s3); margin-top: 12px; }
.br-thumb { width: 34px; height: 44px; flex: 0 0 auto; border-radius: 6px; object-fit: cover;
            object-position: center 15%; border: 1px solid var(--border); }
.br-thumb.t-m { border-color: var(--tier-m); }
.br-thumb.t-l { border-color: var(--tier-l); }
.br-thumb.t-e { border-color: var(--tier-e); }
.br-thumb.t-r { border-color: var(--tier-r); }
.br-thumb.t-u { border-color: var(--tier-u); }
.br-thumb.t-c { border-color: var(--tier-c); }
.br-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.br-row-name { font-size: 0.8rem; font-weight: 600; color: var(--ink); overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.br-row-sub { font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; }
.br-row-sub.t-m { color: var(--tier-m); } .br-row-sub.t-l { color: var(--tier-l); }
.br-row-sub.t-e { color: var(--tier-e); } .br-row-sub.t-r { color: var(--tier-r); }
.br-row-sub.t-u { color: var(--tier-u); } .br-row-sub.t-c { color: var(--tier-c); }
.br-row-end { flex: 0 0 auto; font-size: 0.7rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  /* Sous cette largeur la colonne passe pleine largeur, sous la grille : collée, elle occuperait
     la moitié de l'écran pour des panneaux secondaires. */
  /* Sous cette largeur la colonne passe pleine largeur, sous la grille : ni collee ni bornee en
     hauteur, sinon elle occuperait la moitie de l'ecran pour des panneaux secondaires. */
  .br-rail { position: static; max-width: none; max-height: none; overflow: visible; padding-right: 0; }
}