/* ------------------------------
   Doggy Factory — Styles custom
   Header sticky, hero, tuiles, menu actif
------------------------------ */

/* Typos */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --df-brown-900: #2f241a;
  --df-brown-800: #3b2e22;
  --df-brown-700: #4b3a2b;
  --df-brown-600: #6b5848;
  --df-beige-300: #e3d7c7;
  --df-beige-200: #efe6db;
  --df-cream: #fbf7f2;
  --df-white: #fff;
  --df-radius: 14px;
  --df-shadow: 0 6px 24px rgba(0,0,0,.08);
  --df-header-h: 72px;
  --df-header-h-shrink: 58px;
}

/* Base */
html { scroll-behavior: smooth; }
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--df-cream);
  color: var(--df-brown-800);
}
h1,h2,h3 { font-family: "Playfair Display", Georgia, serif; }
a { color: var(--df-brown-700); text-decoration: none; }
a:hover { color: var(--df-brown-600); }

/* ------------------------------
   HEADER
------------------------------ */
#header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--df-brown-900) !important;
  transition: background .25s ease, height .25s ease, box-shadow .25s ease;
  border: none !important;
  box-shadow: none !important;
}
body.header-shrink #header {
  height: var(--df-header-h-shrink);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

#header .header-nav .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  height: var(--df-header-h);
}

/* Logo */
#_desktop_logo img {
  height: 60px;
  width: auto;
  transition: transform .25s ease;
}
body.header-shrink #_desktop_logo img { transform: scale(.9); }

/* Compte + Panier (desktop) */
#_desktop_user_info,
#_desktop_cart {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  z-index: 1005;
}
#_desktop_cart { right: 16px !important; }
#_desktop_user_info { right: 96px !important; }

#_desktop_user_info a,
#_desktop_cart a,
#_desktop_user_info .material-icons,
#_desktop_cart .material-icons {
  color: #fff !important;
}
#_desktop_cart .cart-products-count {
  background: #fff !important;
  color: var(--df-brown-800) !important;
  border-radius: 999px;
  padding: 0 6px;
  font-weight: 700;
  margin-left: 6px;
}

/* Menu principal */
#_desktop_top_menu {
  background: var(--df-brown-900) !important;
}
#_desktop_top_menu .top-menu > li > a {
  color: #fff !important;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background .2s ease, color .2s ease;
}
#_desktop_top_menu .top-menu > li > a:hover {
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
}
#_desktop_top_menu .top-menu > li.current > a,
#_desktop_top_menu .top-menu > li > a.active {
  background: var(--df-brown-700) !important;
  color: #fff !important;
}

/* Mobile menu */
#mobile_top_menu_wrapper {
  background: var(--df-brown-900) !important;
}
#mobile_top_menu_wrapper a {
  color: #fff !important;
}

/* ------------------------------
   HERO
------------------------------ */
.df-hero {
  position: relative;
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
  background-size: cover;
  background-position: center;
}
.df-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35));
}
.df-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  padding: 2rem;
}
.df-hero h1 {
  color: #fff;
  font-size: clamp(1.9rem,3.8vw,3rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}
.df-hero p {
  color: var(--df-beige-200);
  font-size: 1.05rem;
  margin: 0 0 1.5rem;
}
.df-btn {
  display: inline-block;
  background: var(--df-brown-700);
  color: #fff;
  padding: .9rem 1.2rem;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: var(--df-shadow);
}
.df-btn:hover {
  background: var(--df-brown-600);
  color: #fff;
}

/* ------------------------------
   Tuiles
------------------------------ */
.df-tiles { padding: 2.5rem 0; }
.df-tile {
  display: block;
  background: var(--df-white);
  border-radius: var(--df-radius);
  box-shadow: var(--df-shadow);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.df-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
.df-tile img { width: 100%; height: auto; }
.df-tile__label {
  padding: .9rem;
  font-weight: 600;
  color: var(--df-brown-800);
  text-align: center;
}

/* ------------------------------
   Footer
------------------------------ */
#footer {
  background: var(--df-brown-900);
  color: var(--df-beige-200);
}
#footer a { color: var(--df-beige-300); }
#footer a:hover { color: #fff; }

/* Responsive */
@media (max-width: 992px) {
  #_desktop_logo img { height: 46px; }
  #_desktop_user_info, #_desktop_cart {
    position: static !important;
    transform: none !important;
    margin-left: auto;
  }
}
@media (max-width: 768px) {
  .df-hero { min-height: 56vh; }
}
/* SOLUTION FINALE - Ajouter à la fin de ton CSS */

/* 1. MASQUER la recherche et la barre "Contactez-nous" */
#search_widget,
#_desktop_search,
.search-widget,
.header-search,
#header .header-top {
  display: none !important;
}

/* 2. MENU EN BLANC - avec la BONNE classe */
#header .main-menu__tree__link,
#header .main-menu__tree__link:link,
#header .main-menu__tree__link:visited {
  color: #ffffff !important;
  background: transparent !important;
  text-decoration: none !important;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background .2s ease;
}

/* Hover */
#header .main-menu__tree__link:hover,
#header .main-menu__tree__link:focus {
  color: #ffffff !important;
  background: rgba(255,255,255,0.06) !important;
}

/* Lien actif (page courante) */
#header .main-menu__tree__item.current > .main-menu__tree__link,
#header .main-menu__tree__link.active,
#header .main-menu__tree__link[aria-current="page"] {
  color: #ffffff !important;
  background: var(--df-brown-700) !important;
}

/* 3. PANIER ET COMPTE - bien espacés */
#_desktop_user_info,
#_desktop_cart {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  z-index: 1005;
}

#_desktop_cart { 
  right: 16px !important; 
}

#_desktop_user_info { 
  right: 100px !important; /* Espace entre compte et panier */
}

/* Couleurs des icônes panier/compte */
#_desktop_user_info a,
#_desktop_cart a,
#_desktop_user_info .material-icons,
#_desktop_cart .material-icons,
#_desktop_user_info i,
#_desktop_cart i {
  color: #ffffff !important;
}

/* Compteur panier */
#_desktop_cart .cart-products-count {
  background: #ffffff !important;
  color: var(--df-brown-800) !important;
  border-radius: 999px;
  padding: 0 6px;
  font-weight: 700;
  margin-left: 6px;
}

/* 4. MOBILE - éviter les chevauchements */
@media (max-width: 991px) {
  #_desktop_user_info,
  #_desktop_cart {
    position: static !important;
    transform: none !important;
  }
}
/* On garde la barre blanche cachée et on cache la recherche */
#header .header-top { display: none !important; }
#search_widget, #_desktop_search, .search-widget, .header-search { display: none !important; }

/* Compte & Panier à droite dans la barre brune */
#header .header-nav .container { position: relative; }

#_desktop_user_info,
#_desktop_cart {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  z-index: 1200;
}
#_desktop_cart { right: 16px !important; }
#_desktop_user_info { right: 96px !important; }

/* cliquables et en blanc */
#_desktop_cart .header-block__action-btn,
#_desktop_user_info .header-block__action-btn {
  display: inline-flex;
  align-items: center;
  pointer-events: auto !important;
  cursor: pointer;
  color: #fff !important;
}
#_desktop_user_info .material-icons,
#_desktop_cart .material-icons { color: #fff !important; }
#header .header-top{ display:block !important; background:transparent !important; }
#search_widget, #_desktop_search, .search-widget, .header-search{ display:none !important; }
#header .header-top .contact-link,
#header .header-top [href*="contact"]{ display:none !important; }
/* 0) Supprimer la petite barre blanche du haut (mais garder ses éléments) */
#header .header-top{
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  overflow:visible !important; /* on laisse vivre les enfants */
}

/* 1) Ancrer Compte & Panier sur la barre brune (desktop) */
#header .header-nav,
#header .header-nav .container{ position:relative !important; }

/* On place les blocs par-dessus, à droite */
#_desktop_user_info,
#_desktop_cart{
  position:fixed !important;   /* facile et fiable sans toucher le HTML */
  top:22px;                    /* ajuste si besoin: 20–26px selon ton header */
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  z-index:10050 !important;
}
#_desktop_user_info{ right:88px !important; }
#_desktop_cart{ right:20px !important; }

/* Couleur et clic */
#_desktop_user_info a,
#_desktop_cart a,
#_desktop_user_info i,
#_desktop_cart i{
  color:#fff !important;
  pointer-events:auto !important;
}

/* Mobile: on laisse le thème gérer normalement */
@media (max-width: 991px){
  #_desktop_user_info,
  #_desktop_cart{
    position:static !important;
    top:auto !important;
    right:auto !important;
  }
}
/* ==== Alignement Compte & Panier dans le header ==== */
#_desktop_user_info,
#_desktop_cart {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  z-index: 1005;
}

/* Panier à droite */
#_desktop_cart {
  right: 16px !important;
}

/* Compte à gauche du panier */
#_desktop_user_info {
  right: 90px !important;
}

/* Icônes et textes en blanc */
#_desktop_user_info a,
#_desktop_cart a,
#_desktop_user_info .material-icons,
#_desktop_cart .material-icons {
  color: #fff !important;
}

/* Compteur panier */
#_desktop_cart .cart-products-count {
  background: #fff !important;
  color: var(--df-brown-800) !important;
  border-radius: 999px;
  padding: 0 6px;
  font-weight: 700;
  margin-left: 6px;
}
/* Masquer le texte "Connexion" et "Panier" */
#_desktop_user_info .header-block__title,
#_desktop_cart .header-block__title {
  display: none !important;
}

/* Alignement parfait et espacement des icônes */
#_desktop_user_info,
#_desktop_cart {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  z-index: 1005;
}

/* Panier tout à droite, compte juste avant */
#_desktop_cart {
  right: 16px !important;
}
#_desktop_user_info {
  right: 60px !important; /* ajuster si besoin */
}

/* Icônes en blanc */
#_desktop_user_info a,
#_desktop_cart a,
#_desktop_user_info .material-icons,
#_desktop_cart .material-icons {
  color: #fff !important;
  font-size: 22px; /* taille icônes */
}

/* Compteur panier */
#_desktop_cart .header-block__badge {
  background: #fff !important;
  color: var(--df-brown-800) !important;
  border-radius: 999px;
  padding: 0 6px;
  font-weight: 700;
  margin-left: 4px;
}
/* ——— Icônes Compte/Panier : cliquables + style bouton ——— */

/* Masque juste les libellés texte */
#_desktop_user_info .header-block__title,
#_desktop_cart .header-block__title { display:none !important; }

/* Positionnement */
#_desktop_user_info,
#_desktop_cart{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  display:inline-flex !important;
  align-items:center;
  gap:10px;
  z-index:10050 !important; /* au-dessus de tout */
}
#_desktop_cart{ right:16px !important; }
#_desktop_user_info{ right:64px !important; }

/* Les liens = vrais boutons ronds cliquables */
#_desktop_user_info a,
#_desktop_cart a{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:999px;
  padding:0;
  background:transparent;
  cursor:pointer;
  pointer-events:auto !important;   /* force le clic */
  position:relative;
}

/* Icônes */
#_desktop_user_info .material-icons,
#_desktop_cart .material-icons{
  font-size:20px;
  line-height:1;
  color:#fff !important;
  /* pas de pointer-events:none ici, on veut du clic partout */
}

/* Hover/Focus jolis */
#_desktop_user_info a:hover,
#_desktop_cart a:hover,
#_desktop_user_info a:focus,
#_desktop_cart a:focus{
  background:rgba(255,255,255,.12);
  outline: none;
}

/* Compteur panier en badge */
#_desktop_cart .header-block__badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  border-radius:999px;
  padding:0 5px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  background:#fff !important;
  color:var(--df-brown-800) !important;
}

/* Mobile : on remet en flux pour éviter le chevauchement */
@media (max-width: 991px){
  #_desktop_user_info, #_desktop_cart{
    position:static !important;
    transform:none !important;
  }
}
/* Toast "panier vide" */
.df-toast {
  position: fixed;
  top: 14px;
  right: 14px;
  background: rgba(0,0,0,.9);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: var(--df-shadow, 0 6px 24px rgba(0,0,0,.18));
  font-size: 14px;
  z-index: 100000;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
}
.df-toast.show { opacity: 1; transform: translateY(0); }
/* zone cliquable + hover doux */
#_desktop_cart a, #_desktop_cart { 
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
}
#_desktop_cart:hover { background: rgba(255,255,255,.08); }

/* toast */
.df-toast{
  position:fixed; right:16px; bottom:16px;
  background:#2f241a; color:#fff;
  padding:10px 14px; border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,.18);
  opacity:0; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease; z-index:9999;
  pointer-events:none; font-weight:600;
}
.df-toast.show{ opacity:1; transform:translateY(0); }
/* Popover "panier vide" — style Doggy Factory */
.df-cart-pop{
  position:absolute; z-index:10000;
  background:#2f241a; color:#fff;
  border-radius:14px; box-shadow:0 8px 28px rgba(0,0,0,.22);
  padding:10px 12px; font-weight:600; font-size:.95rem;
  opacity:0; transform:translateY(6px) scale(.98);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;  /* pas d’interaction */
  white-space:nowrap;
}
.df-cart-pop.show{ opacity:1; transform:translateY(0) scale(1); }

.df-cart-pop__inner{ display:inline-flex; align-items:center; gap:8px; }
.df-cart-pop__icon{ filter:saturate(.9); }

.df-cart-pop__arrow{
  position:absolute; top:-8px; width:0; height:0;
  border-left:8px solid transparent; border-right:8px solid transparent;
  border-bottom:8px solid #2f241a;
}
/* RESET TEMPORAIRE */
#header .header-top{
  background: transparent !important;
  height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
/* Mini polish compte/panier — safe */
#_desktop_user_info a,
#_desktop_cart a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  transition: background-color .2s ease, opacity .2s ease;
}

#_desktop_user_info a:hover,
#_desktop_cart a:hover {
  background: rgba(255,255,255,.08);
  opacity: .95;
}

/* Compteur panier un poil plus lisible */
#_desktop_cart .cart-products-count {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  font-size: 12px;
  line-height: 1;
}
/* ===== Avis Clients (carrousel) ===== */
#df-avis-clients { background: var(--df-cream); padding: 3rem 1rem; }
#df-avis-clients .df-section-title {
  text-align: center; font-family: "Playfair Display", serif;
  font-size: 2rem; margin-bottom: 2rem; color: var(--df-brown-800);
}

.df-avis-carousel { position: relative; max-width: 1100px; margin: 0 auto; }
.df-avis-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow: hidden; scroll-behavior: smooth;
  border-radius: var(--df-radius); box-shadow: var(--df-shadow);
  background: var(--df-white);
}
.df-avis-slide {
  display: grid; place-items: center; text-align: center; padding: 2rem 1.5rem;
}
.df-avis-texte { font-style: italic; color: var(--df-brown-700); margin: .75rem 0; }
.df-avis-auteur { font-weight: 600; color: var(--df-brown-900); }

/* Étoiles – supporte les demi-étoiles via une largeur masquée */
.df-stars { position: relative; font-size: 1.2rem; line-height: 1; }
.df-stars::before, .df-stars::after { content: "★★★★★"; letter-spacing: 2px; }
.df-stars::before { color: #ddd; }
.df-stars::after {
  position: absolute; inset: 0 0 0 0; color: #f5a623;
  width: var(--stars-pct, 100%); overflow: hidden; white-space: nowrap;
}

/* Flèches */
.df-avis-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.5); color: #fff; border: 0;
  width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; font-size: 22px;
}
.df-avis-prev { left: 10px; }
.df-avis-next { right: 10px; }
.df-avis-nav:hover { background: rgba(0,0,0,.65); }

/* Points de pagination */
.df-avis-dots { display: flex; gap: .5rem; justify-content: center; margin-top: 1rem; }
.df-avis-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #cfc6bb; border: 0; cursor: pointer;
}
.df-avis-dot[aria-current="true"] { background: var(--df-brown-700); }

@media (max-width: 768px) {
  #df-avis-clients { padding: 2.2rem 0.5rem; }
  .df-avis-slide { padding: 1.6rem 1rem; }
  .df-avis-nav { width: 34px; height: 34px; font-size: 18px; }
}
/* ===== Avis clients (Doggy Factory) ===== */
#df-avis { margin: 48px 0 16px; }
#df-avis .df-section-title {
  text-align:center; margin-bottom: 18px;
  font-family: "Playfair Display", serif;
}

/* Carousel */
.df-avis-carousel {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  background: var(--df-white);
  border-radius: var(--df-radius);
  box-shadow: var(--df-shadow);
  overflow: hidden;
}

/* Track + slides */
.df-avis-track {
  display: flex;
  transition: transform .45s ease;
  will-change: transform;
}
.df-avis-slide {
  min-width: 100%;
  padding: 28px 22px;
  text-align: center;
  display: grid;
  gap: 10px;
  place-items: center;
}

/* Stars en Unicode */
.df-stars {
  color: #f4c76d;          /* doré */
  font-size: 20px;
  letter-spacing: 2px;
}

/* Texte */
.df-avis-texte {
  font-size: 1.05rem;
  color: var(--df-brown-800);
  margin: 4px 0 2px;
}
.df-avis-auteur {
  font-weight: 600;
  color: var(--df-brown-700);
}

/* Nav */
.df-avis-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; line-height: 36px;
  border-radius: 999px; border: 0;
  background: rgba(0,0,0,.08);
  color: var(--df-brown-900);
  font-size: 20px; text-align: center;
  cursor: pointer; user-select: none;
}
.df-avis-prev { left: 10px; }
.df-avis-next { right: 10px; }
.df-avis-nav:hover { background: rgba(0,0,0,.14); }

/* Dots */
.df-avis-dots {
  display: flex; justify-content: center; gap: 8px;
  padding: 10px 0 14px;
}
.df-avis-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #d9d6d2; cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.df-avis-dot.active { background: var(--df-brown-700); transform: scale(1.2); }

/* Mobile */
@media (max-width: 768px){
  .df-avis-slide { padding: 22px 16px; }
  .df-avis-nav { display: none; }   /* on force les dots sur mobile */
}
/* étoiles bien alignées */
.df-stars { display:inline-flex; align-items:center; gap:2px; line-height:1; }
.df-stars .star { font-size:20px; color:#d2c6b8; }
.df-stars .star.full  { color:#c49a6c; }
.df-stars .star.half  { color:#c49a6c; position:relative; }
.df-stars .star.half::after {
  content:"★"; color:#d2c6b8; position:absolute; left:50%; width:50%; overflow:hidden;
}
/* ===== Avis clients — version fixe 3 colonnes (sans JS) ===== */
#df-avis .df-section-title {
  text-align: center;
  margin-bottom: 18px;
  font-family: "Playfair Display", serif;
}

.df-avis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
}

.df-avis-item {
  background: var(--df-white);
  border-radius: var(--df-radius);
  box-shadow: var(--df-shadow);
  padding: 24px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.df-stars {
  color: #f4c76d;
  font-size: 20px;
  letter-spacing: 2px;
}

.df-avis-texte {
  font-size: 1.05rem;
  color: var(--df-brown-800);
  font-style: italic;
  margin: 4px 0 2px;
}

.df-avis-auteur {
  font-weight: 600;
  color: var(--df-brown-700);
}

/* Mobile : empiler */
@media (max-width: 768px) {
  .df-avis-grid { grid-template-columns: 1fr; }
}
/* ===== Avis clients — grille 4 colonnes (sans JS) ===== */
#df-avis .df-section-title{
  text-align:center; margin-bottom:18px;
  font-family:"Playfair Display", serif;
}

#df-avis .df-avis-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  max-width:1100px;
  margin:0 auto;
}

#df-avis .df-avis-item{
  background:var(--df-white);
  border-radius:var(--df-radius);
  box-shadow:var(--df-shadow);
  padding:24px 18px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}

#df-avis .df-avis-texte{
  font-size:1.05rem; color:var(--df-brown-800);
  font-style:italic; margin:4px 0 2px;
}
#df-avis .df-avis-auteur{ font-weight:600; color:var(--df-brown-700); }

/* ⭐ Correction alignement étoiles – override local */
#df-avis .df-stars{
  display:inline-flex; gap:2px;
  font-size:20px; line-height:1; color:#f4c76d;
}
#df-avis .df-stars::before{ content:attr(data-stars); }
#df-avis .df-stars::after{ content:none !important; } /* neutralise les anciens styles */

/* Responsive */
@media (max-width: 992px){
  #df-avis .df-avis-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px){
  #df-avis .df-avis-grid{ grid-template-columns:1fr; }
}

/* Si un ancien style "carrousel" traîne, on le masque */
#df-avis .df-avis-carousel,
#df-avis .df-avis-track,
#df-avis .df-avis-dots,
#df-avis .df-avis-nav{ display:none !important; }
/* ===== Avis clients — grille 4 colonnes ===== */
#df-avis .df-section-title {
  text-align: center;
  margin-bottom: 18px;
  font-family: "Playfair Display", serif;
}

#df-avis .df-avis-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

#df-avis .df-avis-item {
  background: var(--df-white);
  border-radius: var(--df-radius);
  box-shadow: var(--df-shadow);
  padding: 24px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#df-avis .df-stars {
  display: inline-flex;
  gap: 2px;
  font-size: 20px;
  line-height: 1;
  color: #f4c76d;
}

#df-avis .df-avis-texte {
  font-size: 1.05rem;
  color: var(--df-brown-800);
  font-style: italic;
  margin: 4px 0 2px;
}

#df-avis .df-avis-auteur {
  font-weight: 600;
  color: var(--df-brown-700);
}

/* Responsive */
@media (max-width: 992px) {
  #df-avis .df-avis-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  #df-avis .df-avis-grid { grid-template-columns: 1fr; }
}

/* Désactive tout style carrousel restant */
#df-avis .df-avis-carousel,
#df-avis .df-avis-track,
#df-avis .df-avis-dots,
#df-avis .df-avis-nav {
  display: none !important;
}
/* ===== Harmonisation "Produits populaires" ===== */

/* Titre */
.featured-products h2.h2.section-title {
  text-align: center;
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  color: var(--df-brown-800);
  margin: 0 0 1rem;
}

/* Forcer une grille propre au lieu des colonnes Bootstrap */
.featured-products .products.row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.featured-products .products.row > * {
  flex: unset !important;
  max-width: unset !important;
}

/* Carte produit */
.featured-products .product-miniature {
  background: var(--df-white);
  border-radius: var(--df-radius);
  box-shadow: var(--df-shadow);
  overflow: hidden;
  padding: 14px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.featured-products .product-miniature:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

/* Image */
.featured-products .thumbnail-container {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}
.featured-products .thumbnail-container img {
  width: 100%;
  height: 220px; /* Ajustable */
  object-fit: contain;
  display: block;
}

/* Nom produit */
.featured-products .product-title a {
  color: var(--df-brown-800);
  font-weight: 600;
}

/* Prix */
.featured-products .product-price-and-shipping {
  color: var(--df-brown-900);
  font-weight: 700;
  margin-top: 6px;
}

/* Badge (Neuf, Promo, etc.) */
.featured-products .product-flags .new,
.featured-products .product-flags .on-sale {
  background: var(--df-brown-700);
  color: #fff;
  border-radius: 999px;
  padding: 4px 8px;
  font-weight: 700;
  box-shadow: var(--df-shadow);
}

/* Bouton panier */
.featured-products .add-to-cart {
  border-radius: 999px !important;
  background: var(--df-brown-700) !important;
  color: #fff !important;
  border: none !important;
  padding: .55rem .9rem !important;
}
.featured-products .add-to-cart:hover {
  background: var(--df-brown-600) !important;
}

/* Bouton "Tous les produits" */
.featured-products .all-product-link {
  text-align: center;
  margin-top: 16px;
}
.featured-products .all-product-link a {
  display: inline-block;
  background: transparent;
  border: 2px solid var(--df-brown-700);
  color: var(--df-brown-700);
  padding: .6rem 1rem;
  border-radius: 999px;
  font-weight: 700;
}
.featured-products .all-product-link a:hover {
  background: var(--df-brown-700);
  color: #fff;
}
/* ===== Harmonisation produits populaires ===== */

/* Fond beige clair autour des cartes */
.featured-products {
  background: var(--df-cream);
  padding: 2rem 1rem;
}
.featured-products .products.row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.featured-products .products.row > * {
  flex: unset !important;
  max-width: unset !important;
}

/* Cartes */
.featured-products .product-miniature {
  background: var(--df-white);
  border-radius: var(--df-radius);
  box-shadow: var(--df-shadow);
  overflow: hidden;
  padding: 14px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.featured-products .product-miniature:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

/* Image */
.featured-products .thumbnail-container {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}
.featured-products .thumbnail-container img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  display: block;
}

/* Badge */
.featured-products .product-flags .new,
.featured-products .product-flags .on-sale {
  background: var(--df-brown-700);
  color: #fff;
  border-radius: 999px;
  padding: 4px 8px;
  font-weight: 700;
  box-shadow: var(--df-shadow);
}

/* Bouton panier – harmonisé */
.featured-products .add-to-cart {
  border-radius: 999px !important;
  background: var(--df-brown-700) !important;
  color: #fff !important;
  border: none !important;
  padding: .55rem .9rem !important;
}
.featured-products .add-to-cart:hover {
  background: var(--df-brown-600) !important;
}

/* Supprimer le bouton Aperçu rapide */
.featured-products .quick-view {
  display: none !important;
}

/* Bouton "Tous les produits" */
.featured-products .all-product-link {
  text-align: center;
  margin-top: 16px;
}
.featured-products .all-product-link a {
  display: inline-block;
  background: transparent;
  border: 2px solid var(--df-brown-700);
  color: var(--df-brown-700);
  padding: .6rem 1rem;
  border-radius: 999px;
  font-weight: 700;
}
.featured-products .all-product-link a:hover {
  background: var(--df-brown-700);
  color: #fff;
}
/* ===== Override couleur bouton panier dans produits ===== */
.featured-products .btn.btn-primary,
.featured-products .btn.btn-primary:focus,
.featured-products .btn.btn-primary:active {
  background-color: var(--df-brown-700) !important;
  border-color: var(--df-brown-700) !important;
  color: #fff !important;
}

.featured-products .btn.btn-primary:hover {
  background-color: var(--df-brown-600) !important;
  border-color: var(--df-brown-600) !important;
}

/* Bouton "Tous les produits" harmonisé */
.featured-products .all-product-link a {
  border-color: var(--df-brown-700) !important;
  color: var(--df-brown-700) !important;
}
.featured-products .all-product-link a:hover {
  background-color: var(--df-brown-700) !important;
  color: #fff !important;
}
/* ===== Suppression Aperçu rapide ===== */
.product-miniature .quick-view,
.product-miniature .quick-view:focus,
.product-miniature .quick-view:hover {
  display: none !important;
}
/* ===== 1) Cacher "Aperçu rapide" partout ===== */
.product-miniature__quickview,
.product-miniature__quickview_button,
.product-miniature__quickview .btn,
.product-miniature .js-quickview {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ===== 2) Bouton "Ajouter au panier" marron (override .btn-primary bootstrap) ===== */
.featured-products .btn.btn-primary,
.featured-products .btn.btn-primary:focus,
.featured-products .btn.btn-primary:active {
  background-color: var(--df-brown-700) !important;
  border-color: var(--df-brown-700) !important;
  color: #fff !important;
}
.featured-products .btn.btn-primary:hover {
  background-color: var(--df-brown-600) !important;
  border-color: var(--df-brown-600) !important;
}

/* ===== 3) Lien "Tous les produits" en style Doggy Factory (override .btn-outline-primary) ===== */
.featured-products .featured-products-footer .all-product-link.btn.btn-outline-primary {
  border-color: var(--df-brown-700) !important;
  color: var(--df-brown-700) !important;
  background: transparent !important;
  border-width: 2px !important;
  border-radius: 999px !important;
  font-weight: 700;
  padding: .6rem 1rem;
}
.featured-products .featured-products-footer .all-product-link.btn.btn-outline-primary:hover,
.featured-products .featured-products-footer .all-product-link.btn.btn-outline-primary:focus {
  background: var(--df-brown-700) !important;
  border-color: var(--df-brown-700) !important;
  color: #fff !important;
}
/* ===============================
   PACK UNIFORMISATION CARTES PRODUITS – Doggy Factory
   S’applique à la plupart des listes produits (home, catégories, modules).
================================= */

/* 0) Titres de section harmonisés */
section .h2.section-title,
.block.products_block h2,
.featured-products h2 {
  text-align:center;
  font-family:"Playfair Display", serif;
  font-size:2rem;
  color:var(--df-brown-800);
  margin:0 0 1rem;
}

/* 1) Grilles responsives (remplace les col- bootstrap) */
.products.row,
.product_list,
.block.products_block .products {
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:20px;
}
.products.row > *,
.product_list > * { flex:unset !important; max-width:unset !important; }

/* 2) Carte produit (style commun) */
.product-miniature {
  background:var(--df-white);
  border-radius:var(--df-radius);
  box-shadow:var(--df-shadow);
  overflow:hidden;
  padding:14px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.product-miniature:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(0,0,0,.12);
}

/* 3) Conteneur image propre */
.product-miniature .thumbnail-container{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:10px;
}
.product-miniature .thumbnail-container img{
  width:100%; height:220px; object-fit:contain; display:block;
}

/* 4) Nom & prix */
.product-miniature .product-title a{ color:var(--df-brown-800); font-weight:600; }
.product-miniature .product-price-and-shipping{ color:var(--df-brown-900); font-weight:700; margin-top:6px; }

/* 5) Badges (neuf/promo) */
.product-miniature .product-flags .new,
.product-miniature .product-flags .on-sale{
  background:var(--df-brown-700);
  color:#fff; border-radius:999px; padding:4px 8px; font-weight:700;
  box-shadow:var(--df-shadow);
}

/* 6) Boutons : panier (primary) & liens outline -> palette Doggy */
.product-miniature .btn.btn-primary,
.featured-products .btn.btn-primary,
.block.products_block .btn.btn-primary {
  background-color:var(--df-brown-700) !important;
  border-color:var(--df-brown-700) !important;
  color:#fff !important;
  border-radius:999px !important;
}
.product-miniature .btn.btn-primary:hover,
.featured-products .btn.btn-primary:hover,
.block.products_block .btn.btn-primary:hover {
  background-color:var(--df-brown-600) !important;
  border-color:var(--df-brown-600) !important;
}

/* Boutons outline (ex: Tous les produits, “voir tout”, etc.) */
a.btn.btn-outline-primary,
.block.products_block .all-product-link a,
.featured-products .all-product-link a {
  border:2px solid var(--df-brown-700) !important;
  color:var(--df-brown-700) !important;
  background:transparent !important;
  border-radius:999px !important;
  font-weight:700;
  padding:.6rem 1rem;
}
a.btn.btn-outline-primary:hover,
.block.products_block .all-product-link a:hover,
.featured-products .all-product-link a:hover {
  background:var(--df-brown-700) !important;
  color:#fff !important;
}

/* 7) Quick view off partout */
.product-miniature__quickview,
.product-miniature__quickview_button,
.product-miniature .js-quickview{ display:none !important; }

/* 8) Wishlist (coeur) harmonisé */
.product-miniature .wishlist,
.product-miniature [class*="wishlist"] i,
.product-miniature .wishlist-button {
  color:var(--df-brown-700) !important;
  background:#fff;
  border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}

/* 9) Espacements de sections */
.featured-products,
.block.products_block { background:var(--df-cream); padding:2rem 1rem; }
/* Réduire l'espace sous la section Produits phares */
.featured-products-footer {
    margin-bottom: 0px !important;
}
/* Tasser l'espace sous la section produits */
section.featured-products {
  padding-bottom: 0px !important;   /* avant on avait 2rem */
}
section.featured-products .featured-products-footer {
  margin: 6px 0 6px !important;     /* réduit le gap du "Tous nos produits" */
}
section.featured-products .featured-products-footer .all-product-link {
  margin: 0 !important;             /* certains thèmes ajoutent une marge propre au bouton */
}

/* Réduire l'espace au-dessus du bloc Avis (notre module) */
section.df-htmlblock {
  margin-top: 0px !important;      /* c’était la bonne intention, mais mauvais sélecteur */
}

/* Par sécurité : titre des avis sans marge haute inutile */
#df-avis .df-section-title {
  margin-top: 6px !important;
}

/* Réduire l'espace au-dessus du bloc HTML suivant (avis) */
.df-html-block {
    margin-top: 0px !important;
}
/* Réduit au maximum l'espace entre produits populaires et avis */
section.featured-products {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

section.df-htmlblock {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Supprime les marges internes inutiles dans le container */
.featured-products-footer {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* Masquer Aperçu rapide (toutes listes produits, Hummingbird) */
.product-miniature [data-link-action="quickview"],
.product-miniature .js-quickview,
.product-miniature__quickview,
.product-miniature__quickview_button,
.featured-products [data-link-action="quickview"],
.block.products_block [data-link-action="quickview"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Neutraliser le primaire bootstrap dans les blocs produits */
.featured-products .btn-primary,
.block.products_block .btn-primary,
.products .btn-primary {
  background-color: var(--df-brown-700) !important;
  border-color: var(--df-brown-700) !important;
  color: #fff !important;
}
.featured-products .btn-primary:hover,
.block.products_block .btn-primary:hover,
.products .btn-primary:hover {
  background-color: var(--df-brown-600) !important;
  border-color: var(--df-brown-600) !important;
}
/* ===== Bloc Avantages (Doggy Factory) ===== */
.df-advantages { background: var(--df-cream); padding: 22px 0 8px; }
.df-adv-grid {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, minmax(0,1fr));
  max-width: 1100px;
}
.df-adv-item {
  background: var(--df-white);
  border-radius: var(--df-radius);
  box-shadow: var(--df-shadow);
  padding: 18px 14px;
  text-align: center;
}
.df-adv-item .material-icons { font-size: 28px; color: var(--df-brown-700); }
.df-adv-item h3 { margin: 8px 0 4px; font-size: 1.05rem; color: var(--df-brown-800); }
.df-adv-item p  { margin: 0; color: var(--df-brown-700); font-size: .95rem; }

@media (max-width: 992px){ .df-adv-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .df-adv-grid{ grid-template-columns: 1fr; } }

/* ===== Micro-zoom images produits (toutes grilles) ===== */
.product-miniature .thumbnail-container { overflow: hidden; border-radius: 12px; }
.product-miniature .thumbnail-container img { transition: transform .28s ease; }
.product-miniature:hover .thumbnail-container img { transform: scale(1.06); }

/* ===== Newsletter (Hummingbird : .email-subscription) – style carte ===== */
.email-subscription { background: var(--df-cream); }
.email-subscription .container {
  max-width: 900px; margin: 18px auto; padding: 18px;
  background: var(--df-white); border-radius: var(--df-radius); box-shadow: var(--df-shadow);
}
.shop-advantages {
  text-align: center;
  padding: 40px 20px;
  background: #fff9f3;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  margin-top: 40px;
}

.advantages-title {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin-bottom: 30px;
  color: #5b3a1a;
}

.advantages-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.advantage {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.advantage:hover {
  transform: translateY(-5px);
}

.advantage i {
  font-size: 36px;
  color: #8b5a2b;
  margin-bottom: 10px;
}

.advantage h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #5b3a1a;
}
/* ===== Bloc Avantages (Doggy Factory) ===== */
.df-advantages { background: var(--df-cream); padding: 22px 0 8px; }
.df-adv-grid {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, minmax(0,1fr));
  max-width: 1100px;
}
.df-adv-item {
  background: var(--df-white);
  border-radius: var(--df-radius);
  box-shadow: var(--df-shadow);
  padding: 18px 14px;
  text-align: center;
}
.df-adv-item .material-icons { font-size: 28px; color: var(--df-brown-700); }
.df-adv-item h3 { margin: 8px 0 4px; font-size: 1.05rem; color: var(--df-brown-800); }
.df-adv-item p  { margin: 0; color: var(--df-brown-700); font-size: .95rem; }

@media (max-width: 992px){ .df-adv-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .df-adv-grid{ grid-template-columns: 1fr; } }

/* ===== Micro-zoom images produits (toutes grilles) ===== */
.product-miniature .thumbnail-container { overflow: hidden; border-radius: 12px; }
.product-miniature .thumbnail-container img { transition: transform .28s ease; }
.product-miniature:hover .thumbnail-container img { transform: scale(1.06); }

/* ===== Newsletter (Hummingbird : .email-subscription) – style carte ===== */
.email-subscription { background: var(--df-cream); }
.email-subscription .container {
  max-width: 900px; margin: 18px auto; padding: 18px;
  background: var(--df-white); border-radius: var(--df-radius); box-shadow: var(--df-shadow);
}
.df-adv-title {
  text-align: center;
  font-family: "Playfair Display", serif;
  font-size: 1.9rem;
  color: var(--df-brown-800);
  margin: 0 0 18px;
}
/* ===== Newsletter PrestaShop (module natif) – style Doggy Factory ===== */

/* conteneur carte */
.email-subscription, .block_newsletter, .ps-email-subscription {
  background: var(--df-cream);
  padding: 0;                /* on stylise le .container interne */
}
.email-subscription .container,
.block_newsletter .container,
.ps-email-subscription .container{
  max-width: 900px;
  margin: 0 auto;
  background: var(--df-white);
  border-radius: var(--df-radius);
  box-shadow: var(--df-shadow);
  padding: 18px;
}

/* titre */
.email-subscription h3, .block_newsletter h3, .ps-email-subscription h3,
.email-subscription label[for*="newsletter"], .ps-email-subscription label {
  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  color: var(--df-brown-800);
  margin: 0 0 10px;
}

/* ligne input + bouton (bootstrap -> pill) */
.email-subscription form,
.block_newsletter form,
.ps-email-subscription form{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* champ email */
.email-subscription input[type="email"],
.block_newsletter input[type="email"],
.ps-email-subscription input[type="email"]{
  flex: 1 1 420px;
  height: 46px;
  border: 2px solid rgba(47,36,26,.18);
  border-radius: 999px;
  padding: 0 16px;
  font-size: 1rem;
  outline: none !important;
  box-shadow: none !important;
  background: #fff;
}
.email-subscription input::placeholder,
.block_newsletter input::placeholder,
.ps-email-subscription input::placeholder{ color: #b7aa9b; }

/* bouton : plus de bleu */
.email-subscription .btn,
.block_newsletter .btn,
.ps-email-subscription .btn{
  height: 46px;
  padding: 0 18px;
  border-radius: 999px !important;
  border: none !important;
  background: var(--df-brown-700) !important;
  color: #fff !important;
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: none !important;
}
.email-subscription .btn:hover,
.block_newsletter .btn:hover,
.ps-email-subscription .btn:hover{
  background: var(--df-brown-600) !important;
}

/* cas où le thème force .btn-primary bleu */
.email-subscription .btn-primary,
.block_newsletter .btn-primary,
.ps-email-subscription .btn-primary{
  background: var(--df-brown-700) !important;
  border-color: var(--df-brown-700) !important;
  color: #fff !important;
}

/* petit texte */
.email-subscription small,
.block_newsletter small,
.ps-email-subscription small{
  display: block;
  margin-top: 8px;
  color: var(--df-brown-600);
}

/* mobile */
@media (max-width: 600px){
  .email-subscription form,
  .block_newsletter form,
  .ps-email-subscription form{ flex-direction: column; align-items: stretch; }
  .email-subscription input[type="email"],
  .block_newsletter input[type="email"],
  .ps-email-subscription input[type="email"]{ flex: 1 1 auto; width: 100%; }
  .email-subscription .btn,
  .block_newsletter .btn,
  .ps-email-subscription .btn{ width: 100%; justify-content: center; }
}
/* ===== Newsletter — style affiche promo ===== */
.email-subscription, .block_newsletter, .ps-email-subscription {
  background: var(--df-cream);
  padding: 28px 0;
}
.email-subscription .container,
.block_newsletter .container,
.ps-email-subscription .container {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  background: transparent;       /* pas de carte blanche */
  box-shadow: none;
  padding: 0;
}

/* Titre + sous-titre */
.email-subscription h3,
.ps-email-subscription h3 {
  font-family: "Playfair Display", serif;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.1;
  margin: 0 0 8px;
  color: #1d1a17;                /* plus “noir” pour le style affiche */
}
.email-subscription p.subtitle,
.ps-email-subscription p.subtitle {
  margin: 0 0 18px;
  color: #3b332c;
  font-size: 18px;
  opacity: .9;
}

/* Ligne champ + bouton en colonne (full width) */
.email-subscription form,
.ps-email-subscription form {
  display: grid;
  gap: 12px;
}

/* Champ email — bord noir, arrondi, haut */
.email-subscription input[type="email"],
.ps-email-subscription input[type="email"] {
  height: 58px;
  border: 2px solid #12100e;
  border-radius: 12px;
  padding: 0 18px;
  font-size: 18px;
  background: #fff;
  outline: none !important;
  box-shadow: none !important;
}
.email-subscription input::placeholder,
.ps-email-subscription input::placeholder { color: #9a9085; }

/* Bouton — crème + bord noir, full width, bold */
.email-subscription .btn,
.ps-email-subscription .btn,
.email-subscription button[type="submit"],
.ps-email-subscription button[type="submit"] {
  height: 58px;
  width: 100%;
  border-radius: 12px !important;
  border: 2px solid #12100e !important;
  background: #e8decf !important;     /* crème */
  color: #1d1a17 !important;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .2px;
  box-shadow: none !important;
}
.email-subscription .btn:hover,
.ps-email-subscription .btn:hover {
  background: #dfd3c0 !important;     /* un poil plus sombre au hover */
}

/* Petit texte sous le bouton (optionnel) */
.email-subscription small,
.ps-email-subscription small {
  display: block;
  margin-top: 8px;
  color: #6a5c4b;
}

/* Écrase d'éventuels .btn-primary bleus */
.email-subscription .btn-primary,
.ps-email-subscription .btn-primary {
  background: #e8decf !important;
  border-color: #12100e !important;
  color: #1d1a17 !important;
}
/* ===== Newsletter - style "affiche promo" (comme ta capture) ===== */
.email-subscription { background: var(--df-cream); padding: 28px 0; }
.email-subscription .container{
  max-width: 820px; margin: 0 auto; text-align: center; padding: 0;
  background: transparent !important; box-shadow: none !important; border: 0;
}

/* Titre + sous-titre */
.email-subscription h3{
  font-family: "Playfair Display", serif;
  font-size: clamp(28px, 5vw, 42px); line-height: 1.1;
  margin: 0 0 10px; color: #1d1a17;
}
/* le paragraphe juste après le h3 devient le sous-titre */
.email-subscription h3 + p,
.email-subscription .newsletter-subtitle{
  margin: 0 0 16px; color: #3b332c; font-size: 18px; opacity: .95;
}

/* Forme colonne: input plein largeur + bouton plein largeur */
.email-subscription form{ display: grid; gap: 12px; }

/* Champ e-mail: bord noir, coins 12px */
.email-subscription input[type="email"],
.email-subscription .form-control[type="email"]{
  height: 58px; border: 2px solid #12100e !important; border-radius: 12px !important;
  padding: 0 18px; font-size: 18px; background: #fff !important;
  outline: none !important; box-shadow: none !important;
}
.email-subscription input::placeholder{ color: #9a9085; }

/* Bouton crème avec bord noir (finit le bleu !) */
.email-subscription .btn,
.email-subscription .btn-primary,
.email-subscription .btn-outline-primary,
.email-subscription button[type="submit"]{
  height: 58px; width: 100%;
  border-radius: 12px !important; border: 2px solid #12100e !important;
  background: #e8decf !important; color: #1d1a17 !important;
  font-weight: 700; font-size: 18px; letter-spacing: .2px;
  box-shadow: none !important;
}
.email-subscription .btn:hover{ background: #dfd3c0 !important; }

/* Petit texte en dessous (si présent) */
.email-subscription small{ display:block; margin-top:8px; color:#6a5c4b; }

/* Nettoyage de styles Bootstrap/Hummingbird résiduels */
.email-subscription .input-group,
.email-subscription .d-flex{ display:block !important; }
/* tue le bleu résiduel */
.email-subscription .btn-primary,
.email-subscription .btn-outline-primary {
  background: #e8decf !important;
  border: 2px solid #12100e !important;
  color: #1d1a17 !important;
  border-radius: 12px !important;
  height: 58px;
}
/* Bloc newsletter Doggy Factory */
.df-newsletter {
  background: var(--df-cream);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
  box-shadow: var(--df-shadow);
}

.df-newsletter h3 {
  margin: 0 0 6px;
  font-size: 1.4rem;
  color: var(--df-brown-800);
}

.df-newsletter p {
  margin: 0 0 14px;
  color: var(--df-brown-700);
  font-size: 1rem;
}

.df-newsletter form {
  display: grid;
  gap: 10px;
}

.df-newsletter input[type="email"] {
  padding: 10px 14px;
  border: 2px solid var(--df-brown-800);
  border-radius: 8px;
  font-size: 1rem;
}

.df-newsletter button {
  background: var(--df-beige);
  border: 2px solid var(--df-brown-800);
  color: var(--df-brown-800);
  padding: 10px 14px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
}

.df-newsletter button:hover {
  opacity: 0.85;
}
/* ===== Newsletter Hummingbird : pile verticale + style affiche promo ===== */

/* Contrainte : casser la row Bootstrap du module */
.email-subscription .email-subscription__content.row {
  display: block !important;          /* on désactive le flex de .row */
}

/* Les 2 colonnes deviennent 100% largeur, centrées */
.email-subscription .email-subscription__content__left,
.email-subscription .email-subscription__content__right {
  width: 100% !important;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.email-subscription .email-subscription__content__right { margin-top: 12px; }

/* Titre + sous-titre */
.email-subscription h3 {
  margin: 0 0 8px;
  font-family: "Playfair Display", serif;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.1;
  color: #1d1a17;
}
.email-subscription h3 + p,
.email-subscription .newsletter-subtitle {
  margin: 0 0 16px;
  color: #3b332c;
  font-size: 18px;
  opacity: .95;
}

/* Le formulaire : une seule colonne (input puis bouton) */
.email-subscription .email-subscription__content__right form {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 12px;
  justify-items: stretch;
}

/* Champ e-mail */
.email-subscription input[type="email"],
.email-subscription .form-control[type="email"]{
  width: 100%;
  height: 58px;
  border: 2px solid #12100e !important;
  border-radius: 12px !important;
  padding: 0 18px;
  font-size: 18px;
  background: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}
.email-subscription input::placeholder { color: #9a9085; }

/* Bouton : crème + bord noir, plein largeur — fini le bleu */
.email-subscription .btn,
.email-subscription .btn-primary,
.email-subscription .btn-outline-primary {
  width: 100%;
  height: 58px;
  border-radius: 12px !important;
  border: 2px solid #12100e !important;
  background: #e8decf !important;
  color: #1d1a17 !important;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .2px;
  box-shadow: none !important;
}
.email-subscription .btn:hover { background: #dfd3c0 !important; }
.df-craft-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 15px;
}

.df-craft-inner h2 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: var(--df-brown-800);
}

.df-craft-text {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 25px;
  color: var(--df-brown-700);
}

.df-craft-inner .df-btn {
  padding: 10px 25px;
}
/* ===== Topbar rotatif (style identique à ton bandeau marron) ===== */
.df-topbar{
  height: 34px;
  background: var(--df-brown-600, #a87f56);
  color:#fff;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 10px;
  font-size:14px;
  line-height:1;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.df-topbar strong{ color:#fff; font-weight:800; }

/* Zone réseaux à gauche : on reprend le rendu du module ps_socialfollow */
.df-topbar__left{ display:flex; align-items:center; }

/* ps_socialfollow produit .block-social */
.df-topbar__left .block-social{ display:flex; align-items:center; gap:10px; }

/* Icônes seules, pas de label */
.df-topbar__left .block-social a span{ display:none !important; }
.df-topbar__left .block-social a{
  display:inline-grid; place-items:center;
  width:22px; height:22px;
  border:1px solid rgba(255,255,255,.95);
  color:#fff; text-decoration:none;
  border-radius:999px;
  font-size:14px; line-height:1;
  transition:opacity .15s ease;
}
.df-topbar__left .block-social a:hover{ opacity:.85; }

/* Carrousel au centre */
.df-topbar__viewport{ flex:1 1 auto; overflow:hidden; }
.df-topbar__list{
  display:flex; margin:0; padding:0; list-style:none;
  transition: transform .35s ease;
}
.df-topbar__item{
  min-width:100%;
  text-align:center;
  white-space:nowrap;
}
@media (max-width:680px){
  .df-topbar{ height:auto; padding:6px 8px; }
  .df-topbar__item{ white-space:normal; line-height:1.3; }
}

/* Flèches à droite */
.df-topbar__nav{ display:flex; gap:6px; }
.df-topbar__nav button{
  appearance:none; border:1px solid rgba(255,255,255,.95);
  color:#fff; background:transparent;
  width:22px; height:22px; border-radius:999px;
  display:grid; place-items:center;
  font-size:14px; line-height:1;
  cursor:pointer; transition:opacity .15s ease;
}
.df-topbar__nav button:hover{ opacity:.85; }
.df-topbar {
  background: #a87b52;
  color: #fff;
  padding: 6px 0;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 500;
}
.df-topbar__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 40px;
}
.df-topbar__item {
  white-space: nowrap;
}
/* ===== Topbar rotatif (grid = gauche réseaux / centre message / droite flèches) ===== */
.df-topbar{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:10px;
  height:34px;                         /* même hauteur que ton bandeau */
  background:#6e5847;                  /* mets ta teinte exacte au besoin */
  color:#fff;
  padding:0 10px;
  border-bottom:1px solid rgba(0,0,0,.08);
  z-index:5;
}
.df-topbar strong{ color:#fff; font-weight:800; }

/* Bloc réseaux (ps_socialfollow) */
.df-topbar__left{ display:flex; align-items:center; }
.df-topbar__left .block-social{ display:flex; align-items:center; gap:10px; margin:0; }
.df-topbar__left .block-social a span{ display:none !important; }          /* masque les labels */
.df-topbar__left .block-social a{
  display:inline-grid; place-items:center;
  width:22px; height:22px; border-radius:999px;
  border:1px solid rgba(255,255,255,.95);
  color:#fff; text-decoration:none;
  font-size:14px; line-height:1;
  transition:opacity .15s ease;
}
.df-topbar__left .block-social a:hover{ opacity:.85; }

/* Carrousel centré */
.df-topbar__viewport{ overflow:hidden; }
.df-topbar__list{
  display:flex; list-style:none; margin:0; padding:0;
  transition: transform .35s ease;
}
.df-topbar__item{
  min-width:100%;
  text-align:center;
  white-space:nowrap;
}
@media (max-width:680px){
  .df-topbar{ height:auto; padding:6px 8px; }
  .df-topbar__item{ white-space:normal; line-height:1.3; }
}

/* Flèches à droite */
.df-topbar__nav{ display:flex; gap:6px; justify-self:end; }
.df-topbar__nav button{
  appearance:none; border:1px solid rgba(255,255,255,.95);
  color:#fff; background:transparent;
  width:22px; height:22px; border-radius:999px;
  display:grid; place-items:center;
  font-size:14px; line-height:1;
  cursor:pointer; transition:opacity .15s ease;
}
.df-topbar__nav button:hover{ opacity:.85; }
/* ====== DF TOPBAR — version finale (écrase les anciennes règles) ====== */

/* 1) On masque totalement la petite barre blanche du thème */
#header .header-top { display: none !important; }

/* 2) Mise en page du bandeau rotatif : réseaux / centre / (flèches cachées) */
.df-topbar{
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  height: 34px;
  background: #6e5847;           /* ajuste la teinte si besoin */
  color: #fff;
  padding: 0 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  z-index: 5;
}
.df-topbar strong{ color:#fff; font-weight:800; }

/* Réseaux (ps_socialfollow) */
.df-topbar__left{ display:flex; align-items:center; }
.df-topbar__left .block-social{ display:flex; align-items:center; gap:10px; margin:0; }
.df-topbar__left .block-social a span{ display:none !important; }
.df-topbar__left .block-social a{
  display:inline-grid; place-items:center;
  width:22px; height:22px; border-radius:999px;
  border:1px solid rgba(255,255,255,.95);
  color:#fff; text-decoration:none; font-size:14px;
  transition:opacity .15s ease;
}
.df-topbar__left .block-social a:hover{ opacity:.85; }

/* Viewport du slider + liste */
.df-topbar__viewport{ overflow:hidden; }
.df-topbar__list{
  display:flex !important;
  list-style:none; margin:0; padding:0;
  gap: 0 !important;                /* écrase l'ancienne règle fautive */
  justify-content: flex-start !important; /* idem */
  transition: transform .35s ease;
}
.df-topbar__item{
  min-width:100%;
  text-align:center;
  white-space:nowrap;
}
@media (max-width:680px){
  .df-topbar{ height:auto; padding:6px 8px; }
  .df-topbar__item{ white-space:normal; line-height:1.3; }
}

/* Flèches : on les cache si tu n’en veux pas */
.df-topbar__nav{ display:none !important; }
/* ——— 1) Désactiver totalement la petite barre du haut du thème ——— */
#header .header-top,
#header .header__top,
.header__banner .header-top {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Si le thème mettait le menu dans .header-top, on le tue aussi là-haut */
#header .header-top .main-menu,
#header .header-top nav { display: none !important; }

/* ——— 2) Réseaux sociaux : uniquement dans la topbar ——— */
#header .block-social { display: none !important; }          /* masque dans le header */
.df-topbar .block-social { display: flex !important; }       /* affiche dans la topbar */

/* ——— 3) Topbar rotatif : layout + overrides forts ——— */
.df-topbar{
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  height: 34px;
  background: #6e5847;            /* ta teinte */
  color: #fff;
  padding: 0 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  z-index: 5;
}
.df-topbar__left{ display:flex; align-items:center; }
.df-topbar__left .block-social{ gap:10px; margin:0; }
.df-topbar__left .block-social a span{ display:none !important; }
.df-topbar__left .block-social a{
  display:inline-grid; place-items:center;
  width:22px; height:22px; border-radius:999px;
  border:1px solid rgba(255,255,255,.95);
  color:#fff; font-size:14px; line-height:1;
  transition:opacity .15s ease;
}
.df-topbar__left .block-social a:hover{ opacity:.85; }

.df-topbar__viewport{ overflow:hidden; }
.df-topbar__list{
  display:flex !important;
  list-style:none; margin:0; padding:0;
  gap: 0 !important;                        /* ⚠️ tue les vieux styles */
  justify-content: flex-start !important;   /* ⚠️ idem */
  transition: transform .35s ease;
}
.df-topbar__item{
  min-width:100%;
  text-align:center;
  white-space:nowrap;
}
@media (max-width:680px){
  .df-topbar{ height:auto; padding:6px 8px; }
  .df-topbar__item{ white-space:normal; line-height:1.3; }
}

/* Flèches à droite : on les masque (remets display:flex si tu les veux) */
.df-topbar__nav{ display:none !important; }
/* ===== DF Topbar — version finale ===== */

/* grille : gauche = réseaux / centre = message / droite = (flèches masquées) */
#df-topbar{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:10px;
  height:34px;
  background:#6e5847;         /* marron du bandeau */
  color:#fff;
  padding:0 10px;
  z-index:1000;
  border-bottom:1px solid rgba(0,0,0,.08);
}
#df-topbar strong{ color:#fff; font-weight:800; }

/* réseaux (on réutilise ps_socialfollow) */
#df-topbar .block-social{ display:flex; align-items:center; gap:10px; margin:0; }
#df-topbar .block-social a span{ display:none !important; }
#df-topbar .block-social a{
  display:inline-grid; place-items:center;
  width:22px; height:22px; border-radius:999px;
  border:1px solid rgba(255,255,255,.95);
  color:#fff; text-decoration:none; font-size:14px;
}
#df-topbar .block-social a:hover{ opacity:.85; }

/* viewport + liste des messages (centrés) */
.df-topbar__viewport{ overflow:hidden; }
.df-topbar__list{ display:flex; list-style:none; margin:0; padding:0;
  transition: transform .35s ease; }
.df-topbar__item{ min-width:100%; text-align:center; white-space:nowrap; }

/* flèches MASQUÉES (tu pourras remettre "flex" si tu les veux un jour) */
.df-topbar__nav{ display:none !important; }

@media (max-width:680px){
  #df-topbar{ height:auto; padding:6px 8px; }
  .df-topbar__item{ white-space:normal; line-height:1.3; }
}

/* ===== Nettoyage header : on vire la barre blanche et le menu dupliqué ===== */

/* cache la petite barre “Contactez‑nous / recherche” */
#header .header-top { display:none !important; }

/* si un menu s’est accroché dans la zone bannière, on le masque */
#header .header__banner nav,
#header .header__banner .main-menu,
#header .header__banner .main-menu__tree { display:none !important; }

/* on garde les icônes réseaux UNIQUEMENT dans le topbar */
#header .header-nav .block-social { display:none !important; }
#df-topbar .block-social { display:flex !important; }

/* sécurité : compte/panier toujours cliquables et alignés à droite du header */
#_desktop_user_info,
#_desktop_cart{
  position:absolute !important;
  top:50% !important; transform:translateY(-50%) !important;
  display:inline-flex !important; gap:10px; z-index:1100;
}
#_desktop_cart{ right:16px !important; }
#_desktop_user_info{ right:64px !important; }
#_desktop_user_info .material-icons,
#_desktop_cart .material-icons,
#_desktop_user_info a, #_desktop_cart a{ color:#fff !important; }
.df-topbar__list {
  display: flex;
  justify-content: center !important; /* Centre horizontalement */
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform .35s ease;
}

.df-topbar__item {
  min-width: 100%;
  text-align: center;
  white-space: nowrap;
}
/* ——— Tuer la petite barre blanche + tout menu “fantôme” au-dessus ——— */
#header .header-top,
#header .header__top,
#header .header__banner nav,
#header .header__banner .main-menu,
#header .header__banner .main-menu__tree {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* ——— Ne garder les réseaux sociaux QUE dans la topbar ——— */
#header .block-social,
#header .ps-socialfollow,
#header .header__banner .block-social,
#header .header-nav .block-social {
  display: none !important;        /* masque partout dans le header */
}
#df-topbar .block-social,
#df-topbar .ps-socialfollow {
  display: flex !important;        /* affiche dans la topbar */
}

/* ——— Topbar rotative : centrage strict du message ——— */
#df-topbar{
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  height: 34px;
  background: #6e5847;
  color: #fff;
  padding: 0 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  z-index: 1000;
}
#df-topbar .block-social a span{ display:none !important; }
#df-topbar .block-social a{
  display:inline-grid; place-items:center;
  width:22px; height:22px; border-radius:999px;
  border:1px solid rgba(255,255,255,.95);
  color:#fff; text-decoration:none; font-size:14px;
}
.df-topbar__viewport{ overflow:hidden; }
.df-topbar__list{
  display:flex !important;
  list-style:none; margin:0; padding:0;
  gap:0 !important;
  justify-content:flex-start !important;
  transition: transform .35s ease;
}
.df-topbar__item{
  min-width:100%;
  text-align:center;
  white-space:nowrap;
}

/* flèches masquées (remets display:flex si tu en veux) */
.df-topbar__nav{ display:none !important; }
/* Cacher le lien "Contactez-nous" uniquement dans le menu du header */
#header nav .main-menu__tree__link[href*="contact"],
#header nav .main-menu__tree__link[href*="nous-contacter"],
#header .top-menu a[href*="contact"] {
  display: none !important;
}
/* Rien d'autre que les réseaux dans notre topbar */
#df-topbar .top-menu,
#df-topbar .main-menu,
#df-topbar nav,
#df-topbar form,
#df-topbar .search-widget {
  display: none !important;
}

/* On force l'affichage du module réseaux dans la topbar */
#df-topbar .block-social { display: flex !important; }
/* Cache tout sauf les réseaux sociaux dans la topbar */
#df-topbar nav,
#df-topbar .top-menu,
#df-topbar .search-widget,
#df-topbar .block-contact,
#df-topbar .contact-link {
  display: none !important;
}

/* Réseaux visibles dans la topbar */
#df-topbar .block-social { display: flex !important; }
/* ===== Corriger l'entête ===== */

/* Réafficher header-top (panier + compte y sont accrochés) */
#header .header-top {
  display: block !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Cacher uniquement le lien "Contactez-nous" dans la barre header-top */
#header .header-top a[href*="contact"] {
  display: none !important;
}

/* Empêcher les réseaux d'apparaître ailleurs que dans la topbar */
#header .header-top .block-social,
#header .header-bottom .block-social,
#header .header__nav .block-social {
  display: none !important;
}
#df-topbar .block-social { display: flex !important; }

/* ===== Topbar rotative (mise en page + centrage message) ===== */
.df-topbar{
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  height: 34px;
  background: #6e5847; /* ta teinte */
  color: #fff;
  padding: 0 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  z-index: 1000;
}
.df-topbar__viewport{ overflow:hidden; }
.df-topbar__list{
  display: flex !important;
  list-style: none;
  margin: 0; padding: 0;
  gap: 0 !important;
  justify-content: flex-start !important;
  transition: transform .35s ease;
}
.df-topbar__item{
  min-width: 100%;
  text-align: center;
  white-space: nowrap;
}
.df-topbar__nav{ display:none !important; } /* flèches masquées */

/* Réseaux : icônes rondes blanches */
#df-topbar .block-social a span{ display:none !important; }
#df-topbar .block-social a{
  display:inline-grid; place-items:center;
  width:22px; height:22px; border-radius:999px;
  border:1px solid rgba(255,255,255,.95);
  color:#fff; text-decoration:none; font-size:14px;
}
#df-topbar .block-social a:hover{ opacity:.85; }
/* base */
.df-social__icon{
  position:relative;
  display:inline-block;
  width:42px;height:42px;
  border-radius:999px;
  background:#f5f1eb;
}
.df-social__icon::before{
  content:"";
  position:absolute; inset:0;
  margin:auto;
  width:22px;height:22px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

/* Facebook */
.df-social--fb .df-social__icon{ background:#E8F1FF; }
.df-social--fb .df-social__icon::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='%231877F2'/><path d='M13.3 20v-6.4h2.15l.32-2.48H13.3v-1.58c0-.72.23-1.21 1.39-1.21h1.48V5.13c-.26-.03-1.14-.11-2.17-.11-2.15 0-3.62 1.31-3.62 3.71v2.09H7.9v2.48h2.48V20h2.92z' fill='%23fff'/></svg>");
}

/* Instagram (version simple, rose) */
.df-social--ig .df-social__icon{ background:#FFF0F6; }
.df-social--ig .df-social__icon::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='%23E1306C'/><path fill='%23fff' d='M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 8.2A3.2 3.2 0 1 1 12 8a3.2 3.2 0 0 1 0 6.4zM17.4 6.6a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z'/></svg>");
}

/* TikTok */
.df-social--tt .df-social__icon{ background:#EFFBFF; }
.df-social--tt .df-social__icon::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='%23000'/><path fill='%2325F4EE' d='M10 7h2v8a3 3 0 1 1-3-3h1v2a1 1 0 1 0 1-1V7z'/><path fill='%23FE2C55' d='M14 7c.3.5.8.9 1.3 1.2.5.3 1 .4 1.7.4V10c-.7 0-1.4-.1-2-.4V15a3.5 3.5 0 1 1-3.5-3.5V8h2v-.5z'/></svg>");
}
/* base */
.df-social__icon{
  position:relative;
  display:inline-block;
  width:42px;height:42px;
  border-radius:999px;
  background:#f5f1eb;
}
.df-social__icon::before{
  content:"";
  position:absolute; inset:0;
  margin:auto;
  width:22px;height:22px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

/* Facebook */
.df-social--fb .df-social__icon{ background:#E8F1FF; }
.df-social--fb .df-social__icon::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='%231877F2'/><path d='M13.3 20v-6.4h2.15l.32-2.48H13.3v-1.58c0-.72.23-1.21 1.39-1.21h1.48V5.13c-.26-.03-1.14-.11-2.17-.11-2.15 0-3.62 1.31-3.62 3.71v2.09H7.9v2.48h2.48V20h2.92z' fill='%23fff'/></svg>");
}

/* Instagram (version simple, rose) */
.df-social--ig .df-social__icon{ background:#FFF0F6; }
.df-social--ig .df-social__icon::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='%23E1306C'/><path fill='%23fff' d='M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 8.2A3.2 3.2 0 1 1 12 8a3.2 3.2 0 0 1 0 6.4zM17.4 6.6a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z'/></svg>");
}

/* TikTok */
.df-social--tt .df-social__icon{ background:#EFFBFF; }
.df-social--tt .df-social__icon::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='%23000'/><path fill='%2325F4EE' d='M10 7h2v8a3 3 0 1 1-3-3h1v2a1 1 0 1 0 1-1V7z'/><path fill='%23FE2C55' d='M14 7c.3.5.8.9 1.3 1.2.5.3 1 .4 1.7.4V10c-.7 0-1.4-.1-2-.4V15a3.5 3.5 0 1 1-3.5-3.5V8h2v-.5z'/></svg>");
}
.df-social__list{
  list-style:none; margin:0 auto; padding:0;
  display:flex; gap:22px; justify-content:center; flex-wrap:wrap;
}
.df-social__btn{
  display:flex; align-items:center; gap:12px;
  min-width:280px; height:64px;
  padding:12px 18px; background:#fff; border-radius:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  transition:transform .15s ease, box-shadow .15s ease;
}
.df-social__btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.12); }
.df-social__icon{ display:inline-grid; place-items:center; width:42px; height:42px; border-radius:999px; background:#f5f1eb; }
.df-social--fb .df-social__icon{ background:#E8F1FF; }
.df-social--ig .df-social__icon{ background:#FFF0F6; }
.df-social--tt .df-social__icon{ background:#EFFBFF; }
.df-social {
  margin-bottom: 0px !important; /* réduit l'espace en bas du bloc réseaux */
}

.email-subscription {
  margin-top: 0px !important; /* réduit l'espace en haut du bloc newsletter */
}
/* Supprimer le padding/marge entre bloc réseaux et newsletter */
.df-htmlblock,
.df-social {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.footer_before,
.email-subscription {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Éventuellement, forcer le rapprochement */
.df-social + .footer_before {
  margin-top: -10px !important; /* valeur négative pour coller encore plus */
}
/* ===== Page produit : grande image centrée + miniatures dessous ===== */
.page-product #product-images .carousel-inner,
.page-product #product-images .carousel-item,
.page-product #product-images .carousel-item img {
  width: 100%;
  height: 520px;              /* cadre stable ; ajuste 500–600 si tu veux */
  object-fit: contain;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

/* Miniatures plus petites & serrées, centrées sous l'image */
.page-product .thumbnails__container { margin-top: 14px !important; }
.page-product .thumbnails__list {
  display: flex !important;
  justify-content: center;
  gap: 10px;                  /* espace entre thumbs */
  margin: 0; padding: 0;
}
.page-product .thumbnails__list li { list-style: none; }
.page-product .thumbnails__list img {
  width: 86px;                /* taille réduite */
  height: 86px;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
  border: 2px solid transparent;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.page-product .thumbnails__list img:hover { transform: translateY(-2px); }

/* État sélectionné (pas de bleu) */
.page-product .thumbnails__list .active img,
.page-product .thumbnails__list li.active img,
.page-product .thumbnails__list li.selected img {
  border-color: var(--df-brown-700, #523a27);
  box-shadow: 0 6px 16px rgba(82,58,39,.18);
}
.page-product .thumbnails__list a:focus,
.page-product .thumbnails__list img:focus { outline: none !important; box-shadow: none !important; }

/* Pastilles couleur : supprime le halo bleu + anneau marron au choix */
.page-product .js-product-variants .color,
.page-product .js-product-variants .input-color:focus,
.page-product .js-product-variants .color:focus,
.page-product .js-product-variants .color:focus-visible {
  outline: none !important;
  box-shadow: none !important;           /* 🔕 plus de bleu */
}
.page-product .js-product-variants .color.active,
.page-product .js-product-variants .input-color:checked + .color {
  border: 2px solid var(--df-brown-700, #523a27) !important;
  border-radius: 6px;
}

/* Badge "Neuf" caché */
.page-product .product-flags .new { display: none !important; }
/* Cache la ligne "Aucune taxe" sous le prix */
.page-product .product__tax-info { 
  display: none !important; 
}
/* Supprime l'icône d'indisponibilité devant la disponibilité */
.page-product #product-availability .material-icons,
.page-product .product__availability .material-icons {
  display: none !important;
}
/* Réduit un peu la zone de l'image sans la couper */
.page-product #product-images, 
.page-product .product__images {
  max-width: 92% !important;   /* ajuste 90–95 selon ton goût */
  margin-left: auto;
  margin-right: auto;
}
/***** 1) Couleurs & vignettes — retirer le bleu *****/

/* Base des pastilles couleur (bord discret) */
.custom-checkbox input[type="checkbox"] + span.color,
.variant-links .color,
label .color {
  border: 2px solid #e8e0d8;          /* fin, beige */
  border-radius: 6px;
}

/* Supprime l’anneau bleu Bootstrap au focus/actif/hover */
.custom-checkbox input[type="checkbox"] + span.color:focus,
.custom-checkbox input[type="checkbox"]:checked + span.color,
.custom-checkbox input[type="checkbox"] + span.color:hover,
.variant-links .color:focus,
.variant-links .color.active,
.variant-links .color:hover,
label .color:focus,
label .color.active,
label .color:hover {
  outline: none !important;
  box-shadow: none !important;        /* plus de halo bleu */
  border-color: #5b3a27 !important;   /* bord marron du thème (mets transparent si tu ne veux rien) */
  /* border-color: transparent !important;  <- dé-commente cette ligne si tu ne veux aucun liseré */
}

/* Vignettes photos : bord discret et pas de halo bleu */
.thumbnails__item a,
.thumbnails__item .js-thumb {
  border: 2px solid #e8e0d8;
  border-radius: 12px;
}
.thumbnails__item .js-thumb:focus,
.thumbnails__item .js-thumb:hover,
.thumbnails__item .js-thumb.selected,
.thumbnails__item .js-thumb.active {
  outline: none !important;
  box-shadow: none !important;        /* enlève le halo bleu */
  border-color: #5b3a27 !important;   /* ou transparent si tu préfères */
  /* border-color: transparent !important; */
}

/***** 2) Bloc “Détails du produit” — fond identique à la page *****/

/* Enlève le fond gris clair Bootstrap à la liste des détails */
#product-details .accordion-body,
#product-details .product__details .detail,
.product__details .detail {
  background: transparent !important;
}

/* Optionnel : supprimer les séparateurs/bordures internes */
#product-details .product__details .detail,
.product__details .detail {
  border: 0 !important;
}

/* Harmonise la couleur du header de l’accordéon s’il redevient coloré */
#product-infos-accordion .accordion-button,
#product-infos-accordion .accordion-button:not(.collapsed) {
  background: transparent !important;
  box-shadow: none !important;
}
/* Bouton primaire (Ajouter au panier) dans ta charte */
.page-product .btn-primary,
.page-product .btn-primary:focus {
  background: #4b382a !important;
  border-color: #4b382a !important;
  color: #fff !important;
}

.page-product .btn-primary:hover,
.page-product .btn-primary:active {
  background: #5a4535 !important;
  border-color: #5a4535 !important;
}
/* Fond identique à la page pour tout l’accordéon détails/description */
.page-product #product-infos-accordion .accordion-item,
.page-product #product-infos-accordion .accordion-body,
.page-product #product-infos-accordion .product__details .detail {
  background: var(--df-cream, #fbf7f2) !important; /* retombe sur ta variable, sinon code hex */
}

/* Lignes des détails (stock, attributs, etc.) */
.page-product #product-infos-accordion .product__details .detail {
  border-color: var(--df-beige-200, #efe6db) !important;
}

/* Boutons d’en-tête de l’accordéon (évite les fonds blancs Bootstrap) */
.page-product #product-infos-accordion .accordion-button:not(.collapsed) {
  background: var(--df-cream, #fbf7f2) !important;
  box-shadow: none !important;
}
.page-product #product-infos-accordion .accordion-button:focus {
  outline: none !important;
  box-shadow: none !important;
}
/* Passe le bloc réassurance en bandeau pleine largeur sous la fiche */
.page-product .blockreassurance_product {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;                 /* pleine largeur écran */
  max-width: 100vw;
  background: var(--df-cream, #fbf7f2);
  padding: 16px 24px;
  margin: 8px 0 24px 0;
  border-top: 1px solid var(--df-beige-200, #efe6db);
  border-bottom: 1px solid var(--df-beige-200, #efe6db);
}

/* Mise en grille pour bien respirer */
.page-product .blockreassurance_product ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr)); /* ajuste le nombre si besoin */
  gap: 20px;
  margin: 0;
}

/* Icônes en marron + taille cohérente */
.page-product .blockreassurance_product svg,
.page-product .blockreassurance_product svg * {
  fill: var(--df-brown-700, #3d2e27) !important;
  color: var(--df-brown-700, #3d2e27) !important;
}
.page-product .blockreassurance_product li i,
.page-product .blockreassurance_product svg {
  width: 28px;
  height: 28px;
  margin-right: 10px;
}
.page-product .blockreassurance_product li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Petit resserrage mobile */
@media (max-width: 768px) {
  .page-product .blockreassurance_product ul {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}
/* Réassurance en ligne horizontale */
.page-product .blockreassurance_product ul {
  display: flex !important;
  justify-content: space-around; /* espace équilibré */
  align-items: center;
  flex-wrap: wrap; /* passe à la ligne si écran trop petit */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Chaque élément : icône + texte */
.page-product .blockreassurance_product li {
  display: flex;
  align-items: center;
  gap: 10px;         /* espace entre l’icône et le texte */
  flex: 1 1 auto;    /* occupe l’espace disponible */
  max-width: 25%;   /* 4 colonnes max sur grand écran */
  text-align: left;
}

/* Icônes */
.page-product .blockreassurance_product li i,
.page-product .blockreassurance_product svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--df-brown-700, #3d2e27) !important;
  fill: var(--df-brown-700, #3d2e27) !important;
}

/* Texte */
.page-product .blockreassurance_product li span {
  font-size: 14px;
  line-height: 1.4;
  color: #2f241a; /* marron foncé pour rester cohérent */
}

/* Responsive mobile */
@media (max-width: 768px) {
  .page-product .blockreassurance_product li {
    max-width: 50%; /* 2 par ligne */
    justify-content: center;
    text-align: center;
  }
}
/* Étend le bloc de réassurance sur toute la largeur */
.page-product .blockreassurance_product {
  grid-column: 1 / -1; /* prend toute la largeur si grid */
  width: 100% !important;
  margin: 20px 0;
}

/* Liste en mode horizontal centré */
.page-product .blockreassurance_product ul {
  display: flex !important;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Chaque bloc centré, icône au-dessus du texte */
.page-product .blockreassurance_product li {
  display: flex;
  flex-direction: column; /* icône au-dessus */
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1 1 20%;   /* 5 max par ligne */
  margin: 10px;
  max-width: 200px;
}

/* Icônes */
.page-product .blockreassurance_product li i,
.page-product .blockreassurance_product li svg {
  font-size: 28px;
  margin-bottom: 8px;
  color: var(--df-brown-700, #3d2e27) !important;
  fill: var(--df-brown-700, #3d2e27) !important;
}

/* Texte */
.page-product .blockreassurance_product li span {
  font-size: 14px;
  line-height: 1.4;
  color: #2f241a;
}

/* Responsive mobile */
@media (max-width: 768px) {
  .page-product .blockreassurance_product li {
    flex: 1 1 45%; /* 2 par ligne */
    max-width: 45%;
  }
}
/* === RÉASSURANCE : plein écran + items en ligne ======================= */
/* Étire le bloc sur la largeur de la fenêtre, même s'il est dans une colonne */
.page-product .blockreassurance_product{
  position: relative;
  /* “truc” pour sortir de la colonne et occuper 100vw */
  left: 50%;
  margin-left: calc(-50vw + 50%);
  width: 100vw;
  /* look */
  background: var(--df-cream, #fbf7f2);
  border-top: 1px solid #efe4db;
  border-bottom: 1px solid #efe4db;
  padding: 24px 0;
  box-sizing: border-box;
}

/* Contenu centré dans la largeur du site */
.page-product .blockreassurance_product ul{
  max-width: min(1200px, calc(100vw - 2rem));
  margin: 0 auto;
  padding: 0 1rem;

  display: flex !important;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: flex-start;
  justify-content: space-between;
  list-style: none;
}

/* Chaque item sur une ligne, icône + texte */
.page-product .blockreassurance_product li{
  display: flex;
  align-items: center;
  gap: 12px;

  /* 4 items sur desktop, ça s’adapte s’il y en a plus/moins */
  flex: 1 1 22%;
  min-width: 220px;
}

/* Icones en marron */
.page-product .blockreassurance_product li i,
.page-product .blockreassurance_product li svg{
  color: var(--df-brown-700, #3d2e27) !important;
  fill: var(--df-brown-700, #3d2e27) !important;
  font-size: 28px;
  min-width: 28px;
}

/* Texte */
.page-product .blockreassurance_product li span{
  color: #2f241a;
  font-size: 15px;
  line-height: 1.35;
}

/* Responsive : 2 colonnes en dessous de 768px */
@media (max-width: 768px){
  .page-product .blockreassurance_product li{
    flex: 1 1 45%;
    min-width: 45%;
  }
}
/* --- Réassurance : items côte à côte ---------------------------------- */
/* Le conteneur global : passe en flex + retour à la ligne si besoin */
.page-product .blockreassurance_product{
  display: flex !important;
  flex-wrap: wrap;
  gap: 20px 32px;          /* espace entre items */
  align-items: flex-start; /* alignement haut */
}

/* Chaque “carte” de réassurance */
.page-product .blockreassurance_product > div{
  display: flex;
  align-items: flex-start;
  gap: 12px;               /* écart icône/texte */
  flex: 1 1 22%;           /* 4 items par ligne sur desktop */
  min-width: 240px;        /* évite de se tasser trop */
}

/* Icônes en marron + taille */
.page-product .blockreassurance_product .item-product,
.page-product .blockreassurance_product i,
.page-product .blockreassurance_product svg{
  color: var(--df-brown-700, #3d2e27) !important;
  fill: var(--df-brown-700, #3d2e27) !important;
  font-size: 28px;
  line-height: 1;
  min-width: 28px;
}

/* Titre + texte */
.page-product .blockreassurance_product .block-title{
  color: #2f241a;
  font-weight: 600;
}
.page-product .blockreassurance_product p{
  margin: 2px 0 0;
  color: #2f241a;
  opacity: .9;
}

/* 2 colonnes sous 768px */
@media (max-width: 768px){
  .page-product .blockreassurance_product > div{
    flex: 1 1 45%;
    min-width: 45%;
  }
}
.blockreassurance_product {
  display: flex;
  justify-content: space-around; /* ou space-between selon l'espacement que tu veux */
  align-items: center;
  flex-wrap: wrap; /* pour que ça passe à la ligne si l’écran est petit */
  width: 100% !important;  /* force pleine largeur */
  margin: 20px 0;
}

.blockreassurance_product .item-product {
  flex: 1; /* chaque élément prend la même largeur */
  min-width: 200px; /* pour éviter que ça devienne trop petit */
  text-align: center;
}
/* Pleine largeur */
.df-reassurance-fullwidth {
  display: flex;
  justify-content: space-around; /* espace entre les items */
  align-items: center;
  flex-wrap: wrap; /* pour s’adapter au mobile */
  width: 100% !important;
  margin: 30px 0;
  padding: 20px 0;
  border-top: 1px solid #eee4db;
  border-bottom: 1px solid #eee4db;
}

/* Chaque élément occupe un espace équilibré */
.df-reassurance-fullwidth .item-product {
  flex: 1;
  min-width: 200px;
  text-align: center;
}

/* Icônes en marron */
.df-reassurance-fullwidth svg,
.df-reassurance-fullwidth i {
  color: #3b2e22 !important;
  fill: #3b2e22 !important;
  font-size: 28px;
  margin-bottom: 8px;
}
/* Centrage du bloc réassurance */
.df-reassurance-fullwidth {
  display: flex;
  justify-content: center;   /* Centrage horizontal */
  align-items: center;
  flex-wrap: wrap;           /* reste responsive */
  width: 100% !important;
  margin: 30px auto;         /* auto pour centrer */
  padding: 20px 0;
  border-top: 1px solid #eee4db;
  border-bottom: 1px solid #eee4db;
  max-width: 1200px;         /* limite la largeur si tu veux éviter que ça s'étale trop */
}

/* Chaque élément occupe un espace équilibré */
.df-reassurance-fullwidth .item-product {
  flex: 1;
  min-width: 200px;
  text-align: center;
}
/* La colonne qui reçoit la réassurance passe en pleine largeur */
.df-br-full {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Le bloc réassurance s’aligne et se centre */
.blockreassurance_product {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;       /* centre horizontalement le contenu */
  align-items: center;
  gap: 28px 40px;                /* espace entre items (ligne / colonne) */
  width: 100%;
  max-width: 1200px;             /* largeur de lecture confortable */
  margin: 0 auto;                /* centrage dans la page */
  padding: 16px 0;
  border-top: 1px solid #eee4db;
  border-bottom: 1px solid #eee4db;
}

/* Chaque “item” occupe une part égale et est centré */
.blockreassurance_product .item-product {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;              /* évite le serrage trop tôt */
  justify-content: center;       /* texte + icône centrés */
  text-align: left;              /* ou center si tu préfères */
}

/* Icônes en marron */
.blockreassurance_product svg path,
.blockreassurance_product i,
.blockreassurance_product .material-icons {
  color: var(--df-brown-900, #2f241a);
  fill: var(--df-brown-900, #2f241a);
}

/* Petites tailles (mobile) : passe en 2 colonnes puis 1 */
@media (max-width: 991.98px) {
  .blockreassurance_product {
    justify-content: center;
    gap: 20px 24px;
  }
  .blockreassurance_product .item-product {
    min-width: 45%;
  }
}
@media (max-width: 575.98px) {
  .blockreassurance_product .item-product {
    min-width: 100%;
  }
}
/* ===== Réassurance — barre pleine centrée ===== */
.blockreassurance_product.df-reassurance-fullwidth{
  width:100%;
  max-width: 1200px;          /* largeur confortable (modifie si tu veux) */
  margin: 0 auto;             /* centre la barre dans la page */
  padding: 18px 0;
  display: flex !important;
  align-items: center;
  justify-content: space-between;  /* espace régulier entre items */
  gap: 40px 32px;              /* (ligne, colonne) */
  border-top: 1px solid #EEE4DB;
  border-bottom: 1px solid #EEE4DB;
}

/* Chaque item : icône au-dessus du texte, centré */
.blockreassurance_product.df-reassurance-fullwidth .item-product{
  display:flex;
  flex-direction: column;      /* icône au-dessus */
  align-items:center;
  text-align:center;
  gap: 8px;
  flex: 1 1 0;                 /* répartit l’espace équitablement */
  min-width: 160px;            /* évite que ça se serre trop vite */
}

/* Icônes en marron + taille homogène */
.blockreassurance_product.df-reassurance-fullwidth .item-product i,
.blockreassurance_product.df-reassurance-fullwidth .item-product svg,
.blockreassurance_product.df-reassurance-fullwidth .item-product svg path{
  color: #3b2e22;
  fill:  #3b2e22;
  width: 28px;
  height: 28px;
}

/* Titre/texte */
.blockreassurance_product.df-reassurance-fullwidth .block-title{
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}
.blockreassurance_product.df-reassurance-fullwidth .item-product p{
  margin: 0;
  line-height: 1.35;
}

/* ===== Responsive ===== */
@media (max-width: 991.98px){
  .blockreassurance_product.df-reassurance-fullwidth{
    justify-content: center;
    gap: 24px 24px;
  }
  .blockreassurance_product.df-reassurance-fullwidth .item-product{
    flex: 0 1 45%;
  }
}
@media (max-width: 575.98px){
  .blockreassurance_product.df-reassurance-fullwidth .item-product{
    flex: 0 1 100%;
  }
}
/* ====== Personnalisation – style Doggy Factory ====== */
/* Sélecteur du bloc (d'après ton DOM) */
.page-product .product-customization,
.page-product section.product-customization {
  margin-top: 1.25rem;
}

/* Carte : fond, arrondi, ombre douce */
.page-product .product-customization .card {
  background: var(--df-cream, #fbf7f2);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

/* Padding intérieur de la carte */
.page-product .product-customization .card-body {
  padding: 1.25rem 1.5rem;
}

/* Titre */
.page-product .product-customization .card > h3,
.page-product .product-customization .card .card-title,
.page-product .product-customization .card h2,
.page-product .product-customization .card h5 {
  margin: 0 0 .75rem 0;
  font-weight: 700;
  color: var(--df-brown-900, #2f241a);
}

/* Label du champ */
.page-product .product-customization label {
  font-weight: 600;
  color: var(--df-brown-800, #3b2e22);
  margin-bottom: .35rem;
}

/* Zone de texte */
.page-product .product-customization textarea.form-control,
.page-product .product-customization textarea {
  background: #fff;
  border: 1px solid var(--df-beige-200, #efe6db);
  border-radius: 12px;
  min-height: 140px;
  resize: vertical;
  padding: .85rem 1rem;
  line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
}

/* Focus soigné */
.page-product .product-customization textarea:focus {
  border-color: var(--df-brown-400, #6b5848);
  box-shadow: 0 0 0 .2rem rgba(107,88,72,.15); /* halo brun doux */
  outline: 0;
}

/* Ligne “250 caractères max” + “Optionnel” */
.page-product .product-customization .card .small,
.page-product .product-customization .card .text-muted {
  color: var(--df-brown-300, #8a7362);
}

/* Si la ligne info et “Optionnel” sont sur la même ligne, on force l’écart */
.page-product .product-customization .card .d-flex,
.page-product .product-customization .card .customization-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Bouton */
.page-product .product-customization .btn,
.page-product .product-customization button[type="submit"],
.page-product .product-customization [name="submitCustomizedData"] {
  background: var(--df-brown-700, #4b3a2b);
  border: none;
  color: #fff;
  border-radius: 14px;
  padding: .7rem 1rem;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(75,58,43,.16);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}

.page-product .product-customization .btn:hover,
.page-product .product-customization button[type="submit"]:hover {
  background: var(--df-brown-800, #3b2e22);
  box-shadow: 0 10px 24px rgba(75,58,43,.22);
}

.page-product .product-customization .btn:active {
  transform: translateY(1px);
}

/* Espacements / responsive */
@media (max-width: 576px) {
  .page-product .product-customization .card-body {
    padding: 1rem 1rem;
  }
  .page-product .product-customization textarea {
    min-height: 120px;
  }
}
/* 🎨 Bloc personnalisation */
.product-customization .card {
    background: transparent !important; /* Supprime le fond gris */
    border: none !important;            /* Supprime les bordures */
    box-shadow: none !important;        /* Supprime l’ombre */
    padding: 0 !important;              /* Compact */
}

.product-customization .card-body {
    padding: 10px 0 !important;
}

.product-customization label {
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
}

.product-customization textarea {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 8px;
    resize: vertical;
    font-size: 14px;
    width: 100%;
}

.product-customization .btn {
    background-color: #4b3a2b !important; /* Marron */
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: 600;
    margin-top: 10px;
}
.product-customization .btn:hover {
    background-color: #2f2419 !important;
}


/* 🎨 Bloc réassurance (icône au-dessus + texte en dessous) */
.blockreassurance_product {
    display: flex;
    justify-content: center;
    gap: 60px; /* espace entre les colonnes */
    text-align: center;
    margin: 20px 0;
}

.blockreassurance_product .item-product {
    display: flex;
    flex-direction: column;  /* Icône au-dessus */
    align-items: center;
    max-width: 180px; /* largeur max par bloc */
}

.blockreassurance_product svg,
.blockreassurance_product i {
    font-size: 32px; /* Taille icône */
    color: #4b3a2b;  /* Marron */
    margin-bottom: 8px;
}

.blockreassurance_product span,
.blockreassurance_product p {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}
.product-customization textarea.form-control {
    height: 80px !important;   /* Ajuste la hauteur */
    resize: vertical;          /* Permet de l’agrandir si besoin */
    font-size: 14px;           /* Texte plus compact */
    padding: 8px;
}
.blockreassurance_product {
    display: flex;
    justify-content: center;   /* Centre horizontalement */
    gap: 60px;                 /* Espacement entre les items */
    margin: 20px 0;
    text-align: center;        /* Texte centré sous l’icône */
}

.blockreassurance_product div {
    display: flex;
    flex-direction: column;    /* Icône au-dessus du texte */
    align-items: center;
    max-width: 180px;          /* Pour ne pas que ça s’étale trop */
}

.blockreassurance_product i,
.blockreassurance_product svg {
    font-size: 32px;           /* Taille des icônes */
    margin-bottom: 8px;
    color: #4b3621;            /* Marron */
}

.blockreassurance_product span,
.blockreassurance_product p {
    font-size: 14px;
    line-height: 1.4;
}
.page-product .product-customization textarea.form-control,
.page-product .product-customization textarea {
    background: #fff;
    border: 1px solid var(--df-beige-200, #efe6db);
    border-radius: 12px;
    height: 50px !important;   /* ✅ réduit à 50px */
    min-height: 50px !important; 
    padding: 0.5rem 1rem;
    font-size: 14px;
    resize: none;              /* empêche d’agrandir */
}
.blockreassurance_product {
    display: flex;
    justify-content: center;   /* centre sur la page */
    gap: 60px;                 /* espace entre chaque bloc */
    text-align: center;
    padding: 20px 0;
}

.blockreassurance_product div {
    display: flex;
    flex-direction: column;    /* icône au-dessus du texte */
    align-items: center;
    justify-content: flex-start;
    flex: 1;
}

.blockreassurance_product svg {
    font-size: 28px;           /* taille icônes */
    margin-bottom: 8px;        /* espace entre icône et texte */
    color: #4b3a2b;            /* marron */
}

.blockreassurance_product span,
.blockreassurance_product p {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
}
/* === Réassurance : pleine largeur et centrée === */
.df-reassurance-fullwidth,
.blockreassurance_fullwidth,
.blockreassurance-wrapper {
  width: 100%;
}

/* Le conteneur de la liste (versions possibles du module) */
.blockreassurance_product,
#block-reassurance,
.blockreassurance,
.blockreassurance-product {
  max-width: 1200px;          /* largeur max du bloc */
  margin: 0 auto;             /* ⇦⇨ centré dans la page */
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* espace régulier */
  align-items: flex-start;
  gap: clamp(16px, 4vw, 60px);    /* espace responsive */
  text-align: center;
  border-top: 1px solid rgba(75,58,43,.15);
  border-bottom: 1px solid rgba(75,58,43,.15);
}

/* Chaque « carte » de réassurance (selon le markup) */
.blockreassurance_product > div,
#block-reassurance > div,
.blockreassurance > div,
.blockreassurance-product > div,
.blockreassurance_product .item-product,
#block-reassurance .item-product {
  flex: 1 1 180px;             /* 4 colonnes qui passent à 2 puis 1 en mobile */
  display: flex;
  flex-direction: column;      /* icône au-dessus du texte */
  align-items: center;
  justify-content: flex-start;
  min-width: 160px;
}

/* Icônes (svg/material-icons) */
.blockreassurance_product svg,
#block-reassurance svg,
.blockreassurance svg,
.blockreassurance-product svg,
.blockreassurance_product i.material-icons,
#block-reassurance i.material-icons {
  width: 28px;
  height: 28px;
  font-size: 28px;
  color: #4b3a2b;              /* marron */
  margin-bottom: 8px;          /* écart icône ↔ texte */
  display: block;
}

/* Titres & textes plus compacts */
.blockreassurance_product .block-title,
#block-reassurance .block-title,
.blockreassurance .block-title {
  margin: 0 0 2px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: #2f241a;
}

.blockreassurance_product p,
#block-reassurance p,
.blockreassurance p {
  margin: 0;
  font-size: 12px;             /* plus compact */
  line-height: 1.25;
  color: #6b5848;
}

/* Optionnel : centre parfaitement les 4 items */
@media (min-width: 992px) {
  .blockreassurance_product,
  #block-reassurance,
  .blockreassurance,
  .blockreassurance-product {
    justify-content: space-evenly; /* items bien équilibrés */
  }
}
/* Conteneur global */
.blockreassurance_product,
#block-reassurance,
.blockreassurance,
.blockreassurance-product {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  justify-content: space-evenly;  /* Items bien espacés */
  align-items: flex-start;
  text-align: center;
  border-top: 1px solid rgba(75,58,43,.15);
  border-bottom: 1px solid rgba(75,58,43,.15);
  gap: 30px; /* espace entre blocs */
}

/* Chaque item */
.blockreassurance_product > div,
#block-reassurance > div,
.blockreassurance > div,
.blockreassurance-product > div {
  flex: 1 1 180px;  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 140px;
}

/* Icônes centrées au-dessus */
.blockreassurance_product svg,
#block-reassurance svg,
.blockreassurance svg,
.blockreassurance-product svg,
.blockreassurance_product i.material-icons,
#block-reassurance i.material-icons {
  display: block;
  margin: 0 auto 10px auto;  /* centre + espace avec le texte */
  font-size: 30px;
  color: #4b3a2b;
}

/* Titre */
.blockreassurance_product .block-title,
#block-reassurance .block-title,
.blockreassurance .block-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 3px;
  color: #2f241a;
  line-height: 1.2;
}

/* Texte description */
.blockreassurance_product p,
#block-reassurance p,
.blockreassurance p {
  font-size: 12px;
  line-height: 1.3;
  color: #6b5848;
  margin: 0;
}
/* Centrage du texte sous les icônes */
.blockreassurance_product > div,
#block-reassurance > div,
.blockreassurance > div,
.blockreassurance-product > div {
  text-align: center !important;
}

/* Le titre centré */
.blockreassurance_product .block-title,
#block-reassurance .block-title,
.blockreassurance .block-title {
  display: block;
  text-align: center !important;
  width: 100%;
}

/* Description centrée */
.blockreassurance_product p,
#block-reassurance p,
.blockreassurance p {
  display: block;
  text-align: center !important;
  width: 100%;
  margin: 0 auto;
}
/* =======================
   PANIER — Doggy Factory
   ======================= */

/* Titre & ambiance */
.page-cart .cart-grid {
  --df-brown-900:#2f241a; --df-brown-700:#4b3a2b; --df-beige-200:#efe6db; --df-cream:#fbf7f2;
}
.page-cart h1, .page-cart .page-title {
  font-family: "Playfair Display", serif;
  font-weight: 700; color: var(--df-brown-900);
}

/* Carte produits + récap alignés */
.page-cart .cart-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 22px;
}
@media (max-width: 992px){
  .page-cart .cart-grid { grid-template-columns: 1fr; }
}

/* Liste des lignes produit */
.page-cart .cart-items,
.page-cart .cart-summary,
.page-cart .card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(47,36,26,.08);
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
}

/* Ligne produit */
.page-cart .cart-item {
  display: grid; align-items: center;
  grid-template-columns: 86px 1fr auto auto auto;
  gap: 12px; padding: 12px 14px; border-bottom: 1px solid #f1ebe4;
}
.page-cart .cart-item:last-child { border-bottom: 0; }

.page-cart .cart-item .product-line-grid-left img {
  width: 86px; height: 86px; object-fit: contain;
  border-radius: 10px; background:#fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
}

/* Nom + déclinaisons */
.page-cart .product-line-info a {
  color: var(--df-brown-900); font-weight: 600;
}
.page-cart .product-line-info .value { color:#6b5848; }

/* Prix unitaire & total */
.page-cart .price, .page-cart .product-price {
  color: var(--df-brown-900); font-weight: 700;
}

/* Quantité : input compact + boutons */
.page-cart .js-cart-line-product-quantity,
.page-cart input[name="product-quantity-spin"]{
  width: 64px; height: 36px; text-align:center;
  border-radius:10px; border:1px solid var(--df-beige-200); box-shadow:none;
}
.page-cart .bootstrap-touchspin .btn,
.page-cart .input-group-btn-vertical .btn {
  background: var(--df-cream); border:1px solid var(--df-beige-200);
  border-radius: 10px; width: 36px; height: 36px; line-height: 36px;
}
.page-cart .bootstrap-touchspin .btn:hover { background:#f3ebe2; }

/* Actions (supprimer, wishlist…) */
.page-cart .cart-overview .remove-from-cart,
.page-cart .cart-overview .js-cart-line-product-remove {
  color:#9a8474; transition: opacity .15s;
}
.page-cart .cart-overview .remove-from-cart:hover { opacity:.75; }

/* Résumé commande (à droite) */
.page-cart .cart-summary {
  padding: 16px;
  position: sticky; top: 84px;  /* reste visible au scroll */
}
.page-cart .cart-summary .cart-summary-line {
  display:flex; justify-content:space-between; padding: 6px 0;
  border-bottom: 1px dashed #eadfD5;
}
.page-cart .cart-summary .cart-summary-line:last-child { border-bottom: 0; }

/* Boutons principaux */
.page-cart .btn,
.page-cart .btn-primary {
  background: var(--df-brown-700) !important; border: none !important;
  color:#fff !important; border-radius: 999px !important; padding:.7rem 1rem;
  font-weight:700;
}
.page-cart .btn:hover { background:#5a4535 !important; }

/* Code promo / note */
.page-cart .promo-code, .page-cart .cart-voucher {
  background: var(--df-cream); border-radius: 12px; padding: 12px;
  border:1px solid var(--df-beige-200);
}
.page-cart .promo-code input, .page-cart .cart-voucher input {
  height:42px; border-radius: 999px; border:1px solid rgba(47,36,26,.18); padding:0 14px;
}

/* Messages info expédition */
.page-cart .df-note {
  background: var(--df-cream); border:1px dashed var(--df-beige-200);
  border-radius: 12px; padding: 10px 12px; margin: 10px 0; color:#6b5848; font-size:.95rem;
}

/* Mini réassurance sous le panier (option) */
.page-cart .df-cart-reassurance {
  margin-top: 18px; padding: 14px 10px; border-top:1px solid #eee4db; border-bottom:1px solid #eee4db;
  display:flex; gap:18px; justify-content: space-evenly; text-align:center; color:#2f241a;
}
.page-cart .df-cart-reassurance .item { min-width:160px; }
.page-cart .df-cart-reassurance i { display:block; font-size:24px; color:#4b3a2b; margin-bottom:6px; }

/* Petits polishes */
.page-cart .alert, .page-cart .notification { border-radius:12px; }
.page-cart .form-control:focus { box-shadow:none; border-color:#cbb8a7; }
/* ===========================================
   FIX URGENT - NOTRE SÉLECTION
=========================================== */

/* 1. RESET complet des grilles produits conflictuelles */
.products.row,
.product_list,
.featured-products .products,
.block.products_block .products,
.products-section-container-1 .products,
.products-section-container-2 .products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 20px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* 2. Suppression des styles Flexbox conflictuels */
.products.row > *,
.product_list > *,
.featured-products .products > *,
.block.products_block .products > * {
  flex: unset !important;
  flex-basis: unset !important;
  max-width: unset !important;
  width: unset !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3. Style unifié pour TOUTES les cartes produits */
.product-miniature,
.js-product-miniature {
  background: var(--df-white, #fff);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
  padding: 16px;
  transition: all 0.3s ease;
  height: auto;
  display: flex;
  flex-direction: column;
}

.product-miniature:hover,
.js-product-miniature:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

/* 4. Images produits - taille uniforme */
.product-miniature .thumbnail-container,
.js-product-miniature .thumbnail-container {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  position: relative;
  height: 200px;
}

.product-miniature .thumbnail-container img,
.js-product-miniature .thumbnail-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-miniature:hover .thumbnail-container img,
.js-product-miniature:hover .thumbnail-container img {
  transform: scale(1.05);
}

/* 5. Contenu produit */
.product-miniature .product-description,
.js-product-miniature .product-description {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-miniature .product-title,
.js-product-miniature .product-title {
  margin: 0 0 8px 0;
  flex: 1;
}

.product-miniature .product-title a,
.js-product-miniature .product-title a {
  color: var(--df-brown-800, #2c1810);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
}

.product-miniature .product-title a:hover,
.js-product-miniature .product-title a:hover {
  color: var(--df-brown-600, #4a3426);
}

/* 6. Prix */
.product-miniature .product-price-and-shipping,
.js-product-miniature .product-price-and-shipping {
  color: var(--df-brown-900, #1a0f08);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 8px 0;
}

/* 7. Boutons - style uniforme */
.product-miniature .btn.btn-primary,
.js-product-miniature .btn.btn-primary,
.featured-products .btn.btn-primary,
.block.products_block .btn.btn-primary {
  background-color: var(--df-brown-700, #3d2e1f) !important;
  border-color: var(--df-brown-700, #3d2e1f) !important;
  color: #fff !important;
  border-radius: 25px !important;
  padding: 8px 16px !important;
  font-weight: 600;
  border: none !important;
  transition: all 0.3s ease;
  width: 100%;
  margin-top: auto;
}

.product-miniature .btn.btn-primary:hover,
.js-product-miniature .btn.btn-primary:hover,
.featured-products .btn.btn-primary:hover,
.block.products_block .btn.btn-primary:hover {
  background-color: var(--df-brown-600, #4a3426) !important;
  border-color: var(--df-brown-600, #4a3426) !important;
  transform: translateY(-1px);
}

/* 8. Badges (Nouveau, Promo) */
.product-miniature .product-flags,
.js-product-miniature .product-flags {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
}

.product-miniature .product-flags .new,
.product-miniature .product-flags .on-sale,
.js-product-miniature .product-flags .new,
.js-product-miniature .product-flags .on-sale {
  background: var(--df-brown-700, #3d2e1f);
  color: #fff;
  border-radius: 15px;
  padding: 4px 8px;
  font-weight: 700;
  font-size: 0.8rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 9. Sections produits - espacement */
.featured-products,
.block.products_block,
.products-section-container-1,
.products-section-container-2 {
  background: var(--df-cream, #f8f6f1);
  padding: 3rem 1rem;
  margin: 0;
}

/* 10. Titres sections */
.featured-products h2,
.block.products_block h2,
.products-section-container-1 h2,
.products-section-container-2 h2,
.section-title {
  text-align: center;
  font-family: "Playfair Display", serif;
  font-size: 2.2rem;
  color: var(--df-brown-800, #2c1810);
  margin: 0 0 2rem 0;
  font-weight: 700;
}

/* 11. Suppression aperçu rapide (cause des bugs) */
.product-miniature .quick-view,
.product-miniature [data-link-action="quickview"],
.product-miniature .js-quickview,
.js-product-miniature .quick-view,
.js-product-miniature [data-link-action="quickview"],
.js-product-miniature .js-quickview {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 12. RESPONSIVE - Mobile */
@media (max-width: 768px) {
  .products.row,
  .featured-products .products,
  .block.products_block .products {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 16px !important;
  }
  
  .product-miniature .thumbnail-container {
    height: 160px;
  }
  
  .featured-products h2,
  .block.products_block h2,
  .section-title {
    font-size: 1.8rem;
  }
}

@media (max-width: 480px) {
  .products.row,
  .featured-products .products,
  .block.products_block .products {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  
  .product-miniature {
    padding: 12px;
  }
  
  .product-miniature .thumbnail-container {
    height: 140px;
  }
}
/* ===== NOTRE SÉLECTION - 4 COLONNES PARFAITES ===== */

/* Force 4 colonnes exactement */
body .featured-products .products.row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}

/* Supprime Bootstrap complètement */
body .featured-products .products.row > div,
body .featured-products .products.row > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-column: unset !important;
}

/* Cartes plus compactes et uniformes */
body .featured-products .product-miniature {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
  overflow: hidden !important;
  padding: 12px !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  height: 380px !important; /* Hauteur fixe plus petite */
}

body .featured-products .product-miniature:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.12) !important;
}

/* Image container optimisé */
body .featured-products .thumbnail-container {
  background: #fff !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
  height: 180px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body .featured-products .thumbnail-container img {
  max-width: 90% !important;
  max-height: 90% !important;
  object-fit: contain !important;
  transition: transform .2s ease !important;
}

body .featured-products .product-miniature:hover .thumbnail-container img {
  transform: scale(1.03) !important;
}

/* Contenu produit optimisé */
body .featured-products .product-description {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Titre plus compact */
body .featured-products .product-title {
  margin: 0 0 4px 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
}

body .featured-products .product-title a {
  color: var(--df-brown-800, #3b2e22) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Variantes couleurs compactes */
body .featured-products .product-variants {
  margin: 4px 0 !important;
}

body .featured-products .color {
  width: 16px !important;
  height: 16px !important;
  margin-right: 4px !important;
}

/* Prix */
body .featured-products .product-price-and-shipping {
  color: var(--df-brown-900, #2f241a) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  margin: 6px 0 !important;
}

/* Zone quantité + bouton */
body .featured-products .product-actions {
  margin-top: auto !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

/* Input quantité plus petit */
body .featured-products .qty-input {
  display: flex !important;
  align-items: center !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

body .featured-products .qty-input button {
  background: #f5f5f5 !important;
  border: none !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

body .featured-products .qty-input input {
  border: none !important;
  width: 40px !important;
  height: 28px !important;
  text-align: center !important;
  font-size: 14px !important;
}

/* Bouton ajouter au panier compact */
body .featured-products .btn.btn-primary {
  background-color: var(--df-brown-700, #4b3a2b) !important;
  border-color: var(--df-brown-700, #4b3a2b) !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: none !important;
  flex: 1 !important;
}

body .featured-products .btn.btn-primary:hover {
  background-color: var(--df-brown-600, #5a443) !important;
  transform: translateY(-1px) !important;
}

/* Badge "Neuf" */
body .featured-products .product-flags .new {
  background: var(--df-brown-700, #4b3a2b) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  padding: 3px 8px !important;
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 10 !important;
}

/* Cœur favori */
body .featured-products .wishlist-button-product {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: rgba(255,255,255,0.9) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  color: #999 !important;
}

/* Section container */
body .featured-products {
  background: var(--df-cream, #fbf7f2) !important;
  padding: 24px 0 !important;
}

body .featured-products h2,
body .featured-products .section-title {
  text-align: center !important;
  font-family: "Playfair Display", serif !important;
  font-size: 1.8rem !important;
  color: var(--df-brown-800, #3b2e22) !important;
  margin-bottom: 20px !important;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  body .featured-products .products.row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
}

@media (max-width: 768px) {
  body .featured-products .products.row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  body .featured-products .product-miniature {
    height: 350px !important;
  }
  
  body .featured-products .thumbnail-container {
    height: 160px !important;
  }
}

@media (max-width: 480px) {
  body .featured-products .products.row {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 8px !important;
  }
  
  body .featured-products .product-miniature {
    height: 320px !important;
    padding: 8px !important;
  }
  
  body .featured-products .thumbnail-container {
    height: 140px !important;
  }
}
/* === Correction photos coupées - hauteur uniforme === */
.product-miniature .thumbnail-container img {
  width: 100%;
  height: 180px;
  object-fit: cover !important;        /* Remplace 'contain' par 'cover' */
  object-position: center !important;  /* Centre l'image dans le cadre */
  display: block;
}
/* ===== PAGE PANIER - STYLE DOGGY FACTORY ===== */

/* Structure principale en 2 colonnes */
.cart-container,
.page-cart .container {
  max-width: 1200px;
  margin: 0 auto;
}

.cart-overview {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  margin-top: 20px;
}

/* === SECTION PRODUITS (gauche) === */
.cart-detailed-totals,
.cart-summary-products-container {
  background: #fff;
  border-radius: var(--df-radius, 14px);
  box-shadow: var(--df-shadow, 0 6px 24px rgba(0,0,0,.08));
  padding: 20px;
}

/* Ligne produit */
.cart-item,
.product-line-grid {
  display: grid;
  grid-template-columns: 100px 1fr auto auto auto;
  gap: 15px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--df-beige-200, #efe6db);
}

.cart-item:last-child { border-bottom: none; }

/* Image produit */
.cart-item .product-line-grid-left img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/* Info produit */
.product-line-info .label {
  font-weight: 600;
  color: var(--df-brown-800, #3b2e22);
  margin-bottom: 4px;
}

.product-line-info .value {
  color: var(--df-brown-600, #6b5848);
  font-size: 14px;
}

/* Prix */
.product-price,
.cart-line-product-price {
  font-weight: 700;
  color: var(--df-brown-900, #2f241a);
  font-size: 16px;
}

/* === QUANTITÉ - STYLE DOGGY === */
.product-quantity .input-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.input-group-btn-vertical .btn,
.bootstrap-touchspin .btn {
  width: 36px !important;
  height: 36px !important;
  background: var(--df-brown-700, #4b3a2b) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
}

.bootstrap-touchspin .btn:hover {
  background: var(--df-brown-600, #6b5848) !important;
}

.js-cart-line-product-quantity,
input[name="product-quantity-spin"] {
  width: 60px !important;
  height: 36px !important;
  text-align: center;
  border: 2px solid var(--df-beige-200, #efe6db) !important;
  border-radius: 8px !important;
  font-weight: 600;
  margin: 0 4px;
}

/* Bouton supprimer */
.remove-from-cart,
.js-cart-line-product-remove {
  color: #c44c4c !important;
  font-size: 18px;
  transition: opacity 0.2s;
}

.remove-from-cart:hover { opacity: 0.7; }

/* === RÉSUMÉ COMMANDE (droite) === */
.cart-summary,
.cart-totals-container {
  background: #fff;
  border-radius: var(--df-radius, 14px);
  box-shadow: var(--df-shadow, 0 6px 24px rgba(0,0,0,.08));
  padding: 20px;
  position: sticky;
  top: 100px;
}

.cart-summary h3 {
  font-family: "Playfair Display", serif;
  color: var(--df-brown-900, #2f241a);
  margin-bottom: 15px;
}

.cart-summary-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--df-beige-200, #efe6db);
}

.cart-summary-line:last-child {
  border-bottom: none;
  font-weight: 700;
  font-size: 18px;
  color: var(--df-brown-900, #2f241a);
}

/* === BOUTONS === */
.btn-primary,
.checkout .btn {
  background: var(--df-brown-700, #4b3a2b) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-weight: 700;
  width: 100%;
  box-shadow: var(--df-shadow, 0 6px 24px rgba(0,0,0,.08));
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: var(--df-brown-600, #6b5848) !important;
  transform: translateY(-1px);
}

/* Bouton continuer les achats */
.continue-shopping,
.cart-summary .btn-secondary {
  background: transparent !important;
  border: 2px solid var(--df-brown-700, #4b3a2b) !important;
  color: var(--df-brown-700, #4b3a2b) !important;
  margin-bottom: 10px;
}

.continue-shopping:hover {
  background: var(--df-brown-700, #4b3a2b) !important;
  color: #fff !important;
}

/* === RÉASSURANCE PANIER === */
.cart-reassurance {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  padding: 15px 0;
  margin-top: 20px;
  border-top: 1px solid var(--df-beige-200, #efe6db);
  text-align: center;
}

.cart-reassurance .item {
  flex: 1;
}

.cart-reassurance i {
  font-size: 24px;
  color: var(--df-brown-700, #4b3a2b);
  margin-bottom: 5px;
  display: block;
}

/* === RESPONSIVE === */
@media (max-width: 992px) {
  .cart-overview {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .cart-item,
  .product-line-grid {
    grid-template-columns: 80px 1fr auto;
    gap: 10px;
  }
  
  .cart-item .product-line-grid-left img {
    width: 70px;
    height: 70px;
  }
}
/* === PAGE PANIER - FORÇAGE STYLES === */

/* Structure forcée */
.page-cart .cart-overview,
body.category-cart .cart-overview {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  gap: 30px !important;
  margin-top: 20px !important;
}

/* Cartes produits */
.page-cart .cart-detailed-totals,
.page-cart .cart-summary-products-container,
body.category-cart .cart-detailed-totals {
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.08) !important;
  padding: 20px !important;
  border: 1px solid rgba(47,36,26,.08) !important;
}

/* Ligne produit forcée */
.page-cart .cart-item,
.page-cart .product-line-grid,
body.category-cart .cart-item {
  display: grid !important;
  grid-template-columns: 100px 1fr auto auto auto !important;
  gap: 15px !important;
  align-items: center !important;
  padding: 15px 0 !important;
  border-bottom: 1px solid #efe6db !important;
}

/* Boutons quantité FORCÉS */
.page-cart .input-group-btn-vertical .btn,
.page-cart .bootstrap-touchspin .btn,
body.category-cart .bootstrap-touchspin .btn {
  width: 36px !important;
  height: 36px !important;
  background: #4b3a2b !important;
  border: none !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-weight: bold !important;
  font-size: 18px !important;
}

/* Input quantité */
.page-cart .js-cart-line-product-quantity,
.page-cart input[name="product-quantity-spin"] {
  width: 60px !important;
  height: 36px !important;
  text-align: center !important;
  border: 2px solid #efe6db !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  margin: 0 4px !important;
}

/* Bouton commander */
.page-cart .btn-primary,
.page-cart .checkout .btn,
body.category-cart .btn-primary {
  background: #4b3a2b !important;
  border: none !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  width: 100% !important;
}

/* Mobile */
@media (max-width: 992px) {
  .page-cart .cart-overview,
  body.category-cart .cart-overview {
    grid-template-columns: 1fr !important;
  }
}
/* === PAGE PANIER - SÉLECTEURS CORRECTS === */

/* Enlever le rouge de test */
.page-cart {
  background: var(--df-cream, #fbf7f2) !important;
}

/* Structure principale */
.cart-grid-row {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  gap: 30px !important;
  margin-top: 20px !important;
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Colonne de gauche (produits) */
.cart-grid-body {
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.08) !important;
  padding: 20px !important;
  border: 1px solid rgba(47,36,26,.08) !important;
}

/* Colonne de droite (résumé) */
.cart-grid-right {
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.08) !important;
  padding: 20px !important;
  border: 1px solid rgba(47,36,26,.08) !important;
  position: sticky !important;
  top: 100px !important;
}

/* Titre "Panier" */
.cart-grid-right h1 {
  font-family: "Playfair Display", serif !important;
  color: var(--df-brown-900, #2f241a) !important;
  margin-bottom: 20px !important;
}

/* Ligne produit */
.cart-detailed-product {
  display: grid !important;
  grid-template-columns: 100px 1fr auto auto auto !important;
  gap: 15px !important;
  align-items: center !important;
  padding: 15px 0 !important;
  border-bottom: 1px solid #efe6db !important;
}

.cart-detailed-product:last-child {
  border-bottom: none !important;
}

/* Image produit */
.cart-line-product-img img {
  width: 90px !important;
  height: 90px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
}

/* Info produit */
.cart-line-product-label {
  font-weight: 600 !important;
  color: var(--df-brown-800, #3b2e22) !important;
}

/* Prix */
.cart-line-product-price {
  font-weight: 700 !important;
  color: var(--df-brown-900, #2f241a) !important;
  font-size: 16px !important;
}

/* Boutons quantité */
.bootstrap-touchspin .btn,
.input-group-btn-vertical .btn {
  width: 36px !important;
  height: 36px !important;
  background: var(--df-brown-700, #4b3a2b) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-weight: bold !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bootstrap-touchspin .btn:hover {
  background: var(--df-brown-600, #6b5848) !important;
}

/* Input quantité */
.cart-line-product-quantity input,
.js-cart-line-product-quantity {
  width: 60px !important;
  height: 36px !important;
  text-align: center !important;
  border: 2px solid #efe6db !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  margin: 0 4px !important;
}

/* Bouton supprimer */
.remove-from-cart {
  color: #c44c4c !important;
  font-size: 18px !important;
  transition: opacity 0.2s !important;
}

.remove-from-cart:hover {
  opacity: 0.7 !important;
}

/* Bouton "Commander" */
.cart-detailed-actions .btn-primary,
.checkout .btn {
  background: var(--df-brown-700, #4b3a2b) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  width: 100% !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.08) !important;
  transition: all 0.2s ease !important;
}

.cart-detailed-actions .btn-primary:hover {
  background: var(--df-brown-600, #6b5848) !important;
  transform: translateY(-1px) !important;
}

/* Bouton "Continuer mes achats" */
.cart-detailed-actions .btn-secondary {
  background: transparent !important;
  border: 2px solid var(--df-brown-700, #4b3a2b) !important;
  color: var(--df-brown-700, #4b3a2b) !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  width: 100% !important;
  margin-bottom: 10px !important;
}

.cart-detailed-actions .btn-secondary:hover {
  background: var(--df-brown-700, #4b3a2b) !important;
  color: #fff !important;
}

/* Lignes du récapitulatif */
.cart-summary-line {
  display: flex !important;
  justify-content: space-between !important;
  padding: 8px 0 !important;
  border-bottom: 1px dashed #efe6db !important;
}

.cart-summary-line:last-child {
  border-bottom: none !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--df-brown-900, #2f241a) !important;
}

/* Mobile responsive */
@media (max-width: 992px) {
  .cart-grid-row {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .cart-detailed-product {
    grid-template-columns: 80px 1fr auto !important;
    gap: 10px !important;
  }
  
  .cart-line-product-img img {
    width: 70px !important;
    height: 70px !important;
  }
}
/* ===== PANIER DOGGY FACTORY - STRUCTURE PRESTASHOP ===== */

/* Page panier - fond crème */
.page-cart,
body.cart {
  background: var(--df-cream, #fbf7f2) !important;
}

/* Conteneur principal */
.page-cart .container,
.page-cart #main {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Titre principal */
.page-cart h1,
.page-cart .page-title {
  font-family: "Playfair Display", serif !important;
  font-size: 2.5rem !important;
  color: var(--df-brown-900) !important;
  text-align: center !important;
  margin-bottom: 30px !important;
}

/* Layout 2 colonnes */
.cart-grid-row {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  gap: 30px !important;
  align-items: start !important;
  margin-top: 20px !important;
}

/* === SECTION PRODUITS (gauche) === */
.cart-grid-body,
.cart-detailed-totals {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 0 !important;
  border: 1px solid rgba(47,36,26,.08) !important;
  overflow: hidden !important;
}

/* Header section produits */
.cart-grid-body::before {
  content: "Vos Articles";
  display: block;
  background: linear-gradient(135deg, var(--df-brown-700), var(--df-brown-600));
  color: white;
  padding: 20px 25px;
  font-family: "Playfair Display", serif;
  font-size: 1.4rem;
  font-weight: 600;
}

/* Ligne produit */
.cart-detailed-product {
  display: grid !important;
  grid-template-columns: 120px 1fr auto auto auto !important;
  gap: 20px !important;
  align-items: center !important;
  padding: 25px !important;
  border-bottom: 1px solid var(--df-beige-200) !important;
}

.cart-detailed-product:last-child {
  border-bottom: none !important;
}

/* Image produit */
.cart-line-product-img {
  background: #fff !important;
  border-radius: 12px !important;
  padding: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.06) !important;
}

.cart-line-product-img img {
  width: 100% !important;
  height: 100px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
}

/* Info produit */
.cart-line-product-label {
  font-weight: 600 !important;
  color: var(--df-brown-900) !important;
  font-size: 1.1rem !important;
  margin-bottom: 6px !important;
}

.product-line-info .value {
  color: var(--df-brown-600) !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
}

.cart-line-product-price {
  font-weight: 700 !important;
  color: var(--df-brown-900) !important;
  font-size: 1.1rem !important;
}

/* === CONTRÔLES QUANTITÉ === */
.cart-line-product-quantity {
  background: var(--df-cream) !important;
  padding: 4px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.bootstrap-touchspin .btn,
.input-group-btn-vertical .btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: none !important;
  background: var(--df-brown-700) !important;
  color: white !important;
  font-size: 18px !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.bootstrap-touchspin .btn:hover {
  background: var(--df-brown-600) !important;
  transform: scale(1.05) !important;
}

.js-cart-line-product-quantity,
input[name="product-quantity-spin"] {
  width: 50px !important;
  height: 32px !important;
  border: none !important;
  text-align: center !important;
  background: transparent !important;
  font-weight: 600 !important;
  color: var(--df-brown-900) !important;
}

/* Prix total */
.cart-line-product-price {
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  color: var(--df-brown-900) !important;
}

/* Bouton supprimer */
.remove-from-cart,
.js-cart-line-product-remove {
  color: #c44c4c !important;
  background: none !important;
  border: none !important;
  font-size: 20px !important;
  padding: 8px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.remove-from-cart:hover {
  background: rgba(196, 76, 76, 0.1) !important;
  transform: scale(1.1) !important;
}

/* === RÉSUMÉ COMMANDE (droite) === */
.cart-grid-right {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  overflow: hidden !important;
  position: sticky !important;
  top: 20px !important;
  border: 1px solid rgba(47,36,26,.08) !important;
}

/* Header résumé */
.cart-grid-right::before {
  content: "Récapitulatif";
  display: block;
  background: linear-gradient(135deg, var(--df-brown-800), var(--df-brown-700));
  color: white;
  padding: 20px 25px;
  font-family: "Playfair Display", serif;
  font-size: 1.3rem;
  font-weight: 600;
}

.cart-grid-right > div {
  padding: 25px !important;
}

/* Lignes du résumé */
.cart-summary-line,
.cart-detailed-totals .cart-summary-line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 0 !important;
  border-bottom: 1px dashed var(--df-beige-200) !important;
}

.cart-summary-line:last-of-type,
.cart-detailed-totals .cart-summary-line:last-of-type {
  border-bottom: 2px solid var(--df-brown-700) !important;
  padding-bottom: 15px !important;
  margin-bottom: 20px !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--df-brown-900) !important;
}

/* === BOUTONS === */
.cart-detailed-actions .btn-primary,
.checkout .btn {
  width: 100% !important;
  background: linear-gradient(135deg, var(--df-brown-700), var(--df-brown-600)) !important;
  color: white !important;
  border: none !important;
  padding: 16px 24px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  box-shadow: 0 6px 20px rgba(75, 58, 43, 0.3) !important;
  transition: all 0.3s ease !important;
  margin-bottom: 12px !important;
}

.cart-detailed-actions .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(75, 58, 43, 0.4) !important;
}

.cart-detailed-actions .btn-secondary {
  width: 100% !important;
  background: transparent !important;
  color: var(--df-brown-700) !important;
  border: 2px solid var(--df-brown-700) !important;
  padding: 12px 24px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.cart-detailed-actions .btn-secondary:hover {
  background: var(--df-brown-700) !important;
  color: white !important;
}

/* === CODE PROMO === */
.promo-code,
.cart-voucher {
  margin-top: 20px !important;
  padding: 20px !important;
  background: var(--df-cream) !important;
  border-radius: var(--df-radius) !important;
  border: 1px dashed var(--df-brown-700) !important;
}

.promo-code h3 {
  font-weight: 600 !important;
  color: var(--df-brown-900) !important;
  margin-bottom: 10px !important;
}

.promo-code form,
.cart-voucher form {
  display: flex !important;
  gap: 8px !important;
}

.promo-code input,
.cart-voucher input {
  flex: 1 !important;
  padding: 10px 14px !important;
  border: 1px solid var(--df-beige-200) !important;
  border-radius: 8px !important;
  background: white !important;
}

.promo-code button,
.cart-voucher button {
  background: var(--df-brown-700) !important;
  color: white !important;
  border: none !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

/* === RESPONSIVE === */
@media (max-width: 992px) {
  .cart-grid-row {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .cart-detailed-product {
    grid-template-columns: 100px 1fr auto !important;
    gap: 15px !important;
  }
  
  .cart-line-product-price {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    margin-top: 10px !important;
  }
}

@media (max-width: 576px) {
  .cart-detailed-product {
    grid-template-columns: 80px 1fr !important;
    gap: 12px !important;
  }
  
  .cart-line-product-img img {
    height: 80px !important;
  }
  
  .cart-line-product-quantity {
    justify-self: center !important;
    grid-column: 1 / -1 !important;
    margin-top: 10px !important;
  }
}

/* === RÉASSURANCE EN BAS === */
.cart-reassurance {
  margin-top: 30px !important;
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 20px !important;
}

.reassurance-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  text-align: center !important;
}

.reassurance-item {
  padding: 15px 10px !important;
}

.reassurance-item .material-icons {
  font-size: 32px !important;
  color: var(--df-brown-700) !important;
  margin-bottom: 8px !important;
}

.reassurance-item h4 {
  font-weight: 600 !important;
  color: var(--df-brown-900) !important;
  margin-bottom: 4px !important;
  font-size: 14px !important;
}

.reassurance-item p {
  color: var(--df-brown-600) !important;
  font-size: 12px !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .reassurance-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
}
/* TEST SIMPLE - À AJOUTER TEMPORAIREMENT */
body.cart * {
  border: 1px solid red !important;
}
/* ===== PANIER DOGGY FACTORY - SÉLECTEURS CORRECTS ===== */

/* Page panier - fond crème */
.page-cart,
body.cart,
body[class*="cart"] {
  background: var(--df-cream, #fbf7f2) !important;
}

/* Structure principale en 2 colonnes */
.cart-grid-row {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  gap: 30px !important;
  align-items: start !important;
  max-width: 1200px !important;
  margin: 20px auto !important;
}

/* === SECTION PRODUITS (gauche) === */
.cart-grid_body {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 25px !important;
  border: 1px solid rgba(47,36,26,.08) !important;
}

/* === SECTION RÉSUMÉ (droite) === */
.cart-grid_right {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 25px !important;
  border: 1px solid rgba(47,36,26,.08) !important;
  position: sticky !important;
  top: 100px !important;
}

/* Titre "Panier" */
.cart-grid_right h2 {
  font-family: "Playfair Display", serif !important;
  color: var(--df-brown-900) !important;
  font-size: 1.5rem !important;
  margin-bottom: 20px !important;
  text-align: center !important;
}

/* Réassurance en bas */
.df-cart-reassurance {
  margin-top: 30px !important;
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 20px !important;
}

.df-cart-reassurance .reassurance-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  text-align: center !important;
}

.df-cart-reassurance .reassurance-item {
  padding: 15px 10px !important;
}

.df-cart-reassurance .reassurance-item .material-icons {
  font-size: 32px !important;
  color: var(--df-brown-700) !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.df-cart-reassurance .reassurance-item h4 {
  font-weight: 600 !important;
  color: var(--df-brown-900) !important;
  margin-bottom: 4px !important;
  font-size: 14px !important;
}

.df-cart-reassurance .reassurance-item p {
  color: var(--df-brown-600) !important;
  font-size: 12px !important;
  margin: 0 !important;
}

/* Bouton "Continuer mes achats" */
.cart-grid_right .btn {
  background: transparent !important;
  border: 2px solid var(--df-brown-700) !important;
  color: var(--df-brown-700) !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  width: 100% !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
}

.cart-grid_right .btn:hover {
  background: var(--df-brown-700) !important;
  color: white !important;
}

/* Mobile responsive */
@media (max-width: 992px) {
  .cart-grid-row {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .df-cart-reassurance .reassurance-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
}
/* === TEST PANIER - VERSION MINIMALISTE === */

/* Test simple sur l'élément que je vois dans l'inspecteur */
.cart-grid-row {
  background: yellow !important;
  padding: 20px !important;
}

/* Test sur les colonnes */
.cart-grid_body {
  background: lightblue !important;
  border-radius: 15px !important;
}

.cart-grid_right {
  background: lightgreen !important;
  border-radius: 15px !important;
}
/* ===== PANIER DOGGY FACTORY - STRUCTURE RÉELLE ===== */

/* Page panier - fond crème */
body.cart,
.page-cart {
  background: var(--df-cream, #fbf7f2) !important;
}

/* Structure principale en 2 colonnes */
.cart-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  gap: 30px !important;
  align-items: start !important;
  max-width: 1200px !important;
  margin: 20px auto !important;
}

/* === SECTION PRODUITS (gauche) === */
.cart-grid__body {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 25px !important;
  border: 1px solid rgba(47,36,26,.08) !important;
}

/* Titre "Panier" */
.cart-grid__body h1 {
  font-family: "Playfair Display", serif !important;
  color: var(--df-brown-900) !important;
  font-size: 1.8rem !important;
  margin-bottom: 20px !important;
  text-align: center !important;
}

/* === LIGNE PRODUIT === */
.product-line {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.06) !important;
  padding: 20px !important;
  margin-bottom: 15px !important;
  border: 1px solid rgba(47,36,26,.05) !important;
}

/* Image produit */
.product-line__image img {
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
  background: #fff !important;
  padding: 8px !important;
}

/* Titre produit */
.product-line__title {
  font-weight: 600 !important;
  color: var(--df-brown-900) !important;
  font-size: 1.1rem !important;
  text-decoration: none !important;
}

/* Prix */
.product-line__current .price {
  font-weight: 700 !important;
  color: var(--df-brown-900) !important;
  font-size: 1.1rem !important;
}

/* === CONTRÔLES QUANTITÉ === */
.input-group {
  background: var(--df-cream) !important;
  padding: 4px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(47,36,26,.08) !important;
}

.input-group .btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: none !important;
  background: var(--df-brown-700) !important;
  color: white !important;
  font-size: 18px !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.input-group .btn:hover {
  background: var(--df-brown-600) !important;
}

.js-cart-line-product-quantity {
  width: 60px !important;
  height: 36px !important;
  border: none !important;
  text-align: center !important;
  background: transparent !important;
  font-weight: 600 !important;
  color: var(--df-brown-900) !important;
}

/* Bouton supprimer */
.remove-from-cart {
  color: #c44c4c !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.remove-from-cart:hover {
  background: rgba(196, 76, 76, 0.1) !important;
  color: #c44c4c !important;
}

/* === SECTION RÉSUMÉ (droite) === */
.cart-grid__right {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 25px !important;
  border: 1px solid rgba(47,36,26,.08) !important;
  position: sticky !important;
  top: 100px !important;
}

.cart-grid__right h2 {
  font-family: "Playfair Display", serif !important;
  color: var(--df-brown-900) !important;
  font-size: 1.4rem !important;
  margin-bottom: 20px !important;
  text-align: center !important;
}

/* Carte résumé */
.cart-summary {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Lignes du résumé */
.cart-summary__line {
  display: flex !important;
  justify-content: space-between !important;
  padding: 12px 0 !important;
  border-bottom: 1px dashed var(--df-beige-200) !important;
}

.cart-summary__line:last-child {
  border-bottom: 2px solid var(--df-brown-700) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--df-brown-900) !important;
  padding-bottom: 15px !important;
  margin-bottom: 20px !important;
}

/* === BOUTONS === */
.checkout .btn-primary {
  background: linear-gradient(135deg, var(--df-brown-700), var(--df-brown-600)) !important;
  color: white !important;
  border: none !important;
  padding: 16px 24px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  width: 100% !important;
  box-shadow: 0 6px 20px rgba(75, 58, 43, 0.3) !important;
  transition: all 0.3s ease !important;
  margin-bottom: 15px !important;
}

.checkout .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(75, 58, 43, 0.4) !important;
}

.btn-outline-primary {
  background: transparent !important;
  border: 2px solid var(--df-brown-700) !important;
  color: var(--df-brown-700) !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  width: 100% !important;
}

.btn-outline-primary:hover {
  background: var(--df-brown-700) !important;
  color: white !important;
}

/* === CODE PROMO === */
.cart-voucher {
  background: var(--df-cream) !important;
  border-radius: var(--df-radius) !important;
  border: 1px dashed var(--df-brown-700) !important;
  padding: 15px !important;
  margin-top: 15px !important;
}

.cart-voucher .form-control {
  border: 1px solid var(--df-beige-200) !important;
  border-radius: 8px !important;
}

.cart-voucher .btn-primary {
  background: var(--df-brown-700) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
}

/* === RÉASSURANCE === */
.blockreassurance_product {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  text-align: center !important;
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 20px !important;
  margin-top: 20px !important;
}

.blockreassurance_product svg {
  width: 32px !important;
  height: 32px !important;
  margin-bottom: 8px !important;
}

.blockreassurance_product svg path {
  fill: var(--df-brown-700) !important;
}

.blockreassurance_product .block-title {
  font-weight: 600 !important;
  color: var(--df-brown-900) !important;
  font-size: 14px !important;
  margin: 0 !important;
}

/* === RESPONSIVE === */
@media (max-width: 992px) {
  .cart-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .blockreassurance_product {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 576px) {
  .blockreassurance_product {
    grid-template-columns: 1fr !important;
  }
}
/* ===== CORRECTIONS ORGANISATION PANIER ===== */

/* Forcer la structure 2 colonnes même sur mobile moyen */
.cart-grid {
  display: grid !important;
  grid-template-columns: 1fr 380px !important; /* largeur fixe pour la colonne droite */
  gap: 30px !important;
  align-items: start !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 20px !important;
}

/* === AMÉLIORER LA LIGNE PRODUIT === */
.product-line {
  display: grid !important;
  grid-template-columns: 120px 1fr auto auto auto !important;
  gap: 20px !important;
  align-items: center !important;
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.06) !important;
  padding: 20px !important;
  margin-bottom: 15px !important;
  border: 1px solid rgba(47,36,26,.05) !important;
}

/* Réorganiser les éléments de la ligne produit */
.product-line__image {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
}

.product-line__content {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.product-line__informations {
  grid-column: 3 / -1 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
}

.product-line__actions {
  grid-column: 2 / -1 !important;
  grid-row: 2 !important;
  text-align: right !important;
  margin-top: 10px !important;
}

/* === AMÉLIORER LE RÉSUMÉ === */
.cart-grid__right {
  position: sticky !important;
  top: 100px !important;
  align-self: start !important; /* important pour le sticky */
}

/* Espacer les lignes du résumé */
.cart-summary__line {
  padding: 15px 0 !important;
  font-size: 1rem !important;
}

.cart-summary__line:last-child {
  padding: 20px 0 15px 0 !important;
  margin-top: 10px !important;
}

/* === AMÉLIORER LES BOUTONS === */
.checkout {
  margin: 20px 0 !important;
}

/* Espacement bouton continuer */
.btn-outline-primary {
  margin: 15px 0 20px 0 !important;
}

/* === RÉASSURANCE EN 3 COLONNES AU LIEU DE 4 === */
.blockreassurance_product {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 25px !important;
  padding: 25px !important;
  margin: 30px 0 !important;
}

/* Masquer le 4ème élément s'il existe */
.blockreassurance_product > div:nth-child(4) {
  display: none !important;
}

/* === RESPONSIVE AMÉLIORÉ === */
@media (max-width: 1024px) {
  .cart-grid {
    grid-template-columns: 1fr 320px !important;
    gap: 25px !important;
  }
}

@media (max-width: 768px) {
  .cart-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 15px !important;
  }
  
  .product-line {
    grid-template-columns: 100px 1fr !important;
    gap: 15px !important;
  }
  
  .product-line__informations {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-content: center !important;
    margin-top: 15px !important;
  }
  
  .product-line__actions {
    grid-row: 3 !important;
    text-align: center !important;
    margin-top: 15px !important;
  }
  
  .blockreassurance_product {
    grid-template-columns: 1fr !important;
  }
}

/* === CORRECTIONS VISUELLES === */
/* Note d'information en haut */
.df-note {
  background: var(--df-cream) !important;
  border: 1px solid var(--df-beige-200) !important;
  border-radius: 8px !important;
  padding: 12px 15px !important;
  margin-bottom: 20px !important;
  text-align: center !important;
  color: var(--df-brown-700) !important;
  grid-column: 1 / -1 !important; /* prend toute la largeur */
}

/* Améliorer les prix */
.product-line__current .price,
.cart-summary__value {
  font-weight: 700 !important;
  color: var(--df-brown-900) !important;
}

/* Total plus visible */
.cart-total .cart-summary__value {
  font-size: 1.3rem !important;
  color: var(--df-brown-900) !important;
}
/* === CORRECTIONS BUGS PANIER === */

/* Centrer le panier et corriger la largeur */
.cart-grid {
  display: grid !important;
  grid-template-columns: 1fr 350px !important; /* largeur fixe plus petite */
  gap: 25px !important;
  align-items: start !important;
  max-width: 1100px !important; /* réduit la largeur totale */
  margin: 0 auto !important;
  padding: 15px !important;
}

/* === CORRIGER LE RÉCAPITULATIF QUI DÉBORDE === */
.cart-grid__right {
  width: 100% !important;
  max-width: 350px !important; /* force la largeur max */
  position: sticky !important;
  top: 100px !important;
  align-self: start !important;
  overflow: hidden !important; /* empêche le débordement */
}

/* Forcer le contenu du résumé à rester dans les limites */
.cart-summary {
  width: 100% !important;
  overflow: hidden !important;
}

.cart-summary__line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 0 !important;
  border-bottom: 1px dashed var(--df-beige-200) !important;
  word-wrap: break-word !important;
}

/* Corriger les textes trop longs */
.cart-summary__label {
  flex: 1 !important;
  text-align: left !important;
  margin-right: 10px !important;
}

.cart-summary__value {
  flex-shrink: 0 !important;
  font-weight: 700 !important;
  color: var(--df-brown-900) !important;
}

/* === MASQUER LA DOUBLE RÉASSURANCE === */
/* Garder seulement celle du bas, plus jolie */
.cart-grid__right .blockreassurance_product {
  display: none !important; /* masque celle dans le résumé */
}

/* Améliorer celle du bas */
.cart-grid + .blockreassurance_product {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 25px !important;
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 25px !important;
  margin: 30px auto !important;
  max-width: 1100px !important;
  text-align: center !important;
}

/* === CORRIGER L'IMAGE MANQUANTE === */
.product-line__image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8f5f1 !important;
  border-radius: 12px !important;
  padding: 10px !important;
  min-height: 100px !important;
}

.product-line__image img {
  max-width: 100% !important;
  max-height: 100px !important;
  object-fit: contain !important;
}

/* Si pas d'image, afficher un placeholder */
.product-line__image:empty::after {
  content: "📦";
  font-size: 2rem;
  color: var(--df-brown-600);
}

/* === AMÉLIORER LE RESPONSIVE === */
@media (max-width: 992px) {
  .cart-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 20px !important;
  }
  
  .cart-grid__right {
    max-width: 100% !important;
    position: static !important;
  }
}

/* === CORRIGER LES BOUTONS === */
.cart-voucher {
  margin: 15px 0 !important;
}

.checkout {
  margin: 20px 0 0 0 !important;
}

.btn-outline-primary {
  margin-bottom: 15px !important;
}

/* === AMÉLIORER LES ESPACEMENTS === */
.df-note {
  margin: 0 0 20px 0 !important;
  grid-column: 1 / -1 !important;
  text-align: center !important;
  background: var(--df-cream) !important;
  border: 1px solid var(--df-beige-200) !important;
  border-radius: 8px !important;
  padding: 12px !important;
}
/* === CORRIGER L'IMAGE MANQUANTE ET SON CENTRAGE === */
.product-line__image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8f5f1 !important;
  border-radius: 12px !important;
  padding: 10px !important;
  min-height: 100px !important;
  width: 120px !important; /* largeur fixe pour le carré */
}

/* Placeholder quand il n'y a pas d'image */
.product-line__image:empty::after,
.product-line__image img[src=""]::after {
  content: "📦";
  font-size: 2.5rem;
  color: var(--df-brown-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Si l'image existe, bien la centrer */
.product-line__image img {
  max-width: 100% !important;
  max-height: 100px !important;
  object-fit: contain !important;
  margin: auto !important;
}
/* === RÉASSURANCE EN BAS DU PANIER === */
.cart-grid::after {
  content: "";
  display: block;
  grid-column: 1 / -1;
  margin-top: 30px;
}

/* Cibler la vraie réassurance en bas de page */
body.cart .blockreassurance_product:last-of-type {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 25px !important;
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 25px !important;
  margin: 30px auto !important;
  max-width: 1100px !important;
  text-align: center !important;
}

/* Masquer le 4ème élément s'il existe */
body.cart .blockreassurance_product:last-of-type > div:nth-child(4) {
  display: none !important;
}

/* Améliorer les icônes de réassurance */
body.cart .blockreassurance_product svg {
  width: 32px !important;
  height: 32px !important;
  margin: 0 auto 8px auto !important;
  display: block !important;
}

body.cart .blockreassurance_product svg path {
  fill: var(--df-brown-700) !important;
}

body.cart .blockreassurance_product .block-title {
  font-weight: 600 !important;
  color: var(--df-brown-900) !important;
  font-size: 14px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
/* === FINITIONS PANIER === */

/* Centrer parfaitement l'image dans son conteneur */
.product-line__image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8f5f1 !important;
  border-radius: 12px !important;
  padding: 8px !important;
  width: 120px !important;
  height: 120px !important; /* hauteur fixe pour un carré parfait */
}

.product-line__image img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 8px !important;
}

/* Améliorer la réassurance du bas */
.blockreassurance_product {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 25px !important;
  margin: 30px auto 0 auto !important;
  max-width: 1100px !important;
  text-align: center !important;
}

/* Masquer le 4ème élément de réassurance */
.blockreassurance_product > div:nth-child(n+4) {
  display: none !important;
}

/* Améliorer les textes de réassurance */
.blockreassurance_product .block-title {
  font-weight: 600 !important;
  color: var(--df-brown-900) !important;
  font-size: 14px !important;
  margin: 8px 0 0 0 !important;
  line-height: 1.3 !important;
}

/* Icônes réassurance en couleur marron */
.blockreassurance_product svg {
  width: 32px !important;
  height: 32px !important;
  margin: 0 auto !important;
  display: block !important;
}

.blockreassurance_product svg path {
  fill: var(--df-brown-700, #4b3a2b) !important;
}

/* Petit polish sur les boutons quantité */
.input-group .btn {
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Améliorer l'espacement du bouton "Commander" */
.checkout .btn-primary {
  margin-top: 5px !important;
}
/* === CENTRER LES DEUX CARTES === */
.cart-grid {
  display: grid !important;
  grid-template-columns: 1fr 350px !important;
  gap: 25px !important;
  align-items: start !important;
  justify-content: center !important; /* centre le grid */
  max-width: 1000px !important; /* réduit un peu la largeur totale */
  margin: 0 auto !important;
  padding: 15px !important;
}

/* Alternative : si vous voulez les deux cartes de taille plus égale */
.cart-grid-equal {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* deux colonnes égales */
  gap: 30px !important;
  align-items: start !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 15px !important;
}

/* Responsive : sur mobile, empiler les cartes */
@media (max-width: 768px) {
  .cart-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    justify-content: stretch !important;
  }
}
/* === ALIGNER LES DEUX CARTES AU MÊME NIVEAU === */
.cart-grid {
  display: grid !important;
  grid-template-columns: 1fr 350px !important;
  gap: 25px !important;
  align-items: start !important; /* important : aligne tout en haut */
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 15px !important;
}

/* Forcer les deux cartes à commencer au même niveau */
.cart-grid__body,
.cart-grid__right {
  margin-top: 0 !important;
  vertical-align: top !important;
  align-self: start !important; /* force l'alignement en haut */
}

/* Supprimer tout décalage éventuel */
.cart-grid__body h1,
.cart-grid__right h2 {
  margin-top: 0 !important; /* pas de marge en haut des titres */
}

/* S'assurer que le sticky ne crée pas de décalage */
.cart-grid__right {
  position: sticky !important;
  top: 20px !important; /* petit espace avec le haut de page */
  align-self: start !important;
}
/* ===== PAGE CATÉGORIE DOGGY FACTORY - REFONTE COMPLÈTE ===== */

/* Base page catégorie */
.page-category,
body.category {
  background: var(--df-cream) !important;
}

/* === HEADER DE CATÉGORIE === */
.category-cover {
  position: relative;
  background: linear-gradient(135deg, rgba(47,36,26,0.7), rgba(75,58,43,0.5));
  border-radius: var(--df-radius);
  overflow: hidden;
  margin: 20px auto 30px;
  max-width: 1200px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.category-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.category-cover .category-header {
  position: relative;
  z-index: 2;
  padding: 40px 20px;
}

.category-cover h1 {
  font-family: "Playfair Display", serif !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  color: white !important;
  margin: 0 0 15px 0 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.category-cover .category-description {
  font-size: 1.1rem;
  opacity: 0.95;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
}

/* === LAYOUT PRINCIPAL === */
.page-category .container,
.category-page .container {
  max-width: 1200px;
  margin: 0 auto;
}

.category-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 30px;
  align-items: start;
  margin-top: 20px;
}

/* === BARRE DE FILTRES ET TRI === */
.products-selection {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 20px !important;
  margin-bottom: 25px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
}

.products-selection .total-products,
.products-selection .showing {
  color: var(--df-brown-700) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
}

.products-selection .sort-by-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.products-selection select {
  border: 2px solid var(--df-beige-200) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  background: white !important;
  color: var(--df-brown-800) !important;
  font-weight: 500 !important;
}

.products-selection select:focus {
  border-color: var(--df-brown-700) !important;
  outline: none !important;
}

/* === SIDEBAR REPENSÉE === */
.block-categories,
.faceted-search,
.category-sidebar {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 25px !important;
  margin-bottom: 20px !important;
  border: 1px solid rgba(47,36,26,.08) !important;
}

.block-categories h2,
.faceted-search h3,
.sidebar-block h3 {
  font-family: "Playfair Display", serif !important;
  color: var(--df-brown-900) !important;
  font-size: 1.3rem !important;
  margin: 0 0 15px 0 !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--df-beige-200) !important;
}

/* Menu catégories */
.block-categories ul,
.category-tree ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.block-categories li,
.category-tree li {
  margin: 0 !important;
}

.block-categories li a,
.category-tree li a {
  display: block !important;
  padding: 10px 12px !important;
  color: var(--df-brown-700) !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  font-weight: 500 !important;
}

.block-categories li a:hover,
.block-categories li a.current,
.category-tree li a:hover,
.category-tree li a.current {
  background: var(--df-cream) !important;
  color: var(--df-brown-900) !important;
  transform: translateX(3px) !important;
}

/* Filtres facettés */
.facet-label {
  color: var(--df-brown-800) !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

.facet input[type="checkbox"] {
  margin-right: 8px !important;
}

.facet label {
  color: var(--df-brown-700) !important;
  cursor: pointer !important;
}

/* === GRILLE DE PRODUITS === */
.products.row {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 25px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.products.row > * {
  flex: unset !important;
  max-width: unset !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Cartes produits (réutilise les styles existants mais améliore) */
.product-miniature {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  overflow: hidden !important;
  padding: 16px !important;
  border: 1px solid rgba(47,36,26,.05) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

.product-miniature:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.12) !important;
}

/* Image produit */
.product-miniature .thumbnail-container {
  background: #fff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  position: relative !important;
}

.product-miniature .thumbnail-container img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  transition: transform .3s ease !important;
}

.product-miniature:hover .thumbnail-container img {
  transform: scale(1.05) !important;
}

/* Badges */
.product-miniature .product-flags .new,
.product-miniature .product-flags .on-sale {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  background: var(--df-brown-700) !important;
  color: white !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  z-index: 2 !important;
}

/* Titre et prix */
.product-miniature .product-title a {
  color: var(--df-brown-900) !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 8px !important;
}

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

.product-miniature .product-price-and-shipping {
  color: var(--df-brown-900) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  margin: 10px 0 !important;
}

/* Boutons */
.product-miniature .btn-primary {
  background: var(--df-brown-700) !important;
  border: none !important;
  color: white !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  width: 100% !important;
  transition: all 0.2s ease !important;
}

.product-miniature .btn-primary:hover {
  background: var(--df-brown-600) !important;
  transform: translateY(-1px) !important;
}

/* === PAGINATION === */
.pagination {
  display: flex !important;
  justify-content: center !important;
  margin: 40px 0 !important;
}

.pagination .page-link {
  background: var(--df-white) !important;
  border: 1px solid var(--df-beige-200) !important;
  color: var(--df-brown-700) !important;
  padding: 10px 15px !important;
  margin: 0 3px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
}

.pagination .page-link:hover,
.pagination .page-item.active .page-link {
  background: var(--df-brown-700) !important;
  border-color: var(--df-brown-700) !important;
  color: white !important;
}

/* === BREADCRUMB === */
.breadcrumb {
  background: transparent !important;
  padding: 10px 0 !important;
  margin: 20px 0 !important;
  border-radius: 0 !important;
}

.breadcrumb-item a {
  color: var(--df-brown-700) !important;
  text-decoration: none !important;
}

.breadcrumb-item.active {
  color: var(--df-brown-900) !important;
  font-weight: 600 !important;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .category-content {
    grid-template-columns: 250px 1fr;
    gap: 25px;
  }
  
  .products.row {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 20px !important;
  }
}

@media (max-width: 768px) {
  .category-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .category-cover {
    margin: 10px;
    min-height: 150px;
  }
  
  .category-cover h1 {
    font-size: 1.8rem !important;
  }
  
  .products-selection {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
  }
  
  .products.row {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 15px !important;
  }
}

@media (max-width: 480px) {
  .products.row {
    grid-template-columns: 1fr !important;
  }
}

/* === BOUTON "VOIR PLUS" POUR MOBILE === */
.sidebar-toggle {
  display: none !important;
}

@media (max-width: 768px) {
  .category-sidebar {
    order: 2;
  }
  
  .sidebar-toggle {
    display: block !important;
    background: var(--df-brown-700) !important;
    color: white !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
    width: 100% !important;
  }
}
/* === CORRECTIONS PAGE CATÉGORIE === */

/* 1. MASQUER LE MENU HORIZONTAL (navigation catégories) */
.category-sub-menu,
.category-top-menu,
.category-nav,
[class*="category-nav"],
.category-content .row:first-child nav {
  display: none !important;
}

/* Alternative : si c'est un autre élément, masquer les liens de navigation */
.category-content a[href*="Accueil"],
.category-content a[href*="Personnalisation"],
.category-content a[href*="Produits"] {
  display: none !important;
}

/* 2. GRILLE 3 COLONNES AU LIEU DE 2 */
.products.row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* force 3 colonnes */
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ajuster la largeur des cartes pour 3 colonnes */
.product-miniature {
  width: 100% !important;
  max-width: 100% !important;
}

/* 3. AMÉLIORER LA BARRE DE TRI */
.products-selection {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 20px 25px !important;
  margin-bottom: 25px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border: 1px solid rgba(47,36,26,.08) !important;
}

/* Compteur produits */
.products-selection .total-products {
  color: var(--df-brown-900) !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
}

/* Zone de tri plus belle */
.products-selection .sort-by-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.products-selection .sort-by-row label {
  color: var(--df-brown-700) !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* Select customisé */
.products-selection select {
  border: 2px solid var(--df-brown-700) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  background: white !important;
  color: var(--df-brown-800) !important;
  font-weight: 500 !important;
  min-width: 150px !important;
  cursor: pointer !important;
}

.products-selection select:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(75,58,43,0.1) !important;
}

/* 4. RESPONSIVE POUR 3 COLONNES */
@media (max-width: 1200px) {
  .products.row {
    grid-template-columns: repeat(3, 1fr) !important; /* garde 3 colonnes jusqu'à 1200px */
  }
}

@media (max-width: 900px) {
  .products.row {
    grid-template-columns: repeat(2, 1fr) !important; /* 2 colonnes sur tablette */
  }
}

@media (max-width: 600px) {
  .products.row {
    grid-template-columns: 1fr !important; /* 1 colonne sur mobile */
  }
  
  /* Barre de tri empilée sur mobile */
  .products-selection {
    flex-direction: column !important;
    gap: 15px !important;
    text-align: center !important;
  }
}

/* 5. AMÉLIORER L'ESPACEMENT ENTRE ÉLÉMENTS */
.category-header {
  margin-bottom: 30px !important;
}

.products-selection {
  margin: 0 0 25px 0 !important;
}

/* 6. SI BESOIN DE MASQUER LA SIDEBAR AUSSI */
.category-sidebar,
.block-categories,
.faceted-search {
  display: none !important; /* décommentez si vous voulez masquer la sidebar */
}

/* Et ajuster le layout si pas de sidebar */
.category-content {
  grid-template-columns: 1fr !important; /* une seule colonne si pas de sidebar */
}
/* === MASQUER UNIQUEMENT LE MENU DE NAVIGATION === */

/* Annuler les règles précédentes trop larges */
.col-auto.d-flex.align-items-center,
div[class*="col-auto"][class*="d-flex"][class*="align-items-center"] {
  display: block !important; /* on remet l'affichage */
}

/* Cibler uniquement le menu de navigation spécifique */
nav[class*="offcanvas"],
.offcanvas-start,
#mobileMenu,
.js-top-menu {
  display: none !important;
}

/* Alternative : cibler par l'attribut tabindex si c'est le bon élément */
[tabindex="-1"][id*="mobileMenu"] {
  display: none !important;
}

/* Ou cibler le conteneur qui contient ces liens spécifiques */
.row:has(a[href*="Personnalisation"][href*="Produits-de-soin"]) {
  display: none !important;
}
/* === MASQUER LE MENU DE NAVIGATION HORIZONTAL === */

/* Cibler le conteneur principal du menu */
.main-menu.col-xl.col-auto.d-flex.align-items-center {
  display: none !important;
}

/* Alternative plus spécifique : cibler le menu desktop */
.d-none.d-xl-block.position-static.js-menu-desktop {
  display: none !important;
}

/* Ou cibler directement la liste du menu */
#top-menu.main-menu__tree {
  display: none !important;
}

/* Méthode la plus sûre : cibler par l'ID unique */
ul#top-menu {
  display: none !important;
}
/* === BARRE DE TRI ÉQUILIBRÉE SUR TOUTE LA LARGEUR === */

.products-selection {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 20px 25px !important;
  margin-bottom: 25px !important;
  border: 1px solid rgba(47,36,26,.08) !important;
  
  /* Disposition équilibrée */
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

/* Compteur produits à gauche */
.products-selection .total-products {
  color: var(--df-brown-900) !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  flex: 1 !important;
  text-align: left !important;
}

/* Zone de tri à droite */
.products-selection .sort-by-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.products-selection .sort-by-row label {
  color: var(--df-brown-700) !important;
  font-weight: 600 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Select de tri amélioré */
.products-selection select {
  border: 2px solid var(--df-brown-700) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  background: white !important;
  color: var(--df-brown-800) !important;
  font-weight: 500 !important;
  min-width: 180px !important;
  cursor: pointer !important;
}

.products-selection select:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(75,58,43,0.1) !important;
}

/* Alternative : centrer le tri si vous préférez */
.products-selection-centered {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 30px !important;
}

/* Responsive pour la barre de tri */
@media (max-width: 768px) {
  .products-selection {
    flex-direction: column !important;
    gap: 15px !important;
    text-align: center !important;
  }
  
  .products-selection .total-products {
    text-align: center !important;
    margin-bottom: 10px !important;
  }
  
  .products-selection .sort-by-row {
    width: 100% !important;
    justify-content: center !important;
  }
  
  .products-selection select {
    width: 100% !important;
    max-width: 250px !important;
  }
}
/* === BARRE DE TRI - STRUCTURE RÉELLE === */

/* Conteneur principal */
#js-product-list-top.products-selection {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 20px 25px !important;
  margin-bottom: 25px !important;
  border: 1px solid rgba(47,36,26,.08) !important;
}

/* Ligne avec les deux colonnes */
.products-selections-filters.row {
  width: 100% !important;
  margin: 0 !important;
  align-items: center !important;
}

/* Colonne compteur produits (gauche) */
.products-selections-filters .total-products {
  display: flex !important;
  align-items: center !important;
}

.products-selections-filters .total-products p {
  color: var(--df-brown-900) !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  margin: 0 !important;
}

/* Colonne tri (droite) */
.products-selections-filters .sort-by-row {
  justify-content: flex-end !important;
}

/* Texte "Trier par" */
.sort-by-row .sort-by {
  color: var(--df-brown-700) !important;
  font-weight: 600 !important;
  margin: 0 15px 0 0 !important;
}

.sort-by-row .sort-by .material-icons {
  color: var(--df-brown-700) !important;
  margin-right: 8px !important;
}

/* Bouton dropdown amélioré */
.products-sort-order .btn {
  border: 2px solid var(--df-brown-700) !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  background: white !important;
  color: var(--df-brown-800) !important;
  font-weight: 500 !important;
  min-width: 180px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.products-sort-order .btn:hover,
.products-sort-order .btn:focus {
  background: var(--df-cream) !important;
  border-color: var(--df-brown-700) !important;
  color: var(--df-brown-800) !important;
  box-shadow: 0 0 0 3px rgba(75,58,43,0.1) !important;
}

/* Icône dropdown */
.products-sort-order .btn .material-icons {
  color: var(--df-brown-700) !important;
  font-size: 20px !important;
}

/* Menu dropdown */
.products-sort-order .dropdown-menu {
  border: 2px solid var(--df-brown-700) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.1) !important;
  padding: 8px 0 !important;
  min-width: 220px !important;
}

.products-sort-order .dropdown-item {
  padding: 10px 16px !important;
  color: var(--df-brown-700) !important;
  transition: all 0.2s ease !important;
}

.products-sort-order .dropdown-item:hover,
.products-sort-order .dropdown-item.current {
  background: var(--df-cream) !important;
  color: var(--df-brown-900) !important;
}

/* Responsive */
@media (max-width: 992px) {
  /* Sur tablette/mobile, empiler les éléments */
  .products-selections-filters .total-products,
  .products-selections-filters > div {
    text-align: center !important;
    margin-bottom: 15px !important;
  }
  
  .products-selections-filters .sort-by-row {
    justify-content: center !important;
  }
  
  .products-sort-order .btn {
    width: 100% !important;
    max-width: 280px !important;
  }
}

@media (max-width: 768px) {
  /* Sur mobile, masquer l'icône et le texte "Trier par" */
  .sort-by-row .sort-by {
    display: none !important;
  }
}
/* === HEADER CATÉGORIE - TEXTE À GAUCHE, IMAGE À DROITE === */

.block-category {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 30px !important;
  margin: 20px auto 30px !important;
  max-width: 1200px !important;
  border: 1px solid rgba(47,36,26,.08) !important;
  
  /* Layout en 2 colonnes */
  display: grid !important;
  grid-template-columns: 1fr 400px !important; /* texte large, image fixe */
  gap: 40px !important;
  align-items: center !important;
}

/* Zone de contenu texte (à gauche) */
.block-category-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Titre */
.block-category h1.page-title-section {
  font-family: "Playfair Display", serif !important;
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
  color: var(--df-brown-900) !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.2 !important;
}

/* Description */
.block-category #category-description {
  color: var(--df-brown-700) !important;
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Image (à droite) */
.block-category .category-cover {
  margin: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.1) !important;
}

.block-category .category-cover img {
  width: 100% !important;
  height: 250px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

/* Réorganisation des éléments dans la grille */
.block-category h1.page-title-section {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.block-category #category-description {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

.block-category .category-cover {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important; /* prend les 2 lignes */
}

/* === RESPONSIVE === */
@media (max-width: 992px) {
  .block-category {
    grid-template-columns: 1fr 300px !important;
    gap: 30px !important;
    padding: 25px !important;
  }
  
  .block-category .category-cover img {
    height: 200px !important;
  }
}

@media (max-width: 768px) {
  .block-category {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
    padding: 20px !important;
    text-align: center !important;
  }
  
  /* Sur mobile, image en haut */
  .block-category h1.page-title-section {
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: 2;
  }
  
  .block-category #category-description {
    grid-column: 1 !important;
    grid-row: 3 !important;
    order: 3;
  }
  
  .block-category .category-cover {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 1;
  }
  
  .block-category .category-cover img {
    height: 180px !important;
  }
}
/* === CORRIGER L'AFFICHAGE DE L'IMAGE === */

.block-category .category-cover {
  margin: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.1) !important;
  background: #f5f1eb !important; /* fond de secours */
  min-height: 200px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.block-category .category-cover img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Si l'image ne charge pas, afficher un placeholder */
.block-category .category-cover img[src*="personnalisation.jpg"] {
  background: linear-gradient(135deg, var(--df-beige-300), var(--df-beige-200)) !important;
}

/* Alternative : remplacer par une image de placeholder temporaire */
.block-category .category-cover::after {
  content: "";
  display: block;
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #e3d7c7, #efe6db);
  border-radius: 12px;
  position: relative;
}
/* === AJUSTEMENTS FINAUX PAGE CATÉGORIE === */

/* Corriger l'espacement de la sidebar */
.category-sidebar,
.left-column {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 25px !important;
  border: 1px solid rgba(47,36,26,.08) !important;
}

/* Améliorer les liens de la sidebar */
.category-sidebar a,
.left-column a {
  display: block !important;
  padding: 10px 15px !important;
  color: var(--df-brown-700) !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  margin-bottom: 5px !important;
}

.category-sidebar a:hover,
.category-sidebar a.current,
.left-column a:hover {
  background: var(--df-cream) !important;
  color: var(--df-brown-900) !important;
  transform: translateX(3px) !important;
}

/* S'assurer que l'image garde son ratio */
.block-category .category-cover img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

/* Améliorer l'espacement entre les sections */
.block-category {
  margin-bottom: 40px !important;
}

/* Responsive : masquer la sidebar sur mobile si nécessaire */
@media (max-width: 768px) {
  .category-sidebar,
  .left-column {
    order: 2 !important; /* passe après les produits sur mobile */
  }
}
/* === CORRIGER L'AFFICHAGE DE L'IMAGE === */

.block-category .category-cover {
  margin: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.1) !important;
  background: transparent !important; /* enlever le fond beige */
  min-height: 200px !important;
  display: block !important; /* changer de flex à block */
}

.block-category .category-cover img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  object-position: center !important; /* centrer l'image */
  border-radius: 12px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: none !important; /* enlever tout fond */
}

/* Forcer le chargement de l'image */
.block-category .category-cover img[src*="personnalisation.jpg"] {
  content: url("https://doggy-factory.fr/c/3-category_cover_2x/personnalisation.jpg") !important;
}

/* Alternative si l'URL pose problème */
.block-category .category-cover {
  background-image: url("https://doggy-factory.fr/c/3-category_cover_2x/personnalisation.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* === RESET COMPLET DE L'IMAGE === */

/* Annuler tous les styles précédents */
.block-category .category-cover,
.block-category .category-cover::before,
.block-category .category-cover::after {
  background: none !important;
  content: none !important;
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
}

/* Style minimal pour l'image */
.block-category .category-cover img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 8px !important;
}
/* === REMETTRE L'IMAGE DANS SON CONTENEUR === */

/* Forcer l'image à rester dans la grille */
.block-category {
  display: grid !important;
  grid-template-columns: 1fr 400px !important;
  gap: 40px !important;
  align-items: center !important;
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 30px !important;
  margin: 20px auto 30px !important;
  max-width: 1200px !important;
  border: 1px solid rgba(47,36,26,.08) !important;
}

/* Remettre l'image dans son conteneur */
.block-category .category-cover {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  margin: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.1) !important;
}

.block-category .category-cover img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 12px !important;
  display: block !important;
}

/* Positionner le texte à gauche */
.block-category h1.page-title-section {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.block-category #category-description {
  grid-column: 1 !important;
  grid-row: 2 !important;
}
/* === ANNULER LES CHANGEMENTS RÉCENTS === */
.block-category {
  display: grid !important;
  grid-template-columns: 1fr 400px !important;
  gap: 40px !important;
  align-items: center !important;
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 30px !important;
  margin: 20px auto 30px !important;
  max-width: 1200px !important;
  border: 1px solid rgba(47,36,26,.08) !important;
}

/* === SOLUTION SIMPLE : PASSER L'IMAGE DEVANT L'OVERLAY === */
.block-category .category-cover {
  position: relative !important;
  z-index: 10 !important; /* met l'image au-dessus de l'overlay */
  border-radius: 12px !important;
  overflow: hidden !important;
}

.block-category .category-cover img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  position: relative !important;
  z-index: 11 !important; /* encore plus haut */
}

/* Passer l'overlay ::after derrière */
.block-category .category-cover::after {
  z-index: 1 !important; /* derrière l'image */
}
/* === OPTIMISER L'ESPACEMENT DU BLOC === */

.block-category {
  display: grid !important;
  grid-template-columns: 1fr 350px !important; /* réduire la colonne image */
  gap: 30px !important; /* réduire l'espacement */
  align-items: center !important;
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 25px !important; /* réduire le padding */
  margin: 20px auto 25px !important;
  max-width: 1100px !important; /* réduire la largeur totale */
  border: 1px solid rgba(47,36,26,.08) !important;
}

/* Ajuster l'image pour qu'elle prenne moins de place */
.block-category .category-cover {
  position: relative !important;
  z-index: 10 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.block-category .category-cover img {
  width: 100% !important;
  height: 180px !important; /* réduire la hauteur */
  object-fit: cover !important;
  border-radius: 12px !important;
  position: relative !important;
  z-index: 11 !important;
}

/* Responsive ajusté */
@media (max-width: 992px) {
  .block-category {
    grid-template-columns: 1fr 280px !important;
    gap: 25px !important;
    padding: 20px !important;
  }
  
  .block-category .category-cover img {
    height: 160px !important;
  }
}

@media (max-width: 768px) {
  .block-category {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
}
/* === RESTAURER LE MENU === */
/* Annuler le masquage du menu principal */
ul#top-menu {
  display: flex !important; /* remettre le menu */
}

/* Si vous voulez masquer seulement certains liens du menu */
#top-menu #lnk-accueil {
  display: none !important; /* masquer juste "Accueil" par exemple */
}

/* === AMÉLIORER L'ESPACEMENT DU BLOC CATÉGORIE === */
.block-category {
  display: grid !important;
  grid-template-columns: 1fr 320px !important; /* encore plus compact */
  gap: 25px !important;
  align-items: center !important;
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 20px !important; /* padding plus serré */
  margin: 15px auto 20px !important;
  max-width: 1000px !important; /* plus compact */
  border: 1px solid rgba(47,36,26,.08) !important;
}

.block-category .category-cover img {
  width: 100% !important;
  height: 200px !important; /* image plus petite */
  object-fit: cover !important;
  border-radius: 10px !important;
  position: relative !important;
  z-index: 11 !important;
}

/* Ajuster le texte aussi */
.block-category h1.page-title-section {
  font-size: 2rem !important; /* titre plus petit */
  margin-bottom: 10px !important;
}

.block-category #category-description {
  font-size: 1rem !important; /* texte plus compact */
}
/* === FORCER LE RETOUR DU MENU === */

/* Annuler complètement la règle qui masque le menu */
ul#top-menu,
.main-menu__tree,
#top-menu.main-menu__tree {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  height: auto !important;
}

/* Forcer l'affichage des éléments du menu */
ul#top-menu li,
.main-menu__tree__item {
  display: flex !important;
  visibility: visible !important;
}

/* Forcer l'affichage des liens */
ul#top-menu li a,
.main-menu__tree__link {
  display: block !important;
  visibility: visible !important;
  color: #fff !important;
}

/* Remettre le conteneur du menu */
.main-menu.col-xl.col-auto.d-flex.align-items-center {
  display: flex !important;
  visibility: visible !important;
}

.d-none.d-xl-block.position-static.js-menu-desktop {
  display: block !important;
  visibility: visible !important;
}
/* === CENTRER LE MENU SUR LA PAGE PRINCIPALE === */

/* Cibler spécifiquement la page d'accueil */
body.index .main-menu,
body.cms-index-1 .main-menu,
.page-index .main-menu {
  justify-content: center !important;
}

/* Centrer le conteneur du menu */
body.index .main-menu .js-menu-desktop,
body.cms-index-1 .main-menu .js-menu-desktop,
.page-index .main-menu .js-menu-desktop {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

/* Centrer la liste du menu */
body.index #top-menu,
body.cms-index-1 #top-menu,
.page-index #top-menu {
  justify-content: center !important;
  margin: 0 auto !important;
}

/* Alternative : si vous voulez centrer sur toutes les pages */
.main-menu .js-menu-desktop {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

#top-menu.main-menu__tree {
  justify-content: center !important;
  margin: 0 auto !important;
}

/* Ajuster l'espacement des éléments du menu centré */
#top-menu .main-menu__tree__item {
  margin: 0 10px !important;
}
/* === REMETTRE LE LIEN ACCUEIL === */

/* Annuler le masquage du lien Accueil */
#top-menu #lnk-accueil,
#lnk-accueil {
  display: flex !important;
  visibility: visible !important;
}

/* S'assurer que tous les liens du menu sont visibles */
#top-menu .main-menu__tree__item {
  display: flex !important;
  visibility: visible !important;
}

#top-menu .main-menu__tree__link {
  display: block !important;
  visibility: visible !important;
  color: #fff !important;
}

/* Améliorer l'espacement maintenant que le menu est centré */
#top-menu .main-menu__tree__item {
  margin: 0 15px !important; /* plus d'espace entre les liens */
}

/* Optionnel : mettre "Accueil" en premier */
#top-menu #lnk-accueil {
  order: -1 !important; /* force "Accueil" à apparaître en premier */
}
/* === CORRIGER LE CHAMP CODE PROMO === */

/* S'assurer que le champ est activé et fonctionnel */
.cart-voucher input[type="text"],
.cart-voucher input[name="discount_name"] {
  pointer-events: auto !important;
  background: white !important;
  border: 2px solid var(--df-beige-200) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  color: var(--df-brown-800) !important;
  font-size: 14px !important;
  width: 100% !important;
  outline: none !important;
  cursor: text !important;
  
  /* Forcer l'activation du champ */
  disabled: false !important;
  readonly: false !important;
}

/* Focus state pour le champ */
.cart-voucher input[type="text"]:focus,
.cart-voucher input[name="discount_name"]:focus {
  border-color: var(--df-brown-700) !important;
  box-shadow: 0 0 0 3px rgba(75,58,43,0.1) !important;
}

/* Placeholder visible */
.cart-voucher input::placeholder {
  color: #999 !important;
  opacity: 1 !important;
}

/* Formulaire en ligne */
.cart-voucher .accordion-body form {
  display: flex !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.cart-voucher input[type="text"] {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Bouton Enregistrer */
.cart-voucher .btn-primary {
  background: var(--df-brown-700) !important;
  border: none !important;
  color: white !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.cart-voucher .btn-primary:hover {
  background: var(--df-brown-600) !important;
}

/* S'assurer que l'accordéon fonctionne */
.cart-voucher .accordion-collapse {
  display: block !important;
}

.cart-voucher .accordion-collapse.show {
  display: block !important;
}
/* === AMÉLIORER LE CHAMP CODE PROMO === */

/* Agrandir et améliorer le champ de saisie */
.cart-voucher input[name="discount_name"],
.cart-voucher .form-control[type="text"] {
  width: 100% !important;
  height: 45px !important; /* hauteur plus confortable */
  padding: 12px 15px !important;
  font-size: 16px !important; /* texte plus gros et visible */
  line-height: 1.4 !important;
  color: var(--df-brown-900) !important; /* texte bien visible */
  background: #fff !important;
  border: 2px solid var(--df-beige-200) !important;
  border-radius: 8px !important;
  outline: none !important;
  
  /* S'assurer que le texte est visible */
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
}

/* Placeholder plus visible */
.cart-voucher input[name="discount_name"]::placeholder {
  color: #999 !important;
  font-size: 14px !important;
  opacity: 0.7 !important;
}

/* Focus state amélioré */
.cart-voucher input[name="discount_name"]:focus {
  border-color: var(--df-brown-700) !important;
  box-shadow: 0 0 0 3px rgba(75,58,43,0.15) !important;
  background: #fff !important;
}

/* Formulaire en ligne avec bon espacement */
.cart-voucher .accordion-body form.d-flex {
  display: flex !important;
  gap: 12px !important;
  align-items: stretch !important;
  width: 100% !important;
}

/* Input prend plus de place */
.cart-voucher input[name="discount_name"] {
  flex: 2 !important; /* prend plus de place que le bouton */
  min-width: 200px !important;
}

/* Bouton bien proportionné */
.cart-voucher .btn.btn-primary {
  flex: 0 0 auto !important;
  height: 45px !important; /* même hauteur que l'input */
  padding: 12px 20px !important;
  background: var(--df-brown-700) !important;
  border: none !important;
  color: white !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* Responsive mobile */
@media (max-width: 576px) {
  .cart-voucher .accordion-body form.d-flex {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .cart-voucher input[name="discount_name"],
  .cart-voucher .btn.btn-primary {
    width: 100% !important;
    flex: none !important;
  }
}
/* === CORRIGER LE BOUTON ENREGISTRER CACHÉ === */

/* Réajuster le formulaire pour que tout soit visible */
.cart-voucher .accordion-body form.d-flex {
  display: flex !important;
  gap: 8px !important;
  align-items: stretch !important;
  width: 100% !important;
  flex-wrap: nowrap !important; /* empêche le retour à la ligne */
}

/* Réduire un peu la taille de l'input pour laisser de la place au bouton */
.cart-voucher input[name="discount_name"] {
  flex: 1 !important;
  height: 45px !important;
  padding: 12px 15px !important;
  font-size: 16px !important;
  color: var(--df-brown-900) !important;
  background: #fff !important;
  border: 2px solid var(--df-beige-200) !important;
  border-radius: 8px !important;
  max-width: calc(100% - 130px) !important; /* laisse 130px pour le bouton */
}

/* Bouton visible avec largeur fixe */
.cart-voucher .btn.btn-primary {
  flex: 0 0 120px !important; /* largeur fixe de 120px */
  height: 45px !important;
  padding: 12px 16px !important;
  background: var(--df-brown-700) !important;
  border: none !important;
  color: white !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* S'assurer que le conteneur ne déborde pas */
.cart-voucher .accordion-body {
  padding: 15px !important;
  overflow: visible !important;
}

/* Alternative pour mobile si nécessaire */
@media (max-width: 576px) {
  .cart-voucher .accordion-body form.d-flex {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .cart-voucher input[name="discount_name"] {
    max-width: 100% !important;
  }
  
  .cart-voucher .btn.btn-primary {
    flex: none !important;
    width: 100% !important;
  }
}
/* === BOUTON ENREGISTRER EN DESSOUS === */

/* Formulaire en colonne au lieu de ligne */
.cart-voucher .accordion-body form.d-flex {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Champ de saisie pleine largeur */
.cart-voucher input[name="discount_name"] {
  width: 100% !important;
  height: 45px !important;
  padding: 12px 15px !important;
  font-size: 16px !important;
  color: var(--df-brown-900) !important;
  background: #fff !important;
  border: 2px solid var(--df-beige-200) !important;
  border-radius: 8px !important;
  max-width: none !important;
}

/* Bouton en dessous, pleine largeur */
.cart-voucher .btn.btn-primary {
  width: 100% !important;
  height: 45px !important;
  padding: 12px 16px !important;
  background: var(--df-brown-700) !important;
  border: none !important;
  color: white !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  margin-top: 0 !important;
}

.cart-voucher .btn.btn-primary:hover {
  background: var(--df-brown-600) !important;
}

/* Améliorer l'espacement général */
.cart-voucher .accordion-body {
  padding: 15px !important;
}
/* === RÉDUIRE LA HAUTEUR DU BOUTON ENREGISTRER === */

.cart-voucher .btn.btn-primary {
  width: 100% !important;
  height: 32px !important; /* hauteur réduite */
  padding: 6px 16px !important; /* padding plus petit */
  background: var(--df-brown-700) !important;
  border: none !important;
  color: white !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 13px !important; /* texte légèrement plus petit */
  line-height: 1.2 !important;
}

.cart-voucher .btn.btn-primary:hover {
  background: var(--df-brown-600) !important;
}

/* Garder les autres éléments normaux */
.cart-voucher input[name="discount_name"] {
  height: 38px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
}

/* Ajuster l'espacement entre les éléments */
.cart-voucher .accordion-body form.d-flex {
  gap: 8px !important;
}
/* === RÉDUIRE LA HAUTEUR PHYSIQUE DU BOUTON === */

.cart-voucher .btn.btn-primary {
  width: 100% !important;
  height: 28px !important; /* bouton plus bas physiquement */
  padding: 4px 16px !important; /* padding vertical réduit */
  background: var(--df-brown-700) !important;
  border: none !important;
  color: white !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 14px !important; /* garder la taille de texte normale */
  line-height: 1 !important; /* réduire l'interligne */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Réduire aussi l'espacement autour */
.cart-voucher .accordion-body form.d-flex {
  gap: 6px !important;
}
/* === REMETTRE LA TAILLE ORIGINALE MAIS BIEN POSITIONNÉ === */

/* Formulaire en ligne avec le bouton visible */
.cart-voucher .accordion-body form.d-flex {
  display: flex !important;
  gap: 8px !important;
  align-items: stretch !important;
  width: 100% !important;
}

/* Input avec bonne taille */
.cart-voucher input[name="discount_name"] {
  flex: 1 !important;
  height: 45px !important;
  padding: 12px 15px !important;
  font-size: 16px !important;
  color: var(--df-brown-900) !important;
  background: #fff !important;
  border: 2px solid var(--df-beige-200) !important;
  border-radius: 8px !important;
}

/* Bouton avec la taille originale ET visible */
.cart-voucher .btn.btn-primary {
  flex: 0 0 100px !important; /* largeur fixe pour qu'il reste visible */
  height: 45px !important;
  padding: 12px 16px !important;
  background: var(--df-brown-700) !important;
  border: none !important;
  color: white !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
/* === FORCER L'APPLICATION DU CSS === */

/* Sélecteur très spécifique pour forcer l'application */
.cart-voucher .accordion-body form[data-link-action="add-voucher"] {
  display: flex !important;
  gap: 8px !important;
  align-items: stretch !important;
}

/* Cibler précisément par le nom du champ */
input[name="discount_name"].form-control {
  flex: 1 !important;
  height: 45px !important;
  max-width: calc(100% - 110px) !important;
}

/* Cibler le bouton par sa classe et son contenu */
.cart-voucher button[type="submit"].btn.btn-primary {
  flex: 0 0 100px !important;
  height: 45px !important;
  font-size: 12px !important;
}
/* === RÉDUIRE LA HAUTEUR DU CARRÉ MARRON === */

.cart-voucher .btn.btn-primary {
  width: 100% !important;
  height: 35px !important; /* carré plus bas */
  padding: 8px 16px !important; /* moins de padding vertical */
  background: var(--df-brown-700) !important;
  border: none !important;
  color: white !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 14px !important; /* taille de texte inchangée */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* === MÊME HAUTEUR QUE LE BOUTON CODE PROMO === */

.cart-voucher .btn.btn-primary {
  width: 100% !important;
  height: 36px !important; /* même hauteur que le bouton "Code promo" */
  padding: 10px 15px !important; /* même padding que le bouton du haut */
  background: var(--df-brown-700) !important;
  border: none !important;
  color: white !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  min-height: 36px !important; /* forcer la hauteur */
}
/* === FORCER AVEC SÉLECTEURS TRÈS SPÉCIFIQUES === */

/* Cibler précisément le bouton par sa structure exacte */
.cart-voucher .accordion-body form[method="post"] button.btn.btn-primary.ms-2 {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 8px 15px !important;
  line-height: 1.2 !important;
}

/* Alternative avec sélecteur par contenu */
.cart-voucher button[type="submit"]:contains("Enregistrer") {
  height: 36px !important;
}

/* Méthode ultime : cibler par l'attribut exact */
.cart-voucher button[type="submit"].btn.btn-primary[class*="ms-2"] {
  height: 36px !important;
  padding: 8px 15px !important;
}
/* === CENTRER ET ALIGNER LES 3 ÉLÉMENTS === */

/* Conteneur principal centré */
.cart-voucher .accordion-body {
  padding: 15px !important;
  text-align: center !important;
}

/* Formulaire centré avec espacement uniforme */
.cart-voucher .accordion-body form.d-flex {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: center !important;
  max-width: 280px !important; /* largeur fixe pour centrer */
  margin: 0 auto !important; /* centrer le formulaire */
}

/* Bouton "Code promo" centré */
.cart-voucher .accordion-button {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Tous les éléments avec la même largeur */
.cart-voucher input[name="discount_name"],
.cart-voucher .btn.btn-primary,
.cart-voucher .accordion-button {
  width: 100% !important;
  max-width: 280px !important; /* même largeur pour tous */
}

/* Espacement uniforme dans le conteneur principal */
.cart-voucher .accordion-item {
  border: 1px dashed var(--df-brown-700) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
/* === CHANGER LE PLACEHOLDER EN FRANÇAIS === */

/* Masquer le placeholder anglais et le remplacer */
.cart-voucher input[name="discount_name"]::placeholder {
  color: transparent !important;
}

/* Ajouter le placeholder français avec un pseudo-élément */
.cart-voucher input[name="discount_name"] {
  position: relative !important;
}

.cart-voucher input[name="discount_name"]:placeholder-shown::before {
  content: "Saisissez votre code promo ici" !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #999 !important;
  pointer-events: none !important;
  font-size: 14px !important;
}

/* Alternative plus simple qui fonctionne mieux */
.cart-voucher input[name="discount_name"] {
  color: var(--df-brown-900) !important;
}

.cart-voucher input[name="discount_name"]::placeholder {
  content: "Saisissez votre code promo ici" !important;
  color: #999 !important;
  opacity: 0.8 !important;
}
/* Remplacer le placeholder en français */
.cart-voucher input[name="discount_name"] {
  font-size: 0 !important;
}

.cart-voucher input[name="discount_name"]:before {
  content: "Saisissez votre code promo ici";
  font-size: 14px !important;
  color: #999 !important;
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
/* ===== PAGE COMMANDE DOGGY FACTORY ===== */

/* Page checkout - fond crème */
.page-checkout,
body.checkout {
  background: var(--df-cream, #fbf7f2) !important;
}

/* === ÉTAPES DE COMMANDE (en haut) === */
.checkout_steps {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 20px !important;
  margin-bottom: 25px !important;
  border: 1px solid rgba(47,36,26,.08) !important;
}

/* Numérotation des étapes */
.checkout_steps .step {
  color: var(--df-brown-700) !important;
}

.checkout_steps .step.current {
  color: var(--df-brown-900) !important;
  font-weight: 600 !important;
}

/* === STRUCTURE 2 COLONNES === */
.cart-grid-body,
.checkout .cart-grid-body {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 25px !important;
  border: 1px solid rgba(47,36,26,.08) !important;
}

.cart-grid-right,
.checkout .cart-grid-right {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 25px !important;
  border: 1px solid rgba(47,36,26,.08) !important;
  position: sticky !important;
  top: 100px !important;
}

/* === TITRES SECTIONS === */
.cart-grid-body h2,
.cart-grid-right h2,
.checkout h2 {
  font-family: "Playfair Display", serif !important;
  color: var(--df-brown-900) !important;
  font-size: 1.4rem !important;
  margin-bottom: 20px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--df-beige-200) !important;
}

/* === FORMULAIRES === */
.checkout input[type="text"],
.checkout input[type="email"],
.checkout input[type="tel"],
.checkout select,
.checkout textarea {
  border: 2px solid var(--df-beige-200) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  background: white !important;
  color: var(--df-brown-800) !important;
  transition: border-color 0.2s ease !important;
}

.checkout input:focus,
.checkout select:focus,
.checkout textarea:focus {
  border-color: var(--df-brown-700) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(75,58,43,0.1) !important;
}

/* === BOUTONS === */
.checkout .btn-primary {
  background: var(--df-brown-700) !important;
  border: none !important;
  color: white !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.checkout .btn-primary:hover {
  background: var(--df-brown-600) !important;
  transform: translateY(-1px) !important;
}

.checkout .btn-secondary {
  background: transparent !important;
  border: 2px solid var(--df-brown-700) !important;
  color: var(--df-brown-700) !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
}

.checkout .btn-secondary:hover {
  background: var(--df-brown-700) !important;
  color: white !important;
}

/* === ONGLETS "INVITÉ/CONNEXION" === */
.checkout .nav-tabs {
  border-bottom: 2px solid var(--df-beige-200) !important;
  margin-bottom: 20px !important;
}

.checkout .nav-tabs .nav-link {
  border: none !important;
  color: var(--df-brown-700) !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
  border-radius: 8px 8px 0 0 !important;
}

.checkout .nav-tabs .nav-link.active {
  background: var(--df-brown-700) !important;
  color: white !important;
  border-bottom: 2px solid var(--df-brown-700) !important;
}

/* === CASES À COCHER === */
.checkout input[type="checkbox"] {
  accent-color: var(--df-brown-700) !important;
}

.checkout .form-check-label {
  color: var(--df-brown-700) !important;
}

/* === RÉCAPITULATIF (droite) === */
.checkout .cart-summary-line {
  display: flex !important;
  justify-content: space-between !important;
  padding: 12px 0 !important;
  border-bottom: 1px dashed var(--df-beige-200) !important;
}

.checkout .cart-summary-line:last-child {
  border-bottom: 2px solid var(--df-brown-700) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--df-brown-900) !important;
}

/* === RESPONSIVE === */
@media (max-width: 992px) {
  .checkout .cart-grid-row {
    grid-template-columns: 1fr !important;
  }
  
  .checkout .cart-grid-right {
    position: static !important;
  }
}
/* === SECTION RÉASSURANCE HARMONISÉE === */
.policies-section,
.reassurance-block,
.footer-reassurance {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 25px !important;
  margin: 20px 0 !important;
  border: 1px solid rgba(47,36,26,.08) !important;
}

/* Grille 3 colonnes pour les icônes */
.policies-grid,
.reassurance-items {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  text-align: center !important;
}

/* Chaque élément de réassurance */
.policy-item,
.reassurance-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 15px !important;
  background: var(--df-beige-50) !important;
  border-radius: 12px !important;
  border: 1px solid var(--df-beige-200) !important;
  transition: all 0.3s ease !important;
}

.policy-item:hover,
.reassurance-item:hover {
  background: white !important;
  border-color: var(--df-brown-700) !important;
  transform: translateY(-2px) !important;
}

/* Icônes harmonisées */
.policy-icon,
.reassurance-icon {
  width: 50px !important;
  height: 50px !important;
  background: var(--df-brown-700) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
}

.policy-icon svg,
.reassurance-icon svg,
.policy-icon i,
.reassurance-icon i {
  color: white !important;
  font-size: 24px !important;
}

/* Textes */
.policy-title,
.reassurance-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--df-brown-900) !important;
  margin: 0 0 4px !important;
}

.policy-description,
.reassurance-description {
  font-size: 13px !important;
  color: #666 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* Responsive mobile */
@media (max-width: 768px) {
  .policies-grid,
  .reassurance-items {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  
  .policies-section,
  .reassurance-block {
    padding: 20px 15px !important;
    margin: 15px 0 !important;
  }
}
/* === INTÉGRER LA RÉASSURANCE DANS LE BLOC === */
.blockreassurance_product {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 25px !important;
  margin: 20px 0 !important;
  border: 1px solid rgba(47,36,26,.08) !important;
}

/* Masquer le 4ème élément "test" */
.blockreassurance_product > div:nth-child(4) {
  display: none !important;
}
/* === INTÉGRER LA RÉASSURANCE DANS LE DESIGN === */
.cart-grid-right .blockreassurance_product {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 20px !important;
  margin: 20px 0 0 0 !important;
  border: 1px solid rgba(47,36,26,.08) !important;
}

/* Supprimer le HR qui précède */
.cart-grid-right hr:last-of-type {
  display: none !important;
}

/* Masquer le 4ème élément */
.cart-grid-right .blockreassurance_product > div:nth-child(4) {
  display: none !important;
}

/* Organiser les 3 éléments en grille */
.cart-grid-right .blockreassurance_product {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 15px !important;
}

/* Chaque élément horizontal */
.cart-grid-right .blockreassurance_product > div {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  padding: 12px !important;
  background: var(--df-beige-50) !important;
  border-radius: 8px !important;
  border: 1px solid var(--df-beige-200) !important;
}

/* Icônes plus petites */
.cart-grid-right .blockreassurance_product svg {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
}

/* Textes */
.cart-grid-right .blockreassurance_product .block-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--df-brown-900) !important;
  margin: 0 !important;
}
/* === INTÉGRER LA RÉASSURANCE EN LARGEUR === */
.cart-grid-right .blockreassurance_product {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 20px !important;
  margin: 20px 0 0 0 !important;
  border: 1px solid rgba(47,36,26,.08) !important;
  
  /* 3 colonnes côte à côte */
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 15px !important;
  text-align: center !important;
}

/* Supprimer le HR */
.cart-grid-right hr:last-of-type {
  display: none !important;
}

/* Masquer le 4ème élément */
.cart-grid-right .blockreassurance_product > div:nth-child(4) {
  display: none !important;
}

/* Chaque élément centré verticalement */
.cart-grid-right .blockreassurance_product > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 15px 8px !important;
  background: var(--df-beige-50) !important;
  border-radius: 8px !important;
  border: 1px solid var(--df-beige-200) !important;
}

/* Icônes plus petites pour tenir en largeur */
.cart-grid-right .blockreassurance_product svg {
  width: 35px !important;
  height: 35px !important;
}

/* Textes plus petits */
.cart-grid-right .blockreassurance_product .block-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--df-brown-900) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
  .cart-grid-right .blockreassurance_product {
    grid-template-columns: 1fr !important;
  }
}
/* === CENTRER LA RÉASSURANCE === */
.cart-grid-right .blockreassurance_product {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 20px !important;
  margin: 20px auto 0 auto !important;
  border: 1px solid rgba(47,36,26,.08) !important;
  
  /* Centrer le contenu */
  display: flex !important;
  justify-content: center !important;
  gap: 15px !important;
  width: 100% !important;
}

/* Supprimer le HR */
.cart-grid-right hr:last-of-type {
  display: none !important;
}

/* Masquer le 4ème élément */
.cart-grid-right .blockreassurance_product > div:nth-child(4) {
  display: none !important;
}

/* Chaque élément */
.cart-grid-right .blockreassurance_product > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 15px 12px !important;
  background: var(--df-beige-50) !important;
  border-radius: 8px !important;
  border: 1px solid var(--df-beige-200) !important;
  text-align: center !important;
  flex: 0 0 auto !important;
  min-width: 80px !important;
}

/* Icônes */
.cart-grid-right .blockreassurance_product svg {
  width: 35px !important;
  height: 35px !important;
}

/* Textes */
.cart-grid-right .blockreassurance_product .block-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--df-brown-900) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Mobile */
@media (max-width: 768px) {
  .cart-grid-right .blockreassurance_product {
    flex-direction: column !important;
    align-items: center !important;
  }
}
/* === RÉASSURANCE AVEC 4 ÉLÉMENTS CENTRÉS === */
.cart-grid-right .blockreassurance_product {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 20px !important;
  margin: 20px auto 0 auto !important;
  border: 1px solid rgba(47,36,26,.08) !important;
  
  /* Centrer les 4 éléments */
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Supprimer le HR */
.cart-grid-right hr:last-of-type {
  display: none !important;
}

/* Ne plus masquer le 4ème élément */
.cart-grid-right .blockreassurance_product > div:nth-child(4) {
  display: flex !important;
}

/* Chaque élément */
.cart-grid-right .blockreassurance_product > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important; /* Écart réduit entre icône et texte */
  padding: 12px 8px !important;
  background: var(--df-beige-50) !important;
  border-radius: 8px !important;
  border: 1px solid var(--df-beige-200) !important;
  text-align: center !important;
  flex: 0 0 auto !important;
  min-width: 70px !important;
}

/* Icônes */
.cart-grid-right .blockreassurance_product svg {
  width: 32px !important;
  height: 32px !important;
}

/* Textes */
.cart-grid-right .blockreassurance_product .block-title {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--df-brown-900) !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}

/* Mobile */
@media (max-width: 768px) {
  .cart-grid-right .blockreassurance_product {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}
/* === RÉASSURANCE 2x2 AVEC ÉCART AJUSTÉ === */
.cart-grid-right .blockreassurance_product {
  background: var(--df-white) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  padding: 20px !important;
  margin: 20px auto 0 auto !important;
  border: 1px solid rgba(47,36,26,.08) !important;
  
  /* Grille 2x2 */
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 15px !important;
  width: 100% !important;
}

/* Supprimer le HR */
.cart-grid-right hr:last-of-type {
  display: none !important;
}

/* Chaque élément */
.cart-grid-right .blockreassurance_product > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important; /* Votre valeur testée */
  padding: 15px 10px !important;
  background: var(--df-beige-50) !important;
  border-radius: 8px !important;
  border: 1px solid var(--df-beige-200) !important;
  text-align: center !important;
}

/* Icônes et textes */
.cart-grid-right .blockreassurance_product svg {
  width: 32px !important;
  height: 32px !important;
}

.cart-grid-right .blockreassurance_product .block-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--df-brown-900) !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}
/* === CORRIGER L'ESPACEMENT RÉEL === */
.cart-grid-right .blockreassurance_product .item-product {
  max-width: none !important; /* Supprimer la largeur fixe */
  width: auto !important;
  margin-bottom: 5px !important; /* Contrôler l'écart ici */
}

/* Ou si vous préférez garder une largeur mais plus petite */
.cart-grid-right .blockreassurance_product .item-product {
  max-width: 40px !important; /* Beaucoup plus petit */
  margin-bottom: 5px !important;
}
/* === SUPPRIMER L'ESPACE APRÈS L'ICÔNE === */
.cart-grid-right .blockreassurance_product .item-product {
  display: block !important;
  line-height: 1 !important;
  font-size: 0 !important; /* Supprime l'espace du &nbsp; */
}

.cart-grid-right .blockreassurance_product svg {
  display: block !important;
  margin: 0 auto !important;
}
/* === FORCER L'ESPACEMENT MINIMAL === */
.cart-grid-right .blockreassurance_product > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important; /* Aucun gap */
  padding: 15px 10px !important;
  background: var(--df-beige-50) !important;
  border-radius: 8px !important;
  border: 1px solid var(--df-beige-200) !important;
  text-align: center !important;
}

/* Forcer le span à ne pas prendre d'espace */
.cart-grid-right .blockreassurance_product .item-product {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/* SVG collé */
.cart-grid-right .blockreassurance_product svg {
  width: 32px !important;
  height: 32px !important;
  display: block !important;
  margin: 0 !important;
}

/* Texte collé juste en dessous */
.cart-grid-right .blockreassurance_product .block-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--df-brown-900) !important;
  margin: 2px 0 0 0 !important; /* Juste 2px d'écart */
  line-height: 1.1 !important;
  padding: 0 !important;
}
/* === CORRIGER LA VALEUR FLEX === */
.cart-grid-right .blockreassurance_product .item-product {
  flex: 1 1 5px !important; /* Remplacer 180px par 5px */
}
/* === MASQUER LE CLEARFIX EN TROP === */
.cart-grid-right .blockreassurance_product .clearfix {
  display: none !important;
}
/* === CORRIGER LE MENU DÉROULANT ESPACE CLIENT === */

/* Assurer que le menu principal a un z-index élevé */
.header-nav,
.main-navigation {
  position: relative !important;
  z-index: 9999 !important;
}

/* Menu déroulant visible */
.main-navigation .dropdown-menu,
.main-navigation .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: white !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  z-index: 10000 !important;
  min-width: 200px !important;
  padding: 8px 0 !important;
  margin-top: 2px !important;
}

/* Liens du sous-menu */
.main-navigation .dropdown-menu li a,
.main-navigation .sub-menu li a {
  padding: 8px 16px !important;
  color: #333 !important;
  text-decoration: none !important;
  display: block !important;
  font-size: 14px !important;
}

.main-navigation .dropdown-menu li a:hover,
.main-navigation .sub-menu li a:hover {
  background: #f5f5f5 !important;
  color: var(--df-brown-700) !important;
}

/* Assurer que le parent du dropdown est en position relative */
.main-navigation .menu-item-has-children {
  position: relative !important;
}

/* Forcer l'affichage au hover */
.main-navigation .menu-item-has-children:hover .dropdown-menu,
.main-navigation .menu-item-has-children:hover .sub-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* === CORRIGER LE MENU DÉROULANT ESPACE CLIENT === */

/* Conteneur du dropdown */
.dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: white !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
  z-index: 10000 !important;
  min-width: 180px !important;
  padding: 8px 0 !important;
  margin-top: 2px !important;
  display: block !important;
}

/* Liens du dropdown */
.dropdown-item {
  padding: 10px 16px !important;
  color: #333 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  font-size: 14px !important;
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  text-align: left !important;
}

.dropdown-item:hover {
  background: #f8f9fa !important;
  color: var(--df-brown-700) !important;
}

/* Icônes dans le menu */
.dropdown-item .material-icons {
  font-size: 18px !important;
  margin-right: 8px !important;
}

/* Parent du dropdown */
.dropdown {
  position: relative !important;
}

/* Affichage au hover */
.dropdown:hover .dropdown-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* === MENU DÉROULANT ESPACE CLIENT EN MARRON === */

/* Conteneur du dropdown */
.dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: white !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
  z-index: 10000 !important;
  min-width: 180px !important;
  padding: 8px 0 !important;
  margin-top: 2px !important;
  display: block !important;
}

/* Liens du dropdown en marron */
.dropdown-item {
  padding: 10px 16px !important;
  color: var(--df-brown-700) !important; /* Couleur marron */
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  text-align: left !important;
}

.dropdown-item:hover {
  background: var(--df-beige-50) !important;
  color: var(--df-brown-900) !important; /* Marron plus foncé au hover */
}

/* Icônes en marron aussi */
.dropdown-item .material-icons {
  font-size: 18px !important;
  margin-right: 8px !important;
  color: var(--df-brown-700) !important;
}

/* Parent du dropdown */
.dropdown {
  position: relative !important;
}

/* Affichage au hover */
.dropdown:hover .dropdown-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* === SUPPRIMER LA FLÈCHE DROPDOWN === */
#userMenuButton.dropdown-toggle::after,
.dropdown-toggle.header-block__action-btn::after {
  display: none !important;
}

/* Ou supprimer le contenu */
#userMenuButton::after {
  content: "" !important;
}
/* === SUPPRIMER LA FLÈCHE ET GARDER LES TEXTES MARRON === */

/* Supprimer la flèche */
#userMenuButton.dropdown-toggle::after,
.dropdown-toggle.header-block__action-btn::after {
  display: none !important;
}

/* Remettre les textes du menu en marron */
.dropdown-menu .dropdown-item {
  color: #8B4513 !important;
}

.dropdown-menu .dropdown-item:hover {
  color: #654321 !important;
  background: #FDF6E3 !important;
}

/* Si ça ne suffit pas, forcer avec plus de spécificité */
#userMenuButton + .dropdown-menu .dropdown-item,
.header .dropdown-menu .dropdown-item {
  color: #8B4513 !important;
}

#userMenuButton + .dropdown-menu .dropdown-item:hover,
.header .dropdown-menu .dropdown-item:hover {
  color: #654321 !important;
  background: #FDF6E3 !important;
}
/* === CORRIGER LE COMPORTEMENT DU MENU DROPDOWN === */

/* Forcer la fermeture du menu après clic */
.dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  transform: none !important; /* Éviter le décalage */
  margin-top: 2px !important;
}

/* Empêcher le décalage au clic */
.dropdown.show .dropdown-menu {
  transform: none !important;
  left: 0 !important;
}

/* Menu se ferme automatiquement */
.dropdown-toggle:focus {
  outline: none !important;
}

/* Alternative : forcer le comportement hover uniquement */
.dropdown:not(:hover) .dropdown-menu {
  display: none !important;
}

.dropdown:hover .dropdown-menu {
  display: block !important;
}
/* === RECENTRER ESPACE CLIENT ET PANIER === */

/* Conteneur principal du header */
.header-nav,
.header-top {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
}

/* Rapprocher les éléments du menu principal */
.header-nav .container,
.header-top .container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Groupe menu principal au centre */
.main-navigation {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
}

/* Groupe espace client + panier à droite mais rapproché */
.header-nav-right,
#_desktop_user_info,
#_desktop_cart {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
}

/* Réduire l'espace entre les éléments */
.header-nav .row {
  gap: 10px !important;
  margin: 0 !important;
}

/* Centrer globalement */
.header {
  text-align: center !important;
}

.header .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
/* === RECENTRER LE HEADER === */

/* Conteneur principal header-top */
.header-top .container-md {
  max-width: 1200px !important;
}

.header-top-desktop {
  justify-content: space-between !important;
  align-items: center !important;
}

/* Section droite avec espace client et panier */
.header-top__right {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 15px !important;
  padding-right: 20px !important;
}

/* Réseaux sociaux plus compacts */
.header-top__right .block-social {
  padding: 0 !important;
  margin-right: 10px !important;
}

/* Rapprocher user info et cart */
#_desktop_user_info,
#_desktop_cart {
  margin: 0 !important;
}

/* Header-bottom pour rapprocher du menu */
.header-bottom__row {
  justify-content: center !important;
  align-items: center !important;
  gap: 30px !important;
}

/* Logo plus compact */
.logo {
  margin-right: 20px !important;
}

/* Menu principal centré */
.main-menu {
  flex: 1 !important;
  justify-content: center !important;
}

/* Réseaux sociaux du bottom plus compact */
.header-bottom #_desktop_socialfollow {
  margin-left: 20px !important;
}

/* Réduire l'espace global */
.header-top,
.header-bottom {
  padding: 10px 0 !important;
}
/* === RECENTRAGE SIMPLE === */

/* Juste rapprocher les éléments dans header-top */
.header-top__right {
  gap: 8px !important;
}

.header-top__right .block-social {
  padding: 0 8px !important;
}

/* Réduire un peu l'espacement global */
.header-top .container-md,
.header-bottom .container-md {
  max-width: 1200px !important;
}
/* === CORRIGER LE MENU QUI SORT DE L'ÉCRAN === */

/* Repositionner le dropdown à gauche au lieu de droite */
#userMenuButton + .dropdown-menu {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

/* Ou utiliser la classe Bootstrap existante */
.dropdown-menu-start {
  left: 0 !important;
  right: auto !important;
}

/* S'assurer que le dropdown reste dans l'écran */
.dropdown-menu {
  position: absolute !important;
  left: auto !important;
  right: 0 !important;
  min-width: 180px !important;
  max-width: 250px !important;
}

/* Pour les petits écrans */
@media (max-width: 768px) {
  .dropdown-menu {
    left: -120px !important;
    right: auto !important;
  }
}
/* === HARMONISER LES OPTIONS DE PAIEMENT === */

/* Conteneur global des options de paiement */
.payment__option {
  background: var(--df-white) !important;
  border: 2px solid var(--df-beige-200) !important;
  border-radius: var(--df-radius) !important;
  padding: 20px !important;
  margin-bottom: 15px !important;
  transition: all 0.3s ease !important;
}

.payment__option:hover {
  border-color: var(--df-brown-700) !important;
  box-shadow: 0 4px 12px rgba(139, 69, 19, 0.1) !important;
}

/* Option sélectionnée */
.payment__option:has(input:checked) {
  border-color: var(--df-brown-700) !important;
  background: var(--df-beige-50) !important;
}

/* Labels des options de paiement */
.payment__option .form-check-label {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  margin-bottom: 0 !important;
  cursor: pointer !important;
  width: 100% !important;
}

/* Boutons radio harmonisés */
.payment__option .form-check-input {
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--df-brown-700) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.payment__option .form-check-input:checked {
  background-color: var(--df-brown-700) !important;
  border-color: var(--df-brown-700) !important;
}

/* Textes des options */
.payment__option span {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--df-brown-900) !important;
  flex: 1 !important;
  line-height: 1.3 !important;
}

/* Logos de paiement alignés */
.payment__option .ps_checkout-mark,
.payment__option .paypal-mark {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.payment__option .paypal-mark {
  background: white !important;
  padding: 8px 12px !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  margin: 0 !important;
}

.payment__option .paypal-mark img,
.payment__option .cards-logo {
  height: 20px !important;
  width: auto !important;
  vertical-align: middle !important;
}

/* Texte PayPal */
.paypal-button-text {
  font-size: 12px !important;
  color: #666 !important;
  margin-left: 4px !important;
}

/* Case à cocher CGV */
.form-check {
  background: var(--df-beige-50) !important;
  border: 1px solid var(--df-beige-200) !important;
  border-radius: 8px !important;
  padding: 15px !important;
  margin-top: 20px !important;
}

.form-check .form-check-input {
  accent-color: var(--df-brown-700) !important;
  margin-right: 10px !important;
}

.form-check .form-check-label {
  color: var(--df-brown-900) !important;
  font-weight: 500 !important;
}

/* Responsive */
@media (max-width: 768px) {
  .payment__option .form-check-label {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  
  .payment__option .ps_checkout-mark {
    align-self: flex-start !important;
  }
}
/* === Fond marron pour le sous-menu === */

/* Container principal du sous-menu */
.menu-container.js-sub-menu,
.shadow-sm.js-sub-menu,
div.menu-container {
    background-color: var(--df-brown-900, #1a0f08) !important;
}

/* Container interne */
.menu-container .container,
.js-sub-menu .container {
    background-color: var(--df-brown-900, #1a0f08) !important;
}

/* Liste */
.menu-container .row,
.js-sub-menu .row {
    background-color: transparent !important;
}

/* Hover - fond marron plus clair */
.menu-container .main-menu__tree__link:hover,
.js-sub-menu .main-menu__tree__link:hover {
    background-color: var(--df-brown-700, #3d2e1f) !important;
}
/* === Disposition horizontale des sous-menus === */

/* Retirer la disposition en colonnes */
.menu-container .row.row-cols-4 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0 !important;
}

/* Items en ligne */
.menu-container li.category {
    width: auto !important;
    flex: 0 0 auto !important;
}

/* Liens côte à côte */
.menu-container .main-menu__tree__link {
    display: inline-block !important;
    white-space: nowrap !important;
    margin-right: 5px !important;
}

/* Positionner le sous-menu directement sous le menu parent */
.dropdown-menu,
.menu-container.js-sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-top: 0 !important;
}

/* Centrer le contenu si nécessaire */
.menu-container .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 15px 20px !important;
}
/* === Garder le sous-menu visible === */

/* Réduire l'espace entre le menu principal et le sous-menu */
.menu-container.js-sub-menu,
.dropdown-menu {
    margin-top: -5px !important; /* Rapprocher le sous-menu */
    padding-top: 15px !important;
}

/* Augmenter la zone cliquable du menu parent */
.dropdown > a,
.category > a {
    padding-bottom: 15px !important;
}

/* S'assurer que le parent garde le hover */
.dropdown:hover > .dropdown-menu,
.dropdown:hover > .menu-container {
    display: block !important;
}

/* Garder visible quand on survole le sous-menu */
.dropdown-menu:hover,
.menu-container.js-sub-menu:hover {
    display: block !important;
}
/* === Positionner le sous-menu sous le menu parent === */

/* Position relative pour le menu parent */
.dropdown,
li.category.dropdown {
    position: relative !important;
}

/* Positionner le sous-menu juste en dessous */
.dropdown > .menu-container.js-sub-menu,
.dropdown > .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    margin-top: -5px !important;
}

/* Si le menu est trop à droite, l'aligner à droite */
.dropdown:last-child > .menu-container.js-sub-menu,
.dropdown:last-child > .dropdown-menu {
    left: auto !important;
    right: 0 !important;
}
/* === Positionner le sous-menu sous le bon menu === */

/* Le parent LI doit avoir position relative */
#top-menu > li,
.top-menu > li,
li[id*="category-"] {
    position: relative !important;
}

/* Sous-menu positionné par rapport à son parent LI */
#top-menu > li > .menu-container.js-sub-menu,
.top-menu > li > .menu-container.js-sub-menu,
li[id*="category-"] > .menu-container.js-sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: max-content !important;
    min-width: 300px !important;
    margin-top: -5px !important;
}

/* Alternative si la structure est différente */
.dropdown-toggle + .menu-container.js-sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
}
/* === Sous-menus en vertical (liste) === */

/* Retirer la disposition en ligne, mettre en colonne */
.menu-container .row.row-cols-4 {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

/* Items en colonne, pleine largeur */
.menu-container li.category {
    width: 100% !important;
    flex: 0 0 auto !important;
}

/* Liens en bloc, pleine largeur */
.menu-container .main-menu__tree__link {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    margin-right: 0 !important;
    padding: 10px 20px !important;
}

/* Ajuster la largeur du container */
.menu-container .container {
    max-width: 250px !important;
    padding: 10px 0 !important;
}
/* Cacher le copyright PrestaShop */
.copyright {
    display: none !important;
}

/* Ajouter votre propre copyright */
footer::after {
    content: "© 2025 Doggy Factory - Tous droits réservés" !important;
    display: block !important;
    text-align: center !important;
    padding: 20px !important;
    color: var(--df-brown-700, #3d2e1f) !important;
    background: var(--df-cream, #f8f6f1) !important;
}
/* Titrage + lisibilité */
.site-footer .footer-title {
  font-size: 1.05rem; font-weight: 700; letter-spacing: .2px;
  margin: 0 0 .6rem;
}
.site-footer .footer-col ul { margin: 0; padding: 0; list-style: none; }
.site-footer .footer-col li { margin: .35rem 0; }

/* Lignes et séparation visuelle */
.footer-top { padding: 2.2rem 0; }
.footer-bottom-inner { border-top: 1px solid rgba(255,255,255,.08); padding-top: .8rem; }

/* Liens : clairs et accessibles */
.site-footer a { text-decoration: none; opacity: .9; }
.site-footer a:hover, .site-footer a:focus { opacity: 1; text-decoration: underline; }

/* Paiements: logos discrets */
.payments-logos img { height: 20px; filter: brightness(0) invert(1); opacity: .85; }

/* Mobile: colonnes “accordéon” (sans gros JS) */
@media (max-width: 575.98px) {
  .footer-col { border-top: 1px solid rgba(255,255,255,.08); padding: .8rem 0; }
  .footer-col .footer-title { cursor: pointer; position: relative; }
  .footer-col .footer-title::after { content: "▾"; position: absolute; right: 0; }
  .footer-col ul { display: none; }
  .footer-col.is-open ul { display: block; margin-top: .5rem; }
}
/* === BLOC RÉASSURANCE - STYLE DOGGY FACTORY === */

.blockreassurance_product {
    background: var(--df-cream, #f8f6f1) !important;
    padding: 30px 20px !important;
    margin: 40px 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-around !important;
    gap: 20px !important;
}

/* Chaque élément de réassurance */
.blockreassurance_product > div {
    flex: 1 1 200px !important;
    min-width: 200px !important;
    max-width: 250px !important;
    text-align: center !important;
    padding: 20px 15px !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    transition: transform 0.3s ease !important;
}

.blockreassurance_product > div:hover {
    transform: translateY(-5px) !important;
}

/* Conteneur de l'icône */
.blockreassurance_product .item-product {
    display: block !important;
    margin-bottom: 15px !important;
}

/* Icônes SVG */
.blockreassurance_product .svg {
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto 10px !important;
    display: block !important;
}

/* Changer la couleur des icônes pour du marron */
.blockreassurance_product .svg path {
    fill: var(--df-brown-700, #3d2e1f) !important;
}

/* Titres */
.blockreassurance_product .block-title {
    color: var(--df-brown-800, #2c1810) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    font-family: "Playfair Display", serif !important;
}

/* Responsive */
@media (max-width: 768px) {
    .blockreassurance_product {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .blockreassurance_product > div {
        min-width: 100% !important;
        margin-bottom: 15px !important;
    }
}
/* === BLOC RÉASSURANCE - STYLE DOGGY FACTORY === */

.blockreassurance_product {
    background: var(--df-cream, #f8f6f1) !important;
    padding: 30px 20px !important;
    margin: 40px 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-around !important;
    gap: 20px !important;
}

/* Chaque élément de réassurance */
.blockreassurance_product > div {
    flex: 1 1 160px !important;
    min-width: 160px !important;
    max-width: 180px !important;
    text-align: center !important;
    padding: 15px 10px !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    transition: transform 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.blockreassurance_product > div:hover {
    transform: translateY(-5px) !important;
}

/* Conteneur de l'icône */
.blockreassurance_product .item-product {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    width: 100% !important;
}

/* Icônes SVG */
.blockreassurance_product .svg {
    width: 50px !important;
    height: 50px !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Changer la couleur des icônes pour du marron */
.blockreassurance_product .svg path {
    fill: var(--df-brown-700, #3d2e1f) !important;
}

/* Titres */
.blockreassurance_product .block-title {
    color: var(--df-brown-800, #2c1810) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    font-family: "Playfair Display", serif !important;
}

/* Responsive */
@media (max-width: 768px) {
    .blockreassurance_product {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .blockreassurance_product > div {
        min-width: 100% !important;
        margin-bottom: 15px !important;
    }
}
/* Forcer l'affichage des 4 éléments */
.blockreassurance_product {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
}

/* S'assurer que tous les éléments sont visibles */
.blockreassurance_product > div {
    flex: 1 1 140px !important;
    min-width: 140px !important;
    max-width: 160px !important;
    margin: 5px !important;
}
/* === BLOC RÉASSURANCE - STYLE DOGGY FACTORY === */

.blockreassurance_product {
    background: var(--df-cream, #f8f6f1) !important;
    padding: 30px 15px !important;
    margin: 40px 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

/* Chaque élément de réassurance */
.blockreassurance_product > div {
    flex: 1 1 calc(25% - 8px) !important;
    min-width: 130px !important;
    max-width: 140px !important;
    text-align: center !important;
    padding: 12px 8px !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    transition: transform 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.blockreassurance_product > div:hover {
    transform: translateY(-5px) !important;
}

/* Conteneur de l'icône */
.blockreassurance_product .item-product {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    width: 100% !important;
}

/* Icônes SVG */
.blockreassurance_product .svg {
    width: 50px !important;
    height: 50px !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Changer la couleur des icônes pour du marron */
.blockreassurance_product .svg path {
    fill: var(--df-brown-700, #3d2e1f) !important;
}

/* Titres */
.blockreassurance_product .block-title {
    color: var(--df-brown-800, #2c1810) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    font-family: "Playfair Display", serif !important;
}

/* Responsive */
@media (max-width: 768px) {
    .blockreassurance_product {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .blockreassurance_product > div {
        min-width: 100% !important;
        margin-bottom: 15px !important;
    }
}
/* === SÉLECTEUR DE QUANTITÉ - Réduction des boutons === */

/* Réduire la largeur des boutons - et + */
.input-group .btn.decrement,
.input-group .btn.increment {
    width: 35px !important;
    min-width: 35px !important;
    max-width: 35px !important;
    height: 35px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Champ de quantité au centre - plus visible */
.input-group .form-control {
    text-align: center !important;
    font-weight: bold !important;
    font-size: 16px !important;
    min-width: 60px !important;
    flex: 0 0 60px !important;
    border: 2px solid var(--df-brown-300, #d4b896) !important;
    border-radius: 0 !important;
    background: white !important;
    color: var(--df-brown-800, #2c1810) !important;
}

/* Container du groupe */
.input-group.flex-nowrap {
    max-width: 130px !important;
    gap: 2px !important;
}

/* Icônes dans les boutons */
.input-group .btn .material-icons {
    font-size: 18px !important;
}

/* Couleurs des boutons */
.input-group .btn.decrement,
.input-group .btn.increment {
    background-color: var(--df-brown-700, #3d2e1f) !important;
    border-color: var(--df-brown-700, #3d2e1f) !important;
    color: white !important;
}

.input-group .btn.decrement:hover,
.input-group .btn.increment:hover {
    background-color: var(--df-brown-600, #4a3426) !important;
}
/* Supprimer le CSS factice précédent */
.product-miniature__variants::before,
.product-miniature__variants::after {
    display: none !important;
}

/* Style pour les vraies variantes */
.product-miniature__variants {
    min-height: auto !important;
}

.product-variants-real {
    display: flex !important;
    gap: 5px !important;
    margin: 5px 0 !important;
}

.variant-option {
    background: var(--df-brown-100, #f5f0e8) !important;
    color: var(--df-brown-700, #3d2e1f) !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-size: 10px !important;
    border: 1px solid var(--df-brown-300, #d4b896) !important;
}
/* === INDICATEUR DE VARIANTES === */
.product-miniature__variants .variants-available {
    margin: 5px 0 !important;
}

.variant-indicator {
    font-size: 11px !important;
    color: var(--df-brown-600, #4a3426) !important;
    background: var(--df-brown-50, #faf7f2) !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    border: 1px solid var(--df-brown-200, #e8dcc6) !important;
    font-style: italic !important;
}
/* === MASQUER AJOUT AU PANIER SUR PRODUITS AVEC VARIANTES === */

/* Masquer le formulaire d'ajout au panier si le produit a des variantes */
.product-miniature[data-id-product-attribute]:not([data-id-product-attribute="0"]) form[action*="panier"] {
    display: none !important;
}

/* Remplacer par un bouton "Voir détails" */
.product-miniature[data-id-product-attribute]:not([data-id-product-attribute="0"])::after {
    content: "" !important;
}

/* Ou ajouter un message explicatif */
.product-miniature[data-id-product-attribute]:not([data-id-product-attribute="0"]) .variants-available::after {
    content: "Cliquez pour choisir vos options" !important;
    display: block !important;
    font-size: 10px !important;
    color: var(--df-brown-500) !important;
    margin-top: 3px !important;
}