/* ==========================================================================
   1. COULEUR DE FOND ET TYPOGRAPHIE GLOBALE
   ========================================================================== */

/* Fond écru/crème vintage sur tout le site */
body, 
#wrapper, 
#content-wrapper, 
#main {
  background-color: #fbf8e9 !important;
}

/* Typographie système lisible pour le texte courant */
body, p, a, span, td, input, button, select,
.product-title, .top-menu a {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* SF Fedora uniquement sur les grands titres H1 et H2 */
@font-face {
  font-family: 'SF Fedora';
  src: url('../fonts/sf-fedora.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   2. BANDEAU SUPÉRIEUR HAUT (NAV BAR VERTE ET ALIGNEMENT)
   ========================================================================== */

/* Fond vert canard sur tout le bandeau supérieur */
#header nav.header-nav,
#header .header-nav,
.header-nav {
  background-color: #0d4245 !important;
  background: #0d4245 !important;
  border-bottom: 3px solid #000000 !important;
  padding: 6px 0 !important;
  margin-bottom: 0 !important;
}

/* Transforme la rangée du haut en alignement flexible propre */
#header .header-nav .container .row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
}


/* Formatage des textes et liens (Blanc / Vert Pomme au survol) */
#header .header-nav a,
#header .header-nav span,
#header .header-nav i {
  color: #fbf8e9 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

#header .header-nav a:hover,
#header .header-nav a:hover i {
  color: #77b238 !important;
}

/* ==========================================================================
   3. EN-TÊTE PRINCIPAL (LOGO + MENU PRODUITS)
   ========================================================================== */

/* Fond écru uniquement sur la zone du logo et du menu principal */
#header .header-top {
  background-color: #fbf8e9 !important;
  padding-top: 15px !important;
}

/* Liens du menu principal produits (Les Limeuhnades, etc.) */
#header .header-top .top-menu a {
  color: #000000 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 15px;
  background-color: transparent !important;
}

/* Survol et page active du menu principal */
#header .header-top .top-menu a:hover,
#header .header-top .top-menu .current a,
#header .header-top .top-menu .active a {
  color: #77b238 !important;
}


/* ==========================================================================
   4. CARTES PRODUITS & FOND TRANSPARENT
   ========================================================================== */

/* Réinitialisation complète du conteneur produit (pas de fond, pas de bordure globale) */
.product-miniature, 
.js-product-miniature,
.product-miniature .product-container,
.product-miniature .thumbnail-container,
.product-miniature .product-description,
.product-miniature .highlighted-informations,
.product-miniature .card,
.featured-products article.product-miniature,
article.product-miniature {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background: transparent !important;
}

/* Contour noir de 2px UNIQUEMENT sur la photo du produit (fond blanc conservé sous l'image) */
.product-thumbnail img, 
.product-cover img, 
.js-product-miniature .thumbnail-container img,
.product-miniature img {
  border: 2px solid #000000 !important;
  box-sizing: border-box !important;
  border-radius: 0px !important;
  background-color: #ffffff !important;
}

 /* ==========================================================================
   5. BANNIÈRE / CARROUSEL — VERSION CORRIGÉE
   ========================================================================== */
#carousel {
  position: relative !important;
  border: 3px solid #000000 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  overflow: hidden !important;
}
 
#carousel .carousel-inner {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
 
#carousel .carousel-item {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
 
/* Réinitialisation du lien et de la balise <figure> qui ont des marges
   par défaut dans le navigateur et faisaient partie du problème */
#carousel .carousel-item a,
#carousel .carousel-item figure {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================================
   CORRECTION FORCÉE DU PANIER (PS_SHOPPINGCART)
   ========================================================================== */

/* 1. Neutraliser le bloc blanc et le positionnement central du panier */

#_desktop_cart,
#_desktop_cart .blockcart,
#_desktop_cart .header,
div.blockcart {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

/* 2. Style des textes du panier (Passage en blanc + suppression des fonds) */
#_desktop_cart *,
#_desktop_cart a,
#_desktop_cart span,
#_desktop_cart i {
  background: transparent !important;
  background-color: transparent !important;
  color: #fbf8e9 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

/* Survol en vert pomme */
#_desktop_cart a:hover,
#_desktop_cart a:hover * {
  color: #77b238 !important;
}

/* 3. Masquer le texte parasite en anglais "SHOPPING CART" ou "CART" */
#_desktop_cart .cart-title,
#_desktop_cart [class*="shopping"],
#_desktop_cart .title {
  display: none !important;
}

/* S'assurer que seul le texte français reste visible */
#_desktop_cart .header a span {
  display: inline-block !important;
}

/* 4. Alignement du conteneur de droite pour pousser le panier au bout */
#header .header-nav .right-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 15px !important;
  margin-left: auto !important;
}
/* ==========================================================================
   ALIGNEMENT BANDEAU & PANIER AJAX COMPATIBLE
   ========================================================================== */

/* 1. Alignement vertical du bandeau */
#header .header-nav,
#header .header-nav .container,
#header .header-nav .row,
#header .header-nav .right-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 20px !important;
  height: auto !important;
  min-height: 40px !important;
}

/* 2. Position du panier */
#_desktop_cart,
#_desktop_cart .blockcart,
#_desktop_cart .header {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  top: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* 3. Masquer le titre fixe SANS casser le conteneur AJAX */
#_desktop_cart .cart-title {
  font-size: 0 !important;
  display: none !important;
}

/* 4. Typographie uniforme Beige (#fbf8e9) */
#header .header-nav a,
#header .header-nav span,
#header .header-nav i,
#_desktop_cart * {
  color: #fbf8e9 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Hover Vert Pomme */
#header .header-nav a:hover,
#header .header-nav a:hover * {
  color: #77b238 !important;
}

/* Forcer le logo sur sa propre ligne sous le header vert en mobile */
@media (max-width: 767px) {
  #header .header-nav {
    background-color: #0d3b36; /* Vert du bandeau haut */
  }
  
  #header .header-top {
    display: block !important;
    background-color: #fdfbf7; /* Fond beige/clair de votre second header */
    text-align: center;
    padding: 10px 0;
  }

  #header .header-top .logo {
    max-width: 200px;
    margin: 0 auto;
    display: block;
  }
}