/* =========================================================
   KOOLGRAPH — THEME OVERRIDES
   Font: Poppins
   Accent (marron): #C1A86A
========================================================= */

/* =========================
   FONT
========================= */
body, button, input, textarea {
  font-family: "Poppins", sans-serif;
}

/* =========================
   HEADER — NOIR
========================= */
#header,
#header .header-banner,
#header .header-nav,
#header .header-top,
#header .header-nav > .container,
#header .header-top > .container {
  background-color: #000 !important;
  color: #fff !important;
}

/* Supprime séparations */
#header .header-nav,
#header .header-top {
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

#header .header-nav::before,
#header .header-nav::after,
#header .header-top::before,
#header .header-top::after,
#header .header-banner::before,
#header .header-banner::after {
  content: none !important;
  display: none !important;
}

/* =========================
   HEADER — BARRE DU HAUT
========================= */
#header .header-nav a,
#header .header-nav .material-icons,
#header #_desktop_user_info a,
#header #_desktop_contact_link a,
#header #_desktop_cart .header,
#header #search_widget i,
#header #search_widget input {
  color: #fff !important;
}

#header .header-nav a:hover,
#header #_desktop_user_info a:hover,
#header #_desktop_contact_link a:hover,
#header #_desktop_cart .header:hover,
#header #search_widget i:hover {
  color: #C1A86A !important;
}

/* =========================
   MENU PRINCIPAL (niveau 0)
========================= */
#header #_desktop_top_menu .top-menu > li > a {
  color: #fff !important;
  background: transparent !important;
}

#header #_desktop_top_menu .top-menu > li > a:hover,
#header #_desktop_top_menu .top-menu > li > a:focus {
  color: #C1A86A !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* =========================
   DROPDOWN / SOUS-MENU
========================= */
#header #_desktop_top_menu .popover.sub-menu {
  background-color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18) !important;
}

/* Liens sous-catégories */
#header #_desktop_top_menu .popover.sub-menu a {
  color: #000 !important;
  background: transparent !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#header #_desktop_top_menu .popover.sub-menu a:hover,
#header #_desktop_top_menu .popover.sub-menu a:focus {
  color: #C1A86A !important;
  background-color: rgba(193,168,106,0.10) !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Anti "carré" / fonds forcés */
#header #_desktop_top_menu .popover.sub-menu li,
#header #_desktop_top_menu .popover.sub-menu li:hover,
#header #_desktop_top_menu .popover.sub-menu li:focus,
#header #_desktop_top_menu .popover.sub-menu li:active {
  background: transparent !important;
  box-shadow: none !important;
}

#header #_desktop_top_menu .top-menu .sub-menu li:hover > a,
#header #_desktop_top_menu .top-menu .sub-menu li:focus > a,
#header #_desktop_top_menu .top-menu .sub-menu li:active > a {
  background-color: rgba(193,168,106,0) !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#header #_desktop_top_menu .popover.sub-menu li.current > a,
#header #_desktop_top_menu .popover.sub-menu a:active {
  background-color: rgba(193,168,106,0) !important;
  color: #C1A86A !important;
  box-shadow: none !important;
  outline: none !important;
}

/* =========================
   RECHERCHE — fond blanc + loupe noire
========================= */
#header #search_widget.search-widgets,
#header #search_widget.search-widgets form,
#header #search_widget.search-widgets .input-wrapper {
  background: #fff !important;
}

#header #search_widget.search-widgets input[type="text"],
#header #search_widget.search-widgets input.form-control {
  background: #fff !important;
  color: #000 !important;
  border: 0 !important;
  box-shadow: none !important;
}

#header #search_widget.search-widgets input[type="text"]:focus,
#header #search_widget.search-widgets input.form-control:focus {
  background: #fff !important;
  color: #000 !important;
  outline: none !important;
  box-shadow: none !important;
}

#header #search_widget.search-widgets input::placeholder {
  color: #999 !important;
}

#header #search_widget.search-widgets i.material-icons,
#header #search_widget.search-widgets i.search,
#header #search_widget.search-widgets .material-icons.search {
  color: #000 !important;
}

#header #search_widget.search-widgets i.material-icons:hover,
#header #search_widget.search-widgets .material-icons.search:hover {
  color: #C1A86A !important;
}

/* =========================
   PANIER — fond noir
========================= */
#header #_desktop_cart,
#header #_desktop_cart .blockcart,
#header #_desktop_cart .cart-preview,
#header #_desktop_cart .dropdown-menu {
  background: #000 !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}

#header #_desktop_cart *,
#header #_desktop_cart .cart-preview *,
#header #_desktop_cart .dropdown-menu * {
  color: #fff !important;
}

#header #_desktop_cart a:hover,
#header #_desktop_cart:hover i,
#header #_desktop_cart:hover .material-icons {
  color: #C1A86A !important;
}

/* =========================
   BARRE AU DESSUS DU HEADER
========================= */
.free-shipping-bar{
  /* Drapeau italien */
  background: linear-gradient(
    90deg,
    #1E63B0 0%,     /* bleu */
    #1E63B0 33.33%,
    #FFFFFF 33.33%,/* blanc */
    #FFFFFF 66.66%,
    #C00000 66.66%,/* rouge */
    #C00000 100%
  );

  color:#000; /* texte noir pour lisibilité sur le blanc */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2px 12px;
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  text-align:center;
}

/* =========================
   BREADCRUMB — texte lisible
========================= */
.breadcrumb,
.breadcrumb a,
.breadcrumb span {
  color: #555 !important;
}

.breadcrumb a:hover {
  color: #000 !important;
}

/* =========================
   WRAPPER — fond blanc
========================= */
#wrapper {
  background: #fff !important;
}

/* =========================
   FOOTER — BASE NOIRE
========================= */
#footer,
#footer .footer-container {
  background: #000 !important;
  color: #fff !important;
}

#footer h3,
#footer h4,
#footer .h3 {
  color: #fff !important;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#footer p,
#footer span,
#footer li,
#footer a {
  color: #fff !important;
  text-decoration: none;
}

#footer a:hover {
  color: #C1A86A !important;
}

/* =========================
   FOOTER — image (colonne gauche à la place "Produits")
========================= */
#footer .footer-container .links .row > .wrapper:nth-of-type(1)::before {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 270 / 227 !important;
  background: url("../img/footer-image.png") top center / contain no-repeat !important;
}

#footer .footer-container .links .row > .wrapper:nth-of-type(1) > .title,
#footer .footer-container .links .row > .wrapper:nth-of-type(1) > p.h3,
#footer .footer-container .links .row > .wrapper:nth-of-type(1) > ul {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================
   FOOTER — bande paiement au-dessus du copyright
========================= */
#footer .footer-container .text-sm-center::before {
  content: "";
  display: block;
  width: min(320px, 90%);
  aspect-ratio: 6 / 1;
  max-height: 80px;
  margin: 0 auto 14px;
  background: url("../img/payments.png") center / contain no-repeat;
}

/* =========================
   FOOTER — bloc "Informations" (force blanc + hover marron)
========================= */
#footer .block-contact,
#footer .block-contact #contact-infos,
#footer .block-contact #contact-infos a,
#footer .block-contact .block-contact-title {
  color: #fff !important;
}

#footer .block-contact #contact-infos a:hover {
  color: #C1A86A !important;
}

/* =========================
   FOOTER — réseaux sociaux (sous Informations, alignés à gauche desktop)
========================= */
#footer .block-contact,
#footer .block-contact #contact-infos {
  text-align: left !important;
}

#footer .block-contact .block-social {
  width: 100% !important;
  margin: 6px 0 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
  position: static !important;
  transform: none !important;
}

#footer .block-contact .block-social ul {
  margin: 6px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Taille/fond icônes (ton réglage qui marche) */
.block-social ul li {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin: .125rem;
  cursor: pointer;
  background-color: #fff;
  background-repeat: no-repeat;
}

/* =========================
   FOOTER — image "réassurance" (si tu l’utilises)
========================= */
.footer-top-image{
  text-align: center;
  padding: 5px 0 50px;
}

/* Réduire l’espace noir en haut du footer */
footer { padding-top: 0 !important; }
.footer-container { padding-top: 0rem; } /* tu peux ajuster ici */

/* =========================
   MOBILE (≤ 767px) — centrer social + copyright
========================= */
@media (max-width: 767px) {

  /* Icônes sociales centrées sur mobile */
  #footer .block-contact .block-social ul {
    justify-content: center !important;
  }

  /* Copyright centré (mobile) */
  #footer p.text-sm-center,
  .footer-container p.text-sm-center {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* si tu veux éviter un fond/espacement étrange sur les listes */
  .footer-container .links ul {
    margin-bottom: 0 !important;
    background-color: #000 !important;
  }
}

/* =========================
   FOOTER – IMAGE HAUT RESPONSIVE
========================= */

.footer-top-image {
  text-align: center;
  padding: 10px 0 30px;
}

.footer-top-image img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ----- Mobile ----- */
@media (max-width: 767px) {
  .footer-top-image {
    padding: 8px 0 14px; /* réduit l’espace */
  }

  .footer-top-image img {
    max-width: 90%;   /* clé du fix mobile */
    height: auto;
  }
}


/* =========================================================
   enlever l affichage des sous categories
   ========================================================= */

#subcategories {
  display: none !important;
}

/* =========================================================
   reglages du nombres de produits produits phares
   ========================================================= */
    
/* DESKTOP large : 8 produits */
@media (min-width: 1200px){
  .featured-products .products > .js-product:nth-child(n+9){
    display: none !important;
  }
}

/* TABLETTE + MOBILE : 6 produits */
@media (max-width: 1199.98px){
  .featured-products .products > .js-product:nth-child(n+7){
    display: none !important;
  }
}


/* =========================================================
   block texte html 
   ========================================================= */

/* Bloc texte personnalisé – marges et respiration */
#custom-text {
  padding: 0.25rem 1.25rem;
  margin-bottom: 1.5rem;
  background: #ffffff;
  text-align: center;
}

/* Paragraphes internes */
#custom-text p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* Dernier paragraphe : pas de marge en trop */
#custom-text p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   FICHE PRODUIT — BLOC "AUTRES PRODUITS" (featured-products mt-3)
   Desktop: afficher 4
   Tablette: afficher 3
   ========================================================= */

/* 1) On met la grille en flex propre (au cas où le thème ne le fait pas) */
#product section.featured-products.mt-3 .products{
  display: flex !important;
  flex-wrap: wrap !important;
}

/* 2) Desktop : 4 colonnes + on cache à partir du 5e */
@media (min-width: 1200px){
  #product section.featured-products.mt-3 .products > .js-product{
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }

  #product section.featured-products.mt-3 .products > .js-product:nth-child(n+5){
    display: none !important;
  }
}

/* 3) Tablette : 3 colonnes + on cache à partir du 4e */
@media (min-width: 768px) and (max-width: 1199.98px){
  #product section.featured-products.mt-3 .products > .js-product{
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
  }

  #product section.featured-products.mt-3 .products > .js-product:nth-child(n+4){
    display: none !important;
  }
}

/* (optionnel) Mobile : 2 colonnes, tu peux virer si tu veux */
@media (max-width: 767.98px){
  #product section.featured-products.mt-3 .products > .js-product{
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* =========================
 agrandir le logo 
========================= */

@media (min-width: 768px) {

  /* Logo : garde les proportions */
  #header #_desktop_logo img,
  #header #_mobile_logo img,
  #header .logo img {
    height: 72px !important;     /* augmente : 78 / 85 si tu veux */
    width: auto !important;      /* clé : la largeur suit */
    max-width: none !important;  /* empêche un blocage */
    object-fit: contain !important;
  }

  /* Si c'est un SVG */
  #header #_desktop_logo svg,
  #header #_mobile_logo svg,
  #header .logo svg {
    height: 72px !important;
    width: auto !important;
  }

  /* Le lien du logo ne doit pas brider la largeur */
  #header #_desktop_logo a,
  #header #_mobile_logo a,
  #header .logo a {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Le bloc du logo ne doit pas être trop étroit (col bootstrap) */
  #header #_desktop_logo {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }
}
  /* espace entre logo et menu */
.header-line-1 { margin-bottom: 6px; }

/* RÉDUIRE LA ZONE NOIRE SOUS LE MENU */
#header {
  padding-bottom: 0 !important;
}

/* Le vrai coupable le plus fréquent */
#header .header-container {
  padding-bottom: 6px !important; /* mets 4px si tu veux encore moins */
}

/* Sécurité : pas d'espace fantôme */
#header .header-top,
#header .header-nav {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}