/* =========================================================
   Design system — Marketplace de cartes à collectionner
   Pokémon / One Piece Card Game / Yu-Gi-Oh! / Cartes gradées
   ========================================================= */

:root {
  /* Thème sombre "table de jeu" + liserés dorés, pensé pour mettre en
     valeur les visuels de cartes à collectionner (fonds profonds, accents
     dorés sur les bordures, badges et CTA). */
  --primary: #16233a;
  --primary-dark: #0d1420;
  --accent: #b8860b;       /* or — liserés, CTA "Acheter maintenant", badges */
  --accent-dark: #96700a;
  --accent-soft: rgba(184, 134, 11, 0.35);
  --danger: #e5595f;
  --success: #3fb87f;
  --bg: #0a1019;
  --card-bg: #111a29;
  --border: rgba(184, 134, 11, 0.22);
  --text: #eef1f6;
  --text-muted: #93a1b8;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background-color: var(--bg);
  /* Pied de page "collé" en bas : body en colonne flex sur toute la hauteur
     de la fenêtre, main pousse le reste (flex: 1 0 auto ci-dessous) pour
     que le footer reste toujours au ras du bas de l'écran quand le contenu
     est court, et suive naturellement le contenu quand il dépasse la
     hauteur de la fenêtre. */
  display: flex;
  flex-direction: column;
  /* Refonte 2026 — ambiance "table de jeu" : lueurs radiales feutrées +
     treillis géométrique en losanges (motif abstrait générique, sans
     référence à une licence précise) en surimpression sur tout le fond de
     page — visible aussi bien dans les marges latérales que derrière les
     zones sans encart opaque. Volontairement discret (faible opacité) pour
     ne jamais nuire à la lisibilité du texte, porté par les panneaux
     opaques (--card-bg / --primary) au-dessus. */
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(184, 134, 11, 0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(22, 35, 58, 0.55), transparent 60%),
    repeating-linear-gradient(45deg, rgba(184, 134, 11, 0.045) 0px, rgba(184, 134, 11, 0.045) 1px, transparent 1px, transparent 56px),
    repeating-linear-gradient(-45deg, rgba(184, 134, 11, 0.045) 0px, rgba(184, 134, 11, 0.045) 1px, transparent 1px, transparent 56px);
  background-attachment: fixed;
  min-height: 100vh;
}

/* ---------- Header ---------- */
header {
  background: var(--primary);
  border-bottom: 1px solid var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 16px 32px;
  position: sticky;
  top: 0;
  z-index: 10;
}

header .logo {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
}
header .logo .accent { color: var(--accent); }

/* Refonte 2026 — bandeau lumineux "circuit imprimé", centré entre le logo et
   la zone profil : trace de PCB stylisée (générique, aucune référence de
   licence) surmontée d'un flux lumineux continu cyan/magenta/or. Étiré sur
   toute la hauteur disponible du header (align-self: stretch, indépendant du
   align-items: center du header) et sur une grande partie de sa largeur,
   pour ne plus se perdre au milieu de la barre. Pas de contour ni de fond
   propres (aucun "bloc" visible) : un masque en dégradé estompe
   progressivement la trace ET la lueur vers chaque extrémité horizontale,
   pour qu'elles semblent naître et se dissoudre dans le fond du header
   plutôt que d'être découpées par un bord net. Purement décoratif
   (aria-hidden) et masqué sur petit écran pour ne jamais gêner la
   navigation. */
.circuit-banner {
  flex: 1 1 auto;
  max-width: 1100px;
  align-self: stretch;
  margin: 0 16px;
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cpath d='M0 15 H16 V7 H34 V23 H60' fill='none' stroke='rgba(184,134,11,0.55)' stroke-width='1.4'/%3E%3Ccircle cx='16' cy='7' r='2' fill='rgba(0,229,255,0.55)'/%3E%3Ccircle cx='34' cy='23' r='2' fill='rgba(255,0,200,0.55)'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 70px 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 24%, black 76%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 24%, black 76%, transparent 100%);
}
.circuit-banner-glow {
  position: absolute;
  inset: 0;
  display: block;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 229, 255, 0.75) 20%,
    rgba(184, 134, 11, 0.85) 45%,
    rgba(255, 0, 200, 0.75) 70%,
    transparent 100%
  );
  background-size: 260% 100%;
  filter: blur(3px);
  opacity: 0.8;
  mix-blend-mode: screen;
  animation: circuit-flow 5s linear infinite;
}
@keyframes circuit-flow {
  0% { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .circuit-banner-glow { animation: none; }
}
@media (max-width: 860px) {
  .circuit-banner { display: none; }
}

#nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-user { color: #cbd3e1; margin-right: 6px; font-size: 0.9rem; }

/* ---------- Menu déroulant "Mon profil" ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 4px; }
.nav-dropdown-caret { font-size: 0.7em; }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  background: var(--card-bg);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 20;
}

.nav-dropdown-menu a {
  color: var(--text) !important;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 9px 10px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-dropdown-menu a:hover {
  background: rgba(184, 134, 11, 0.12);
  color: var(--accent) !important;
}

.nav-dropdown-divider { height: 1px; background: var(--border); margin: 6px 2px; }

.nav-dropdown-section { padding: 6px 10px 8px; }
.nav-dropdown-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.nav-track-form { display: flex; gap: 6px; background: none; border: none; padding: 0; box-shadow: none; }
.nav-track-form input {
  flex: 1;
  min-width: 0;
  padding: 7px 9px;
  font-size: 0.85rem;
}
.nav-track-form button {
  flex-shrink: 0;
  padding: 6px 10px;
  line-height: 1;
}

/* ---------- Navigation catégories ---------- */
.category-nav {
  background: var(--primary-dark);
  display: flex;
  gap: 4px;
  padding: 0 32px;
  overflow-x: auto;
  flex-shrink: 0;
}
.category-nav a {
  color: #d8dee9;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 12px 14px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.category-nav a:hover,
.category-nav a.active {
  color: #fff;
  border-bottom-color: var(--accent);
}

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 20px 60px;
  /* Occupe tout l'espace restant entre le header et le footer (voir
     display:flex sur body) : pousse le footer au bas de l'écran quand le
     contenu est court, sans jamais l'empêcher de suivre un contenu plus
     long que la fenêtre. */
  flex: 1 0 auto;
  width: 100%;
}

h1 { font-size: 1.7rem; margin-bottom: 4px; letter-spacing: -0.01em; }
.subtitle { color: var(--text-muted); margin-top: 0; margin-bottom: 28px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--accent-soft);
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn:hover { background: var(--primary-dark); border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 7px 12px; font-size: 0.85rem; }
.btn-outline { background: transparent; color: var(--accent); border: 1px solid var(--accent-soft); }
.btn-outline:hover { background: rgba(184, 134, 11, 0.12); border-color: var(--accent); color: var(--accent); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* CTA "Acheter maintenant" : doré, bien distinct de l'enchère classique */
.btn-buy-now {
  background: var(--accent);
  color: var(--primary-dark);
}
.btn-buy-now:hover { background: var(--accent-dark); }

/* ---------- Grille d'objets ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}

/* ---------- Pagination (accueil, profils vendeur) ---------- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 36px 0 8px;
}
.pagination-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pagination-btn:hover:not([disabled]) {
  border-color: var(--accent);
  color: var(--accent);
}
.pagination-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a1019;
}
.pagination-btn[disabled] {
  opacity: 0.35;
  cursor: default;
}
.pagination-ellipsis {
  color: var(--text-muted);
  padding: 0 4px;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--accent-soft);
}

/* Annonces mises en avant (boost payant) : liseré doré plein + halo */
.card.boosted { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow); }

.card .media { position: relative; }
.card img, .card .no-photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: #0d1522;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Badge de catégorie, en surimpression sur la photo */
.badge-category {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(10, 16, 25, 0.85);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--accent-soft);
}

/* Badge de gradation (PSA / PCA / BGS + note) */
.badge-grade {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--accent);
  color: #1a1204;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 6px;
}

/* Badge "mise en avant" (boost payant) */
.badge-boost {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #1a1204;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.card-body { padding: 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card-title { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.card-price { font-weight: 700; color: var(--accent); font-size: 1.15rem; }
.card-price .label { font-weight: 500; color: var(--text-muted); font-size: 0.78rem; display: block; }
.card-buy-now { font-size: 0.82rem; color: var(--accent); font-weight: 700; }

.countdown { font-size: 0.85rem; color: var(--danger); font-weight: 700; font-variant-numeric: tabular-nums; }
.countdown.ending-soon { animation: pulse 1s infinite; }

/* ---------- Barre de recherche (accueil) ---------- */
.search-bar-container {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0 0 24px;
  max-width: 480px;
  flex-direction: row;
  gap: 0;
}
.search-bar-container input {
  border-radius: 8px 0 0 8px;
  border-right: none;
}
.search-bar-container button {
  border-radius: 0 8px 8px 0;
  flex-shrink: 0;
}

/* Résultats "vendeurs" affichés au-dessus de la grille quand la recherche
   correspond à un nom de profil (ex. "Julien 1") */
.seller-results { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.seller-result-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease;
}
.seller-result-card:hover { border-color: var(--accent); }
.seller-result-card .seller-name { font-weight: 700; }
.seller-result-card .seller-meta { font-size: 0.8rem; color: var(--text-muted); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ---------- Formulaires ---------- */
form {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow);
}

fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 0;
}
fieldset legend { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); padding: 0 6px; }

label { font-size: 0.9rem; font-weight: 600; }
label .optional { font-weight: 400; color: var(--text-muted); font-size: 0.8rem; }

input, textarea, select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  width: 100%;
  background: #0d1522;
  color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
input[type="file"] { padding: 8px 10px; }
textarea { resize: vertical; min-height: 90px; }

/* Case à cocher "majeur" et CGU : bien visible, jamais pré-cochée */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
}
.checkbox-row input[type="checkbox"] { width: auto; margin-top: 3px; }

/* ---------- Alertes / mentions légales ---------- */
.alert {
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  margin-bottom: 14px;
  line-height: 1.5;
}
.alert-error { background: rgba(229, 89, 95, 0.12); color: var(--danger); border: 1px solid rgba(229, 89, 95, 0.35); }
.alert-success { background: rgba(63, 184, 127, 0.12); color: var(--success); border: 1px solid rgba(63, 184, 127, 0.35); }
.alert-info { background: rgba(184, 134, 11, 0.08); color: var(--text); border: 1px solid var(--border); }

/* Sélecteur de type de compte (Particulier / Pro) à l'inscription */
.radio-row { display: flex; gap: 16px; }
.radio-row label { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.radio-row input[type="radio"] { width: auto; }

.hidden { display: none !important; }

/* Notation par étoiles (formulaire d'avis, avis.html) : purement CSS via
   inputs radio inversés + sélecteur ~ pour surligner au survol/sélection,
   sans dépendance JS. */
.star-rating { border: none; padding: 0; }
.star-rating legend { padding: 0 0 6px; }
.star-rating .stars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}
.star-rating input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.star-rating label {
  font-size: 2.1rem;
  line-height: 1;
  color: var(--border);
  cursor: pointer;
  transition: color 0.15s;
  width: auto;
}
.star-rating input:checked ~ label,
.star-rating .stars:hover label:hover,
.star-rating .stars:hover label:hover ~ label {
  color: var(--accent);
}
.star-rating input:focus-visible ~ label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Mention obligatoire : envoi recommandé + port inclus + vidéo d'unboxing */
.legal-notice {
  background: rgba(184, 134, 11, 0.06);
  border: 1px dashed var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.legal-notice strong { color: var(--text); }

/* ---------- Page objet ---------- */
.item-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}
@media (max-width: 800px) {
  .item-detail { grid-template-columns: 1fr; }
}
.item-detail img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }

.bid-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}

.buy-now-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  text-align: center;
}

.bids-list { list-style: none; padding: 0; margin: 10px 0 0; }
.bids-list li {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

/* ---------- Paiement Stripe ---------- */
#StripeElement, .stripe-element {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8f8f8;
}

/* ---------- Tableau de bord ---------- */
.dashboard-tabs { display: flex; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.dashboard-tabs button {
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.dashboard-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 28px; }
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  box-shadow: var(--shadow);
}
.stat-card .value { font-size: 1.5rem; font-weight: 800; color: var(--accent); }
.stat-card .label { font-size: 0.8rem; color: var(--text-muted); }

footer {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 24px;
  flex-shrink: 0;
  width: 100%;
}

/* Correction de la visibilité des liens et boutons dans le header */
header a,
#nav-actions a,
.nav-user {
    color: #ffffff !important;
}

header a:hover, 
#nav-actions a:hover {
    color: var(--accent) !important;
}
/* ---------- Superbe Footer style Amazon ---------- */
footer {
  background: var(--primary-dark);
  color: #a0aec0;
  font-size: 0.85rem;
  padding: 50px 20px 20px;
  margin-top: 80px;
  border-top: 1px solid var(--border);
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-col h4 {
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.footer-col a {
  display: block;
  color: #a0aec0;
  text-decoration: none;
  margin-bottom: 10px;
  transition: color 0.15s ease, padding-left 0.15s ease;
}

.footer-col a:hover {
  color: var(--accent);
  padding-left: 4px;
}

.footer-bottom {
  max-width: 1200px;
  margin: 25px auto 0;
  text-align: center;
  color: #718096;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ---------- Pages secondaires (histoire, vendre, paiement, frais,
   litiges, sécurité, contact, mentions légales...) ---------- */
.navbar {
  background: var(--primary);
  border-bottom: 1px solid var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 32px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.navbar .logo { font-weight: 700; font-size: 1.25rem; letter-spacing: 0.02em; color: #fff; }

.nav-links { list-style: none; display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; }
.nav-links a {
  display: inline-block;
  color: #cbd3e1;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-links a:hover,
.nav-links a.active {
  color: #fff;
  background: rgba(184, 134, 11, 0.16);
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.content-box {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 34px;
  box-shadow: var(--shadow);
}
.content-box h1 { margin-top: 0; }
.content-box p { line-height: 1.7; color: var(--text); }
.content-box ul { line-height: 1.8; padding-left: 22px; color: var(--text); }
.content-box h2 { color: var(--accent); font-size: 1.15rem; margin: 28px 0 8px; }
.content-box h2:first-of-type { margin-top: 6px; }