.mass-buyback-layout {
  max-width: 1700px;
  margin: 24px auto;
  padding: 0 20px 60px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.mass-panel {
  background: var(--parchment, #f3ead8);
  border: 1px solid var(--mist, #cbb999);
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
}

/* La saisie initiale, SEULE dans la disposition : la revue REMPLACE ce panneau
   au lieu de s'ajouter a cote (voir MassScreen.tsx), donc rien ne l'accompagne
   jamais et le laisser colle a gauche laissait 1300 px vides.

   Sa largeur est celle du panier (cart.css), l'autre ecran d'une seule colonne
   du site. Elle tient une ligne entiere sans repli : un CSV sans numero de
   collection rapporte l'identifiant Scryfall, et « 1 Trostani, Selesnya's Voice
   (SLD) 6ab6e6c9-… *F* » se repliait sur deux lignes a 420 px, la liste entiere
   devenant illisible. */
.mass-setup-panel {
  flex: 1 1 380px;
  max-width: 760px;
  margin-inline: auto;
}

.mass-setup-panel h2 {
  margin: 0 0 10px 0;
  color: var(--ink, #171310);
}

.mass-input-textarea {
  width: 100%;
  min-height: 260px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--mist, #cbb999);
  border-radius: 6px;
  font-family: monospace;
  font-size: 0.9rem;
  resize: vertical;
  margin-bottom: 14px;
}

.mass-start-btn {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
}

/* Colonne droite : revue par lots */
.mass-review-panel {
  flex: 3 1 900px;
}

.mass-progress-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brass, #af790b);
}

.mass-progress-text {
  font-weight: bold;
  color: var(--ink, #171310);
}

/* Grille de cartes du lot en cours (4 à la fois) */
/* Les colonnes s'adaptent au lieu d'etre quatre : la vignette mesure 330 px et
   ne se comprime pas, donc une colonne plus etroite la faisait deborder sur sa
   voisine. `auto-fill` en pose autant que la largeur en permet, et une seule sur
   telephone. */
.mass-batch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
  justify-items: center;
}

/* Les actions principales de l'écran rejoignent ces règles au lieu d'en avoir
   de nouvelles : ce sont les mêmes objets — une action principale et son
   alternative. Elles portaient `primary-action`, une classe d'outils recopiée
   au portage et qui n'existe nulle part dans site/ : le bouton était donc rendu
   tel quel par le navigateur. Le piège s'est reproduit deux fois — sur le
   récapitulatif d'abord, sur « commencer » et « verser » ensuite. */
.mass-tile-skip-btn,
.mass-done-restart-btn,
.mass-tile-add-btn,
.mass-tile-fix-btn,
.mass-done-cart-link,
.mass-start-btn,
.mass-import-btn,
.mass-commit-btn {
  flex: 1;
  padding: 8px;
  font-size: 0.85rem;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--mist, #cbb999);
  border-bottom: 2px solid var(--mist, #cbb999);
}

.mass-tile-skip-btn,
.mass-done-restart-btn,
.mass-import-btn {
  background: #fff;
  color: var(--wine, #5c1414);
}

/* Un <label> et non un <button> : c'est le seul moyen de déclencher un champ de
   fichier sans le laisser rendre son « Parcourir… Aucun fichier sélectionné »,
   qui ne se traduit pas et ne ressemble à rien d'autre sur cet écran. Ne reste
   ici que ce qu'un label n'a pas gratuitement — un bouton centre son texte et
   prend le curseur tout seul. */
.mass-import-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}

.mass-import-btn input {
  display: none;
}

/* CORRIGER ne decide rien : il renvoie la ligne a la colonne de gauche. Ni le
   vert de l'ajout ni le bordeaux du retrait, donc — l'encre. Mais la MEME
   LARGEUR que ses voisins : trois boutons de la meme rangee dont un plus etroit
   se lisent comme un accident, pas comme une hierarchie. */
.mass-tile-fix-btn {
  background: #fff;
  color: var(--ink, #171310);
}
.mass-tile-skip-btn:hover,
.mass-done-restart-btn:hover {
  border-bottom-color: var(--wine, #5c1414);
}

.mass-tile-add-btn,
.mass-done-cart-link,
.mass-start-btn,
.mass-commit-btn {
  background: #007b00;
  border-color: #006600;
  border-bottom-color: #004d00;
  color: #fff;
}

/* Le lien vers le panier : un <a> depuis que le panier est un écran, donc à
   qui il faut rendre ce qu'un <button> donne gratuitement. */
.mass-done-cart-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.mass-done-cart-link:hover {
  background: #009600;
}
.mass-tile-add-btn:hover:not(:disabled) {
  background: #009600;
}
.mass-tile-add-btn:disabled {
  background: #ccc;
  border-color: #bbb;
  color: #888;
  cursor: not-allowed;
}

/* Il partage le gabarit des boutons secondaires de l'écran, mais garde sa
   largeur : posé dans la barre de progression, il n'a pas à s'étirer. */
.mass-abort-btn {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 4px 12px;
  font-size: 0.8rem;
}

/* Écran de fin */
.mass-done-panel {
  flex: 1 1 100%;
  text-align: center;
  max-width: 480px;
  margin: 40px auto;
}

.mass-done-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
}

/* Mobile */
@media (max-width: 900px) {
  .mass-buyback-layout {
    flex-direction: column;
  }
  .mass-setup-panel {
    max-width: none;
  }
  .mass-batch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .mass-batch-grid {
    grid-template-columns: 1fr;
  }
}

/* Boutons "Tout ignorer" / "Tout ajouter" (agissent sur les 4 vignettes
   actionnables actuellement affichées) */
/* Les trois gestes de lot sur une seule rangee : ajouter ce qui est affiche,
   l'ignorer, verser au panier. Trois rangees pour trois boutons poussaient la
   grille hors de l'ecran. */
.mass-actions-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.mass-bulk-actions {
  display: flex;
  flex: 2;
  gap: 12px;
}
.mass-bulk-actions button {
  flex: 1;
  padding: 10px;
  font-size: 0.9rem;
}

/* Le geste final, sur la meme rangee que les deux actions de lot : il porte un
   libelle bien plus long — « Verser 44 cartes au panier — 412,5 € » — d'ou une
   part plus large. Il avait trois regles eparpillees dans la feuille, dont deux
   qui se contredisaient sur sa direction. */
.mass-commit {
  display: flex;
  flex: 3;
}

/* Bannière de reprise d'une liste interrompue */
.mass-resume-banner {
  background: #fff8e1;
  border: 2px solid var(--brass, #af790b);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.mass-resume-banner p {
  margin: 0 0 10px 0;
  font-size: 0.88rem;
  color: var(--ink, #171310);
}
.mass-resume-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mass-resume-actions button {
  padding: 8px 12px;
  font-size: 0.85rem;
}
#massDiscardResumeBtn {
  background: none;
  border: 1px solid var(--mist, #cbb999);
  border-radius: 6px;
  color: var(--wine, #5c1414);
  cursor: pointer;
}

/* Le seuil actif, dans la barre de progression. Discret : c'est un rappel de
   réglage, pas une mesure d'avancement. */
.mass-threshold {
  margin-left: 12px;
  font-size: 0.85rem;
  color: var(--wine, #5c1414);
}

/* La colonne de réparation : seulement ce qui a échoué, éditable sur place. */
.mass-repair-panel {
  max-width: 340px;
}

.mass-repair-count {
  color: #a33;
}

.mass-repair-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mass-repair-item {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Pourquoi cette ligne est ici, quand ce n'est pas « introuvable ». Sur sa
   propre rangee : la ligne suivante porte le texte et le bouton, qui tiennent
   deja toute la largeur. */
.mass-repair-reason {
  flex: 0 0 100%;
  font-size: 0.8rem;
  color: var(--wine, #5c1414);
}

.mass-repair-input {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  font-size: 0.85rem;
  border: 1px solid #c9b99b;
  border-radius: 4px;
}

/* Le bouton qui relance CETTE ligne. Il n'avait aucune regle : le navigateur le
   rendait tel quel, gris et carre, a cote d'un champ borde parchemin. Meme
   piege que « Commencer » et « Verser » avant lui — une classe posee dans le
   markup ne garantit rien.

   La forme du champ qu'il accompagne, pas celle des boutons d'action : ils font
   36 px de haut et rempliraient la rangee. */
.mass-repair-btn {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--ink, #171310);
  background: #fff;
  border: 1px solid #c9b99b;
  border-radius: 4px;
  cursor: pointer;
}

.mass-repair-btn:hover {
  border-color: var(--brass, #af790b);
}

.mass-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

/* Poussés à l'extrémité droite : à gauche ce qui restreint ce qu'on regarde, à
   droite où l'on en est du tri. `margin-left: auto` plutôt qu'un
   `justify-content` sur le parent, qui écarterait aussi les filtres entre eux. */
/* Un espace entre deux éléments flex n'est pas rendu : le libellé collait son
   compte, et « AU MOINS » son champ. Même correction que .sort-toggle-btn, qui
   sépare déjà son symbole de sa flèche par un `gap`. */
.mass-filter-btn,
.mass-filter-threshold {
  gap: 6px;
}

.mass-filter-tabs {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.mass-filter-count {
  opacity: 0.7;
  font-weight: normal;
}

/* Une vignette de ligne. Le fond dit la décision sans avoir à lire le bouton. */
.mass-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid #c9b99b;
  border-radius: 6px;
  background: #fff;
}

/* Une ligne d'en-tête au-dessus de la vignette commune : ce que la vignette ne
   peut pas savoir, parce qu'elle décrit une carte et non un nombre
   d'exemplaires. */
/* Le nom de la vignette est écrit en blanc par cards.css, pour le fond sombre
   de la page sur lequel la recherche pose ses résultats. Ici le panneau est en
   parchemin, et le blanc y disparaît. */
.mass-card .card-name {
  color: #6b5f45;
}

/* Ne porte plus que la quantite, et seulement quand la ligne n'a pas de
   vignette pour l'accueillir. */
.mass-card-line {
  display: flex;
  margin: 0 0 4px;
  font-size: 0.85rem;
}

/* Le champ de quantite, partage par la liste collee et le PANIER : c'est le
   meme geste — corriger un nombre d'exemplaires — donc la meme taille. Le
   panier l'a repris a la place de sa paire de boutons « − x4 + », qui rendait
   le chiffre deux fois plus petit que le reste de sa ligne. Un nouvel ecran qui
   demande une quantite s'ajoute ICI plutot que de reecrire ces dimensions. */
.mass-card-qty,
.cart-item-qty {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
  font-weight: bold;
  color: #333;
}

.mass-card-qty input,
.cart-item-qty input {
  /* Deux chiffres au plus (MAX_QTY_PER_CARD vaut 32, voir core/buyback.ts),
     plus les fleches du champ. La rangee est disputee : la bascule NORMAL|FOIL
     y prend deja la place de deux boutons. */
  width: 38px;
  padding: 1px 3px;
  font-size: 0.85rem;
  font-weight: bold;
  border: 1px solid #c9b99b;
  border-radius: 3px;
}

/* Ce que la LIGNE dit, quand ce n'est pas ce qu'on a trouve : trouvee mais sans
   cote, ou trouvee mais sous un autre nom. Deux constats de meme nature — une
   information sur la ligne, pas sur la carte — donc une seule forme. */
.mass-card-uncosted,
.mass-card-mismatch {
  margin: 0 0 8px;
  /* L'allure du NOM DE CARTE qu'ils accompagnent : centres, gras, Beleren. Ils
     parlent de la meme chose que lui, a la meme place, et un texte courant a
     cote d'un titre se lit comme un corps etranger. La couleur seule les
     distingue. */
  font-family: 'Beleren';
  font-weight: bold;
  text-align: center;
  font-size: 0.9rem;
  color: #a33;
}

/* Le nom discordant est une ALERTE, pas un constat : la resolution a peut-etre
   retenu une autre carte que celle qu'on lit, et il y a quelque chose a faire.
   « Non reprise » ne demande rien — c'est une reponse. D'ou un bandeau plein
   pour l'un, du texte colore pour l'autre. */
.mass-card-mismatch {
  padding: 3px 8px;
  border-radius: 4px;
  background: #a33;
  color: #fff;
}

/* AU FOND de la vignette. Les vignettes d'une meme rangee sont etirees a la
   hauteur de la plus haute — une carte au nom long, un signalement en plus — et
   l'excedent tombait sous les boutons de la plus courte. Pousses au fond, ils
   s'alignent d'une vignette a l'autre et le blanc passe au-dessus, ou il ne se
   remarque pas. */
/* LE PRIX SUR SA PROPRE LIGNE, centre, dans la vignette de liste seulement.
   Elle porte un controle de plus que ses soeurs — la quantite — et depuis que le
   fini s'y change, une bascule de deux boutons a la place d'une pastille : la
   rangee ne tenait plus. Sorti d'elle, il reste ce qu'on vient lire, et les
   quatre reglages tiennent sur une ligne.

   La recherche et la hotlist gardent leur rangee d'un seul tenant : elles n'ont
   pas la quantite, donc pas le probleme. */
.mass-card .card-price-pill {
  flex-wrap: wrap;
}

.mass-card .price-display {
  flex: 0 0 100%;
  text-align: center;
}

.mass-card-actions {
  display: flex;
  margin-top: auto;
  gap: 6px;
}

/* La décision COURANTE se voit sur le bouton lui-même : sans cela, deux
   vignettes ajoutée et en attente se ressemblent une fois la couleur de fond
   perdue au défilement. */
.mass-tile-add-btn.active {
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
  border-bottom-width: 1px;
}

.mass-tile-skip-btn.active {
  background: var(--wine, #5c1414);
  color: #fff;
  border-color: var(--wine, #5c1414);
}

.mass-commit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mass-filter-threshold input {
  width: 60px;
  padding: 2px 4px;
  font-size: 0.85rem;
  border: 1px solid #c9b99b;
  border-radius: 3px;
}

/* Une grille vide sous des filtres actifs se lit comme une panne. */
.mass-empty-filter {
  margin: 0 0 12px;
  padding: 12px;
  text-align: center;
  font-size: 0.9rem;
  color: #6b5f45;
}

/* La barre de commande reste à l'écran pendant qu'on déroule les vignettes.
   Mêmes contraintes que .cart-sticky de cart.css, pour les mêmes raisons : le
   `top` vient de la hauteur MESURÉE de l'en-tête fixe (useFixedHeader), un fond
   opaque parce que la grille défile dessous, et au-delà de 768 px seulement —
   plus bas l'en-tête de l'application se replie déjà, et un second bloc collant
   mangerait la place qu'il vient de rendre. */
@media (min-width: 769px) {
  .mass-sticky {
    position: sticky;
    top: var(--app-header-height, 0px);
    /* AU-DESSUS des sceaux des vignettes, qui sont a 2 : a egalite, c'est
       l'ordre du DOM qui tranche, et la grille vient apres la barre — « Deja
       dans le panier » se dessinait donc PAR-DESSUS elle en defilant. Bien
       en dessous de l'en-tete fixe (950) et des modales (999+). */
    z-index: 100;
    background: var(--parchment, #f3ead8);
    padding-top: 12px;
    margin-top: -12px;
  }
}