/* ============================================================
   PIMP TON JEU — Custom CSS PrestaShop Classic
   Version propre et consolidée
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Instrument+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

/* ── VARIABLES ── */
:root {
  --ink:    #18160f;
  --cream:  #faf7f2;
  --warm:   #f0ebe0;
  --gold:   #c9963a;
  --gold-h: #e8b84b;
  --green:  #2d5a3d;
  --text:   #2a2520;
  --muted:  #8a8070;
  --border: #e0d8cc;
  --white:  #ffffff;
  --radius: 10px;
}

/* ══════════════════════════════════════
   BASE
══════════════════════════════════════ */
body,
#wrapper,
#main {
  font-family: 'Instrument Sans', sans-serif !important;
  font-weight: 300 !important;
  background: var(--cream) !important;
  color: var(--text) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

a { color: var(--gold) !important; }
a:hover { color: var(--gold-h) !important; text-decoration: none !important; }

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
#header {
  background: var(--ink) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
}

/* Bande supérieure téléphone / langue */
.header-top {
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  padding: 6px 0 !important;
}

.header-top a,
.header-top span,
.header-top .material-icons {
  color: rgba(255,255,255,0.45) !important;
  font-size: 12px !important;
}

.header-top a:hover { color: var(--gold) !important; }

/* Logo — garder les couleurs d'origine */
#_desktop_logo img,
#header .logo img {
  filter: none !important;
  max-height: 80px !important;
}

/* ── PANIER ── */
/* On cible le div.header DANS le blockcart */
#_desktop_cart .blockcart .header {
  background: var(--gold) !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  transition: background 0.2s !important;
  border: none !important;
}

#_desktop_cart .blockcart .header:hover {
  background: var(--gold-h) !important;
}

/* Tous les enfants du header panier en ink */
#_desktop_cart .blockcart .header,
#_desktop_cart .blockcart .header a,
#_desktop_cart .blockcart .header i,
#_desktop_cart .blockcart .header span {
  color: var(--ink) !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 600 !important;
}

/* ── BARRE DE RECHERCHE ── */
#search_widget {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  width: 260px !important;
  height: 40px !important;
}

#search_widget form {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 8px !important;
  margin: 0 !important;
}

#search_widget input[type="text"],
#search_widget .ui-autocomplete-input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: #fff !important;
  font-size: 13px !important;
  font-family: 'Instrument Sans', sans-serif !important;
  padding: 0 !important;
  flex: 1 !important;
  height: auto !important;
}

#search_widget input[type="text"]::placeholder {
  color: rgba(255,255,255,0.3) !important;
}

#search_widget .material-icons {
  color: rgba(255,255,255,0.4) !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

/* ══════════════════════════════════════
   NAVIGATION
══════════════════════════════════════ */
#_desktop_top_menu,
.js-top-menu-bottom {
  background: var(--ink) !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

#_desktop_top_menu .top-menu a,
.js-top-menu-bottom .top-menu a {
  font-family: 'Syne', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.65) !important;
  padding: 18px 14px !important;
  display: block !important;
  transition: color 0.2s !important;
}

#_desktop_top_menu .top-menu a:hover { color: var(--gold) !important; }

/* Dropdown */
.top-menu .sub-menu,
.top-menu [data-depth="1"] {
  background: var(--ink) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5) !important;
}

.top-menu .sub-menu a {
  color: rgba(255,255,255,0.55) !important;
  padding: 10px 20px !important;
  font-size: 12px !important;
}

.top-menu .sub-menu a:hover { color: var(--gold) !important; }

/* ══════════════════════════════════════
   HOMEPAGE — bloc texte
══════════════════════════════════════ */
#custom-text,
.block-custom-text {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 24px !important;
  text-align: center !important;
}

/* ══════════════════════════════════════
   CARTES PRODUITS
══════════════════════════════════════ */
.product-miniature,
article.product-miniature {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: box-shadow 0.25s, transform 0.25s !important;
}

.product-miniature:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
  transform: translateY(-4px) !important;
}

.product-miniature .thumbnail-container {
  background: var(--warm) !important;
  border-bottom: 1px solid var(--border) !important;
}

.product-miniature .product-title a {
  font-family: 'Syne', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  line-height: 1.3 !important;
}

.product-miniature .product-title a:hover { color: var(--gold) !important; }

.product-miniature .price,
.product-price-and-shipping .price {
  font-family: 'Syne', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

/* Badge NEUF */
.product-flag.new,
.product-flag.on-sale {
  background: var(--gold) !important;
  color: var(--ink) !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
}

/* ══════════════════════════════════════
   BOUTONS
══════════════════════════════════════ */
.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--ink) !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  transition: background 0.2s !important;
}

.btn-primary:hover,
button.btn-primary:hover {
  background: var(--gold-h) !important;
  border-color: var(--gold-h) !important;
  color: var(--ink) !important;
}

.btn-secondary {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  transition: border-color 0.2s, color 0.2s !important;
}

.btn-secondary:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

/* ══════════════════════════════════════
   FICHE PRODUIT
══════════════════════════════════════ */
.product-cover img {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
}

.product-images img {
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s, border-color 0.2s !important;
}

.product-images img:hover,
.product-images img.selected {
  opacity: 1 !important;
  border-color: var(--gold) !important;
}

h1.h1[itemprop="name"] {
  font-size: clamp(22px, 3vw, 32px) !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
}

.product-price .current-price span,
.current-price {
  font-family: 'Syne', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
}

.product-add-to-cart .add-to-cart {
  background: var(--gold) !important;
  border: none !important;
  color: var(--ink) !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 16px 32px !important;
  border-radius: 8px !important;
  width: 100% !important;
  transition: background 0.2s !important;
}

.product-add-to-cart .add-to-cart:hover { background: var(--gold-h) !important; }

/* Tabs description */
.tabs .nav-tabs .nav-link {
  font-family: 'Syne', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 12px 20px !important;
}

.tabs .nav-tabs .nav-link.active {
  color: var(--ink) !important;
  border-bottom-color: var(--gold) !important;
  background: transparent !important;
}

/* ══════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════ */
.breadcrumb {
  background: transparent !important;
  padding: 12px 0 !important;
}

.breadcrumb-item a { color: var(--muted) !important; font-size: 12px !important; }
.breadcrumb-item.active { color: var(--text) !important; font-size: 12px !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--muted) !important; }

/* ══════════════════════════════════════
   PANIER PAGE
══════════════════════════════════════ */
.cart-summary-line .label { font-size: 13px !important; color: var(--muted) !important; }
.cart-summary-line .value { font-family: 'Syne', sans-serif !important; font-weight: 600 !important; color: var(--ink) !important; }
.cart-total .value { font-size: 20px !important; font-weight: 800 !important; color: var(--gold) !important; }
.cart-overview .product-line-info a { font-family: 'Syne', sans-serif !important; font-weight: 600 !important; color: var(--ink) !important; font-size: 14px !important; }

/* ══════════════════════════════════════
   FORMULAIRES
══════════════════════════════════════ */
input[type="email"],
input[type="number"],
input[type="password"],
textarea,
select {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 14px !important;
  background: var(--white) !important;
  color: var(--text) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(201,150,58,0.12) !important;
}

/* ══════════════════════════════════════
   PAGINATION
══════════════════════════════════════ */
.pagination .page-link {
  color: var(--text) !important;
  border-color: var(--border) !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  margin: 0 2px !important;
}

.pagination .page-item.active .page-link {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--ink) !important;
}

.pagination .page-link:hover {
  background: var(--warm) !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
#footer {
  background: var(--ink) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  margin-top: 0 !important;
}

#footer h4,
#footer .h4,
.footer-container h4 {
  font-family: 'Syne', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.35) !important;
  margin-bottom: 16px !important;
}

#footer a,
.footer-container a {
  color: rgba(255,255,255,0.45) !important;
  font-size: 13px !important;
  line-height: 2 !important;
  transition: color 0.2s !important;
}

#footer a:hover,
.footer-container a:hover { color: var(--gold) !important; }

#footer a[href*="prestashop-project"] { display: none !important; }

/* ══════════════════════════════════════
   ALERTES
══════════════════════════════════════ */
.alert-success {
  background: rgba(45,90,61,0.1) !important;
  border-color: var(--green) !important;
  color: var(--green) !important;
  border-radius: var(--radius) !important;
}

.alert-danger {
  background: rgba(180,50,50,0.1) !important;
  border-color: #b43232 !important;
  border-radius: var(--radius) !important;
}

/* ══════════════════════════════════════
   BADGE VINTED
══════════════════════════════════════ */
.ptj-trust-banner {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  background: #0a2a1a !important;
  border: 1px solid rgba(0,200,100,0.25) !important;
  border-radius: 12px !important;
  padding: 14px 20px !important;
  text-decoration: none !important;
  margin-top: 16px !important;
  max-width: 480px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.ptj-trust-banner:hover {
  border-color: rgba(0,200,100,0.5) !important;
  box-shadow: 0 4px 20px rgba(0,200,100,0.1) !important;
}

.ptj-trust-banner .vinted-logo {
  background: #09B48A !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: white !important;
  flex-shrink: 0 !important;
}

.ptj-divider {
  width: 1px !important;
  height: 32px !important;
  background: rgba(255,255,255,0.1) !important;
  flex-shrink: 0 !important;
}

.ptj-stars { color: #FFD700 !important; font-size: 15px !important; letter-spacing: 2px !important; margin-bottom: 3px !important; }
.ptj-count { font-size: 13px !important; color: #ccc !important; }
.ptj-count strong { color: #fff !important; font-size: 14px !important; }
.ptj-arrow { margin-left: auto !important; color: rgba(0,200,100,0.6) !important; font-size: 18px !important; flex-shrink: 0 !important; }

/* ══════════════════════════════════════
   MASQUER HT / TAXES
══════════════════════════════════════ */
.tax-shipping-delivery-label { display: none !important; }
.cart-content .product-tax { display: none !important; }

/* ── FIX PANIER — ne pas toucher aux icônes Material ── */
#_desktop_cart .blockcart .header i,
#_desktop_cart .blockcart .header .material-icons {
  font-family: 'Material Icons' !important;
  font-weight: normal !important;
  color: var(--ink) !important;
}

#_desktop_cart .blockcart .header span {
  font-family: 'Syne', sans-serif !important;
  color: var(--ink) !important;
}

/* ── FIX SEARCH BAR — rester dans le header ── */
#search_widget {
  position: static !important;
  float: none !important;
  margin: 8px 0 !important;
  width: 240px !important;
}

/* Conteneur header qui contient la search */
#_desktop_search_widget {
  display: flex !important;
  align-items: center !important;
}

/* ── FIX COULEURS TEXTE ILLISIBLES ── */
/* Texte général sur fond crème — forcer noir */
#wrapper p,
#wrapper li,
#wrapper span:not(.material-icons) {
  color: var(--text) !important;
}

/* Sauf dans le header — rester blanc */
#header p,
#header li,
#header span:not(.material-icons):not(.cart-products-count) {
  color: rgba(255,255,255,0.6) !important;
}

#header .header-nav .cart-preview.active {
  background: var(--ink) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  margin-top: -8px !important;
}

#header .header-nav .cart-preview.inactive {
  background: var(--ink) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  margin-top: -8px !important;
}

/* Prix dans le panier — police plus sobre */
.cart-overview .price,
.product-price .price,
.cart-line-product-actions .price,
.product-line-grid-body .price {
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* Search bar — la remettre dans le header */
#_desktop_search_widget {
  grid-column: 3 !important;
  align-self: center !important;
}

#search_widget {
  margin: 0 !important;
  width: 220px !important;
}

/* ── LAYOUT HEADER-TOP ── */
.header-top-right {
  display: flex !important;
  flex-direction: column !important;
}

/* Menu + search sur la même ligne */
#_desktop_top_menu {
  flex: 1 !important;
}

#search_widget {
  position: absolute !important;
  right: 15px !important;
  bottom: 12px !important;
  width: 220px !important;
  margin: 0 !important;
}

/* Header-top doit être en position relative */
.header-top .container {
  position: relative !important;
}

/* ── FIX PRIX — retirer Syne partout sauf fiche produit ── */
.price,
.product-price,
span.price,
.cart-overview .price,
.product-price-and-shipping .price,
.product-miniature .price {
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* Garder Syne uniquement sur le prix de la fiche produit */
.product-information .current-price span,
.page-product .current-price span {
  font-family: 'Syne', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
}

/* ── FIX PANIER ICÔNE ── */
#_desktop_cart .blockcart .header i.material-icons {
  font-family: 'Material Icons' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 20px !important;
  color: #fff !important;
}

#_desktop_cart .blockcart .header span {
  font-family: 'Syne', sans-serif !important;
  color: #fff !important;
}

/* ── TOUS LES PRIX — police sobre ── */
.current-price span,
.current-price-value,
.cart-summary-line .value,
.cart-total .value,
.product-price span,
.price {
  font-family: 'Instrument Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}

/* Tailles selon contexte */
.current-price span,
.current-price-value {
  font-size: 22px !important;
}

.cart-total .value {
  font-size: 18px !important;
  color: var(--gold) !important;
}

.cart-summary-line .value {
  font-size: 15px !important;
}

.product-miniature .price {
  font-size: 16px !important;
}