/* Le panier, en ÉCRAN et non en <dialog> : ni glissement, ni fond assombri, ni
   piège de focus. Tout ce qui vit sous .sidebar-inner — en-tête, liste, pied —
   ne dépend pas du contenant. */
.cart-screen {
  max-width: 760px;
  /* Une marge HAUTE : l'en-tête de l'application est fixe et le corps commence
     juste dessous, sans quoi le titre du panier le touche. */
  margin: 20px auto 60px;
  padding: 20px;
  box-sizing: border-box;
  /* Le fond vivait sur .sidebar et serait parti avec elle : sans lui, le
     contenu flottait sur l'illustration de la page, illisible. Parchemin et
     non le gris du tiroir — c'est le panneau du reste de l'application (voir
     .mass-panel), et le panier n'est plus un objet à part. */
  background: var(--parchment, #f3ead8);
  border: 1px solid var(--mist, #cbb999);
  border-radius: 10px;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  /* Titre et actions CÔTE À CÔTE. Ils étaient empilés parce que sur les 350 px
     du tiroir, « Votre Panier » se retrouvait comprimé à gauche sur deux
     lignes par la rangée de boutons. L'écran fait le double : la contrainte
     est partie avec le tiroir, l'empilement n'avait plus de raison. Il revient
     sous 600 px, où elle redevient vraie. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  border-bottom: 2px solid #ccc;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.sidebar-header .sidebar-header-actions {
  justify-content: flex-end;
}

.sidebar-header h2 {
  margin: 0;
  color: #333;
}

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

/* Revenir aux cartes. Ce fut un rond vert de 30 px portant un « X », puis une
   flèche nue — deux formes du tiroir. Sur un écran, c'est l'action qu'on
   cherche en premier quand on n'a pas fini d'ajouter : elle porte son nom, et
   se distingue des quatre boutons-icônes voisins par sa forme même. */
/* La forme commune vient de layout.css, comme pour ses quatre voisins : il
   etait 8 px plus court qu'eux, a un autre rayon, sans leur typographie. Ne
   reste ici que le vert, qui dit la sortie. */
.back-to-cards-btn {
  background-color: #007b00;
  border-color: #007b00;
  color: #fff;
}

.back-to-cards-btn:hover {
  background-color: #005c00;
  border-color: #005c00;
}

/* Le rond de fermeture reste : la modale d'aide s'en sert, et elle FERME
   vraiment — contrairement au panier, qui ramène quelque part. */
.close-btn {
  background: #007b00;
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
}

/* Bouton "Recalculer les prix" : re-vérifie les cours Scryfall actuels et
   réapplique le barème en vigueur sur chaque article du panier. */
/* Le recalcul ne garde en propre que son etat occupe : sa forme, son survol et
   son gabarit carre viennent de layout.css, comme pour ses trois voisins. Il a
   eu un survol vert plein, qui le distinguait d'une rangee ou plus rien ne se
   remplit au survol. */
.recalculate-cart-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* Les quatre boutons-icônes de l'en-tête — rafraîchir, imprimer, copier, vider —
   prennent la forme commune de layout.css et le gabarit carré `.icon-only-btn`.
   Ils avaient la leur : bordure grise, rayon de 4 px, remplissage sombre au
   survol, à côté de voisins à 6 px qui soulèvent leur réglette laiton.
   Le tracé suit `currentColor`, donc rien à repeindre ici. */

/* Bandeau "prix à reconfirmer" affiché quand un article du panier date
   de plus de CART_STALE_DAYS jours (voir cart.js: isCartStale()). Masqué
   par défaut, affiché par updateCartUI. */
/* Le `display: none` d'origine a été RETIRÉ. Il datait du vanilla, où le
   script passait l'élément à `block` quand un article devenait vieux ; React
   le rend conditionnellement, et la règle le recouvrait donc en permanence —
   l'avertissement ne s'est jamais affiché depuis le portage. Il reste masqué à
   l'impression, plus bas. */
.cart-stale-warning,
.cart-sent-banner {
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  line-height: 1.35;
}

.cart-stale-warning {
  background-color: #fff3cd;
  color: #664d03;
  border: 1px solid #ffe69c;
}

/* Une demande partie n'est ni un avertissement ni une erreur : le vert dit que
   c'est fait, là où l'ambre de la péremption dit qu'il y a à faire. */
.cart-sent-banner {
  background-color: #e6f4ea;
  color: #1b5e20;
  border: 1px solid #b7e0c0;
}

/* Le bouton reste au même gabarit — il ne change que de sens. Le contour
   suffit à dire « ce n'est plus l'action attendue », sans le griser : renvoyer
   reste possible, avec une confirmation. */
.send-request-btn.already-sent {
  background: #fff;
  color: #007b00;
  border: 2px solid #007b00;
}

#cartList {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
  overflow-y: auto;
  color: #333;
}

.cart-empty {
  text-align: center;
  color: #777;
  border: none !important;
  margin-top: 20px;
  justify-content: center;
}

/* Corps d'une ligne du panier (nom, quantité, détails, note). */
.cart-item-body {
  flex-grow: 1;
  line-height: 1.3;
}

.cart-item-details {
  font-size: 0.95rem;
  color: #666;
}

/* La pastille de fini emprunte ses COULEURS à .card-tags (site/style.css) —
   le doré du foil est le même que sur la vignette — et ses DIMENSIONS à sa
   voisine .condition-chip, avec qui elle se lit à la file. Les deux règles
   d'origine divergent sur ces deux points seulement (0,85rem contre l'héritage
   de la ligne, 3px de haut contre 0), et un badge plus petit et plus haut que
   celui d'à côté se voit immédiatement. */
.cart-item-details .card-tags,
.cart-item-details .condition-chip {
  display: inline-block;
  font-size: inherit;
  padding: 0 5px;
}

/* Les badges de cette rangée se lisent à la file, donc ils doivent faire la
   MÊME hauteur. Mesuré avant : 17px pour le fini normal, 19 pour le foil, 19,8
   pour la puce d'état — trois hauteurs pour trois badges côte à côte. Deux
   causes : .card-tags est `inline` là où .condition-chip est `inline-block`, et
   la bordure dorée du foil vaut 2px de plus. Une bordure transparente les
   remet à égalité sans rien montrer ; `:not(.foil)` garantit qu'on ne touche
   jamais à l'or, cart.css passant après style.css à spécificité égale. */
.cart-item-details .card-tags:not(.foil),
.cart-item-details .condition-chip {
  border: 1px solid transparent;
}

.cart-item-price {
  white-space: nowrap;
  font-weight: bold;
  margin-left: 10px;
  /* Le chiffre qu'on vient vérifier : plus gros que le reste de la ligne. */
  font-size: 1.15rem;
  /* LARGEUR FIXE, sans quoi le champ de quantité se déplace au gré du montant :
     la rangée est en flex et le corps absorbe le mou, donc chaque centime de
     plus repousse ce qui précède. Mesuré sur la plage réelle — de « 3€ » à
     « 1234.5€ » — la case passait de 47 à 93,1 px et la quantité bougeait de
     46 px, y compris entre deux frappes sur ce champ-là. 96px couvre le plus
     large des cas mesurés ; au-delà, la case déborde vers la gauche plutôt que
     de tronquer. */
  min-width: 96px;
  /* Le montant tombe au BORD, comme sur un ticket, et le « ↩ » garde sa
     colonne. Aligné à gauche dans une case fixe, c'est lui qui se promènerait. */
  text-align: right;
}

/* Pictogramme "prix non mis à jour" sur une ligne du panier, posé par le
   recalcul quand une carte n'a pas pu être vérifiée (voir
   recalculateCartPrices). Le détail est dans le title au survol. */
.cart-item-stale {
  cursor: help;
  font-size: 0.9rem;
}

#cartList li {
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Agrandi de 0,95 à 1,05 rem. La vignette impose déjà 56 px de hauteur de
     ligne : tant que le texte tient dedans, il ne coûte RIEN d'être lisible.
     Il était à 15,2 px, ce qui se lit mal à bout de bras au comptoir. */
  font-size: 1.05rem;
}

/* Note libre par carte, éditée directement dans la ligne du panier —
   sauvegardée au blur (perte de focus) plutôt qu'à chaque frappe, voir
   updateCartItemNote. */
.cart-item-note {
  width: 100%;
  max-width: 220px;
  margin-top: 4px;
  padding: 3px 6px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 0.8rem;
  color: #333;
  box-sizing: border-box;
}

.cart-item-note:focus {
  border-color: #007b00;
  outline: none;
}

/* La note repliée. Elle occupait une rangée par carte, vide presque toujours ;
   elle tient maintenant sur la ligne des détails. Le bouton PORTE la note quand
   il y en a une — la replier ne doit pas la cacher. */
.cart-item-note-btn {
  margin-left: 8px;
  padding: 0;
  background: none;
  border: none;
  color: #007b00;
  cursor: pointer;
  font-size: 0.9rem;
  font-style: italic;
}

.cart-item-note-btn:hover {
  text-decoration: underline;
}

/* Vignette de confirmation visuelle dans le panier : le recto de la carte
   ajoutée, en miniature fixe (pas d'alternance recto/verso pour les DFC,
   contrairement aux résultats de recherche — plus simple pour un aperçu
   rapide dans une liste). */
/* 40x56 au depart, tire du tiroir de 350 px. Sur un ecran a deux colonnes la
   place existe, et c'est l'image qu'on regarde pour reconnaitre une carte —
   elle merite mieux que 40 px de large. Rapport 63:88, celui d'une carte. */
.cart-item-thumb {
  width: 56px;
  height: 78px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  margin-right: 10px;
  background-color: #ddd;
}

.cart-item-thumb-placeholder {
  /* Articles sans imgUrl stocké (panier partagé pas encore enrichi,
     stockage ancien) : simple bloc neutre plutôt qu'une image cassée. */
  border: 1px dashed #bbb;
}

/* Vert plutôt que rouge : le retrait est réversible (toast "Annuler"
   quelques secondes après, voir offerCartUndo dans cart.js) — une croix
   rouge signalerait à tort une action destructive/définitive. La flèche
   de retour renforce l'idée de "remettre en stock" plutôt que
   "supprimer". */
.remove-btn {
  color: #007b00;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: bold;
  padding: 0 5px;
  font-size: 1.2rem;
}

/* Le récapitulatif, en tête
   Le total et le choix du règlement vivaient dans le pied. Sur cinquante cartes
   et deux colonnes, c'était le seul chiffre qu'on ne voyait pas : il fallait
   dérouler tout ce qu'on venait vérifier pour atteindre ce qu'on venait lire.

   Il garde les règles de mise en forme du pied — ce sont les mêmes objets —,
   seule sa place et son trait de séparation changent. */
.cart-summary {
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid #ddd;
}

.sidebar-footer {
  border-top: 2px solid #ccc;
  padding-top: 15px;
  margin-top: 10px;
  color: #333;
}

/* Pied de la sidebar : total, email, bouton d'envoi. */
/* Le libelle a gauche, le montant a DROITE, sur la meme ligne de base. Les
   deux etaient simplement inline : le montant se collait aux deux points du
   libelle (« Total estime:290 € »), et le chiffre qu'on vient lire se
   retrouvait perdu au milieu de la phrase au lieu de tomber la ou l'oeil le
   cherche — au bord, comme sur un ticket. */
/* Sous les deux montants : la seule chose que la boutique engage. Elle etait a
   la taille des textes secondaires du panier, ce qui la faisait passer pour une
   mention legale — alors qu'elle date l'offre qu'on vient de lire. Centree, elle
   legende les deux options plutot que la seule de gauche. */
.cart-offer-validity {
  margin: 6px 0 10px 0;
  text-align: center;
  font-size: 0.95rem;
  color: #555;
}

/* Le mode de règlement : deux moitiés d'un même choix, donc une seule boîte
   partagée plutôt que deux boutons voisins — c'est ce qui les fait lire comme
   les deux faces d'une bascule et non comme deux actions. */
.cart-payout {
  display: flex;
  margin-bottom: 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
}

/* La typographie des boutons de l'écran — grasse, petites capitales espacées —
   et non celle du corps de texte. La boîte, elle, reste la sienne : c'est un
   choix segmenté sur toute la largeur, pas un bouton compact de barre. */
.cart-payout-btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px;
  background-color: #fff;
  border: none;
  color: #333;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background-color 0.15s ease;
}

.cart-payout-btn + .cart-payout-btn {
  border-left: 1px solid #ccc;
}

.cart-payout-btn:hover {
  background-color: #f0f0f0;
}

.cart-payout-btn.active {
  background-color: #007b00;
  color: #fff;
}

/* Le libellé et sa majoration sur une ligne, le montant en dessous. */
.cart-payout-label {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

/* Le montant que cette option verse. C'est LE chiffre de l'écran : il occupait
   sa propre ligne au-dessus, où il ne parlait que de l'option deja retenue. */
.cart-payout-amount {
  font-size: 1.35rem;
  letter-spacing: normal;
}

/* La majoration est une DONNÉE, pas un argument : même taille que le reste,
   simplement plus discrète tant que l'option n'est pas retenue. */
.cart-payout-bonus {
  font-size: 0.8rem;
  letter-spacing: normal;
  opacity: 0.75;
}

.cart-email-input {
  padding: 10px;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  box-sizing: border-box;
}

/* Rangée "Envoyer ma demande" + "Partager" : deux boutons verts côte à
   côte, l'envoi (action principale) plus large que le partage. */
.send-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.send-actions .send-request-btn {
  margin-bottom: 0;
  flex: 1;
}

.send-request-btn {
  width: 100%;
  padding: 12px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  background: #007b00;
  color: white;
  border: none;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

/* Les deux boutons Télécharger côte à côte, sans retour à la ligne. */
.download-row {
  flex-wrap: nowrap;
}

.export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.secondary-btn {
  flex: 1;
  min-width: 100px;
  padding: 10px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  background: #e8e8e8;
  color: #333;
  border: 1px solid #ccc;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.secondary-btn:hover {
  background: #ddd;
}

@media (max-width: 768px) {
  .cart-screen {
    padding: 12px;
  }
}

@media (max-width: 600px) {
  .sidebar-header {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Vue impression du panier (bouton "Imprimer", voir printCart)
   Seul le contenu du panier est imprimé : en-tête boutique + date, liste
   des articles (sans boutons ni champs), total. Tout le reste de la page
   est masqué. --- */

.print-only {
  display: none;
}

@media print {
  .fixed-header-wrapper,
  #results,
  .floating-help-btn,
  .floating-mass-btn,
  .floating-buyback-btn,
  .floating-cart-btn,
  .toast-container,
  .help-modal-overlay {
    display: none !important;
  }

  /* La quantite se LIT sur papier : on la depouille de sa boite de saisie au
     lieu de la masquer. L'ancienne pastille verte s'imprimait telle quelle ;
     le champ, lui, sortirait avec sa bordure et ses fleches. */
  .cart-item-qty input {
    border: none;
    background: none;
    width: auto;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
  }

  body {
    background: #fff !important;
    /* padding-top est posé en inline par syncFixedHeaderHeight : il faut
       le neutraliser explicitement pour l'impression. */
    padding-top: 0 !important;
  }

  /* L'écran du panier occupe toute la page à l'impression : ses marges de
     lecture n'ont pas d'objet sur papier. */
  .cart-screen {
    max-width: none;
    padding: 0;
  }

  /* Contrôles interactifs sans objet sur papier. */
  .sidebar-header-actions,
  .remove-btn,
  .cart-stale-warning,
  .cart-sent-banner,
  .cart-email-input,
  .send-actions,
  .export-actions {
    display: none !important;
  }

  .print-only {
    display: block;
    font-size: 1rem;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 2px solid #333;
  }

  /* La note libre s'imprime comme du texte, pas comme un champ. */
  .cart-item-note {
    border: none;
    padding: 0;
  }

  .cart-item-note::placeholder {
    color: transparent;
  }

  #cartList {
    overflow: visible;
  }
}

/* Les deux comptes, à côté du titre : ce qu'on apporte, et ce qu'il y a à
   vérifier. Discrets — c'est une précision sur le titre, pas un second titre. */
.cart-counts {
  margin-left: 12px;
  font-size: 0.85rem;
  font-weight: normal;
  color: #666;
  white-space: nowrap;
}

/* Deux colonnes, quand la place existe
   Une ligne ne peut pas descendre sous 77 px : la vignette en impose 56, et la
   réduire irait contre la lisibilité qu'on vient de gagner. La hauteur se
   récupère donc en LARGEUR — ce qu'un tiroir de 350 px interdisait et qu'un
   écran permet. Sur cinquante cartes, deux colonnes valent deux écrans de
   défilement en moins.

   Le seuil est haut exprès : à 518 px par colonne, la ligne garde sa vignette,
   son nom entier et son prix sans se serrer. */
@media (min-width: 980px) {
  .cart-screen {
    max-width: 1120px;
  }

  #cartList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }

  /* Les en-têtes CARTES / BULK coupent les DEUX colonnes : à cheval sur une
     seule, elles annonceraient une section qui déborde à côté d'elles. */
  .cart-empty {
    grid-column: 1 / -1;
  }

  /* Sans quoi un nom long fait grossir sa colonne au lieu de se tronquer —
     le piège habituel des éléments de grille. */
  #cartList li {
    min-width: 0;
  }

  .cart-item-body {
    min-width: 0;
  }
}

/* Les deux onglets du panier
   Cartes et vrac ne se travaillent pas ensemble. Empilés, le second n'était
   atteignable qu'après avoir fait défiler tout le premier.

   Le compte vit SUR l'onglet : sans lui, celui qu'on ne regarde pas devient
   invisible, et on enverrait sa demande sans savoir qu'il reste du vrac
   dedans. */
.cart-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: 10px;
  border-bottom: 2px solid #ccc;
}

.cart-tab-list {
  display: flex;
  gap: 4px;
}

/* A l'autre bout de la rangee, et decolle du trait : les onglets s'y posent
   dessus, un bouton borde qui le toucherait ferait deux traits. */
.cart-sort {
  margin: 0 0 6px auto;
}

.cart-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 8px 14px;
  color: #666;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cart-tab:hover {
  color: #333;
}

.cart-tab.active {
  color: #007b00;
  border-bottom-color: #007b00;
}

.cart-tab-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  background: #ddd;
  color: #333;
  font-size: 0.75rem;
}

.cart-tab.active .cart-tab-count {
  background: #007b00;
  color: #fff;
}

/* L'en-tête du panier reste à l'écran
   Le total, le règlement et les onglets répondent à « combien, et sous quelle
   forme » — questions qu'on se pose EN vérifiant ses cartes, pas avant. Les
   remonter ne servait qu'à moitié tant qu'ils sortaient de l'écran au premier
   défilement.

   `top` vient d'une propriété POSÉE PAR LA MESURE de l'en-tête fixe de
   l'application (voir useFixedHeader) : sa hauteur change avec la langue et la
   largeur, et une valeur devinée laisserait un trou ou un recouvrement.

   Fond opaque obligatoire — la liste défile DESSOUS.

   Au-delà de 768 px seulement : plus bas, l'en-tête de l'application se replie
   déjà au défilement pour rendre de la place, et un second bloc collant
   mangerait ce qu'il vient de libérer. */
@media (min-width: 769px) {
  .cart-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;
  }
}

/* Revenir corriger une carte
   Le nom et la vignette ramènent à la recherche, sur cette carte. C'est le
   geste qu'on cherche en relisant son panier et en voyant une ligne fausse —
   mauvaise édition, mauvais fini, mauvais état.

   Le nom garde EXACTEMENT l'aspect qu'il avait en <strong> : rien ne doit
   changer tant qu'on ne le survole pas, sinon chaque ligne se met à crier
   qu'elle est cliquable. */
.cart-item-name-btn {
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: bold;
  text-align: left;
}

.cart-item-name-btn:hover {
  color: #007b00;
  text-decoration: underline;
}

.cart-item-thumb-clickable {
  cursor: pointer;
}

/* Panier vide : le titre et le retour vers la recherche, rien d'autre. Le lien
   emprunte le gabarit du bouton d'envoi, qui occupe la même place quand il y a
   quelque chose à envoyer. */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 20px;
  text-align: center;
}

.cart-empty-title {
  margin: 0;
  font-size: 1.1rem;
  color: #555;
}

.cart-empty .send-request-btn {
  width: auto;
  min-width: 220px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}