/* Affichage d'une carte : pill de prix, image, badges (RL/foil/
   doublon), toggle Normal/Foil, état. Utilisé en recherche classique et en
   mode bulk (voir aussi bulk.css pour les éléments propres à ce mode). --- */

.card-name {
  color: white;
  font-size: 1.1rem;
  margin: 0 0 8px 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  font-family: 'Beleren';
}

/* Badge "déjà dans votre panier" affiché sur une carte des résultats de
   recherche (ou du mode bulk) si elle a déjà été ajoutée — se met à jour
   automatiquement à chaque changement du panier (voir
   refreshAlreadyInCartBadges appelée depuis updateCartUI). */
/* SUPERPOSÉ à l'image, coin haut droit — comme .hot-seal et
   .manual-review-badge, et pour la même raison : un badge qui n'apparaît que
   sur certaines cartes décalerait tout ce qui le suit, et les images d'une
   même rangée ne tomberaient plus à la même hauteur.

   Le `display: none` a disparu avec le JS qui le levait : la vignette est
   rendue conditionnellement, donc sa seule présence dit qu'il y a lieu de
   l'afficher. Conservé, il la rendait invisible en toutes circonstances — ce
   qui était le cas depuis le portage, sans que rien ne le signale. */
.already-in-cart-badge {
  position: absolute;
  /* EN BAS à droite, et non en haut : ancré à droite, ce badge s'étend vers la
     gauche, et sur une vignette étroite il recouvrait « Non jouable en
     tournoi » quand les deux apparaissaient ensemble. Le bas gauche est pris
     par .hot-seal, le centre par .manual-review-badge : c'est le dernier coin
     libre, et il voisine le bouton « Ajouter au panier », dont il est la
     réponse. */
  bottom: 6px;
  right: 6px;
  z-index: 2;
  background-color: #007b00;
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 10px;
}

.card-price-pill {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 6px;
  gap: 4px;
  margin-bottom: 8px;
}

/* Mode debug (?debug dans l'URL) : prix tendance Scryfall brut, puis ROI net
   sur sa propre ligne (display:block — deux <span> consécutifs sinon collés
   à la suite du prix sur la même ligne). Volontairement voyant (gras, rouge)
   pour qu'il soit impossible de les confondre avec le vrai prix de rachat
   lors d'une vérification visuelle rapide. */
.debug-raw-price {
  display: block;
  font-size: 0.85rem;
  font-weight: bold;
  color: #ff0000;
  opacity: 1;
}

.card-set-info {
  color: white;
  font-weight: bold;
  margin: 5px auto 0 auto;
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 8px;
  border-radius: 4px;
  text-align: center;
  display: inline-block;
}

/* Hotlist : l'entrée vaut pour toutes les impressions de la carte, la ligne
   ne nomme donc plus une édition. Même badge que .card-set-info, dont elle
   prend la place — seule la teinte change, pour qu'on voie du premier coup
   d'œil que la promesse est plus large. */
.card-all-editions {
  background: rgba(120, 90, 0, 0.72);
}

/* La fourchette de rachat, sur sa propre ligne : c'est une amplitude, pas
   le prix affiché par la pastille, et les confondre serait pire que ne rien
   dire. */
.card-range {
  display: block;
  font-weight: normal;
  font-size: 0.85em;
  opacity: 0.9;
}

/* Quand .card-set-info est un <select> (mode bulk multi-édition, il
   remplace le badge texte à la même position) plutôt qu'un <p> : rendu
   natif de formulaire, lisible sur fond clair, cohérent avec les autres
   sélecteurs de la pill plutôt que le style "badge sombre" du texte simple. */
/* Le nom complet d'une extension peut depasser la largeur de la vignette —
   mesure : 350px de select pour 330px de carte. Sans cette borne, le
   selecteur debordait sur ses voisines. */
/* Le bouton qui PRECEDE ce selecteur porte la meme forme : c'est le meme
   controle, avant que ses impressions soient chargees. Sombre, il aurait ouvert
   un menu blanc dessine par le systeme — qu'aucun CSS n'atteint — et le
   contraste se serait lu comme un accident. */
select.card-set-info,
button.card-set-info {
  max-width: 100%;
  box-sizing: border-box;
  color: #333;
  background: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  /* Sur une seule ligne, comme la liste deroulante qui ne sait pas faire
     autrement : un bouton portant « Marvel Super Heroes Commander #211 » passait
     sur deux lignes, donc la vignette sautait de 17 px au moment ou l'on ouvre
     le selecteur, juste sous le curseur. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Reflet foil : géré intégralement par <card-tile> (attribut "foil"
   basculé dans applyStatusDisplay, ui.js) — plus de calque
   .foil-overlay dans le DOM clair à masquer par défaut ici. */

/* Sélecteur d'état (NM/EX/...) : une pastille colorée, pas une liste grise.
   L'échelle vert-rouge dit l'usure à un client qui ne sait pas ce que GD
   signifie ; le lien d'aide à côté porte les définitions.

   Teintes ET texte sont ceux de Cardmarket, relevés sur leurs annonces. Blanc
   sur cinq, NOIR sur GD — la seule où le blanc ne tient pas : 1,63:1 sur ce
   jaune, contre 12,88:1 pour le noir. Les cinq autres sont entre 2,36 et
   4,53:1, sous le seuil AA mais portant deux lettres en gras et jamais du texte
   à lire. La reconnaissance prime ici sur le contraste.

   Jumelles des jetons --condition-* d'outils/src/styles/tokens.css, qui
   colorent la même échelle sur la vignette de stock : site/ ne charge pas
   cette feuille, donc les deux se modifient ensemble. */
.condition-select {
  font-weight: bold;
  border-radius: 4px;
  border: 1px solid #ccc;
  outline: none;
  padding: 2px;
}

.condition-select[data-condition] {
  color: #fff;
  border-color: transparent;
}

.condition-select[data-condition='NM'],
.condition-option-nm {
  background-color: #3caf56;
}

.condition-select[data-condition='EX'],
.condition-option-ex {
  background-color: #82891e;
}

.condition-select[data-condition='GD'],
.condition-option-gd {
  background-color: #ffc107;
}

/* La seule assez claire pour que le blanc n'y tienne pas. Cardmarket fait de
   même — c'est la seule de leurs sept pastilles à porter du noir. */
.condition-select[data-condition='GD'],
.condition-select option.condition-option-gd,
.condition-chip.condition-option-gd {
  color: #212529;
}

.condition-select[data-condition='LP'],
.condition-option-lp {
  background-color: #fd8b2b;
}

.condition-select[data-condition='PL'],
.condition-option-pl {
  background-color: #e56874;
}

.condition-select[data-condition='PO'],
.condition-option-po {
  background-color: #dc3545;
}

/* Les options n'héritent pas de la couleur de la liste refermée : sans ça, un
   texte blanc s'écrirait sur le fond blanc du menu déroulé. */
.condition-select option {
  color: #fff;
}

/* Rien n'est encore choisi (hotlist) : gris neutre, sinon la pastille
   annoncerait un état que le client n'a pas désigné. */
.condition-select:not([data-condition]) {
  color: #333;
  background: #fff;
}

/* La même échelle, hors du sélecteur : le panier redit l'état de chaque ligne,
   et un code nu n'y disait rien de plus qu'ailleurs. */
.condition-chip {
  display: inline-block;
  padding: 0 5px;
  border-radius: 4px;
  font-weight: bold;
  color: #fff;
}

/* État "non reprise" d'une carte (prix sous le seuil de rachat) : porté
   par la classe .not-bought sur .slide (voir updatePrice dans ui.js).
   Cible directement l'élément hôte <card-tile> — .card-img-container
   n'existe plus dans le DOM clair (encapsulé dans son Shadow DOM), mais
   opacity/filter appliqués à l'hôte traversent bien l'encapsulation
   (propriétés de rendu, pas des règles de style ciblées par sélecteur). */
.slide.not-bought card-tile {
  opacity: 0.3;
  filter: grayscale(100%);
}

.slide.not-bought .price-display {
  color: #cc0000;
}

.slide.not-bought .btn-add {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
}

.btn-add {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  cursor: pointer;
  font-weight: bold;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* Sélecteur d'état désactivé : cartes en dessous de 3€ (rachat à prix fixe),
   où le rachat suppose une carte en état NM — le client n'a pas le choix,
   d'où un style clairement "verrouillé" plutôt que le disabled natif
   discret du navigateur. */
.condition-select:disabled,
.condition-select[data-condition]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #eee;
  color: #333;
}

/* Sélecteur de langue par carte : purement déclaratif (n'affecte ni le
   prix ni la recherche), enregistré sur l'article ajouté au panier. */
.language-select {
  font-weight: bold;
  border-radius: 4px;
  border: 1px solid #ccc;
  outline: none;
  padding: 2px;
  max-width: 70px;
}

/* Badge "HOT" : carte présente dans la liste de rachat prioritaire
   (hotlist.js, partagée avec le carrousel). Rouge vif, dans la pill de
   prix, avec explication au survol. */
/* Vignette cliquable (ouvre l'image en grand) : gérée intégralement par
   <card-tile> (card-tile.js/card-tile.css, effet survol/focus inclus) —
   plus de classe posée à la main par renderCard (ui.js). */

/* Impression non tournoi-légale conservée (valeur ≥5€ malgré son statut) :
   même convention visuelle que le badge équivalent dans l'outil "Cartes à
   surveiller" (outils/outils.css) — ambre discret mais visible. */
/* SUPERPOSÉ à l'image, coin haut gauche : empilé au-dessus d'elle, il décalerait
   les vignettes qui le portent par rapport à leurs voisines. Voir
   .already-in-cart-badge. */
.not-legal-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  max-width: calc(100% - 12px);
  font-size: 0.75rem;
  font-weight: bold;
  color: #a15c00;
  background: #fff3e0;
  border: 1px solid #ffcc80;
  border-radius: 4px;
  padding: 2px 8px;
  margin: 0;
  cursor: help;
}

/* Reserved List / promo : la tendance Scryfall est peu fiable sur ces
   impressions à faible volume d'échange (écart de -28% à +80% selon la
   carte face à un autre outil de pricing). Badge vert (pas ambre/orange
   comme .not-legal-badge) : c'est une bonne nouvelle pour le client, pas
   un avertissement.
   Superposé à <card-tile> (comme .hot-seal), CENTRÉ sur l'image — plutôt
   qu'en bannière pleine largeur au-dessus de .card-price-pill, ce qui
   casserait son alignement (NORMAL/FOIL, sélecteurs, prix ne tomberaient
   plus à la même hauteur d'une carte à l'autre selon que le badge est
   présent ou non). */
.manual-review-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  max-width: 85%;
  text-align: center;
  font-size: 0.75rem;
  font-weight: bold;
  color: #1b6e2c;
  background: #e8f7ea;
  border: 1px solid #a8dfb0;
  border-radius: 4px;
  padding: 3px 9px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  cursor: help;
}

/* [hidden] seul ne suffit pas : la règle UA [hidden]{display:none} a une
   origine plus faible que ce display:inline-block ci-dessus (même à
   spécificité égale, l'origine UA perd toujours face à l'auteur) — sans ce
   reset explicite, le badge resterait visible malgré l'attribut hidden posé
   par updatePrice() (ui.js). */
.manual-review-badge[hidden] {
  display: none;
}

/* Conteneur de positionnement pour le sceau HOT (voir renderCard, ui.js) —
   <card-tile> reste width:100% de son hôte par défaut (card-tile.css), le
   wrapper épouse donc exactement sa taille sans qu'on ait à la recalculer
   ici. */
.card-tile-wrap {
  position: relative;
}

/* Sceau "HOT" (carte présente dans hotlist.js) : cercle denté façon
   pastille/sceau, superposé en bas à gauche de l'image de la carte — plus
   visible qu'un badge dans la barre d'outils, noyé parmi les sélecteurs
   NM/EN. Le polygone est une étoile à 12 branches
   (rayon extérieur 50%, intérieur 38%, tous les 15°) tracée dans un carré
   44×44 — donner une taille différente au sceau redessinerait juste le
   même contour à une autre échelle, le clip-path restant en %. */
.hot-seal {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #cc0000;
  color: white;
  font-size: 0.68rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  cursor: help;
  clip-path: polygon(
    50% 0%,
    60% 13%,
    75% 7%,
    77% 23%,
    93% 25%,
    87% 40%,
    100% 50%,
    87% 60%,
    93% 75%,
    77% 77%,
    75% 93%,
    60% 87%,
    50% 100%,
    40% 87%,
    25% 93%,
    23% 77%,
    7% 75%,
    13% 60%,
    0% 50%,
    13% 40%,
    7% 25%,
    23% 23%,
    25% 7%,
    40% 10%
  );
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
  animation: hotPulse 2s ease-in-out infinite;
  z-index: 2;
}

@keyframes hotPulse {
  0%,
  100% {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 0 rgba(204, 0, 0, 0.6));
  }
  50% {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 6px rgba(204, 0, 0, 0.9));
  }
}

/* Sélecteur segmenté Normal / Foil */
.status-toggle {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ccc;
  flex-shrink: 0;
}

.status-option {
  border: none;
  background-color: #e8e8e8;
  color: #888;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.status-option:not(.active):hover {
  background-color: #ddd;
}
.status-option.active {
  background-color: #222;
  color: white;
}
.status-option.foil-option.active {
  background: var(--foil-gradient);
  color: #111;
}