/* --- Wrapper pour fixer le header ---
   Avant : "body { padding-top: 320px; }" en dur — cassait (chevauchement
   avec #results) dès que le contenu du header changeait de hauteur
   (changement de langue, ouverture des filtres mobile, redimensionnement...).
   La hauteur réelle est maintenant mesurée et appliquée dynamiquement par
   syncFixedHeaderHeight() dans buyback.js (appelée au chargement, au resize,
   à l'ouverture des filtres mobile et au changement de langue). */
body {
  padding-top: 0;
}

.fixed-header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 950;
  background-image: url("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 */
.header-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  /* Item #9 : "flex-wrap: nowrap" forçait tous les contrôles (recherche,
     filtres, tri, affichage) sur une seule ligne. Sur un écran desktop
     "moyen" (~1024-1366px), il n'y avait pas assez de place et ça débordait
     horizontalement — aucun palier intermédiaire n'existait entre le
     desktop large et le mode mobile (<=768px). "wrap" laisse les contrôles
     passer proprement à la ligne suivante quand ça manque de place. */
  flex-wrap: wrap;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}

.search-group, .filter-group {
  display: contents;
}

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

.header-controls input[type="text"] {
  padding: 8px;
  width: 200px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  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: #333;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.autocomplete-list li:hover {
  background-color: #f4f4f4;
  color: #007b00;
  font-weight: bold;
}

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

/* Boutons Header */
.header-controls button {
  padding: 8px 15px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #fff;
  white-space: nowrap;
}

.header-controls button:hover {
  background-color: #f0f0f0;
}

.mobile-filter-btn {
  display: none;
}

#setSelect, #versionSelect {
  display: none;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#setSelect { max-width: 220px; }
#versionSelect { max-width: 280px; }
#sortBtn { display: none; }

#displayCountSelect {
  padding: 8px;
  border-radius: 4px;
  font-weight: bold;
  border: 1px solid #ccc;
}

/* --- 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 {
  flex: 0 0 330px;
  width: 330px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Éléments internes de la carte (Communs & Grille) */
.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%;
}

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

.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;
}

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

/* --- 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);
}

/* Réorganisation via l'attribut CSS `order` */
#results.list-view .card-img-container {
  order: 1;
  width: 50px; /* Miniature ! */
  height: auto;
  aspect-ratio: auto;
  margin: 0;
}
#results.list-view .card-img-container img { position: static; height: auto; border-radius: 4px; }

/* Sans ça, une carte DFC en vue liste afficherait le recto ET le verso
   empilés (bruts) dans la miniature au lieu de continuer à alterner. */
#results.list-view .card-img-container.is-dfc {
  aspect-ratio: 488 / 680;
}
#results.list-view .card-img-container.is-dfc img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
#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;
}

/* --- 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: linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%);
  color: #111;
}

/* --- Sidebar --- */
.sidebar {
  position: fixed;
  top: 0;
  right: -400px;
  width: 350px;
  height: 100%;
  background-color: #f4f4f4;
  box-shadow: -4px 0 15px rgba(0,0,0,0.3);
  transition: right 0.3s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
}

.sidebar.open { right: 0; }

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #ccc;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

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

.close-btn {
  background: #cc0000;
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
}

.clear-cart-btn {
  background: none;
  border: 1px solid #999;
  color: #666;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.clear-cart-btn:hover { background-color: #cc0000; border-color: #cc0000; color: white; }

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

#cartList li {
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
}

.remove-btn {
  color: red;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: bold;
  padding: 0 5px;
  font-size: 1.2rem;
}

.qty-badge {
  display: inline-block;
  background-color: #007b00;
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 1px 7px;
  border-radius: 10px;
  vertical-align: middle;
}

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

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

.secondary-btn {
  flex: 1;
  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; }

/* --- Bouton flottant du panier --- */
.floating-cart-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #007b00;
  color: white;
  border: 2px solid white;
  border-radius: 50px;
  padding: 15px 25px;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 999;
  transition: transform 0.2s;
}

.floating-cart-btn:hover { transform: scale(1.05); }

/* --- Toasts (Notifications) --- */
.toast-container {
  position: fixed;
  bottom: 90px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
}

.toast {
  background-color: #333;
  color: #fff;
  padding: 12px 20px;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  border-left: 5px solid #007b00;
  font-weight: bold;
  font-size: 0.95rem;
  opacity: 1;
  transition: opacity 0.3s ease;
  animation: slideInRight 0.3s forwards;
}

@keyframes slideInRight {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.info-tooltip {
  font-size: 1.1rem;
  margin-left: 6px;
  cursor: help;
  opacity: 0.8;
  vertical-align: middle;
}

.info-tooltip:hover { opacity: 1; }

/* =========================================
   MEDIA QUERIES - RESPONSIVE MOBILE
   ========================================= */
@media (max-width: 768px) {
  body.is-scrolled .fixed-header-wrapper {
    /* Avant : "top: -180px;" en dur — supposait une hauteur fixe pour le
       bloc logo+bannière au-dessus des contrôles de recherche. La vraie
       hauteur est maintenant mesurée par syncFixedHeaderHeight() dans
       buyback.js et exposée via --header-collapse-offset ; le 180px reste
       en secours si jamais la variable n'est pas encore posée. */
    top: calc(-1 * var(--header-collapse-offset, 180px));
  }

  .fb-profile {
    width: 100px;
    height: 100px;
    left: 10px;
    bottom: -50px;
  }
  .fb-title {
    font-size: 35px;
    left: 130px;
    bottom: 20px;
  }
  .qr-code { display: none; }

  .header-controls {
    flex-direction: column;
    padding: 10px;
    display: flex;
  }

  .search-group {
    display: flex;
    width: 100%;
    gap: 8px;
  }

  .input-wrapper {
    flex-grow: 1;
  }

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

  .mobile-filter-btn { display: block; }

  .filter-group {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 8px;
    margin-top: 10px;
  }

  .filter-group.show-filters { display: flex; }

  .filter-group select, .filter-group button {
    width: 100%;
    max-width: 100% !important;
  }

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

  /* Adapter la Vue Liste sur téléphone */
  #results.list-view .slide {
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
  }
  #results.list-view .card-name {
    width: calc(100% - 65px);
    flex: none;
  }
  #results.list-view .card-set-info {
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
  }
  #results.list-view .card-price-pill {
    width: 100%;
    justify-content: space-between;
  }
  #results.list-view .btn-add {
    width: 100%;
    margin-top: 10px;
  }

  .sidebar {
    width: 100%;
    right: -100%;
  }

  .toast-container {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 90px;
    width: 90%;
    max-width: 350px;
  }

  @keyframes slideInRight {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}