/* ==========================================================
   HORS JEU RECORDS — custom.css
   Thème : classic (PrestaShop 1.7.8)
   Direction : dépouillé, noir sur kraft, esprit sérigraphie DIY
   Installation : remplacer /www/themes/classic/assets/css/custom.css
   puis vider le cache PrestaShop (Paramètres avancés > Performances)
   ========================================================== */

/* ---------- Palette & fond ---------- */
body,
#wrapper {
  background: #ffffff;              /* kraft clair */
  color: #111;
}

/* ---------- Typographie ---------- */
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .01em;
}
h1, h2, h3, h4,
.h1, .h2, .h3,
.product-title,
.block-category h1 {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .06em;
  color: #111;
}

/* ---------- En-tête ---------- */
#header {
  background: #ffffff;
  box-shadow: none;
  border-bottom: 3px solid #111;    /* remplace le liseré rouge */
}
#header .header-nav {
  background: #111;
  color: #ffffff;
  border-bottom: 0;
  max-height: none;
}
#header .header-nav a,
#header .header-nav .language-selector,
#header .header-nav .currency-selector {
  color: #ffffff;
}
#header .header-top {
  background: #ffffff;
}

/* Menu principal : capitales, souligné au survol */
.top-menu a[data-depth="0"] {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .08em;
  color: #111;
}
.top-menu a[data-depth="0"]:hover {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 3px;
}

/* ---------- Boutons : carrés, noirs, francs ---------- */
.btn-primary,
.btn-secondary,
.btn-primary:focus {
  background: #111;
  color: #ffffff;
  border: 2px solid #111;
  border-radius: 0;
  box-shadow: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}
.btn-primary:hover,
.btn-secondary:hover {
  background: #ffffff;
  color: #111;
  border-color: #111;
}

/* ---------- Vignettes produits : cartes plates ---------- */
.product-miniature .thumbnail-container {
  background: #fff;
  border: 2px solid #111;
  box-shadow: none !important;
}
.product-miniature .thumbnail-container:hover {
  box-shadow: none !important;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #111 !important;   /* ombre "tampon" décalée */
}
.product-miniature .product-title a {
  color: #111;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .85rem;
}
.product-price-and-shipping .price {
  color: #111;
  font-weight: 800;
}
.product-flag,
.product-flags li {
  background: #111;
  color: #ffffff;
  border-radius: 0;
  text-transform: uppercase;
  font-weight: 700;
}

/* ---------- Fiche produit ---------- */
.product-container,
.product-information {
  background: transparent;
}
#product .product-prices .price {
  color: #111;
  font-weight: 800;
  font-size: 1.6rem;
}
.product-actions .add-to-cart {
  border-radius: 0;
}

/* ---------- Blocs / sections / panier ---------- */
.card,
.block-categories,
.cart-grid-body .card,
#search_filters {
  background: #ffffff;
  border: 2px solid #111;
  border-radius: 0;
  box-shadow: none;
}
.page-header, .page-footer {
  background: transparent;
  border: 0;
}

/* ---------- Pied de page : bloc noir ---------- */
.footer-container {
  background: #111;
  color: #ffffff;
  border-top: 0;
  box-shadow: none;
  margin-top: 3rem;
  padding-top: 2rem;
}
.footer-container a,
.footer-container .h3,
.footer-container .footer__title {
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.footer-container a:hover { text-decoration: underline; }
.block-contact { color: #ffffff; }

/* ---------- Détails à gommer (dépouillement) ---------- */
.carousel .direction,                 /* flèches lourdes du carrousel */
.featured-products .all-product-link::after {
  filter: grayscale(1);
}
a { color: #111; }
a:hover { color: #111; text-decoration: underline; }
::selection { background: #111; color: #ffffff; }

/* Champ recherche : filaire */
#search_widget input[type="text"] {
  background: #fff;
  border: 2px solid #111;
  border-radius: 0;
}
#search_widget button i { color: #111; }

/* Newsletter footer : inversée */
.block_newsletter input[type="email"] {
  border: 2px solid #ffffff;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
}
.block_newsletter input[type="submit"],
.block_newsletter .btn {
  background: #ffffff;
  color: #111;
  border-radius: 0;
  text-transform: uppercase;
  font-weight: 700;
}

/* ---------- Badge NOUVEAU (et autres pastilles) en noir ---------- */
.product-flag,
.product-flags li,
.product-flag.new,
.product-flag.discount,
li.product-flag {
  background: #111 !important;
  color: #ffffff !important;
  border-radius: 0;
  text-transform: uppercase;
  font-weight: 700;
}

/* ---------- Titres des disques : on garde la casse d'origine ---------- */
.product-miniature .product-title a,
.product-miniature .product-title,
#product h1,
h1.product-title,
.product-line-info .label {
  text-transform: none !important;
}

/* ---------- Vignettes produits : coins arrondis façon logo ---------- */
.product-miniature .thumbnail-container {
  border-radius: 18px;
  overflow: hidden;              /* la pochette suit l'arrondi */
}
.product-miniature .thumbnail-container:hover {
  border-radius: 18px;
}

/* le badge NOUVEAU suit le coin arrondi */
.product-flags {
  border-top-left-radius: 18px;
  overflow: hidden;
}

/* cohérence : cartes, filtres et encarts arrondis aussi */
.card,
.block-categories,
#search_filters {
  border-radius: 18px;
}

/* ---------- Sélecteur de langue : blanc dans TOUS les états ---------- */
#header .header-nav .language-selector-wrapper,
#header .header-nav .language-selector-wrapper *,
#header .header-nav .language-selector,
#header .header-nav .language-selector * {
  color: #ffffff !important;
}
#header .header-nav .language-selector-wrapper *:hover,
#header .header-nav .language-selector-wrapper *:focus,
#header .header-nav .language-selector *:hover,
#header .header-nav .language-selector *:focus {
  color: #ffffff !important;
  text-decoration: underline;
}
/* le menu déroulant ouvert (FR/EN) : noir sur blanc, lisible */
#header .header-nav .language-selector .dropdown-menu,
#header .header-nav .dropdown-menu {
  background: #111 !important;
  border: 1px solid #fff;
  border-radius: 0;
}
#header .header-nav .dropdown-menu a,
#header .header-nav .dropdown-menu span,
#header .header-nav .dropdown-menu .dropdown-item {
  color: #ffffff !important;
}
#header .header-nav .dropdown-menu a:hover,
#header .header-nav .dropdown-menu .dropdown-item:hover {
  background: #ffffff !important;
  color: #111 !important;
}

/* ---------- Réseaux sociaux : dans la barre noire, à côté de Contactez-nous ---------- */
#header .header-nav .block-social {
  display: inline-flex;
  vertical-align: middle;
  margin: 0 0 0 1rem;
  position: relative;
  top: 6px;
}
#header .header-nav .block-social ul {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
}
#header .header-nav .block-social li {
  width: 2rem;
  height: 2rem;
  background-color: transparent !important;   /* pas de pastille : glyphes seuls */
  background-size: 1.6rem;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1 !important;
  filter: brightness(0) invert(1) !important;  /* icônes en blanc pur */
}
#header .header-nav .block-social li:hover {
  opacity: .65 !important;
}
#header .header-nav .block-social li a {
  display: block; width: 100%; height: 100%; font-size: 0;
}
/* ---------- Réseaux sociaux footer : opaques et visibles ---------- */
.footer-container .block-social li,
#footer .block-social li,
.block-social:not(#header .block-social) li {
  background-color: #111 !important;
  border-radius: 6px;
  opacity: 1 !important;
  filter: none !important;
  background-size: 1.2rem;
  background-position: center;
  background-repeat: no-repeat;
}
.footer-container .block-social li:hover,
#footer .block-social li:hover {
  background-color: #555 !important;
}

/* Logo sur plaque blanche dans le tunnel — garde les couleurs d'origine */
body#checkout #_desktop_logo img,
body.checkout #_desktop_logo img,
body#checkout .logo img,
body.checkout .logo img,
body#checkout img.logo,
body.checkout img.logo {
    background: #ffffff;
    padding: 4px;
    border-radius: 8px;
    height: 90px !important;
    max-height: 90px !important;
    width: auto !important;
}

/* On relève le plafond de hauteur imposé par le thème */
body#checkout #header .header-nav .logo {
    max-height: none !important;
}