/* Structure générale : header fixe, barre de contrôles, panneau de
   filtres, vue grille/liste des résultats. --- */

/* La hauteur du header (logo + bannière + contrôles) varie selon la langue,
   l'ouverture du panneau de filtres, ou la taille de fenêtre : elle est
   mesurée et appliquée dynamiquement en JS (syncFixedHeaderHeight, dans
   ui.js), plutôt que fixée en dur ici. */
body {
  padding-top: 0;
}

.fixed-header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 950;
  background-image: url('../media/back.jpg');
  background-color: #333;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  padding-bottom: 15px;
  transition: top 0.3s ease-in-out;
}

/* Alignement des formulaires - Desktop.
   La barre de contrôles est désormais un "comptoir" : un bandeau encre
   semi-opaque qui pose tous les contrôles sur une surface calme plutôt que
   de les laisser flotter en rectangles blancs disparates sur le dégradé
   cinq couleurs de l'enseigne. */
.header-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  /* wrap plutôt que nowrap : sur un écran desktop "moyen" (~1024-1366px),
     forcer tous les contrôles sur une seule ligne provoque un débordement
     horizontal. */
  flex-wrap: wrap;
  max-width: 1360px;
  margin: 0 auto;
  padding: 12px 20px;
  background: rgba(23, 19, 16, 0.82);
  border-top: 1px solid var(--brass);
  border-radius: 10px;
}

.search-group {
  display: contents;
}

/* Autocomplétion (Live Search) */
.input-wrapper {
  position: relative;
  display: flex;
}

.header-controls input[type='text'] {
  padding: 9px 12px;
  width: 280px;
  border-radius: 6px;
  border: 1px solid var(--mist);
  background: var(--parchment);
  color: var(--ink);
}

.header-controls input[type='text']:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 2px rgba(175, 121, 11, 0.25);
}

.autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  background: var(--parchment);
  border: 1px solid var(--mist);
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 250px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}

.autocomplete-list li {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ink);
  border-bottom: 1px solid var(--mist);
  text-align: left;
}

.autocomplete-list li:hover,
.autocomplete-list li.active {
  /* .active : suggestion surlignée au clavier (↑/↓), même rendu que le
     survol souris. */
  background-color: #fff;
  color: #007b00;
  font-weight: bold;
}

.autocomplete-list li:last-child {
  border-bottom: none;
}

/* Boutons génériques du comptoir (Rechercher, Filtres, Lister en masse...) :
   une seule famille de forme — surface parchemin, bordure encre, réglette
   laiton en pied qui s'épaissit au survol/focus — plutôt que le bouton
   blanc par défaut du navigateur. Libellés en petites capitales espacées,
   dans le prolongement du traitement déjà utilisé sur RL/Foil. */
.header-controls button,
.header-controls select,
.mass-filters button,
.mass-filters select,
.mass-progress-bar button,
.mass-filter-threshold,
.sort-toggle-btn,
.header-icon-btn,
.recalculate-cart-btn,
.back-to-cards-btn {
  box-sizing: border-box;
  height: 36px;
  padding: 0 16px;
  font-weight: bold;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--mist);
  border-bottom: 3px solid var(--mist);
  background-color: var(--parchment);
  color: var(--ink);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.15s ease,
    transform 0.1s ease;
}

/* Une liste déroulante prend la forme commune mais garde sa casse : ses options
   sont des DONNÉES — un nom d'extension, un nombre de résultats — et les petites
   capitales du libellé d'un bouton y déformeraient « Modern Horizons 2 ». */
.header-controls select,
.mass-filters select {
  text-transform: none;
  letter-spacing: normal;
  padding: 0 8px;
}

.header-controls button:hover,
.header-controls select:hover,
.mass-filters button:hover,
.mass-filters select:hover,
.mass-progress-bar button:hover,
.sort-toggle-btn:hover,
.header-icon-btn:hover,
.recalculate-cart-btn:hover,
.back-to-cards-btn:hover {
  border-bottom-color: var(--brass);
  transform: translateY(-1px);
}

.header-controls button:active,
.mass-filters button:active,
.mass-progress-bar button:active,
.sort-toggle-btn:active,
.header-icon-btn:active,
.recalculate-cart-btn:active,
.back-to-cards-btn:active {
  transform: translateY(0);
}

/* Action principale du comptoir : remplie du vert déjà établi ailleurs sur
   le site pour "racheter/valider", afin que "Rechercher" se distingue
   immédiatement des actions secondaires (Filtres, Lister en masse). */
/* Icône seule (utilisée par #searchBtn, réutilisable pour d'autres
   boutons d'action compacts) : gabarit carré compact, sans lui imposer
   de couleur — chaque bouton garde la sienne. */
button.icon-only-btn {
  width: 36px;
  padding: 0;
  flex-shrink: 0;
}

.icon-only-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Loupe plutôt que le texte "RECHERCHER" : réduit la taille du bouton
   dans tous les modes (desktop, mobile, bulk) puisque c'est le même
   élément partout, pas une variante par contexte. Reste l'action
   principale du comptoir, d'où le vert plein conservé. */
#searchBtn.icon-only-btn,
.sort-toggle-btn.active,
.mass-filter-btn.active {
  background-color: #007b00;
  border-color: #006600;
  border-bottom-color: #004d00;
  color: #fff;
}

#searchBtn.icon-only-btn:hover {
  background-color: #006600;
  border-bottom-color: var(--brass-light);
}

/* Onglets de mode (Rechercher / Lister en masse) : toujours visibles,
   cliquer sur l'un ou l'autre EST le moyen de changer de mode — plus
   besoin d'un bouton "Annuler" séparé et ambigu pour revenir en arrière. */

.filter-toggle-group {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}

.filter-toggle-btn {
  color: #7a6d55;
  padding: 0 12px;
  min-width: 36px;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.filter-toggle-btn:not(.active):hover {
  background-color: #fff;
  border-bottom-color: var(--brass);
  transform: translateY(-1px);
}

#filterRLBtn.active,
.mass-filter-rl.active {
  background-color: var(--wine) !important;
  color: white !important;
  border-color: var(--wine) !important;
}
#filterHideNotBoughtBtn.active,
#searchExactBtn.active {
  background-color: var(--brass) !important;
  color: white !important;
  border-color: var(--brass) !important;
}

/* Tri : deux boutons compacts (prix / nom) au lieu d'un menu à 5 options —
   un clic active le critère (état par défaut), un second clic sur le
   MÊME bouton inverse juste le sens ; cliquer l'autre bouton change de
   critère. Même famille visuelle que RL/Foil, actif en vert (convention
   "sélectionné" du reste du site). */
/* Visible des qu'il est rendu. Il l'etait auparavant masque ici et revele par
   un `style` en ligne cote recherche, alors que React ne le monte deja que
   lorsqu'il y a des resultats : deux gardes pour une condition, dont l'une
   rendait le groupe invisible partout ou l'autre manquait. */
.sort-toggle-group {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}

.sort-toggle-btn {
  gap: 3px;
  padding: 0 10px;
  color: var(--ink);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.sort-toggle-btn .sort-arrow {
  font-size: 0.8rem;
}

.sort-toggle-btn:not(.active):hover {
  background-color: #fff;
  border-bottom-color: var(--brass);
  transform: translateY(-1px);
}

/* Bouton "Réessayer" affiché dans #results quand une panne réseau (et non
   une simple absence de résultat) interrompt la recherche Scryfall. */
#retrySearchBtn {
  padding: 9px 22px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--mist);
  border-bottom: 3px solid var(--mist);
  background-color: var(--parchment);
  color: var(--ink);
  cursor: pointer;
}

#retrySearchBtn:hover {
  border-bottom-color: var(--brass);
}

/* Messages affichés dans #results (recherche en cours, aucune carte,
   panne réseau, aucun prix valide). */
.results-message {
  color: white;
  font-size: 1.2rem;
  text-align: center;
}

.results-message-strong {
  font-weight: bold;
}

.results-message-error {
  color: #ffcccc;
  font-size: 1.1rem;
}

.results-retry-row {
  text-align: center;
}

/* Squelettes de cartes affichés pendant une recherche (voir searchCard) :
   blocs au format carte avec un léger balayage lumineux. */
.skeleton-slide {
  flex: 0 0 330px;
  width: 330px;
  height: 460px;
  border-radius: 8px;
  background: linear-gradient(100deg, #88888833 40%, #aaaaaa55 50%, #88888833 60%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
}

@keyframes skeletonShimmer {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -80% 0;
  }
}

/* En vue liste, les squelettes deviennent des lignes, comme les vrais
   résultats. */
#results.list-view .skeleton-slide {
  flex: 0 0 auto;
  width: 100%;
  max-width: 1000px;
  height: 72px;
}

/* Mise en page des résultats : VUE GRILLE (Défaut) */
#results {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  justify-content: center;
  transition: all 0.3s ease;
}

#results .slide,
.mass-card .slide {
  flex: 0 0 330px;
  width: 330px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Éléments internes de la carte (Communs & Grille) */

/* VUE LISTE / TABLEAU */
#results.list-view {
  flex-direction: column;
  align-items: center;
}

#results.list-view .slide {
  flex: 0 0 auto;
  width: 100%;
  max-width: 1000px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  background: rgba(0, 0, 0, 0.4);
  padding: 10px 15px;
  border-radius: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #88888855;
}

/* Réorganisation via l'attribut CSS `order`.

   La vignette est <card-tile> (Web Component) depuis qu'il a remplacé
   l'ancien balisage image. Les règles de miniature visaient
   .card-img-container, classe qui a disparu avec ce balisage : plus rien ne
   dimensionnait .card-tile-wrap, qui s'effondrait à 0×0 — donc AUCUNE
   miniature, et les deux éléments calés dessus (sceau HOT, badge "prix à
   confirmer") repliés sur une boîte vide, le badge devenant un ruban
   vertical de 20px de large en travers de la ligne.

   `display: contents` sur le wrapper : ses enfants deviennent des éléments
   directs de la ligne flexible, chacun repositionnable par `order` — même
   principe que .card-price-pill plus bas. Le wrapper n'existait que pour
   servir de repère de position aux deux superpositions, inutile ici
   puisqu'elles redeviennent des éléments de la ligne. */
#results.list-view .card-tile-wrap {
  display: contents;
}

#results.list-view card-tile {
  order: 1;
  flex: 0 0 50px;
  width: 50px; /* Miniature ! La hauteur suit (aspect-ratio, card-tile.css) */
  margin: 0;
}

/* Superposés à l'image en vue grille ; une miniature de 50px est trop
   petite pour les porter, ils redeviennent des éléments de la ligne. Le
   position:static est indispensable : leur repère de position vient de
   disparaître avec le `display: contents` ci-dessus. */
#results.list-view .hot-seal,
#results.list-view .manual-review-badge {
  position: static;
  transform: none;
}

/* L'étoile à 12 branches est tracée en % (voir .hot-seal, cards.css) : la
   réduire redessine le même contour à l'échelle, sans retoucher le tracé. */
#results.list-view .hot-seal {
  /* Même rang que les autres marqueurs de la ligne (Normal/Foil, RL) : le
     CSS mobile le prévoyait déjà ainsi, sous son ancien nom .hot-badge. */
  order: 4;
  width: 30px;
  height: 30px;
  font-size: 0.45rem;
  align-self: center;
  flex: 0 0 auto;
}

/* Les deux bandeaux explicatifs prennent chacun leur ligne pleine largeur,
   JUSTE AVANT le bouton d'ajout : leur texte est long, et ils commentent le
   prix affiché au-dessus.

   Un `order` explicite est OBLIGATOIRE pour tout élément de la ligne : sans
   lui il vaut 0, donc AVANT la vignette (rang 1). C'est ce qui faisait sauter
   la miniature d'une ligne à l'autre — présente à gauche sur une carte
   ordinaire, rejetée à droite dès qu'un bandeau la précédait. Même raison
   pour .already-in-cart-badge, invisible tant que la carte n'est pas au
   panier mais qui prenait la tête de la ligne dès qu'elle y entrait. */
#results.list-view .already-in-cart-badge {
  order: 8;
  align-self: center;
}

#results.list-view .not-legal-badge {
  order: 9;
  width: 100%;
  margin: 2px 0 0;
}

#results.list-view .manual-review-badge {
  order: 10;
  width: 100%;
  max-width: none;
  margin: 2px 0 0;
}
#results.list-view .card-name {
  order: 2;
  text-align: left;
  flex: 1; /* Prend l'espace vide restant */
  margin: 0;
  font-size: 1.15rem;
  white-space: normal;
}
#results.list-view .card-set-info {
  order: 3;
  margin: 0;
  min-width: 80px;
}
#results.list-view .card-price-pill {
  order: 4;
  /* style.css fixe "width: 100%" pour la vue grille (la pastille doit
     occuper toute la largeur de la colonne). Sans ce reset, elle gardait
     ce 100% par rapport à la LIGNE entière en vue liste, écrasant le nom
     de la carte (flex:1 + overflow:hidden -> 0px de large, invisible). */
  width: auto;
  flex-wrap: nowrap;
  margin: 0;
  justify-content: flex-end;
}
#results.list-view .btn-add {
  order: 5;
  width: auto;
  margin: 0;
  padding: 8px 20px;
  white-space: nowrap;
}

/* Tiroir de filtres (voir initFilterDrawer, ui.js)
   Au-delà de 768px il n'existe pas : le bouton est masqué et le conteneur
   passe en `display: contents`, ses enfants restant des éléments directs de
   la barre. La mise en page desktop est donc rigoureusement celle d'avant,
   à balisage près. */
.secondary-controls {
  display: contents;
}

/* `.header-controls button` (plus haut) impose display:inline-flex a tous
   les boutons de la barre et l'emporte en specificite sur une simple classe :
   le selecteur doit donc etre au moins aussi specifique pour le masquer. */
.header-controls .filters-toggle-btn {
  display: none;
}

/* Responsive mobile */
@media (max-width: 768px) {
  body.is-scrolled .fixed-header-wrapper {
    /* Hauteur du bloc au-dessus des contrôles, mesurée dynamiquement (voir
       syncFixedHeaderHeight dans ui.js) et exposée via
       --header-collapse-offset ; 180px reste en secours si la variable
       n'est pas encore posée (tout premier rendu). */
    top: calc(-1 * var(--header-collapse-offset, 180px));
  }

  .header-controls {
    /* row + wrap (comme le desktop, juste plus étroit) plutôt que column :
       en colonne, CHAQUE contrôle — y compris les petits boutons $↓/A↑/
       RL/Foil — prenait sa propre ligne pleine largeur,
       gonflant le bandeau à 7 lignes avant même la première carte. En
       row+wrap, seul le champ de recherche (width:100% ci-dessous) force
       sa propre ligne ; tout le reste se regroupe naturellement selon la
       largeur disponible. */
    padding: 10px;
    gap: 8px;
    display: flex;
  }

  .search-group {
    display: contents;
  }

  /* Le champ PARTAGE sa ligne avec la loupe et le ☰ au lieu de l'occuper
     entièrement.

     La liste de suggestions se déploie sous le champ, en superposition
     (z-index 1000) : tant que le champ tenait une ligne à lui seul, elle
     recouvrait la rangée suivante — donc le ☰. Un appui dessus atterrissait
     sur une suggestion et lançait une recherche au lieu d'ouvrir le tiroir,
     le bouton paraissant simplement mort. Sur la même ligne, plus aucun
     contrôle ne passe sous la liste ; elle ne peut plus recouvrir que les
     résultats, ce qui est son rôle. */
  .input-wrapper {
    flex: 1 1 120px;
    width: auto;
    min-width: 0;
    order: 2;
  }

  #searchExactBtn {
    order: 1;
  }
  #searchBtn {
    order: 3;
  }
  .header-controls .filters-toggle-btn {
    order: 4;
  }
  .header-controls .results-count {
    order: 5;
  }
  .secondary-controls.is-open {
    order: 6;
  }

  .header-controls input[type='text'] {
    width: 100%;
  }

  #results .slide {
    flex: 0 0 100%;
    max-width: 350px;
  }

  /* Adapter la Vue Liste sur téléphone : le nom garde sa propre ligne
     pleine largeur (le faire partager la ligne avec Foil/état/langue
     cassait mal dès que le nom était un peu long — la largeur disponible
     variait trop et le groupe de contrôles se scindait n'importe où).
     La ligne SUIVANTE regroupe extension + Foil + état + langue + prix :
     leur largeur cumulée est prévisible (courte), donc ce groupe tient
     naturellement sur une seule ligne sans casser. */
  #results.list-view .slide {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 4px;
  }

  #results.list-view card-tile {
    flex-basis: 42px;
    width: 42px;
  }

  #results.list-view .card-name {
    order: 2;
    width: calc(100% - 55px);
    flex: none;
    font-size: 0.95rem;
  }

  /* La pill perd sa boîte : ses enfants (badge Foil/toggle Normal-Foil,
     état, langue, prix) deviennent des éléments directs de la ligne
     flexible de .slide, repositionnables un par un via `order` — même
     principe déjà utilisé pour image/nom/extension/bouton. Comme le nom
     a déjà pris toute la largeur de sa propre ligne (ci-dessus), ces
     éléments démarrent automatiquement une nouvelle ligne, ensemble. */
  #results.list-view .card-price-pill {
    display: contents;
  }

  /* Badge d'extension : texte discret plutôt qu'un bandeau sombre
     imposant — mais PAS le sélecteur d'extension du mode bulk
     (:not(select)), qui garde sa taille tactile normale. En premier sur
     la ligne (aligné sous la miniature). */
  #results.list-view .card-set-info:not(select) {
    order: 3;
    width: auto;
    padding: 0;
    font-size: 0.7rem;
    font-weight: normal;
    background: none;
    color: #bbb;
    align-self: center;
  }

  #results.list-view select.card-set-info {
    order: 3;
  }

  /* .hot-badge retiré : cette classe n'existe plus depuis le passage au
     sceau .hot-seal, qui a désormais sa propre règle plus haut. */
  #results.list-view .status-toggle,
  #results.list-view .card-tags {
    order: 4;
  }

  #results.list-view .condition-select {
    order: 5;
    padding: 2px 4px;
    font-size: 0.8rem;
  }

  /* Sans `order`, il repartirait au rang 0, donc en tête de ligne, loin du
     sélecteur dont il explique les codes. Le même rang que lui : l'ordre du
     source les départage, et le lien vient juste après. */
  #results.list-view .condition-help {
    order: 5;
  }

  #results.list-view .language-select {
    order: 6;
    padding: 2px 4px;
    font-size: 0.8rem;
  }

  /* margin-left:auto plutôt que width:100%+text-align:right : pousse le
     prix à l'extrémité droite de SA ligne (partagée avec extension/Foil/
     état/langue) sans lui faire prendre toute la largeur ni forcer une
     ligne à lui seul. */
  #results.list-view .price-display {
    order: 7;
    margin-left: auto;
    align-self: center;
  }

  /* Dernier : les rangs 8 à 10 sont pris par les bandeaux explicatifs
     (voir plus haut). */
  #results.list-view .btn-add {
    order: 11;
    width: 100%;
    margin-top: 4px;
    padding: 8px;
    font-size: 0.9rem;
  }

  /* Le tiroir devient une vraie boîte : fermé par défaut, il occupe toute
     la largeur de la barre une fois ouvert et pousse le contenu vers le
     bas — pas de superposition, qui masquerait les premières cartes. */
  .secondary-controls {
    display: none;
  }

  .secondary-controls.is-open {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 4px;
  }

  .secondary-controls.is-open select {
    flex: 1 1 100%;
  }

  .header-controls .filters-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    padding: 0 12px;
    min-width: 44px;
    color: var(--ink);
  }

  .header-controls .filters-toggle-btn[aria-expanded='true'] {
    background-color: var(--brass);
    color: #fff;
    border-color: var(--brass);
  }

  /* Pastille du nombre de filtres actifs : sans elle, un filtre resté
     allumé devient invisible tiroir fermé, et on chercherait longtemps
     pourquoi il manque des cartes. */
  .filters-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--wine);
    color: #fff;
    font-size: 0.62rem;
    line-height: 1;
  }

  .filters-count-badge[hidden] {
    display: none;
  }
}

/* Bouton Foil à 3 états (voir search.js/toggleResultFilter)
   Fond noir au repos (rien), fond doré plein au 1er clic (.foil-only —
   UNIQUEMENT foil repris), fond parchemin "plat" (comme un bouton
   ordinaire de la barre) au 2e clic (.normal-only — UNIQUEMENT normal
   repris, jamais de foil — le bouton "redevient banal" pour signaler
   "rien de foil ici"), retour au repos au 3e — même traitement que
   bulk.html (bulk-display.css). Les deux états stricts et symétriques
   (jamais un état intermédiaire "foil, normal éventuellement aussi",
   jugé peu utile en pratique). */
#filterFoilBtn,
.mass-filter-foil {
  background: #1a1410 !important;
  color: #f3ead8 !important;
  font-size: 1rem;
  letter-spacing: 0;
}

#filterFoilBtn.foil-only,
.mass-filter-foil.foil-only {
  background: var(--foil-gradient) !important;
  color: #5a3c00 !important;
}

#filterFoilBtn.normal-only,
.mass-filter-foil.normal-only {
  background: var(--parchment) !important;
  color: var(--ink) !important;
}

/* Compteur de cartes affichées */
.results-count {
  font-size: 0.78rem;
  color: var(--mist);
  font-weight: 500;
  white-space: nowrap;
  align-self: center;
  padding: 0 4px;
}