@charset "UTF-8";
/* pieces.css — page « Toutes les pièces » /pieces (complète accueil.css, emetteurs.css et recherche.css) */

.toutes { display: grid; gap: 20px; }
.toutes .tete { display: grid; gap: 14px; }
.toutes h1 { margin: 0; font-size: 34px; text-wrap: balance; }
.toutes .sous { margin: -6px 0 0; color: var(--texte-doux); }
.toutes .sous b { color: var(--creme); }

/* Barre de tri, comme l'en-tête d'un gestionnaire de fichiers : un clic trie, un second clic inverse le sens */
.tri { display: flex; align-items: stretch; background: rgba(0,0,0,0.28); border-radius: var(--rayon); overflow-x: auto; scrollbar-width: none; }
.tri::-webkit-scrollbar { display: none; }
.tri .titre-tri { padding: 10px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); white-space: nowrap; align-self: center; }
.tri a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; color: #c9c4bf; font-size: 14px; white-space: nowrap; border-left: 1px solid rgba(255,255,255,0.06); }
.tri a:hover { color: var(--creme); background: rgba(255,255,255,0.05); }
.tri a.actif { color: var(--creme); font-weight: 600; background: rgba(198,146,115,0.18); }
.tri a.actif::after { content: ""; width: 0; height: 0; border-inline: 4px solid transparent; }
.tri a.sens-asc::after { border-bottom: 5px solid currentColor; }
.tri a.sens-desc::after { border-top: 5px solid currentColor; }

/* La valeur du tri sous le titre de la carte (année, type, rareté, tirage) */
.piece .valeur-tri { font-size: 12px; color: var(--marron); }
.piece .valeur-tri:empty { display: none; }
.toutes .pagination { margin-top: 4px; }

@media (max-width: 720px) {
  .toutes h1 { font-size: 26px; }
  .toutes .pieces { grid-template-columns: 1fr; }
}