@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&family=Inria+Serif:wght@400;700&family=Inspiration&display=swap");

:root {
  --vs-dark: #3d1c10;
  --vs-dark-center: #6b3a2a;
  --vs-accent: #b17f4a;
  --vs-soft: #cab999;
  --vs-title: #432918;
  --vs-title-15: rgba(67, 41, 24, 0.15);
  --vs-overlay-58: rgba(61, 28, 16, 0.58);
  --vs-overlay-30: rgba(61, 28, 16, 0.3);
  --vs-overlay-35: rgba(61, 28, 16, 0.35);
  --vs-overlay-85: rgba(61, 28, 16, 0.85);
}

body {
  color: #000000;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  background-color: transparent;
  background-image: url("../img/background.png");
  background-repeat: no-repeat;
  background-size: cover;
}

/* Espace Professionnel : fond dédié (la classe vs-aud-pro est posée sur <body>). */
body.vs-aud-pro {
  background-image: url("../img/background-pro.png");
}

#wrapper,
#main,
#content-wrapper,
.page-content,
.card,
.card-block {
  background: transparent !important;
}

body::before {
  content: "";
  background: white;
  left: 0;
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0.75;
  z-index: -1;
  pointer-events: none;
}

a {
  transition: .4s all;
  -webkit-transition: .4s all;
  outline: none !important;
}

.page-cms .page-content ul,
.page-cms .page-content p,
.ets_blog_content p,
.ets_blog_content ul {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #000000 !important;
}

/* ============================================================
   BLOCKREASSURANCE — toutes pages (panier, commande, etc.)
   Reprend le même style que la fiche produit
   ============================================================ */
.blockreassurance_product {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.blockreassurance_product>div:not(.clearfix) {
  display: flex;
  align-items: center;
  border: 1px solid #aeafb2;
  min-height: 46px;
  padding-right: 16px;
  gap: 0;
}

.blockreassurance_product>div:not(.clearfix)::before {
  content: "";
  display: block;
  width: 3px;
  min-width: 3px;
  align-self: stretch;
  background: #000;
  border-radius: 3px;
  flex-shrink: 0;
  margin-right: 12px;
}

.blockreassurance_product .item-product img,
.blockreassurance_product .item-product svg {
  display: none !important;
}

.blockreassurance_product .item-product {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 12px;
}

.blockreassurance_product .item-product::before {
  content: "";
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.blockreassurance_product>div:nth-child(1) .item-product::before {
  width: 14px;
  height: 17px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='17' viewBox='0 0 14 17' fill='none'%3E%3Cpath d='M1.75 17C1.26875 17 0.856916 16.8416 0.5145 16.5248C0.172083 16.208 0.000583333 15.8267 0 15.381V7.28571C0 6.84048 0.1715 6.45946 0.5145 6.14267C0.8575 5.82587 1.26933 5.66721 1.75 5.66667H2.625V4.04762C2.625 2.92778 3.05171 1.97335 3.90512 1.18433C4.75854 0.395318 5.79017 0.000540235 7 0C8.20983 0 9.24175 0.394239 10.0957 1.18433C10.9497 1.97443 11.3762 2.92886 11.375 4.04762V5.66667H12.25C12.7312 5.66667 13.1434 5.82533 13.4864 6.14267C13.8294 6.46 14.0006 6.84102 14 7.28571V15.381C14 15.8262 13.8288 16.2075 13.4864 16.5248C13.144 16.8421 12.7318 17.0005 12.25 17H1.75ZM1.75 15.381H12.25V7.28571H1.75V15.381ZM8.23637 12.4764C8.57879 12.1601 8.75 11.7791 8.75 11.3333C8.75 10.8876 8.57879 10.5065 8.23637 10.1903C7.89396 9.87403 7.48183 9.71537 7 9.71429C6.51817 9.71321 6.10633 9.87187 5.7645 10.1903C5.42267 10.5087 5.25117 10.8897 5.25 11.3333C5.24883 11.777 5.42033 12.1582 5.7645 12.4772C6.10867 12.7961 6.5205 12.9545 7 12.9524C7.4795 12.9502 7.89162 12.791 8.23637 12.4764ZM4.375 5.66667H9.625V4.04762C9.625 3.37302 9.36979 2.7996 8.85937 2.32738C8.34896 1.85516 7.72917 1.61905 7 1.61905C6.27083 1.61905 5.65104 1.85516 5.14062 2.32738C4.63021 2.7996 4.375 3.37302 4.375 4.04762V5.66667Z' fill='black'/%3E%3C/svg%3E");
}

.blockreassurance_product>div:nth-child(2) .item-product::before {
  width: 19px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='12' viewBox='0 0 19 12' fill='none'%3E%3Cpath d='M7.22201 10.2994C6.9335 10.5879 6.54219 10.75 6.13416 10.75C5.72614 10.75 5.33482 10.5879 5.04631 10.2994C4.75779 10.0109 4.5957 9.61958 4.5957 9.21155C4.5957 8.80353 4.75779 8.41222 5.04631 8.1237C5.33482 7.83518 5.72614 7.6731 6.13416 7.6731C6.54219 7.6731 6.9335 7.83518 7.22201 8.1237C7.51053 8.41222 7.67262 8.80353 7.67262 9.21155C7.67262 9.61958 7.51053 10.0109 7.22201 10.2994Z' stroke='black' stroke-width='1.5' stroke-miterlimit='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.9143 10.2994C14.6258 10.5879 14.2345 10.75 13.8264 10.75C13.4184 10.75 13.0271 10.5879 12.7386 10.2994C12.4501 10.0109 12.288 9.61958 12.288 9.21155C12.288 8.80353 12.4501 8.41222 12.7386 8.1237C13.0271 7.83518 13.4184 7.6731 13.8264 7.6731C14.2345 7.6731 14.6258 7.83518 14.9143 8.1237C15.2028 8.41222 15.3649 8.80353 15.3649 9.21155C15.3649 9.61958 15.2028 10.0109 14.9143 10.2994Z' stroke='black' stroke-width='1.5' stroke-miterlimit='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.71152 9.21152H11.5192V1.21154C11.5192 1.08913 11.4706 0.971736 11.384 0.885181C11.2975 0.798626 11.1801 0.75 11.0577 0.75H0.75M4.32691 9.21152H2.75C2.68939 9.21152 2.62937 9.19958 2.57337 9.17639C2.51738 9.15319 2.4665 9.1192 2.42364 9.07634C2.38078 9.03348 2.34678 8.9826 2.32359 8.9266C2.3004 8.87061 2.28846 8.81059 2.28846 8.74998V4.98076' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M1.51855 3.05768H4.59547' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.5186 3.05768H15.8339C15.9231 3.0577 16.0104 3.08358 16.0852 3.13218C16.1601 3.18078 16.2192 3.25002 16.2555 3.33152L17.6324 6.42998C17.6586 6.48881 17.6722 6.55248 17.6724 6.6169V8.74997C17.6724 8.81058 17.6604 8.8706 17.6373 8.9266C17.6141 8.98259 17.5801 9.03347 17.5372 9.07633C17.4943 9.11919 17.4435 9.15318 17.3875 9.17638C17.3315 9.19957 17.2715 9.21151 17.2108 9.21151H15.7493M11.5186 9.21151H12.2878' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.blockreassurance_product>div:nth-child(3) .item-product::before {
  width: 18px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16' fill='none'%3E%3Cpath d='M7.22222 10.7222L9.55556 11.5C9.55556 11.5 15.3889 10.3333 16.1667 10.3333C16.9444 10.3333 16.9444 11.1111 16.1667 11.8889C15.3889 12.6666 12.6667 15 10.3333 15C8 15 6.44444 13.8333 4.88889 13.8333H1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 9.16667C1.77778 8.38889 3.33333 7.22222 4.88889 7.22222C6.44444 7.22222 10.1389 8.77778 10.7222 9.55556C11.3056 10.3333 9.55556 11.5 9.55556 11.5M5.66667 4.88889V1.77778C5.66667 1.5715 5.74861 1.37367 5.89447 1.22781C6.04033 1.08194 6.23817 1 6.44444 1H15.7778C15.9841 1 16.1819 1.08194 16.3278 1.22781C16.4736 1.37367 16.5556 1.5715 16.5556 1.77778V8' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.16699 1H13.0559V4.5H9.16699V1Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.blockreassurance_product .block-title {
  font-size: 12px;
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  color: #3d1c10 !important;
  line-height: 1.3;
}

.blockreassurance_product p {
  display: none !important;
}

body.vs-aud-part {
  --vs-dark: #15294d;
  --vs-dark-center: #1e3f6e;
  --vs-accent: #3a6cb0;
  --vs-soft: #9db8de;
  --vs-title: #15294d;
  --vs-title-15: rgba(21, 41, 77, 0.15);
  --vs-overlay-58: rgba(21, 41, 77, 0.58);
  --vs-overlay-30: rgba(21, 41, 77, 0.30);
  --vs-overlay-35: rgba(21, 41, 77, 0.35);
  --vs-overlay-85: rgba(21, 41, 77, 0.85);
}

body.vs-aud-pro {
  --vs-dark: #4d1518;
  --vs-dark-center: #7a2226;
  --vs-accent: #b23b3b;
  --vs-soft: #e0a3a3;
  --vs-title: #4d1518;
  --vs-title-15: rgba(77, 21, 24, 0.15);
  --vs-overlay-58: rgba(77, 21, 24, 0.58);
  --vs-overlay-30: rgba(77, 21, 24, 0.30);
  --vs-overlay-35: rgba(77, 21, 24, 0.35);
  --vs-overlay-85: rgba(77, 21, 24, 0.85);
}

.vs-scope {
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--vs-dark);
}

.vs-container {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 15px;
}

.vs-divider {
  height: 5px;
  width: 100%;
  background: url("../img/divider-gold.png") center/auto 100% repeat-x;
  background-size: cover;
}

#wrapper {
  padding-top: 0 !important;
}

img {
  max-width: 100%;
  height: auto;
}

/* Bandeau fixe au scroll : `position: sticky` est neutralisée sur ce site par
   `html, body { overflow-x: hidden }` (cf. plus bas, technique full-bleed du hero) —
   Chrome n'accroche pas un élément sticky dès que <html>/<body> a un overflow
   explicite. `position: fixed` contourne le problème (non affecté par l'overflow
   des ancêtres) ; le padding-top sur #header compense l'espace libérée (topbar + liseré). */
#header {
  padding-top: 77px;
}

#header .vs-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: var(--vs-scrollbar-w, 0px);
  z-index: 500;
  background: var(--vs-dark);
  background-image: radial-gradient(ellipse 60% 100% at 50% 50%, var(--vs-dark-center) 0%, var(--vs-dark) 100%);
  height: 72px;
  display: flex;
  align-items: center;
}

/* Liseré doré sous le bandeau — fixé juste en dessous pour rester visible avec lui.
   `width: auto` annule le `width: 100%` de la règle .vs-divider générique : sans ça,
   left+right+width seraient sur-contraints et `right` serait ignoré (retour au débord
   sous la scrollbar, cf. .vs-topbar qui lui n'a jamais de width explicite). */
#header .vs-topbar+.vs-divider {
  position: fixed;
  top: 72px;
  left: 0;
  right: var(--vs-scrollbar-w, 0px);
  width: auto;
}

#header .vs-topbar .vs-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
  width: 100%;
  padding-inline: 50px;
}

/* Menu principal dans la topbar — grandes résolutions uniquement (>=1200px).
   En dessous, le nœud est déplacé dans l'off-canvas par custom.js (vsRelocateMainMenu)
   et cette règle ne s'applique plus (l'élément n'est plus dans .vs-topbar__menu). */
#header .vs-topbar .vs-topbar__menu {
  display: none;
}

#content.page-cms-14 {
  display: none !important;
}

#vs-ech-form .vs-cf__label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #333;
}

#vs-ech-form .vs-cf__subtitle {
  font-size: 18px;
  margin: 10px 0 12px;
}

#vs-ech-form .vs-cf__muted {
  font-size: 13px;
  color: #666;
  margin: 8px 0 16px;
}

#vs-ech-form .sample-picker {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  background: #fafafa;
}

#vs-ech-form .sample-search-input {
  margin-bottom: 16px;
  background: #fff;
}

#vs-ech-form .sample-group {
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 6px;
  overflow: hidden;
}

#vs-ech-form .sample-summary {
  padding: 12px 16px;
  font-weight: 600;
  cursor: pointer;
  background: #f4f4f4;
  user-select: none;
}

#vs-ech-form .sample-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  padding: 14px;
  max-height: 620px;
  overflow-y: auto;
}

#vs-ech-form .sample-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #eee;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 0;
}

#vs-ech-form .sample-option:hover {
  background: #f9f9f9;
  border-color: #dcdcdc;
}

#vs-ech-form .sample-option input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

#vs-ech-form .sample-option span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#vs-ech-form .sample-option small {
  display: inline-block;
  width: fit-content;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #eee;
  color: #555;
}

#vs-ech-form .sample-selection {
  margin-top: 16px;
  padding: 12px 16px;
  background: #fff;
  border: 1px dashed #ccc;
  border-radius: 6px;
}

#vs-ech-form .sample-selection h4 {
  margin: 0 0 8px;
  font-size: 15px;
}

#vs-ech-form .sample-selection p {
  margin: 0;
  font-size: 13px;
  color: #777;
}

#vs-ech-form .sample-selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

#vs-ech-form .sample-selected-tags li {
  font-size: 12px;
  background: #eef2f5;
  color: #2c3e50;
  padding: 4px 10px;
  border-radius: 14px;
}


/* Boutons des miniatures produit */
.vs-product-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.vs-add-to-cart-form {
  margin: 0;
  width: 100%;
}

.vs-product-buttons .vs-btn-cart,
.vs-product-buttons .vs-btn-details {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 10px 14px;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.vs-product-buttons .vs-btn-cart {
  background: #790000;
  color: #fff;
  border: 1px solid #790000;
}

.vs-product-buttons .vs-btn-cart:hover {
  background: #5e0000;
  border-color: #5e0000;
}

.vs-product-buttons .vs-btn-details {
  background: transparent;
  color: #790000;
  border: 1px solid #790000;
}

.vs-product-buttons .vs-btn-details:hover {
  background: #790000;
  color: #fff;
}

/* Conteneur global du fil d'Ariane pour gérer l'alignement global */
#wrapper .breadcrumb {
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
  background: transparent;
  padding-left: 0;
}

#wrapper .breadcrumb ol {
  margin-bottom: 0;
}

#wrapper .breadcrumb {
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
  background: transparent;
  padding-left: 0;
}

#wrapper .breadcrumb ol {
  margin-bottom: 0;
}

.vs-catalogue-container {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.vs-btn-catalogue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #023B64 !important;
  color: #ffffff !important;
  padding: 12px 22px;
  border-radius: 7px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.vs-btn-catalogue:hover {
  background-color: #034c82 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.vs-btn-catalogue i.material-icons {
  font-size: 24px;
  line-height: 1;
  color: #ffffff !important;
}

.vs-btn-catalogue i.material-icons:not(.material-icons-loaded) {
  visibility: hidden;
}



/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  #js-product-list .products.row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  #js-product-list .products.row {
    grid-template-columns: 1fr;
  }

  #js-product-list .vs-card .product-thumbnail img {
    height: 224px;
  }

  #js-product-list .vs-card .product-title {
    min-height: 0;
    font-size: 20px;
  }

  #js-product-list .vs-btn {
    min-height: 43px;
    font-size: 13px;
  }

  #js-product-list .vs-pricebox__row strong {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #js-product-list .vs-btn {
    transition: none;
  }
}

@media print {
  #js-product-list .vs-card .thumbnail-container {
    box-shadow: none;
    break-inside: avoid;
  }
}

@media (min-width: 1400px) {
  #header .vs-topbar .vs-topbar__menu {
    display: flex;
    align-items: center;
    margin-right: auto;
  }

  #header .vs-topbar .vs-topbar__menu .top-menu {
    display: flex !important;
    align-items: center;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 15px !important;
  }

  #header .vs-topbar .vs-topbar__menu .top-menu>li {
    display: block !important;
    width: auto !important;
    float: none !important;
  }

  #header .vs-topbar .vs-topbar__menu .top-menu>li>a {
    display: inline-flex !important;
    align-items: center;
    padding: 0 !important;
    color: #cab999 !important;
    font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: normal !important;
    white-space: nowrap !important;
    background: transparent !important;
    transition: color 0.2s ease;
  }

  #header .vs-topbar .vs-topbar__menu .top-menu>li>a:hover,
  #header .vs-topbar .vs-topbar__menu .top-menu>li>a:focus,
  #header .vs-topbar .vs-topbar__menu .top-menu>li>a.active {
    color: #ffffff !important;
  }

  /* Sous-menus / bascules masqués — même traitement que la version off-canvas :
     le menu est quasiment plat, on n'implémente pas de mega-menu déroulant. */
  #header .vs-topbar .vs-topbar__menu .top-menu .sub-menu,
  #header .vs-topbar .vs-topbar__menu .top-menu .category-sub-menu,
  #header .vs-topbar .vs-topbar__menu .top-menu .arrow,
  #header .vs-topbar .vs-topbar__menu .collapse-icons,
  #header .vs-topbar .vs-topbar__menu .navbar-toggler {
    display: none !important;
  }
}

#header .vs-topbar .vs-topbar__links {
  display: flex;
  align-items: center;
  gap: 10px;
}

#header .vs-topbar .vs-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #cab999;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

#header .vs-topbar .vs-topbar__link i {
  font-size: 18px;
  line-height: 1;
}

/* Groupe audience (Particulier | Professionnel) — liens rapprochés + séparateur */
#header .vs-topbar .vs-topbar__audience {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

#header .vs-topbar .vs-topbar__sep {
  color: #cab999;
  font-size: 16px;
  line-height: 1;
  user-select: none;
}

/* Boutons de bascule d'audience (topbar) — même rendu que les liens de la topbar.
   L'espace actif est en blanc + gras ; l'accent bleu/rouge reste réservé aux bandeaux. */
#header .vs-topbar .vs-aud-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #cab999;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s ease;
}

#header .vs-topbar .vs-aud-toggle:hover,
#header .vs-topbar .vs-aud-toggle:focus-visible {
  color: #ffffff;
}

#header .vs-topbar .vs-aud-toggle.is-active {
  color: #ffffff;
  font-weight: 700;
}

/* Bascule d'audience dans l'off-canvas (mobile) — touch targets >=44px */
.vs-offcanvas__audience {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
}

.vs-offcanvas__audience .vs-aud-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 0;
  min-height: 44px;
  cursor: pointer;
  color: #ffffff;
  opacity: 0.7;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.vs-offcanvas__audience .vs-aud-toggle:hover,
.vs-offcanvas__audience .vs-aud-toggle:focus-visible {
  opacity: 1;
}

.vs-offcanvas__audience .vs-aud-toggle.is-active {
  opacity: 1;
  font-weight: 700;
}

.vs-offcanvas__audience-sep {
  color: #ffffff;
  opacity: 0.5;
  user-select: none;
}

#header .vs-topbar .vs-topbar__icon {
  flex-shrink: 0;
  width: 20px !important;
  height: 20px !important;
}

/* .active (page courante, posée par custom.js/vsMarkActiveLinks) = même rendu que hover */
#header .vs-topbar .vs-topbar__link:hover,
#header .vs-topbar .vs-topbar__link:focus,
#header .vs-topbar .vs-topbar__link.active {
  color: #ffffff;
}

#header .vs-topbar .vs-cart-count {
  font-weight: 700;
}

/* Focus clavier visible (accessibilité) sur tous les liens/boutons du bandeau et du menu */
#header .vs-topbar a:focus-visible,
#header .vs-topbar button:focus-visible,
.vs-offcanvas a:focus-visible,
.vs-offcanvas button:focus-visible {
  outline: 2px solid #cab999;
  outline-offset: 3px;
}

/* Recherche PrestaShop native (module ps_searchbar, hook displaySearch) — recolorée
   pour s'intégrer au bandeau sombre (le module hérite du style clair de Classic). */
#header .vs-topbar .vs-topbar__search {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

#header .vs-topbar .vs-topbar__search #search_widget {
  display: flex;
  align-items: center;
  min-width: auto;
}

#header .vs-topbar .vs-topbar__search form {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #cab999;
  border-radius: 12px;
  padding: 4px 40px;
}

/* Icônes .search/.clear du module recentrées en absolute (top:50% + translateY) —
   indépendant de la hauteur de l'input, donc toujours centré verticalement quel
   que soit le font-size. Le padding gauche/droit du form leur laisse la place,
   sinon le texte saisi s'affiche sous l'icône. */
#header .vs-topbar .vs-topbar__search input[type="text"] {
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  width: 140px;
  padding: 0;
  color: #ffffff;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

#header .vs-topbar .vs-topbar__search input[type="text"]::placeholder {
  color: #cab999;
  opacity: 1;
}

#header .vs-topbar .vs-topbar__search .material-icons.search {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  color: #cab999;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

#header .vs-topbar .vs-topbar__search .material-icons.clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  color: #cab999;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

#header .vs-topbar .vs-topbar__search form:focus-within,
#header .vs-topbar .vs-topbar__search form:hover {
  border-color: #ffffff;
}

#header .vs-topbar .vs-topbar__search form:focus-within .material-icons.search,
#header .vs-topbar .vs-topbar__search form:hover .material-icons.search {
  color: #ffffff;
}

/* Palier intermédiaire — resserre le menu/liens/recherche entre 992px (apparition du
   menu principal) et 1700px, avant que le mode compact (burger, <=991px) ne prenne le
   relais. Placé après le bloc >=992px et avant les blocs <=991px/<=576px pour que ces
   derniers gardent la main sur leurs propres valeurs, déjà ajustées plus étroitement. */
@media (max-width: 1700px) {

  /* !important nécessaire : la règle >=992px déclare gap: 26px !important pour
     primer sur le CSS natif du module ps_mainmenu — sans !important ici, ce palier
     était silencieusement ignoré. */
  #header .vs-topbar .vs-topbar__menu .top-menu {
    gap: 9px !important;
  }

  #header .vs-topbar .vs-topbar__links {
    gap: 15px;
  }

  #header .vs-topbar .vs-topbar__search input[type="text"] {
    width: 120px;
  }

  #header .vs-topbar .vs-topbar__menu .top-menu>li>a {
    font-size: 14px !important;
  }

  #header .vs-topbar .vs-topbar__link {
    font-size: 15px;
  }
}


/* En dessous de 1800px : la topbar passe sur 2 lignes — menu principal en haut,
   reste (recherche/compte/panier) en dessous, chaque ligne centrée.
   La hauteur n'est plus figée (le contenu sur 2 lignes ne rentre plus dans 72px) :
   mesurée en JS (vsSetTopbarHeight) et exposée via --vs-topbar-h pour repositionner
   le liseré doré et compenser via le padding-top de #header. */
@media (max-width: 1800px) {
  #header {
    padding-top: calc(var(--vs-topbar-h, 108px) + 5px);
  }

  #header .vs-topbar {
    height: auto;
    padding-block: 14px;
  }

  #header .vs-topbar+.vs-divider {
    top: var(--vs-topbar-h, 108px);
  }

  #header .vs-topbar .vs-topbar__inner {
    flex-wrap: wrap;
    row-gap: 12px;
    padding-inline: 30px;
  }

  #header .vs-topbar .vs-topbar__menu {
    flex: 0 0 100%;
    justify-content: center;
    margin-right: 0;
  }

  #header .vs-topbar .vs-topbar__links {
    flex: 0 0 100%;
    justify-content: center;
  }
}

a.vs-social-icon,
.vs-social-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border: 1.5px solid var(--vs-soft) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--vs-soft) !important;
  font-size: 13px;
  text-decoration: none !important;
  flex-shrink: 0;
  padding: 0 !important;
  box-shadow: none !important;
  transition: color 0.2s ease, border-color 0.2s ease;
}

a.vs-social-icon svg,
.vs-social-icon svg {
  display: block;
  flex-shrink: 0;
}

a.vs-social-icon:hover,
a.vs-social-icon:focus,
.vs-social-icon:hover,
.vs-social-icon:focus {
  color: #ffffff !important;
  border-color: #ffffff !important;
  background: transparent !important;
  outline: none;
}

#header .vs-burger {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

#header .vs-burger .vs-burger__lines {
  position: relative;
  display: block;
  width: 26px;
  height: 18px;
}

#header .vs-burger .vs-burger__lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}

#header .vs-burger .vs-burger__lines span:nth-child(1) {
  top: 0;
}

#header .vs-burger .vs-burger__lines span:nth-child(2) {
  top: 8px;
}

#header .vs-burger .vs-burger__lines span:nth-child(3) {
  top: 16px;
}

.vs-offcanvas {
  position: fixed;
  inset: 0;
  z-index: 3000;
  visibility: hidden;
}

.vs-offcanvas .vs-offcanvas__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* Panel — glisse depuis la gauche, couvre ~45% de l'écran */
.vs-offcanvas .vs-offcanvas__panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: min(620px, 46%);
  background: rgba(8, 4, 4, 0.82);
  color: #ffffff;
  padding: 140px 60px 40px;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Bouton fermer — même position que le burger (top-left) */
.vs-offcanvas .vs-offcanvas__close {
  position: absolute;
  top: 68px;
  left: 80px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  outline: none;
  box-shadow: none;
  color: #b17f4a;
  cursor: pointer;
}

.vs-offcanvas .vs-offcanvas__close i {
  font-size: 32px;
}

.vs-offcanvas .vs-offcanvas__close:hover {
  color: #cab999;
}

/* Séparateur entre close et menu — couleur dorée */
.vs-offcanvas .vs-offcanvas__sep {
  border: 0;
  border-top: 1px solid #beae91;
  margin: 0 0 40px;
  flex-shrink: 0;
}

/* Liens du menu — grands, blancs, uppercase */
.vs-offcanvas .vs-offcanvas__list {
  list-style: none;
  margin: 0 0 auto;
  padding: 0;
}

.vs-offcanvas .vs-offcanvas__list li+li {
  margin-top: 4px;
}

.vs-offcanvas .vs-offcanvas__list a {
  display: block;
  padding: 10px 0;
  color: #ffffff;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  text-decoration: none;
  line-height: normal;
  transition: opacity 0.2s ease, padding-left 0.2s ease;
}

.vs-offcanvas .vs-offcanvas__list a:hover,
.vs-offcanvas .vs-offcanvas__list a:focus {
  opacity: 0.65;
  padding-left: 8px;
}

.vs-offcanvas .vs-offcanvas__social {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 32px;
  flex-shrink: 0;
}

body.vs-nav-open {
  overflow: hidden;
}

body.vs-nav-open .vs-hero .vs-hero__burger,
body.vs-nav-open #header .vs-cms-header__burger,
body.vs-nav-open #header .vs-topbar__burger {
  opacity: 0;
  pointer-events: none;
}

body.vs-nav-open .vs-offcanvas {
  visibility: visible;
}

body.vs-nav-open .vs-offcanvas__backdrop {
  opacity: 1;
}

body.vs-nav-open .vs-offcanvas__panel {
  transform: translateX(0);
}

/* =========================================================
   Masquer le rendu ps_mainmenu flottant (hook displayNavFullWidth)
   ========================================================= */
.js-top-menu-container,
.top-menu-container,
#_mobile_top_menu_wrapper {
  display: none !important;
}

/* =========================================================
   ps_mainmenu dans l'offcanvas — spécificité #header + classe
   ========================================================= */
#header .vs-offcanvas__menu .js-top-menu-container,
#header .vs-offcanvas__menu .top-menu-container {
  display: block !important;
}

.vs-offcanvas__menu .top-menu {
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  gap: 0 !important;
}

.vs-offcanvas__menu .top-menu>li {
  display: block !important;
  width: 100% !important;
  float: none !important;
}

.vs-offcanvas__menu .top-menu>li>a,
.vs-offcanvas__menu .top-menu>li>.category-sub-menu>a {
  display: block !important;
  padding: 10px 0 !important;
  color: #ffffff !important;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  line-height: normal !important;
  white-space: nowrap !important;
  transition: opacity 0.2s ease, padding-left 0.2s ease;
  background: transparent !important;
}

.vs-offcanvas__menu .top-menu>li>a:hover,
.vs-offcanvas__menu .top-menu>li>a:focus,
.vs-offcanvas__menu .top-menu>li>a.active {
  opacity: 0.65 !important;
  padding-left: 8px !important;
  color: #ffffff !important;
}

.vs-offcanvas__menu .top-menu .sub-menu,
.vs-offcanvas__menu .top-menu .category-sub-menu {
  display: none !important;
}

.vs-offcanvas__menu .top-menu .arrow,
.vs-offcanvas__menu .collapse-icons,
.vs-offcanvas__menu .navbar-toggler {
  display: none !important;
}

/* =========================================================
   Sections pleine largeur — structure : section > .vs-container
   La section est 100% large, fond couvre 100%, contenu = container
   ========================================================= */
.vs-section {
  width: 100%;
  position: relative;
}

.vs-container-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 15px;
}

/* =========================================================
   Backgrounds forcés brun (#3d1c10) — indépendants de l'audience
   ========================================================= */
.vs-triptych {
  background: #3d1c10 !important;
}

#footer .vs-footer {
  background: #3d1c10 !important;
}

/* Offcanvas disponible sur toutes les tailles — burger sur le héro */

@media (max-width: 767px) {
  .vs-offcanvas__menu .hidden-sm-down {
    display: block !important;
  }

  /* Le module ps_searchbar applique un margin-bottom via le CSS Classic sur petits
     écrans — on l'annule pour garder la 2e ligne (recherche + liens) bien centrée. */
  #header .vs-topbar .vs-topbar__search #search_widget {
    margin-bottom: 0;
  }
}

@media (max-width: 768px) {
  .vs-offcanvas .vs-offcanvas__panel {
    width: 100%;
    padding: 80px 30px 40px;
  }

  .vs-offcanvas .vs-offcanvas__close {
    top: 24px;
    left: 24px;
  }

  .vs-offcanvas__menu .top-menu>li>a,
  .vs-offcanvas .vs-offcanvas__list a {
    font-size: 18px !important;
  }
}

/* A partir de 1399px : le menu principal (1re ligne) est remplacé par le burger, au
   même emplacement — la structure 2 lignes du palier <=1800px est conservée telle
   quelle (hauteur dynamique --vs-topbar-h, wrap, liseré repositionné : rien à
   réinitialiser ici, seul le contenu de la 1re ligne change). */
@media (max-width: 1399px) {
  #header .vs-burger {
    display: inline-flex;
  }

  /* !important nécessaire : une règle plus bas dans le fichier (section "burger
     catalogue") déclare `#header .vs-topbar .vs-topbar__burger { display: none; }`
     sans media query, avec une spécificité égale mais un ordre de source postérieur —
     elle gagnerait sinon quelle que soit la largeur d'écran. */
  #header .vs-topbar .vs-topbar__burger {
    display: inline-flex !important;
    flex: 0 0 100%;
  }

  #header .vs-topbar .vs-topbar__links {
    gap: 16px;
    justify-content: center;
    flex: 0 0 100%;
    min-width: 0;
  }

  #header .vs-topbar .vs-topbar__link {
    font-size: 13px;
    gap: 6px;
  }

  #header .vs-topbar .vs-topbar__icon {
    width: 18px !important;
    height: 18px !important;
  }

  #header .vs-topbar .vs-topbar__search form {
    padding: 4px 30px;
  }

  #header .vs-topbar .vs-topbar__search input[type="text"] {
    width: 90px;
    font-size: 13px;
  }

  #header .vs-topbar .vs-topbar__search .material-icons.search {
    left: 10px;
    font-size: 18px;
  }

  #header .vs-topbar .vs-topbar__search .material-icons.clear {
    right: 10px;
  }
}

@media (max-width: 575px) {
  #header .vs-topbar .vs-topbar__inner {
    gap: 4px;
    padding-inline: 8px;
  }

  /* 3 éléments restants (recherche + icônes compte/panier) — l'onglet Professionnel
     a été retiré du header. Une seule ligne centrée, largeurs naturelles ; wrap
     seulement si l'espace manque vraiment (très petits écrans). */
  #header .vs-topbar .vs-topbar__links {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 14px;
    row-gap: 10px;
  }

  #header .vs-topbar .vs-topbar__links>.vs-topbar__link,
  #header .vs-topbar .vs-topbar__links>.vs-topbar__search {
    flex: 0 0 auto;
    justify-content: center;
  }

  #header .vs-topbar .vs-topbar__link {
    font-size: 13px;
    gap: 6px;
  }

  #header .vs-topbar .vs-topbar__icon {
    width: 18px !important;
    height: 18px !important;
  }

  #header .vs-topbar .vs-topbar__search form {
    padding: 4px 30px;
    border-radius: 10px;
  }

  #header .vs-topbar .vs-topbar__search input[type="text"] {
    width: 90px;
    font-size: 13px;
  }

  #header .vs-topbar .vs-topbar__search .material-icons.search {
    left: 10px;
    font-size: 18px;
  }

  #header .vs-topbar .vs-topbar__search .material-icons.clear {
    right: 10px;
    font-size: 16px;
  }
}

/* =========================================================
   HEADER 2 BANDES (>=1400px ; burger en dessous)
   - Bande 1 (haut) : liens utilitaires alignés à DROITE
     (bascule audience → compte → panier → recherche).
   - Bande 2 (bas) : menu principal pleine largeur, entrées
     étalées bord à bord (space-between).
   Placé après les paliers précédents : gagne par ordre de source.
   La hauteur réelle (2 lignes) est mesurée par custom.js
   (--vs-topbar-h) qui repositionne le liseré et l'offset #header.
   ========================================================= */
@media (min-width: 1400px) {
  #header {
    padding-top: calc(var(--vs-topbar-h, 118px) + 5px);
  }

  #header .vs-topbar {
    height: auto;
    display: block;
    padding-block: 0;
  }

  #header .vs-topbar+.vs-divider {
    top: var(--vs-topbar-h, 118px);
  }

  #header .vs-topbar .vs-topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    row-gap: 0;
    padding-inline: 0;
  }

  /* Ligne 1 : liens utilitaires à droite */
  #header .vs-topbar .vs-topbar__links {
    order: 1;
    flex: 0 0 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 22px;
    padding: 12px 50px;
  }

  /* Ligne 2 : menu pleine largeur, entrées centrées, séparé de la bande haute
     par un liseré doré fin. */
  #header .vs-topbar .vs-topbar__menu {
    display: flex;
    order: 2;
    flex: 0 0 100%;
    justify-content: center;
    margin: 0;
    padding: 15px 50px;
    border-top: 1px solid #cab999;
    background: rgba(0, 0, 0, 0.12);
  }

  /* Le menu est enveloppé dans #_desktop_top_menu (requis par le JS de déplacement
     vsRelocateMainMenu) : ce conteneur se réduit à la largeur du contenu. On le force
     en pleine largeur pour que le centrage du .top-menu porte sur toute la bande. */
  #header .vs-topbar .vs-topbar__menu #_desktop_top_menu {
    flex: 1 1 auto;
    width: 100%;
  }

  #header .vs-topbar .vs-topbar__menu .top-menu {
    display: flex !important;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #header .vs-topbar .vs-topbar__menu .top-menu>li {
    flex: 0 0 auto;
  }
}

/* Bande menu resserrée pour faire tenir les entrées sur une ligne (burger sous 1400px).
   Placé après le bloc >=1400px (gap 24px !important) pour primer par ordre de source.
   Largeurs mesurées (FR, gap 10px) : 13px ≈ 1382px, 15px ≈ 1574px de menu. */
@media (min-width: 1400px) and (max-width: 1850px) {
  #header .vs-topbar .vs-topbar__menu .top-menu {
    gap: 10px !important;
  }
}

@media (min-width: 1400px) and (max-width: 1700px) {
  #header .vs-topbar .vs-topbar__menu {
    padding: 15px 20px;
  }

  #header .vs-topbar .vs-topbar__menu .top-menu>li>a {
    font-size: 13px !important;
  }
}

@media (min-width: 1400px) and (max-width: 1500px) {
  #header .vs-topbar .vs-topbar__menu {
    padding: 15px 5px;
  }
}

.vs-intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  /* Fond botanique (Figma 83:533) : brun #3d1c10 + motif très discret (~5%),
     obtenu par un voile brun quasi opaque au-dessus de l'image. */
  background:
    linear-gradient(rgba(61, 28, 16, 0.94), rgba(61, 28, 16, 0.94)),
    url("../img/intro-bg-botanical.png") center/cover no-repeat;
  background-color: #3d1c10;
  display: flex;
  flex-direction: column;
  overflow: auto;
  --vs-dark: #3d1c10;
  --vs-soft: #cab999;
}

.vs-intro--hidden {
  display: none !important;
}

.vs-intro__bar-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 50px;
  background: #3d1c10;
  min-height: 45px;
}

.vs-intro__bar-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 50px;
  background: #3d1c10;
}

.vs-intro__bar-bottom::before,
.vs-intro__bar-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: url("../img/divider-gold.png") center/auto 100% repeat-x;
}

.vs-intro__bar-bottom::before {
  top: 0;
}

.vs-intro__bar-bottom::after {
  bottom: 0;
}

.vs-intro__social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Sélecteur de langue FR/EN de l'intro (injecté par custom.js : vsBuildIntroLang).
   Poussé tout à droite de la bande 2 (margin-left:auto) → les réseaux sociaux
   restent à gauche. Charte dorée de l'intro (--vs-soft) + trait séparateur, style
   aligné sur le switcher du menu (.vs-lang). */
.vs-intro__lang {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}

.vs-intro__lang-link {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  color: var(--vs-soft) !important;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.6;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.vs-intro__lang-link:first-child {
  padding-left: 0;
}

.vs-intro__lang-link:last-child {
  padding-right: 0;
}

.vs-intro__lang-link:hover,
.vs-intro__lang-link:focus {
  color: #ffffff !important;
  opacity: 1;
}

.vs-intro__lang-link.is-active {
  opacity: 1;
  font-weight: 700;
  color: #ffffff !important;
}

.vs-intro__lang-link+.vs-intro__lang-link {
  border-left: 1px solid currentColor;
}

.vs-intro__choices {
  display: flex;
  align-items: center;
  gap: 15px;
}

.vs-intro__choice {
  color: var(--vs-soft) !important;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 20px;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  /* Cadre doré propre à CHAQUE bouton (boutons séparés) */
  border: 1px solid #cab999;
  border-radius: 3px;
  cursor: pointer;
  line-height: normal;
  padding: 8px 20px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vs-intro__choice:hover,
.vs-intro__choice:focus {
  color: #ffffff !important;
  border-color: #ffffff;
  background-color: rgba(202, 185, 153, 0.15);
}

.vs-intro__divider {
  height: 6px;
  background: url("../img/divider-gold.png") center/auto 100% repeat-x;
}

.vs-intro__center {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  padding: 50px 15px;
}

/* Logo doré (Figma 2516:2206, 430×636) — l'image source (carrée) est recadrée
   dans un cadre portrait via les mêmes transforms que Figma. */
.vs-intro__logo {
  position: relative;
  flex: 0 0 auto;
  width: clamp(240px, 30vw, 430px);
  aspect-ratio: 430 / 636;
  overflow: hidden;
}

.vs-intro__logo img {
  position: absolute;
  top: -7.56%;
  left: -20%;
  width: 159.01%;
  height: 107.56%;
  max-width: none;
}

/* Colonne ambassadeur (Figma 2516:2213) : portrait + légende */
.vs-intro__amb {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 25px;
}

.vs-intro__amb-img {
  display: block;
  width: clamp(200px, 22vw, 319px);
  aspect-ratio: 319 / 422;
  height: auto;
  object-fit: cover;
}

.vs-intro__amb-name {
  margin: 0;
  color: #ffffff;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
}

@media (max-width: 768px) {
  .vs-intro__bar-top {
    padding: 10px 15px;
    justify-content: center;
  }

  .vs-intro__bar-bottom {
    padding: 14px 15px;
    justify-content: center;
  }

  .vs-intro__choice {
    font-size: 15px;
    padding: 7px 12px;
  }

  .vs-intro__lang-link {
    font-size: 15px;
    padding: 0 8px;
  }

  .vs-intro__center {
    flex-direction: column;
    gap: 24px;
    padding: 30px 15px;
  }

  .vs-intro__amb {
    align-items: center;
  }

  .vs-intro__amb-name {
    text-align: center;
  }
}

/* Bande séparatrice dorée (83:793) — même largeur que le hero */
.vs-band-divider {
  display: none !important;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: #3d1c10;
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0;
}

.vs-band-divider .vs-divider {
  height: 5px;
  width: 100%;
  flex-shrink: 0;
}

/* Supprime la marge basse du bloc footer (évite l'espace blanc sous la bande réassurance). */
#main .page-footer {
  margin-bottom: 0;
}

/* Bloc réassurance (pictos) au-dessus du footer — bande dorée pleine largeur.
   Même breakout 100vw que le divider (robuste quel que soit le conteneur). */
.vs-reassurance {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  background: #ab80361f;
  padding: 34px 15px;
  border-top: 1px solid #AEAFB2;
}

.vs-reassurance__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 64px;
}

.vs-reassurance__item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.vs-reassurance__icon {
  flex: 0 0 auto;
  line-height: 0;
  color: #a5813a;
}

.vs-reassurance__icon svg {
  width: 38px;
  height: 38px;
  display: block;
}

.vs-reassurance__label {
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #2b2b2b;
}

@media (max-width: 767px) {
  .vs-reassurance__inner {
    flex-direction: column;
    gap: 22px;
  }
}

.vs-footer-divider {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  height: 55px;
  background: var(--vs-dark);
  background-image: radial-gradient(ellipse 60% 100% at 50% 50%, var(--vs-dark-center) 0%, var(--vs-dark) 100%);
  display: flex;
  align-items: center;
  padding: 0;
}

.vs-footer-divider .vs-divider {
  height: 5px;
  width: 100%;
  flex-shrink: 0;
}

/* Hero full-bleed — sort du container Bootstrap */
html,
body {
  overflow-x: hidden;
}

.vs-hero {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  /* L'image reste comme "poster" affiché derrière l'iframe le temps que YouTube charge. */
  background: var(--vs-dark) url("../img/hero-chef.webp") center/cover no-repeat;
  aspect-ratio: 1920/970;
  overflow: hidden;
  border-bottom: 3px solid #ffffff;
}

/* Vidéo de fond YouTube — recouvre le hero (technique "cover" en unités viewport :
   le hero fait toujours 100vw de large ; on dimensionne l'iframe pour qu'elle dépasse
   le hero dans les 2 axes tout en gardant le ratio 16:9, overflow:hidden recadre).
   pointer-events:none : aucune interaction possible avec l'iframe (pas de pause, pas
   d'overlays YouTube au survol). */
.vs-hero .vs-hero__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  background: #16210f;
  /* fond sombre anti-flash avant lecture */
}

.vs-hero .vs-hero__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
  display: block;
}

.vs-hero .vs-hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 100%;
  margin-inline: auto;
}

/* Burger héro — Figma 83:1580 : top:68px left:80px, fond brun 30%, padding 15px, icône 35x35.
   Toujours redondant avec le burger de la topbar (visible à toutes les résolutions
   maintenant : menu >=992px, burger topbar <=991px) : masqué en permanence. */
.vs-hero .vs-hero__burger {
  position: absolute;
  top: 68px;
  left: 80px;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  padding: 15px;
  background: rgba(61, 28, 16, 0.3);
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.vs-hero .vs-hero__burger:hover {
  background: rgba(61, 28, 16, 0.58);
}

.vs-hero .vs-hero__burger .vs-burger__lines {
  position: relative;
  display: block;
  width: 35px;
  height: 24px;
}

.vs-hero .vs-hero__burger .vs-burger__lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}

.vs-hero .vs-hero__burger .vs-burger__lines span:nth-child(1) {
  top: 0;
}

.vs-hero .vs-hero__burger .vs-burger__lines span:nth-child(2) {
  top: 11px;
}

.vs-hero .vs-hero__burger .vs-burger__lines span:nth-child(3) {
  top: 22px;
}

.vs-hero .vs-hero__play {
  position: absolute;
  top: 7%;
  left: 6%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background: var(--vs-overlay-30);
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.vs-hero .vs-hero__play img {
  width: 35px;
  height: 35px;
}

.vs-hero .vs-hero__play:hover {
  background: var(--vs-overlay-58);
}

/* Logo hero — haut-gauche, taille réduite (auparavant centré-droit, 30% / 444px max). */
.vs-hero .vs-hero__card {
  position: absolute;
  top: 30px;
  left: 40px;
  right: auto;
  width: clamp(120px, 25vw, 220px);
  height: auto;
  z-index: 3;
}

.vs-hero .vs-hero__card-btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.vs-hero .vs-hero__card-btn img {
  display: block;
  width: 100%;
  height: auto;
}

.vs-hero .vs-hero__card-btn:hover {
  opacity: 0.92;
}

/* Logo AB (Agriculture Biologique) — coin bas-droit de la vidéo, mêmes marges que le
   logo principal par rapport aux bords (top:30px/left:40px → bottom:30px/right:40px). */
.vs-hero .vs-hero__ab {
  position: absolute;
  bottom: 30px;
  right: 40px;
  z-index: 3;
  width: clamp(64px, 9vw, 100px);
  height: auto;
}

.vs-hero .vs-hero__ab img {
  display: block;
  width: 100%;
  height: auto;
}

/* CTA hero — 2 boutons centrés en largeur, positionnés dans le tiers bas du hero.
   Bordure or + texte blanc sur fond sombre translucide (lisible sur la vidéo),
   remplissage or au survol. Le contenu (libellés/liens) diffère par boutique (index.tpl). */
.vs-hero .vs-hero__cta {
  position: absolute;
  left: 50%;
  bottom: 35%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: max-content;
  max-width: 92%;
}

.vs-hero .vs-hero__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 34px;
  border: 2px solid #cab999;
  border-radius: 8px;
  background: rgba(30, 20, 15, 0.35);
  color: #ffffff;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vs-hero .vs-hero__cta-btn:hover,
.vs-hero .vs-hero__cta-btn:focus {
  background: #cab999;
  border-color: #cab999;
  color: var(--vs-dark);
  outline: none;
}

@media (max-width: 767px) {
  .vs-hero .vs-hero__cta {
    bottom: 8%;
    gap: 12px;
    width: auto;
    max-width: 94%;
  }

  .vs-hero .vs-hero__cta-btn {
    padding: 11px 20px;
    font-size: 13px;
    white-space: normal;
  }
}

/* <480px : le hero (16:9) est court et le logo occupe une grande part de sa hauteur ;
   on compacte les boutons (padding + police réduits) et on les colle en bas pour
   qu'ils ne chevauchent plus le logo — la vidéo reste intacte (aucun changement de hauteur). */
@media (max-width: 479px) {
  .vs-hero .vs-hero__cta {
    bottom: 5%;
    gap: 8px;
  }

  .vs-hero .vs-hero__cta-btn {
    padding: 8px 14px;
    font-size: 11px;
    border-width: 1.5px;
  }
}

/* <=991px : la vidéo 16:9 s'affiche EN ENTIER (plus de recadrage du mode "cover").
   Le hero adopte le ratio 16:9 et la vidéo le remplit en "contain" (aucun recadrage). */
@media (max-width: 991px) {
  .vs-hero {
    aspect-ratio: 16 / 9;
  }

  .vs-hero .vs-hero__video video {
    object-fit: contain;
  }
}

@media (max-width: 768px) {
  .vs-hero .vs-hero__burger {
    top: 20px;
    left: 20px;
    width: 52px;
    height: 52px;
  }

  /* Logo maintenu en haut-gauche (comme desktop), un cran plus petit — mais pas trop. */
  .vs-hero .vs-hero__card {
    top: 16px;
    left: 16px;
    width: clamp(120px, 36vw, 190px);
    padding: 0;
    margin: 0;
  }

  /* Logo AB : mêmes marges réduites que le logo principal (16px des bords). */
  .vs-hero .vs-hero__ab {
    bottom: 16px;
    right: 16px;
    width: clamp(50px, 13vw, 80px);
  }

  .vs-hero .vs-hero__inner {
    display: block;
  }
}

.vs-baseline {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  background: var(--vs-dark);
  background-image: radial-gradient(ellipse 60% 100% at 50% 50%, var(--vs-dark-center) 0%, var(--vs-dark) 100%);
  text-align: center;
  padding: 80px 15px;
  overflow: visible;
}

.vs-baseline .vs-baseline__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.vs-baseline .vs-baseline__flower {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(90%);
  width: 193px;
  opacity: 0.9;
  pointer-events: none;
  z-index: 2;
}

.vs-baseline p {
  position: relative;
  margin: 0;
  color: #cab999;
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: normal;
}

@media (max-width: 768px) {
  .vs-baseline p {
    font-size: 15px;
  }
}

.vs-editorial {
  padding: 0;
}

.vs-editorial .vs-editorial__inner {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 0;
}

.vs-editorial .vs-editorial__media {
  flex: 1 0 0;
  min-width: 0;
  padding: 0;
}

.vs-editorial .vs-editorial__media img {
  width: 100%;
  height: auto;
  display: block;
}

.vs-editorial .vs-editorial__sep {
  flex: 1 0 0;
  min-width: 0;
  align-self: stretch;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vs-editorial .vs-editorial__sep::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #AEAFB2;
}

.vs-editorial .vs-editorial__text {
  flex: 1 0 0;
  min-width: 0;
  color: #000000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 10px 80px 0;
}

.vs-editorial h2 {
  margin: 0 0 5px;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

.vs-editorial p {
  font-size: 12px;
  line-height: 1.35;
  margin: 0 0 8px;
  color: #000000;
}

.vs-editorial__chevron-link {
  display: block;
  margin-top: 12px;
  align-self: flex-end;
  line-height: 0;
}

.vs-editorial__chevron {
  display: block;
}

/* Notre histoire — variante INVERSÉE de .vs-editorial (texte à gauche, image à droite),
   UNIQUEMENT en desktop (>=992px). En mobile on garde le layout empilé + centré du thème. */
@media (min-width: 992px) {
  .vs-history .vs-editorial__text {
    padding: 80px 0 80px 10px;
  }

  .vs-history .vs-editorial__chevron-link {
    align-self: flex-start;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .vs-editorial .vs-editorial__sep {
    flex: 0 0 60px;
  }
}

@media (max-width: 991px) {
  .vs-editorial .vs-editorial__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .vs-editorial .vs-editorial__media {
    padding-top: 30px;
  }

  .vs-editorial .vs-editorial__media img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 300px;
    margin-inline: auto;
  }

  .vs-editorial .vs-editorial__sep {
    flex: 0 0 auto;
    width: 100%;
    height: 1px;
    min-height: 1px;
    position: static;
    margin: 24px 0;
  }

  .vs-editorial .vs-editorial__sep::after {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: 60%;
    height: 1px;
    margin-inline: auto;
  }

  .vs-editorial .vs-editorial__text {
    flex: 0 0 auto;
    padding: 0 20px 40px;
    align-items: center;
    text-align: center;
  }

  .vs-editorial h2 {
    font-size: 24px;
    text-align: center;
  }

  .vs-editorial__chevron-link {
    align-self: center;
  }
}

/* Notre histoire — resserrage des espaces en mobile (≤991px) : moins de padding haut/bas,
   sep + gap bouton→image réduits (le bouton est déjà recentré par le bloc ≤991 ci-dessus). */
@media (max-width: 991px) {
  .vs-history .vs-editorial__text {
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .vs-history .vs-editorial__sep {
    margin: 8px 0;
  }

  .vs-history .vs-editorial__media {
    padding-top: 8px;
    padding-bottom: 24px;
  }
}

.vs-ambassador {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  background: var(--vs-dark) url("../img/leaves-bg.webp") center/cover no-repeat;
  padding: 0;
}

.vs-ambassador .vs-ambassador__inner {
  display: grid;
  grid-template-columns: 444px 1fr;
  align-items: center;
  gap: 50px;
  max-width: 1200px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 15px;
}

.vs-ambassador .vs-ambassador__card {
  padding: 50px 0;
  display: flex;
  align-items: center;
}

.vs-ambassador .vs-ambassador__card img {
  width: 100%;
  height: 619px;
  object-fit: cover;
  display: block;
}

.vs-ambassador .vs-ambassador__panel {
  display: flex;
  align-items: center;
  height: max-content;
  background: rgba(61, 28, 16, 0.58);
}

.vs-ambassador .vs-ambassador__quote {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  color: #ffffff;
  font-size: 12px;
  line-height: normal;
  text-align: right;
}

.vs-ambassador .vs-ambassador__quote p {
  margin: 0;
  color: #ffffff;
  font-size: 12px;
}

.vs-ambassador .vs-ambassador__quote .vs-ambassador__signature {
  font-weight: 700;
  white-space: nowrap;
  color: #ffffff;
  font-style: normal;
}

.vs-ambassador .vs-ambassador__portrait {
  flex: 0 0 224px;
  width: 224px;
  height: 296px;
  object-fit: cover;
}

.vs-ambassador .vs-ambassador__badge {
  flex: 0 0 158px;
  width: 158px;
  height: 171px;
  object-fit: contain;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .vs-ambassador .vs-ambassador__inner {
    grid-template-columns: 320px 1fr;
  }

  .vs-ambassador .vs-ambassador__card img {
    height: 480px;
  }

  .vs-ambassador .vs-ambassador__portrait {
    flex: 0 0 160px;
    width: 160px;
  }

  .vs-ambassador .vs-ambassador__badge {
    flex: 0 0 120px;
    width: 120px;
  }
}

@media (max-width: 992px) {
  .vs-ambassador .vs-ambassador__inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .vs-ambassador .vs-ambassador__card {
    max-width: 70%;
    margin-inline: auto;
  }

  .vs-ambassador .vs-ambassador__panel {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding: 24px 0;
  }

  .vs-ambassador .vs-ambassador__quote {
    align-items: center;
    text-align: center;
  }
}

/* =====================================================================
   Section ambassadeur — REFONTE ESPACE PRO (accueil)
   Composition plus aérée : carte-logo réduite ; texte court + MOF réduit
   + CTA regroupés sur un panneau brun translucide ; portrait de Joël à droite.
   ===================================================================== */
body.vs-aud-pro .vs-ambassador .vs-ambassador__inner {
  grid-template-columns: 300px 1fr;
  gap: 40px;
}

body.vs-aud-pro .vs-ambassador .vs-ambassador__card img {
  height: 420px;
}

/* Le panneau devient un simple conteneur transparent : texte à gauche, portrait à droite. */
body.vs-aud-pro .vs-ambassador .vs-ambassador__panel {
  background: transparent;
  align-items: center;
  gap: 30px;
  padding: 40px 0;
}

/* Bloc éditorial sur panneau brun légèrement transparent. */
body.vs-aud-pro .vs-ambassador .vs-ambassador__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  background: rgba(61, 28, 16, 0.72);
  padding: 28px 30px;
  border-radius: 16px;
}

body.vs-aud-pro .vs-ambassador .vs-ambassador__body .vs-ambassador__quote {
  align-items: flex-start;
  text-align: left;
  padding: 0;
  gap: 8px;
}

body.vs-aud-pro .vs-ambassador .vs-ambassador__body .vs-ambassador__quote p {
  font-size: 13px;
  line-height: 1.5;
}

/* Logo MOF réduit. */
body.vs-aud-pro .vs-ambassador .vs-ambassador__body .vs-ambassador__badge {
  flex: 0 0 auto;
  width: 84px;
  height: auto;
}

/* Bouton CTA « Découvrir notre ambassadeur ». */
body.vs-aud-pro .vs-ambassador .vs-ambassador__cta {
  display: inline-block;
  padding: 12px 26px;
  background: #b17f4a;
  color: #ffffff;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

body.vs-aud-pro .vs-ambassador .vs-ambassador__cta:hover,
body.vs-aud-pro .vs-ambassador .vs-ambassador__cta:focus {
  background: #6b3a2a;
  color: #ffffff;
}

/* Portrait à droite, mis en valeur. */
body.vs-aud-pro .vs-ambassador .vs-ambassador__portrait {
  flex: 0 0 240px;
  width: 240px;
  height: 320px;
}

@media (max-width: 992px) {
  body.vs-aud-pro .vs-ambassador .vs-ambassador__inner {
    grid-template-columns: 1fr;
  }

  body.vs-aud-pro .vs-ambassador .vs-ambassador__body {
    width: 100%;
    align-items: center;
  }

  body.vs-aud-pro .vs-ambassador .vs-ambassador__body .vs-ambassador__quote {
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .vs-ambassador .vs-ambassador__panel {
    flex-direction: column;
  }

  .vs-ambassador .vs-ambassador__card img {
    width: 100%;
    height: auto !important;
    max-width: 100%;
  }
}

.vs-section-title {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: var(--vs-dark);
  background-image: radial-gradient(ellipse 60% 100% at 50% 50%, var(--vs-dark-center) 0%, var(--vs-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.vs-section-title h2 {
  margin: 0;
  color: #cab999;
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: normal;
}

/* === NOS GAMMES (accueil Particulier) — cartes catégories (données PrestaShop),
   présentation IDENTIQUE aux sous-catégories des pages catégorie (.vs-cat-card) :
   bordure #aeafb2, angles droits, hauteur 368px, zone image blanche, nom gras noir,
   hover brun + bande botanique. Repli .is-fallback (fleur centrée atténuée). ===== */
.vs-gammes {
  /* Section pleine largeur (break-out du container, comme le hero / la bande
     ambassadeur) ; le contenu reste centré via .vs-gammes__inner (1400px). */
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  padding: 40px 0 60px;
  background: #ab80361f;
}

.vs-gammes__inner {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 15px;
}

.vs-gammes__title {
  margin: 0 0 30px;
  text-align: center;
  color: #000;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
}

.vs-gammes__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Carte — reprise fidèle de .vs-cat-card (pages catégorie) */
.vs-gamme-card {
  position: relative;
  height: 348px;
  border: 1px solid #aeafb2;
  background: transparent;
  overflow: hidden;
  transition: background 0.3s ease;
}

.vs-gamme-card__link {
  display: block;
  height: 100%;
  text-decoration: none;
}

.vs-gamme-card__img {
  position: absolute;
  top: 19px;
  left: 19px;
  right: 19px;
  height: 231px;
  overflow: hidden;
  background: #fff;
}

.vs-gamme-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.vs-gamme-card:hover .vs-gamme-card__img img {
  transform: scale(1.03);
}

/* Repli (catégorie sans image de couverture) : fleur centrée, atténuée */
.vs-gamme-card__img.is-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vs-gamme-card__img.is-fallback img {
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  opacity: 0.5;
}

.vs-gamme-card__name {
  position: absolute;
  top: 265px;
  left: 19px;
  right: 19px;
  height: 30px;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  line-height: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
  z-index: 1;
}

/* Bande botanique bas de carte, révélée au survol (comme les pages catégorie) */
.vs-gamme-card::after {
  content: '';
  position: absolute;
  top: 92.66%;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('../img/leaves-bg.webp') center / cover no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.vs-gamme-card:hover {
  background: #3d1c10;
}

.vs-gamme-card:hover::after {
  opacity: 1;
}

.vs-gamme-card:hover .vs-gamme-card__name {
  color: #fff;
}

/* Séparateur pleine largeur entre sections (même trait #aeafb2 que les pages catégorie) */
.vs-gammes-sep {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  height: 0;
  border-top: 1px solid #aeafb2;
}

/* Masque le lien « Toutes les meilleures ventes » du bloc ps_bestsellers (accueil).
   Ciblé par le href (contient "meilleures") pour NE PAS masquer le « Tous les produits »
   de « La boutique » (href /15-vente-vanille/). */
.featured-products .all-product-link[href*="meilleures"] {
  display: none !important;
}

/* Espace bas du bloc « Nos meilleures ventes » (accueil) sans impacter « La boutique ». */
.vs-home-bestsellers {
  padding-bottom: 60px;
}

/* Comparatif simple des gammes (accueil Particulier) — bande pleine largeur (comme .vs-gammes),
   titre + paragraphe centré. */
.vs-compare {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  padding: 60px 0;
  background: #ab80361f;
}

.vs-compare__inner {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: 15px;
  text-align: center;
}

.vs-compare__title {
  margin: 0 0 18px;
  color: var(--vs-title);
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 28px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.1;
}

.vs-compare__text {
  margin: 0;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #000000 !important;
  line-height: 1.7;
}

@media (max-width: 767px) {
  .vs-compare__title {
    font-size: 24px;
  }
}

/* Notre traçabilité (accueil Particulier) — bande pleine largeur, 2 colonnes séparées
   par un divider vertical (style .qs-vdivider : 1px #AEAFB2, marge 40px, hauteur pleine). */
.vs-trace {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  padding: 60px 0;
  background: #ab80361f;
}

.vs-trace__inner {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 15px;
}

.vs-trace__title {
  margin: 0 0 30px;
  text-align: center;
  color: #000;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
}

.vs-trace__cols {
  display: flex;
  align-items: stretch;
}

.vs-trace__col {
  flex: 1 1 0;
  min-width: 0;
}

.vs-trace__divider {
  flex: 0 0 1px;
  align-self: stretch;
  background: #aeafb2;
  margin: 0 40px;
}

.vs-trace__heading {
  margin: 0 0 12px;
  color: #000;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
}

.vs-trace__text {
  margin: 0;
  color: #000000;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
}

@media (max-width: 991px) {
  .vs-trace__title {
    font-size: 26px;
  }

  .vs-trace__cols {
    flex-direction: column;
  }

  .vs-trace__col {
    text-align: center;
  }

  .vs-trace__divider {
    flex: 0 0 1px;
    width: 60%;
    height: 1px;
    align-self: center;
    margin: 28px auto;
  }
}

/* Frise des étapes de production (accueil Particulier) — ronds numérotés reliés par une ligne. */
.vs-steps {
  padding: 60px 0;
}

.vs-steps__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 15px;
}

.vs-steps__title {
  margin: 0 0 40px;
  text-align: center;
  color: #000;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
}

.vs-steps__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vs-step {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  position: relative;
}

/* Ligne de liaison entre les ronds (derrière les ronds) */
.vs-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 28px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #cab999;
  z-index: 0;
}

.vs-step__num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #cab999;
  color: #ffffff;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 22px;
  font-weight: 600;
}

.vs-step__label {
  display: block;
  margin-top: 14px;
  color: #000000;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .vs-steps {
    padding: 44px 0;
  }

  .vs-steps__title {
    font-size: 26px;
    margin-bottom: 28px;
  }

  .vs-step__num {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .vs-step:not(:last-child)::after {
    top: 22px;
  }

  .vs-step__label {
    font-size: 12px;
    margin-top: 10px;
  }
}

/* Nos idées recettes (accueil Particulier) — le design des CARTES est mutualisé avec /blog
   (sélecteurs « body#ets_blog_page … , .vs-recipes … » plus bas). Ici : conteneur + bouton.
   Breakout pleine largeur : la section est dans un .container Bootstrap (~1110px) trop
   étroit pour 3 cartes de 366px (=1194px) → on sort du container pour retrouver la largeur
   utile (__inner max 1400px), sinon la grille déborde et casse en responsive. */
.vs-recipes {
  padding: 60px 0;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background: #ab80361f;
}

.vs-recipes__inner {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 15px;
}

.vs-recipes__title {
  margin: 0 0 36px;
  text-align: center;
  color: #000;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
}

.vs-recipes__more {
  text-align: center;
  margin-top: 34px;
}

.vs-recipes__more-link {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid #cab999;
  border-radius: 8px;
  color: #b17f4a;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, color 0.2s ease;
}

.vs-recipes__more-link:hover {
  background: #cab999;
  color: #ffffff;
}

/* Grille des cartes : reproduit la grille de /blog (cf. body#ets_blog_page .ets-blog-list),
   scopée ici à .vs-recipes. Le DESIGN des cartes est mutualisé plus bas
   (sélecteurs « body#ets_blog_page … , .vs-recipes … »). */
/* auto-fit : autant de colonnes de 366px que la largeur le permet (3 → 2 → 1),
   centrées, gap 48px. Évite tout débordement entre les breakpoints (contrairement à
   un repeat(3,366px) fixe qui débordait dès ~1250px). Le plein écran mobile est géré
   plus bas (après les règles de carte mutualisées, pour gagner la cascade). */
.vs-recipes .ets-blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, 366px);
  justify-content: center;
  gap: 48px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

@media (max-width: 767px) {
  .vs-recipes__title {
    font-size: 26px;
  }
}

/* ===================================================================
   AVIS CLIENTS (accueil Particulier) — module vs_customerreviews.
   Données : derniers avis approuvés (productcomments). Design thème.
   =================================================================== */
/* Bande dorée pleine largeur (même pattern que .vs-gammes / .vs-trace) : la section est
   dans un .container Bootstrap → breakout 100vw pour que le fond couvre toute la largeur,
   contenu recentré via .vs-reviews__inner (1400px). */
.vs-reviews {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  padding: 60px 0;
  background: #ab80361f;
}

.vs-reviews__inner {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 15px;
}

.vs-reviews__title {
  margin: 0 0 36px;
  text-align: center;
  color: #000;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
}

/* Respiration verticale : sans ça, l'overflow:hidden de Swiper rogne la bordure basse
   des cartes (slide et conteneur ont exactement la même hauteur). Padding vertical
   seulement (le padding horizontal fausserait le calcul de largeur des slides). */
.vs-reviews__carousel.swiper {
  padding: 2px 0 4px;
}

.vs-reviews__carousel .swiper-wrapper {
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
  /* cartes de hauteur égale */
  box-sizing: border-box;
}

.vs-reviews .swiper-slide {
  height: auto;
  /* la carte remplit la hauteur de la slide */
}

/* Repli AVANT l'init Swiper (ou si le CDN Swiper est indisponible) : rangée responsive
   3/2/1. Neutralisé dès que Swiper ajoute .swiper-initialized. */
.vs-reviews .swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.vs-reviews .swiper:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 calc((100% - 60px) / 3);
  max-width: calc((100% - 60px) / 3);
}

.vs-review {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6ddcf;
  padding: 30px 28px;
}

.vs-review__stars {
  display: inline-flex;
  gap: 3px;
  margin-bottom: 14px;
}

.vs-review__star {
  color: #ddd4c3;
  font-size: 18px;
  line-height: 1;
}

.vs-review__star::before {
  content: "\2605";
  /* ★ */
}

.vs-review__star.is-on {
  color: #cab999;
}

.vs-review__title {
  margin: 0 0 10px;
  color: #2b2b2b;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.vs-review__content {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  color: #4a4a4a;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  /* Limite l'aperçu à ~6 lignes pour uniformiser la hauteur des cartes. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vs-review__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 16px;
  border-top: 1px solid #efe8dc;
}

.vs-review__author {
  color: #000;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.vs-review__product {
  color: #b17f4a;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
}

.vs-review__product:hover {
  text-decoration: underline;
}

.vs-review__date {
  color: #9a9a9a;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
}

/* Pagination Swiper — rendue SOUS les cartes (hors overflow du .swiper), centrée.
   position:static (au lieu de l'absolu par défaut de Swiper) → prend sa place dans le flux. */
.vs-reviews__pagination.swiper-pagination {
  position: static;
  margin-top: 28px;
  text-align: center;
}

.vs-reviews__pagination:empty {
  display: none;
}

/* masquée tant que Swiper n'a pas généré les puces */
.vs-reviews .swiper-pagination-bullet {
  background: #cab999;
  opacity: .5;
}

.vs-reviews .swiper-pagination-bullet-active {
  background: #b17f4a;
  opacity: 1;
}

@media (max-width: 991px) {
  .vs-reviews .swiper:not(.swiper-initialized) .swiper-slide {
    flex-basis: calc((100% - 24px) / 2);
    max-width: calc((100% - 24px) / 2);
  }

  .vs-reviews .swiper:not(.swiper-initialized) .swiper-wrapper {
    gap: 24px;
  }
}

@media (max-width: 767px) {
  .vs-reviews__title {
    font-size: 26px;
  }
}

@media (max-width: 600px) {
  .vs-reviews .swiper:not(.swiper-initialized) .swiper-slide {
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media (max-width: 1199px) {
  .vs-gammes__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .vs-gammes__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .vs-gammes__title {
    font-size: 26px;
  }
}

@media (max-width: 479px) {
  .vs-gammes__grid {
    grid-template-columns: 1fr;
  }
}

.featured-products {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 15px;
}

.featured-products .products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}

.featured-products .products>article {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  flex: none !important;
}

.featured-products .products>article .thumbnail-container,
.featured-products .products>article .product-miniature__inner {
  flex: 1 !important;
  width: 100% !important;
}

.featured-products>h2,
.featured-products .featured-products__header {
  display: none;
}

@media (max-width: 991px) {
  .featured-products .products {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 576px) {
  .featured-products .products {
    grid-template-columns: 1fr;
  }
}

.vs-triptych {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: var(--vs-dark);
  padding: 10px 20px;
}

.vs-triptych .vs-triptych__inner {
  display: flex;
  align-items: stretch;
  gap: 20px;
  height: 500px;
  width: 100%;
}

.vs-triptych figure {
  margin: 0;
  overflow: hidden;
}

.vs-triptych figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.vs-triptych figure:hover img {
  transform: scale(1.05);
}

.vs-triptych .vs-triptych__1 {
  flex: 1 1 0;
}

.vs-triptych .vs-triptych__2 {
  flex: 0 0 290px;
}

.vs-triptych .vs-triptych__3 {
  flex: 0 0 500px;
}

@media (max-width: 992px) {
  .vs-triptych .vs-triptych__inner {
    height: auto;
  }

  .vs-triptych .vs-triptych__1 {
    flex: 0 0 40%;
    height: 240px;
  }

  .vs-triptych .vs-triptych__2 {
    flex: 0 0 20%;
    height: 240px;
  }

  .vs-triptych .vs-triptych__3 {
    flex: 0 0 40%;
    height: 240px;
  }
}

@media (max-width: 576px) {
  .vs-triptych .vs-triptych__inner {
    flex-wrap: wrap;
  }

  .vs-triptych .vs-triptych__1,
  .vs-triptych .vs-triptych__2,
  .vs-triptych .vs-triptych__3 {
    flex: 1 1 100%;
    height: 220px;
  }
}

.js-product.vs-product {
  height: 100%;
}

.product-miniature .thumbnail-container .product-thumbnail {
  aspect-ratio: 1 / 1;
  height: auto !important;
}

.product-miniature .thumbnail-container .product-thumbnail img {
  height: 100%;
  margin: auto;
  object-fit: scale-down;
}

.vs-product .thumbnail-container {
  position: relative;
  height: 100%;
  background: #ffffff;
  border: 1px solid #aeafb2;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.vs-product .product-miniature__inner:hover,
.vs-product .thumbnail-container:hover {
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  border-color: transparent;
}

/* Boutons d'action — cachés par défaut, visibles au hover */
.vs-product .vs-product__actions {
  position: absolute;
  top: 62.55%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 13px;
  align-items: center;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.vs-product .product-miniature__inner:hover .vs-product__actions,
.vs-product .thumbnail-container:hover .vs-product__actions {
  opacity: 1;
  pointer-events: auto;
}

.vs-product .vs-product__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  background: #fff;
  border: 1px solid #a67a32;
  border-radius: 2px;
  color: #3d1c10;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.vs-product .vs-product__action-btn:hover {
  background: #3d1c10;
  color: #fff;
  border-color: #3d1c10;
}

.vs-product .vs-product__action-btn svg {
  display: block;
  pointer-events: none;
}

/* Form wrapper du bouton cart — transparent pour le flex parent */
.vs-product .vs-product__actions .vs-product__cart-form {
  display: contents;
  margin: 0;
  padding: 0;
}

/* Le <button type=submit> hérite du style .vs-product__action-btn */
.vs-product .vs-product__action-btn--cart[type="submit"] {
  font-family: inherit;
  cursor: pointer;
}

/* Wishlist (blockwishlist Vue PS8) — déplacé dans .vs-product__actions via patch JS */
.vs-product .vs-product__actions button.wishlist-button-add {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  width: 62px !important;
  height: 62px !important;
  background: #fff !important;
  border: 1px solid #a67a32 !important;
  border-radius: 2px !important;
  color: #3d1c10 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  flex-shrink: 0;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vs-product .vs-product__actions button.wishlist-button-add:hover {
  background: #3d1c10 !important;
  color: #fff !important;
  border-color: #3d1c10 !important;
}

/* Forcer l'icône en blanc au hover — le module surcharge color sur <i> */
.vs-product .vs-product__actions button.wishlist-button-add:hover .material-icons,
.vs-product .vs-product__actions button.wishlist-button-add:hover i,
.vs-product .vs-product__actions button.wishlist-button-add:hover svg {
  color: #fff !important;
  fill: #fff !important;
}

.vs-product .vs-product__actions button.wishlist-button-add .material-icons,
.vs-product .vs-product__actions button.wishlist-button-add i {
  font-size: 22px !important;
  line-height: 1;
  pointer-events: none;
  color: inherit !important;
}

/* Conteneur Vue — transparent pour le flex, pas de gap supplémentaire */
.vs-product .vs-product__actions .wishlist-button-product {
  display: contents;
  margin: 0 !important;
  padding: 0 !important;
}

.vs-product .product-thumbnail {
  display: block;
  padding: 14px 17px 0;
}

.vs-product .product-thumbnail img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.vs-product .vs-product__top {
  position: absolute;
  top: 14px;
  left: 17px;
  right: 17px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  z-index: 2;
}

/* Rating étoile + count — Figma gauche barre haute */
.vs-product .vs-product__rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.vs-product .vs-product__star {
  display: block;
  flex-shrink: 0;
}

.vs-product .vs-product__rating-count {
  font-family: "Work Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #000;
  line-height: 1;
}

.vs-product .vs-product__flags {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  width: 101px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vs-product .vs-product__flags .product-flag,
.vs-product .vs-product__flags .vs-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 4px 8px;
  color: #ffffff;
  font-family: "Work Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  text-transform: none;
  white-space: nowrap;
}

.vs-product .vs-product__flags .product-flag.new,
.vs-product .vs-product__flags .vs-flag--new {
  background: #b17f4a;
}

.vs-product .vs-product__flags .product-flag.on-sale,
.vs-product .vs-product__flags .vs-flag--sale {
  background: #cab999;
}

.vs-product .vs-product__flags .product-flag.discount,
.vs-product .vs-product__flags .vs-flag--discount {
  background: #3d1c10;
}

.vs-product .vs-product__footer {
  margin-top: auto;
  padding: 18px 10px 38px;
  text-align: center;
}

.vs-product .product-title,
.vs-product .vs-product__name {
  margin: 0 0 11px;
}

.vs-product .product-title a,
.vs-product .vs-product__name a {
  color: #3d1c10;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}

.vs-product .product-title,
.vs-product .vs-product__name {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  color: #3d1c10;
  text-align: center;
  line-height: normal;
  line-height: normal;
}

.vs-product .vs-product__prices {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  white-space: nowrap;
}

.vs-product .vs-product__prices .price {
  color: #b17f4a;
  font-size: 20px;
  font-weight: 700;
}

/* Mention « H.T. » après le prix (audience Professionnel) — miniatures + fiche produit. */
.vs-price-ht {
  margin-left: 4px;
  font-size: 0.7em;
  font-weight: 600;
  vertical-align: baseline;
}

.vs-product .vs-product__prices .regular-price {
  color: var(--vs-soft);
  font-size: 16px;
  font-weight: 700;
  text-decoration: line-through;
}

body.page-product,
body.page-cart,
body.page-category,
body.page-checkout {
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
}

body.page-product h1,
body.page-product .h1,
body.page-product .product-information .product-title,
body.page-cart h1,
body.page-cart .h1,
body.page-cart .product-information .product-title,
body.page-category h1,
body.page-category .h1,
body.page-category .product-information .product-title,
body.page-checkout h1,
body.page-checkout .h1,
body.page-checkout .product-information .product-title {
  color: var(--vs-title);
}

body.page-product .btn-primary,
body.page-cart .btn-primary,
body.page-category .btn-primary,
body.page-checkout .btn-primary {
  background-color: var(--vs-dark);
  border-color: var(--vs-dark);
}

body.page-product .btn-primary:hover,
body.page-product .btn-primary:focus,
body.page-product .btn-primary:active,
body.page-cart .btn-primary:hover,
body.page-cart .btn-primary:focus,
body.page-cart .btn-primary:active,
body.page-category .btn-primary:hover,
body.page-category .btn-primary:focus,
body.page-category .btn-primary:active,
body.page-checkout .btn-primary:hover,
body.page-checkout .btn-primary:focus,
body.page-checkout .btn-primary:active {
  background-color: var(--vs-accent);
  border-color: var(--vs-accent);
}

body.page-product .product-prices .current-price .price,
body.page-product .current-price .price,
body.page-product .product-discount .regular-price~.price {
  color: var(--vs-accent);
  font-weight: 700;
}

body.page-product .add-to-cart {
  background-color: var(--vs-dark);
  border-color: var(--vs-dark);
}

body.page-product .add-to-cart:hover,
body.page-product .add-to-cart:focus {
  background-color: var(--vs-accent);
  border-color: var(--vs-accent);
}

body.page-product .nav-tabs .nav-link.active {
  color: var(--vs-dark);
  border-bottom: 2px solid var(--vs-accent);
}

body.page-product .product-flag {
  background-color: var(--vs-accent);
}

body.page-product .product-flag.discount,
body.page-product .product-flag.on-sale {
  background-color: var(--vs-dark);
}

body.page-cart .cart-total .value,
body.page-cart .cart-summary-line.cart-total .value {
  color: var(--vs-accent);
  font-weight: 700;
}

body.page-cart .checkout .btn,
body.page-cart .cart-detailed-actions .btn-primary {
  background-color: var(--vs-dark);
  border-color: var(--vs-dark);
}

body.page-cart .checkout .btn:hover,
body.page-cart .checkout .btn:focus,
body.page-cart .cart-detailed-actions .btn-primary:hover,
body.page-cart .cart-detailed-actions .btn-primary:focus {
  background-color: var(--vs-accent);
  border-color: var(--vs-accent);
}

#footer {
  padding-top: 0;
}

#footer .vs-footer {
  --vs-soft: #cab999;
  --vs-dark: #3d1c10;
  --vs-dark-center: #6b3a2a;
  background: var(--vs-dark);
  padding: 100px 0;
}

#footer .vs-footer .vs-footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 15px;
}

#footer .vs-footer .vs-footer__col {
  flex: 1 1 0;
  color: var(--vs-soft);
  font-size: 12px;
  line-height: 1.6;
}

#footer .vs-footer .vs-footer__col--menu {
  text-align: left;
}

/* Colonne logo AB — à droite du menu. flex:0 0 auto : largeur = contenu, ne pousse pas
   la largeur de .vs-footer__inner (les colonnes de texte se partagent le reste). */
#footer .vs-footer .vs-footer__col--ab {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

#footer .vs-footer .vs-footer__ab {
  display: block;
  width: 72px;
  height: auto;
}

#footer .vs-footer .vs-footer__col--contact,
#footer .vs-footer .vs-footer__col--social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

#footer .vs-footer .vs-footer__col--contact p {
  margin: 0 0 1rem !important;
}

#footer .vs-footer .vs-footer__title {
  font-family: "Work Sans", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

#footer .vs-footer .vs-footer__title--up {
  text-transform: uppercase;
}

#footer .vs-footer .vs-footer__social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

#footer .vs-footer p,
#footer .vs-footer span,
#footer .vs-footer a,
#footer .vs-footer cite,
#footer .vs-footer li {
  font-family: "Work Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--vs-soft) !important;
  line-height: normal !important;
  text-decoration: none !important;
}

#footer .vs-footer .vs-footer__title {
  font-weight: 700 !important;
}

#footer .vs-footer a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

#footer .vs-footer__social .block-social li a {
  width: 37px !important;
  height: 37px !important;
  font-size: 0 !important;
  color: transparent !important;
}

#footer .vs-footer__social .block-social li a::before {
  content: "" !important;
  display: block !important;
  width: 21px !important;
  height: 21px !important;
  background-color: #cab999 !important;
  mask-size: contain !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  flex-shrink: 0 !important;
}

#footer .vs-footer__social a.vs-social-icon--mail {
  display: inline-flex !important;
  align-items: center !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* Menus du footer : 2 sous-colonnes serrées dans une seule colonne. */
#footer .vs-footer .vs-footer__menus {
  display: flex;
  gap: 40px;
}

#footer .vs-footer .vs-footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

#footer .vs-footer .vs-footer__menu li {
  margin-bottom: 10px;
}

#footer .vs-footer .vs-footer__menu a {
  display: inline-block;
}

@media (max-width: 768px) {
  #footer .vs-footer {
    padding: 48px 0;
  }

  #footer .vs-footer .vs-footer__inner {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
  }

  #footer .vs-footer .vs-footer__col {
    text-align: center;
    width: 100%;
  }

  #footer .vs-footer .vs-footer__col--contact,
  #footer .vs-footer .vs-footer__col--social {
    align-items: center;
  }

  #footer .vs-footer .vs-footer__social {
    justify-content: center;
  }

  #footer .vs-footer .vs-footer__col--menu {
    text-align: center;
  }

  /* Logo AB centré une fois le footer empilé (comme les autres colonnes). */
  #footer .vs-footer .vs-footer__col--ab {
    justify-content: center;
  }

  /* Menus empilés (menu 1 puis menu 2), centrés — plus côte à côte. */
  #footer .vs-footer .vs-footer__menus {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
}

.vs-topbar__social .block-social,
.vs-intro__social .block-social,
.vs-offcanvas__social .block-social,
.vs-footer__social .block-social {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  width: auto !important;
  flex: none !important;
}

.vs-topbar__social .block-social ul,
.vs-intro__social .block-social ul,
.vs-offcanvas__social .block-social ul,
.vs-footer__social .block-social ul {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.vs-topbar__social .block-social li,
.vs-intro__social .block-social li,
.vs-offcanvas__social .block-social li,
.vs-footer__social .block-social li {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

.vs-topbar__social .block-social li:hover,
.vs-topbar__social .block-social li:focus,
.vs-topbar__social .block-social li:focus-within,
.vs-intro__social .block-social li:hover,
.vs-intro__social .block-social li:focus,
.vs-intro__social .block-social li:focus-within,
.vs-offcanvas__social .block-social li:hover,
.vs-offcanvas__social .block-social li:focus,
.vs-offcanvas__social .block-social li:focus-within,
.vs-footer__social .block-social li:hover,
.vs-footer__social .block-social li:focus,
.vs-footer__social .block-social li:focus-within {
  background: transparent !important;
  background-color: transparent !important;
}

.vs-topbar__social .block-social li a,
.vs-intro__social .block-social li a,
.vs-offcanvas__social .block-social li a,
.vs-footer__social .block-social li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border: 1.5px solid var(--vs-soft) !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  font-size: 0 !important;
  color: transparent !important;
  text-decoration: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease !important;
}

.vs-topbar__social .block-social li a::before,
.vs-intro__social .block-social li a::before,
.vs-offcanvas__social .block-social li a::before,
.vs-footer__social .block-social li a::before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  background-color: var(--vs-soft) !important;
  mask-size: contain !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  transition: background-color 0.2s ease !important;
  flex-shrink: 0 !important;
}

.vs-topbar__social .block-social li a:hover,
.vs-topbar__social .block-social li a:focus,
.vs-intro__social .block-social li a:hover,
.vs-intro__social .block-social li a:focus,
.vs-offcanvas__social .block-social li a:hover,
.vs-offcanvas__social .block-social li a:focus,
.vs-footer__social .block-social li a:hover,
.vs-footer__social .block-social li a:focus {
  border-color: #fff !important;
}

.vs-topbar__social .block-social li a:hover::before,
.vs-topbar__social .block-social li a:focus::before,
.vs-intro__social .block-social li a:hover::before,
.vs-intro__social .block-social li a:focus::before,
.vs-offcanvas__social .block-social li a:hover::before,
.vs-offcanvas__social .block-social li a:focus::before,
.vs-footer__social .block-social li a:hover::before,
.vs-footer__social .block-social li a:focus::before {
  background-color: #fff !important;
}

.vs-topbar__social .block-social li a:hover,
.vs-topbar__social .block-social li a:focus,
.vs-intro__social .block-social li a:hover,
.vs-intro__social .block-social li a:focus,
.vs-offcanvas__social .block-social li a:hover,
.vs-offcanvas__social .block-social li a:focus,
.vs-footer__social .block-social li a:hover,
.vs-footer__social .block-social li a:focus {
  outline: none !important;
}

.vs-topbar__social .block-social li.facebook a::before,
.vs-intro__social .block-social li.facebook a::before,
.vs-offcanvas__social .block-social li.facebook a::before,
.vs-footer__social .block-social li.facebook a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E");
}

.vs-topbar__social .block-social li.instagram a::before,
.vs-intro__social .block-social li.instagram a::before,
.vs-offcanvas__social .block-social li.instagram a::before,
.vs-footer__social .block-social li.instagram a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
}

.vs-topbar__social .block-social li.youtube a::before,
.vs-intro__social .block-social li.youtube a::before,
.vs-offcanvas__social .block-social li.youtube a::before,
.vs-footer__social .block-social li.youtube a::before {
  width: 18px !important;
  height: 15px !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E");
}

.vs-topbar__social .block-social li.linkedin a::before,
.vs-intro__social .block-social li.linkedin a::before,
.vs-offcanvas__social .block-social li.linkedin a::before,
.vs-footer__social .block-social li.linkedin a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'/%3E%3C/svg%3E");
}

.vs-topbar__social .block-social li.tiktok a::before,
.vs-intro__social .block-social li.tiktok a::before,
.vs-offcanvas__social .block-social li.tiktok a::before,
.vs-footer__social .block-social li.tiktok a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448 209.91a210.06 210.06 0 0 1-122.77-39.25v178.72A162.55 162.55 0 1 1 185 188.31v89.89a74.62 74.62 0 1 0 52.23 71.18V0h88a121.18 121.18 0 0 0 1.86 22.17A122.18 122.18 0 0 0 381 102.39a121.43 121.43 0 0 0 67 20.14z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448 209.91a210.06 210.06 0 0 1-122.77-39.25v178.72A162.55 162.55 0 1 1 185 188.31v89.89a74.62 74.62 0 1 0 52.23 71.18V0h88a121.18 121.18 0 0 0 1.86 22.17A122.18 122.18 0 0 0 381 102.39a121.43 121.43 0 0 0 67 20.14z'/%3E%3C/svg%3E");
}

/* === vs-intro__social — ordre personnalisé ========================== */
.vs-intro__social .block-social li.tiktok {
  order: 1;
}

.vs-intro__social .block-social li.facebook {
  order: 2;
}

.vs-intro__social .block-social li.instagram {
  order: 3;
}

.vs-intro__social .block-social li.youtube {
  order: 4;
}

.vs-intro__social .block-social li.linkedin {
  order: 5;
}

/* === vs-intro__social — icônes style Figma (outline / bolder) ======= */
/* Cercle 37px pour intro */
.vs-intro__social .block-social li a {
  width: 37px !important;
  height: 37px !important;
}

/* Taille 21×21 pour intro et footer */
.vs-intro__social .block-social li a::before,
.vs-footer__social .block-social li a::before {
  width: 21px !important;
  height: 21px !important;
}

/* TikTok outline */
.vs-intro__social .block-social li.tiktok a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='none' stroke='white' stroke-width='30' d='M448 209.91a210.06 210.06 0 0 1-122.77-39.25v178.72A162.55 162.55 0 1 1 185 188.31v89.89a74.62 74.62 0 1 0 52.23 71.18V0h88a121.18 121.18 0 0 0 1.86 22.17A122.18 122.18 0 0 0 381 102.39a121.43 121.43 0 0 0 67 20.14z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='none' stroke='white' stroke-width='30' d='M448 209.91a210.06 210.06 0 0 1-122.77-39.25v178.72A162.55 162.55 0 1 1 185 188.31v89.89a74.62 74.62 0 1 0 52.23 71.18V0h88a121.18 121.18 0 0 0 1.86 22.17A122.18 122.18 0 0 0 381 102.39a121.43 121.43 0 0 0 67 20.14z'/%3E%3C/svg%3E") !important;
}

/* Facebook outline */
.vs-intro__social .block-social li.facebook a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='none' stroke='white' stroke-width='30' d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='none' stroke='white' stroke-width='30' d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E") !important;
}

/* YouTube outline — rectangle arrondi + triangle plein */
.vs-intro__social .block-social li.youtube a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Crect x='32' y='96' width='512' height='320' rx='80' ry='80' fill='none' stroke='white' stroke-width='36'/%3E%3Cpath fill='white' d='M210 175 L390 256 L210 337 Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Crect x='32' y='96' width='512' height='320' rx='80' ry='80' fill='none' stroke='white' stroke-width='36'/%3E%3Cpath fill='white' d='M210 175 L390 256 L210 337 Z'/%3E%3C/svg%3E") !important;
}

/* === vs-footer__social — ordre + style outline identique intro ======= */
.vs-footer__social .block-social li.tiktok {
  order: 1;
}

.vs-footer__social .block-social li.facebook {
  order: 2;
}

.vs-footer__social .block-social li.instagram {
  order: 3;
}

.vs-footer__social .block-social li.youtube {
  order: 4;
}

.vs-footer__social .block-social li.linkedin {
  order: 5;
}

/* TikTok outline */
.vs-footer__social .block-social li.tiktok a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='none' stroke='white' stroke-width='30' d='M448 209.91a210.06 210.06 0 0 1-122.77-39.25v178.72A162.55 162.55 0 1 1 185 188.31v89.89a74.62 74.62 0 1 0 52.23 71.18V0h88a121.18 121.18 0 0 0 1.86 22.17A122.18 122.18 0 0 0 381 102.39a121.43 121.43 0 0 0 67 20.14z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='none' stroke='white' stroke-width='30' d='M448 209.91a210.06 210.06 0 0 1-122.77-39.25v178.72A162.55 162.55 0 1 1 185 188.31v89.89a74.62 74.62 0 1 0 52.23 71.18V0h88a121.18 121.18 0 0 0 1.86 22.17A122.18 122.18 0 0 0 381 102.39a121.43 121.43 0 0 0 67 20.14z'/%3E%3C/svg%3E") !important;
}

/* Facebook outline */
.vs-footer__social .block-social li.facebook a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='none' stroke='white' stroke-width='30' d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='none' stroke='white' stroke-width='30' d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E") !important;
}

/* YouTube outline */
.vs-footer__social .block-social li.youtube a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Crect x='32' y='96' width='512' height='320' rx='80' ry='80' fill='none' stroke='white' stroke-width='36'/%3E%3Cpath fill='white' d='M210 175 L390 256 L210 337 Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Crect x='32' y='96' width='512' height='320' rx='80' ry='80' fill='none' stroke='white' stroke-width='36'/%3E%3Cpath fill='white' d='M210 175 L390 256 L210 337 Z'/%3E%3C/svg%3E") !important;
}

/* === PAGES CMS — header commun (Figma 191:5440) ===================== */
.vs-cms-header {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  height: 183px;
  background: var(--vs-dark);
  background-image: radial-gradient(ellipse 60% 100% at 50% 50%, var(--vs-dark-center) 0%, var(--vs-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
}

/* Le ::after (60px) équilibrait le burger CMS supprimé — plus nécessaire. */
.vs-cms-header p {
  /* flex: 0 1 auto (et non flex: 1 = flex-basis 0) : garde la largeur naturelle du
     texte, sinon le paragraphe rétréci se casse en 7-8 lignes et n'est plus centré
     verticalement dans la bande. */
  flex: 0 1 auto;
  color: #cab999;
  font-family: "Work Sans", sans-serif;
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: normal;
  text-align: center;
  margin: 0;
  padding: 0 12px;
}

/* Burger de l'en-tête CMS (pages cms/blog/FAQ) — toujours redondant avec le burger
   de la topbar (visible à toutes les résolutions : menu >=992px, burger topbar <=991px) :
   masqué en permanence, comme le burger du héro. */
#header .vs-cms-header__burger {
  display: none;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: rgb(0 0 0 / 30%);
  border: 0;
  box-shadow: none;
  border-radius: 4px;
}

#header .vs-cms-header__burger .vs-burger__lines span {
  background: #fff;
}

/* === PAGES CMS — masque breadcrumb + page-header, contenu full-width === */
/* Défaut pages CMS : contenu pleine largeur. Le wrapper réel rendu par page.tpl est
   #content.page-content(.card.card-block) — l'ancien sélecteur .page-content.page-cms ne
   matchait JAMAIS (classe page-cms non rendue), d'où le padding 20px de theme.css (.card-block)
   qui subsistait à gauche/droite (bandes colorées qui ne touchaient pas les bords).
   padding SANS !important : les pages « texte » (cms-id 16/3/2/5, plus bas) doivent pouvoir
   reprendre la main avec leur container centré à 1000px. */
body.page-cms #content.page-content {
  background: transparent !important;
  padding: 0;
  text-align: left !important;
}

/* #wrapper dans les sélecteurs du fil d'Ariane : doit l'emporter sur
   « #wrapper .breadcrumb { display: flex !important } » (fil d'Ariane du catalogue). */
body.page-cms #wrapper nav.breadcrumb,
body.page-cms #wrapper .breadcrumb-wrap,
body.page-cms header.page-header {
  display: none !important;
}

body.page-cms #wrapper {
  padding-top: 0;
}

body.page-cms #wrapper>.container {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

body.page-cms #wrapper>.container>.row {
  margin-left: 0;
  margin-right: 0;
}

body.page-cms #content-wrapper {
  max-width: 100%;
  flex: 0 0 100%;
  padding-left: 0;
  padding-right: 0;
}

body.page-cms #main {
  padding: 0;
}

body.page-cms #left-column,
body.page-cms #right-column {
  display: none;
}

.vs-cms__body {
  padding-top: 60px;
  padding-bottom: 80px;
}

/* ============================================================
   QUI SOMMES-NOUS — Figma 175:907
   HTML injecté via back-office PS dans #content.page-cms-4
   ============================================================ */

/* Reset marges #content PS */
body.cms-id-4 #content,
body.cms-id-4 #content.page-cms-4 {
  margin: 0 !important;
  padding: 0 !important;
}

/* Séparateur horizontal */
.qs-separator {
  width: 100%;
  height: 1px;
  background: #AEAFB2;
  margin: 0;
}

/* Container centré 1200px */
.qs-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Typographie -------------------------------------------------- */
.qs-h1 {
  font-family: "Work Sans", sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  color: #000;
  margin: 0 0 20px;
}

.qs-h2 {
  font-family: "Work Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  color: #000;
  margin: 0 0 15px;
}

.qs-text {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: #000;
  margin: 0 0 10px;
  text-align: left;
}

.qs-text:last-child {
  margin-bottom: 0;
}

.qs-equitable__text .qs-text {
  text-align: center;
}

/* Séparateur vertical */
.qs-vdivider {
  flex: 0 0 1px;
  align-self: stretch;
  background: #AEAFB2;
  margin: 0 40px;
}

/* Flower en bas du séparateur vertical de la section intro */
.qs-section--intro .qs-inner {
  position: relative;
}

.qs-section--intro .qs-vdivider__flower {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 193px;
  pointer-events: none;
  z-index: 2;
}

/* --- Section 1 : Image | Séparateur | H1 + texte ----------------- */
.qs-section--intro .qs-inner {
  display: flex;
  align-items: center;
  min-height: 510px;
  padding: 0;
  gap: 0;
}

.qs-section--intro .qs-intro__img,
.qs-section--intro .qs-intro__text {
  padding: 60px 40px;
}

.qs-intro__img {
  flex: 1;
}

.qs-intro__img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.qs-intro__text {
  flex: 1;
}

/* Fond doré translucide sur les sections bourbon + expertise */
.qs-section--bourbon,
.qs-section--expertise {
  background: #ab80361f;
}

/* --- Section 2 : Texte | Séparateur | Photos | Carte bleue ------- */
.qs-section--bourbon .qs-inner {
  display: flex;
  align-items: stretch;
  gap: 60px;
  padding-top: 60px;
  padding-bottom: 60px;
}

.qs-section--bourbon .qs-bourbon__text,
.qs-section--bourbon .qs-bourbon__photos,
.qs-section--bourbon .qs-bourbon__card {
  margin: 0;
}

.qs-bourbon__text {
  flex: 1.2;
  display: flex;
  flex-direction: column;
}

.qs-bourbon__photos {
  flex: 0 0 335px;
  position: relative;
  height: 396px;
  align-self: center;
}

.qs-bourbon__photos img:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 162px;
  height: 344px;
  object-fit: cover;
}

.qs-bourbon__photos img:last-child {
  position: absolute;
  top: 52px;
  left: 173px;
  width: 162px;
  height: 344px;
  object-fit: cover;
}

.qs-bourbon__card {
  flex: 1;
  align-self: flex-end;
  background: linear-gradient(89.6deg, var(--vs-dark) 0%, var(--vs-dark-center) 100%);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: flex-start;
  color: #fff !important;
}

.qs-section--bourbon .qs-bourbon__card,
.qs-section--bourbon .qs-bourbon__card p,
.qs-section--bourbon .qs-bourbon__card ul,
.qs-section--bourbon .qs-bourbon__card li {
  color: #fff !important;
}

.qs-section--bourbon .qs-vdivider {
  margin: 0;
}

.qs-bourbon__card p {
  color: #fff !important;
  font-size: 12px !important;
  font-family: "Work Sans", sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.qs-bourbon__card p a {
  color: #cab999 !important;
  text-decoration: none !important;
}

.qs-bourbon__card p a:hover,
.qs-bourbon__card p a:focus {
  text-decoration: underline !important;
}

.qs-bourbon__card .qs-card-title {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  width: 100%;
}

.qs-bourbon__card ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  width: 100%;
}

.qs-bourbon__card li {
  font-family: "Work Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #fff !important;
  display: block !important;
  position: relative !important;
  padding-left: 14px !important;
  padding-right: 0 !important;
  line-height: 1.5 !important;
  width: 100% !important;
  flex-direction: unset !important;
  gap: unset !important;
}

.qs-bourbon__card li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 5px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background-color: #fff !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* --- Section 3 : Pleine largeur ----------------------------------- */
.qs-section--equitable {
  display: flex;
  align-items: stretch;
  min-height: 659px;
}

.qs-equitable__bg {
  flex: 1;
  background-size: cover;
  background-position: center;
  min-height: 400px;
}

body.vs-aud-part .qs-equitable__bg:first-child {
  background-image: url("../img/qs-equitable-left.webp") !important;
}

body.vs-aud-pro .qs-equitable__bg:first-child {
  background-image: url("../img/bg-pro-botanical.webp") !important;
}

.qs-equitable__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 60px 50px;
  text-align: center;
}

.qs-equitable__text .qs-h2,
.qs-equitable__text .qs-text {
  color: #000;
}

/* --- Section 4 : Texte | Séparateur | Images empilées ------------ */
.qs-section--expertise .qs-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding-top: 60px;
  padding-bottom: 60px;
}

.qs-section--expertise .qs-expertise__text,
.qs-section--expertise .qs-expertise__photos {
  margin: 0 40px;
}

.qs-expertise__text {
  flex: 1.5;
  display: flex;
  flex-direction: column;
}

.qs-expertise__photos {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 0 60px;
  width: 309px;
}

.qs-expertise__photos img {
  width: 100%;
  height: 215px;
  object-fit: cover;
  display: block;
}

/* Variante image unique (portrait ambassadeur) : ratio naturel, centré */
.qs-expertise__photos--single {
  justify-content: center;
}

.qs-expertise__photos--single img {
  height: auto;
}

/* --- Section « Notre Histoire » : Images | Séparateur | Texte ----- */
.qs-section--histoire .qs-inner {
  max-width: 1200px;
  display: flex;
  align-items: flex-start;
  gap: 60px;
  padding-top: 60px;
  padding-bottom: 60px;
}

.qs-histoire__media {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.qs-histoire__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.qs-histoire__text {
  flex: 1;
}

.qs-section--histoire .qs-h1 {
  text-align: left;
  margin-bottom: 20px;
}

/* --- Responsive --------------------------------------------------- */
@media (max-width: 1199px) {

  .qs-section--intro .qs-inner,
  .qs-section--bourbon .qs-inner,
  .qs-section--expertise .qs-inner {
    flex-direction: column;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .qs-section--histoire .qs-inner {
    flex-direction: column;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .qs-histoire__media {
    flex: none;
    width: 100%;
    flex-direction: row;
    gap: 16px;
  }

  .qs-histoire__media img {
    flex: 1;
    height: 220px;
  }

  .qs-vdivider {
    width: 100%;
    height: 1px;
    align-self: auto;
    margin: 20px 0;
  }

  .qs-bourbon__photos {
    width: 100%;
    flex: none;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
    padding-bottom: 30px;
  }

  .qs-bourbon__photos img:first-child,
  .qs-bourbon__photos img:last-child {
    position: static;
    width: 45%;
    max-width: 200px;
    height: 280px;
    object-fit: cover;
  }

  .qs-section--equitable {
    flex-direction: column;
    min-height: auto;
  }

  .qs-equitable__bg {
    min-height: 300px;
    width: 100%;
  }

  .qs-equitable__text {
    padding: 40px 20px;
  }

  .qs-section--expertise .qs-expertise__photos {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .qs-section--expertise .qs-expertise__text {
    margin: 0;
  }
}

@media (max-width: 767px) {
  .qs-expertise__photos {
    width: 100% !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .qs-expertise__photos img {
    width: 80% !important;
    max-width: 320px !important;
    height: auto !important;
  }

  .vs-cms-header p {
    font-size: 15px !important;
  }
}

@media (max-width: 480px) {
  .vs-cms-header {
    flex-direction: column;
    width: 100%;
    margin: 0;
    left: 0;
    gap: 20px;
    padding: 12px 15px;
  }
}

/* ============================================================
   NOTRE HISTOIRE — refonte en 7 thèmes (réutilise le système qs-*)
   Nouvelles mises en page : carte SAVA, duo Madagascar/France,
   carte sombre réutilisable (points clés), section conclusion centrée.
   ============================================================ */

/* 2 colonnes texte | média (SAVA : carte ; Qualité : carte de points) */
.qs-section--sava .qs-inner {
  display: flex;
  align-items: center;
  gap: 60px;
  padding-top: 60px;
  padding-bottom: 60px;
}

.qs-sava__text {
  flex: 1;
}

.qs-sava__media {
  flex: 1.1;
}

.qs-sava__media img {
  display: block;
  max-width: 100%;
  max-height: 400px;
  width: auto;
  height: auto;
  margin: 0 auto;
}

/* Implantation Madagascar / France : 2 cartes côte à côte */
.qs-section--duo .qs-inner {
  padding-top: 60px;
  padding-bottom: 60px;
}

.qs-duo {
  display: flex;
  gap: 30px;
  margin-top: 24px;
}

.qs-duo__col {
  flex: 1;
  background: #ab80361f;
  padding: 30px;
}

.qs-duo__col h3 {
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  margin: 0 0 10px;
}

/* Carte sombre réutilisable (points clés qualité) */
.qs-card {
  background: linear-gradient(89.6deg, #3d1c10 0%, #6b3a2a 100%);
  padding: 30px;
}

.qs-card,
.qs-card p,
.qs-card li {
  color: #fff !important;
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

.qs-card .qs-card-title {
  display: block;
  font-weight: 700;
  margin: 0 0 12px;
}

.qs-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.qs-card li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 6px;
}

.qs-card li:last-child {
  margin-bottom: 0;
}

.qs-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

/* Section conclusion centrée (Nos engagements) — bande dorée */
.qs-section--center .qs-inner {
  padding-top: 60px;
  padding-bottom: 60px;
  text-align: center;
}

.qs-section--center .qs-text {
  text-align: center;
}

@media (max-width: 1199px) {
  .qs-section--sava .qs-inner {
    flex-direction: column;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .qs-duo {
    flex-direction: column;
  }
}

/* ============================================================
   RECETTES & CONSEILS (CMS id 9) — en-tête + grille de thèmes
   ============================================================ */
.rc-section {
  padding: 60px 0;
}

.rc-section__head {
  max-width: 820px;
  margin: 0 auto 40px;
  padding: 0 20px;
  text-align: center;
}

.rc-section__head .qs-h1 {
  text-align: center;
  margin-bottom: 14px;
}

.rc-section__head .qs-text {
  text-align: center;
  margin: 0;
}

.rc-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
}

.rc-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid #e6ddcf;
  padding: 28px 26px;
}

/* Rond = même vignette que le logo des miniatures produit (.vs-product-card__logo) :
   logo boutique du BO injecté par custom.js (prestashop.shop.logo). */
.rc-card__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
  color: #a5813a;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(177, 127, 74, 0.35);
  border-radius: 50%;
}

.rc-card__icon img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}

.rc-card__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.rc-card__title {
  margin: 0;
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #2b2b2b;
}

@media (max-width: 991px) {
  .rc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .rc-grid {
    grid-template-columns: 1fr;
  }
}

/* Page blog « Recettes » (catégorie ets_blog 2) : cartes des sous-catégories injectées par
   custom.js (vsBlogRecipesSubcats) à la place de la liste d'articles. Carte = reprise
   fidèle de .vs-cat-card des pages catégorie (bordure #aeafb2, image 231px, nom gras,
   survol brun + bande botanique). */
body#ets_blog_page .vs-blog-subcats-page > .ets-blog-list,
body#ets_blog_page .vs-blog-subcats-page > .blog-paggination {
  display: none;
}

/* Espace bas en padding (pas en margin) : une marge basse « sortirait » du bloc de fond
   teinté .ets_blog_layout_grid (fusion des marges) → bande claire sous les cartes. */
body#ets_blog_page .vs-blog-subcats {
  list-style: none;
  margin: 30px auto 0;
  padding: 0 15px 60px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 278px));
  justify-content: center;
  gap: 16px;
}

body#ets_blog_page .vs-blog-subcats .vs-cat-card {
  position: relative;
  height: 368px;
  border: 1px solid #aeafb2;
  background: transparent;
  overflow: hidden;
  transition: background 0.3s ease;
}

body#ets_blog_page .vs-blog-subcats .vs-cat-card::after {
  content: '';
  position: absolute;
  top: 92.66%;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('../img/leaves-bg.webp') center / cover no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

body#ets_blog_page .vs-blog-subcats .vs-cat-card:hover {
  background: #3d1c10;
}

body#ets_blog_page .vs-blog-subcats .vs-cat-card:hover::after {
  opacity: 1;
}

body#ets_blog_page .vs-blog-subcats .vs-cat-card:hover .vs-cat-card__name,
body#ets_blog_page .vs-blog-subcats .vs-cat-card:hover .vs-cat-card__link {
  color: #fff;
}

body#ets_blog_page .vs-blog-subcats .vs-cat-card__img {
  position: absolute;
  top: 19px;
  left: 19px;
  right: 19px;
  height: 231px;
  overflow: hidden;
  background: #fff;
}

body#ets_blog_page .vs-blog-subcats .vs-cat-card__img a {
  display: block;
  width: 100%;
  height: 100%;
}

body#ets_blog_page .vs-blog-subcats .vs-cat-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

body#ets_blog_page .vs-blog-subcats .vs-cat-card:hover .vs-cat-card__img img {
  transform: scale(1.03);
}

body#ets_blog_page .vs-blog-subcats .vs-cat-card__img--fallback a {
  display: flex;
  align-items: center;
  justify-content: center;
}

body#ets_blog_page .vs-blog-subcats .vs-cat-card__img-fallback {
  width: auto !important;
  height: auto !important;
  max-width: 80%;
  max-height: 80%;
  object-fit: contain !important;
  opacity: 0.5;
}

body#ets_blog_page .vs-blog-subcats .vs-cat-card__name,
body#ets_blog_page .vs-blog-subcats .vs-cat-card__link {
  position: absolute;
  left: 19px;
  right: 19px;
  height: 30px;
  display: block;
  font-family: "Work Sans", sans-serif;
  color: #000;
  line-height: 30px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease;
  z-index: 1;
}

body#ets_blog_page .vs-blog-subcats .vs-cat-card__name {
  top: 265px;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

body#ets_blog_page .vs-blog-subcats .vs-cat-card__link {
  top: 300px;
  font-size: 12px;
  font-weight: 400;
}

@media (max-width: 991px) {
  body#ets_blog_page .vs-blog-subcats {
    grid-template-columns: repeat(2, minmax(0, 278px));
  }
}

@media (max-width: 575px) {
  body#ets_blog_page .vs-blog-subcats {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Pages CMS "texte" : contenu centré et lisible au lieu de s'étaler sur toute la largeur
   (elles n'ont PAS le design en qs-section, juste titre + paragraphes/listes).
   - Particulier : Livraison & paiement 16, CGV 3, Mentions légales 2, Confidentialité 5,
     Documentation et Qualité 27
   - Professionnel : Traçabilité 11, Certifications & documents 12, Services 13,
     Échantillons 14, Devis 15
   NE PAS ajouter ici les pages full-width sur-mesure en qs-section (Notre histoire 4,
   Contact 8, Pourquoi nous choisir 10, …). */
body.cms-id-27 #content.page-content,
body.cms-id-16 #content.page-content,
body.cms-id-3 #content.page-content,
body.cms-id-2 #content.page-content,
body.cms-id-5 #content.page-content,
body.cms-id-11 #content.page-content,
body.cms-id-12 #content.page-content,
body.cms-id-13 #content.page-content,
body.cms-id-14 #content.page-content,
body.cms-id-15 #content.page-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

/* Documentation et Qualité (CMS 27) : titre H1 = titre natif de la page CMS (.page-header,
   masqué sur les autres CMS), centré dans le même conteneur 1200px, style des H1 CMS texte. */
body.page-cms.cms-id-27 header.page-header {
  display: block !important;
  max-width: 1200px;
  margin: 0 auto;
  padding: 70px 20px 0;
}

body.page-cms.cms-id-27 header.page-header h1 {
  font-family: "Work Sans", sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  color: #000;
  margin: 0;
}

/* Refonte présentation pages CMS "texte" Pro (11-15) — conteneur : padding + hauteur mini
   (surcharge le padding 40px de la règle de largeur partagée ci-dessus). */
:is(body.cms-id-11, body.cms-id-12, body.cms-id-13, body.cms-id-14) #content.page-content {
  padding: 70px 20px 60px;
  min-height: 710px;
}

/* Refonte présentation pages CMS "texte" Pro (11-15) — étape 1 : titre H1. */
:is(body.cms-id-11, body.cms-id-12, body.cms-id-13, body.cms-id-14, body.cms-id-15) #content.page-content h1 {
  font-family: "Work Sans", sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  color: #000;
  margin: 0 0 20px;
}

/* Étape 2 : corps de texte (p + spans). font-weight posé sur le p uniquement pour NE PAS
   écraser le gras des <b> présents dans le contenu BO (spans dans <b> restent en 700). */
:is(body.cms-id-11, body.cms-id-12, body.cms-id-13, body.cms-id-14, body.cms-id-15) #content.page-content p {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: #000;
  margin: 0 0 10px;
  text-align: left;
}

:is(body.cms-id-11, body.cms-id-12, body.cms-id-13, body.cms-id-14, body.cms-id-15) #content.page-content p span {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: #000;
}

/* Étape 3 : listes. Le thème réinitialise ul (list-style:none; padding:0) → on rétablit
   des puces disc indentées + la typo du corps (Work Sans 12px) sur les <li>. */
:is(body.cms-id-11, body.cms-id-12, body.cms-id-13, body.cms-id-14, body.cms-id-15) #content.page-content ul {
  list-style: disc outside;
  padding-left: 20px;
  margin: 0 0 10px;
}

:is(body.cms-id-11, body.cms-id-12, body.cms-id-13, body.cms-id-14, body.cms-id-15) #content.page-content li {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: #000;
  margin: 0 0 6px;
}

/* Bloc 2 colonnes réutilisable (pages CMS Pro) : texte à gauche, illustration à droite.
   Le HTML est saisi dans le contenu BO ; l'image pointe vers /themes/vanille-sambava/assets/img/.
   Typo du texte inchangée (conservée telle quelle à la demande). */
.page-cms #content.page-content .pro-cat {
  display: flex;
  align-items: center;
  gap: 48px;
}

.page-cms #content.page-content .pro-cat__text {
  flex: 1 1 0;
  min-width: 0;
}

.page-cms #content.page-content .pro-cat__media {
  flex: 0 0 40%;
  max-width: 40%;
  display: flex;
  justify-content: center;
}

.page-cms #content.page-content .pro-cat__media img {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .page-cms #content.page-content .pro-cat {
    flex-direction: column;
    gap: 28px;
  }

  .page-cms #content.page-content .pro-cat__media {
    flex-basis: auto;
    max-width: 100%;
  }
}

/* Variante média "duo" : 2 images portrait côte à côte, 2e décalée vers le bas
   (rendu éditorial). Utilisée page Services (13) avec qs-histoire.jpg + qs-histoire-fleur.jpg.
   max-width:none pour neutraliser le cap 420px de .pro-cat__media img. */
.page-cms #content.page-content .pro-cat__media--duo {
  flex: 0 0 46%;
  max-width: 46%;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.page-cms #content.page-content .pro-cat__media--duo img {
  width: calc((100% - 18px) / 2);
  max-width: none;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.page-cms #content.page-content .pro-cat__media--duo .pro-duo__b {
  margin-top: 48px;
}

@media (max-width: 768px) {
  .page-cms #content.page-content .pro-cat__media--duo {
    flex-basis: auto;
    max-width: 100%;
  }
}

.text-sm-center {
  text-align: center !important;
  line-height: 2.5em;
}

/* Inscription : masque l'option « Je suis un professionnel » sur la boutique
   Particulier uniquement (reste visible côté Professionnel). */
body.vs-aud-part .form-group.row:has(#is_professional) {
  display: none !important;
}

/* ============================================================
   ACTUALITÉS — Figma 176:847
   Intro : réutilise .qs-section--intro
   Grille : .actus-grid > .actus-card (généré par module blog)
   ============================================================ */

/* Grille 3 colonnes */
.actus-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 366px);
  gap: 48px;
  padding: 60px 20px;
  justify-content: center;
}

/* Card individuelle */
.actus-card {
  position: relative;
  width: 366px;
  height: 543px;
  overflow: hidden;
  background: #fff;
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Image de fond full-cover */
.actus-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bloc blanc texte — zone haute de la card */
.actus-card__body {
  position: absolute;
  top: 7.55%;
  left: 8.2%;
  right: 8.2%;
  bottom: 36.1%;
  background: #fff;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.actus-card__title {
  font-family: "Work Sans", sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  color: #000;
  margin: 0 0 8px;
  text-align: left;
}

.actus-card__date {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #000;
  margin: 0;
  text-align: left;
}

/* Bouton "Lire plus" — bas droite */
.actus-card__btn {
  position: absolute;
  bottom: 5.52%;
  left: 45.08%;
  right: 8.2%;
  height: 44px;
  background: #fff;
  border: 1px solid #AEAFB2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

.actus-card__btn:hover {
  background: #f5f5f5;
  color: #000;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 1200px) {
  .actus-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .actus-card {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .actus-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== PAGE ACTUALITÉS — ETS Blog module override ===== */
/* body#ets_blog_page — structure réelle :
   #wrapper > .container > .row > #content-wrapper > .ets_blog_content
     > #left-column (sidebar) + #content-wrapper.left-column (content)
*/

/* Conteneur PS full-width */
body#ets_blog_page #wrapper>.container {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

body#ets_blog_page #wrapper>.container>.row {
  margin-left: 0;
  margin-right: 0;
}

body#ets_blog_page #content-wrapper.js-content-wrapper {
  padding-left: 0;
  padding-right: 0;
}

body#ets_blog_page #wrapper {
  padding-top: 0;
}

/* Masquer breadcrumb */
body#ets_blog_page nav.breadcrumb,
body#ets_blog_page .breadcrumb-wrap {
  display: none !important;
}

/* Sidebar module = masquée */
body#ets_blog_page .ets_blog_content #left-column {
  display: none !important;
}

/* Contenu module = pleine largeur */
body#ets_blog_page .ets_blog_content #content-wrapper.left-column {
  max-width: 100%;
  flex: 0 0 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Wrapper grid */
body#ets_blog_page .ets-blog-wrapper {
  padding: 0;
  margin-bottom: 0;
  background: #ab80361f;
}

/* Titre de la page (catégorie / listing blog) — centré, style titre de page du thème
   (au lieu du petit titre par défaut collé au bord gauche). */
body#ets_blog_page .page-heading {
  max-width: 1248px;
  margin: 0 auto;
  padding: 50px 20px 0;
  font-family: "Work Sans", sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: none;
  text-align: center;
  color: #000;
}

/* Description de catégorie blog — la contraindre au MÊME container centré que le titre
   (.page-heading) et la grille (.ets-blog-list). Sans ça, .blog-category / .blog-category-desc
   restent en pleine largeur, texte aligné à gauche → collé au bord (apparaît « coupé » à
   gauche sur grand écran). max-width + margin auto + texte centré = contenu dans le container. */
body#ets_blog_page .blog-category {
  max-width: 1248px;
  margin: 0 auto;
  padding: 8px 20px 0;
  text-align: center;
}

/* Pagination blog : marge basse 10px ; pages et page courante en marron foncé. */
.blog-paggination {
  margin-bottom: 10px;
}

/* Le bloc à fond teinté contient la marge basse de son dernier élément (sinon elle « sort »
   du bloc par fusion des marges → bande claire sous la pagination). */
body#ets_blog_page .ets-blog-wrapper {
  display: flow-root;
}

body#ets_blog_page .blog-paggination .links a {
  border-color: #3d1c10;
}

body#ets_blog_page .blog-paggination .links > b {
  background-color: #3d1c10;
  border-color: #3d1c10;
}

/* Grid de cartes */
body#ets_blog_page .ets-blog-list {
  list-style: none;
  margin: 0 auto !important;
  padding: 60px 20px !important;
  max-width: 1248px;
  display: grid;
  grid-template-columns: repeat(3, 366px);
  gap: 48px;
  justify-content: center;
}

body#ets_blog_page .ets-blog-wrapper .qs-separator {
  margin: 0 !important;
}

/* Chaque card */
body#ets_blog_page .ets-blog-list li,
.vs-recipes .ets-blog-list li {
  position: relative;
  width: 366px;
  height: 543px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid transparent;
  box-sizing: border-box;
  transition: border-color .45s ease;
}

body#ets_blog_page .ets-blog-list li:hover,
.vs-recipes .ets-blog-list li:hover {
  border-color: #AEAFB2;
}

body#ets_blog_page .ets-blog-list .post-wrapper,
.vs-recipes .ets-blog-list .post-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
}

/* ---- CARD : état normal ---- */

/* Image : plein écran par défaut, transition vers zone cadre au hover */
body#ets_blog_page .ets-blog-list .ets_item_img,
.vs-recipes .ets-blog-list .ets_item_img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  z-index: 1;
  transition: top .45s ease, left .45s ease, right .45s ease, bottom .45s ease;
}

body#ets_blog_page .ets-blog-list .ets_item_img::before,
.vs-recipes .ets-blog-list .ets_item_img::before {
  display: none;
}

body#ets_blog_page .ets-blog-list .ets_item_img img,
.vs-recipes .ets-blog-list .ets_item_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cadre blanc : couvre la zone image (top 7.55% → bottom 36.1%) */
body#ets_blog_page .ets-blog-list .ets-blog-wrapper-content,
.vs-recipes .ets-blog-list .ets-blog-wrapper-content {
  position: absolute;
  top: 7.55%;
  left: 8.2%;
  right: 8.2%;
  bottom: 36.1%;
  background: #fff;
  padding: 20px 28px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 2;
  transition: top .45s ease, left .45s ease, right .45s ease, bottom .45s ease,
    padding .45s ease;
}

body#ets_blog_page .ets-blog-list .ets-blog-wrapper-content-main,
.vs-recipes .ets-blog-list .ets-blog-wrapper-content-main {
  display: flex;
  flex-direction: column;
}

/* Titre */
body#ets_blog_page .ets-blog-list a.ets_title_block,
.vs-recipes .ets-blog-list a.ets_title_block {
  font-family: "Work Sans", sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  color: #000;
  text-decoration: none;
  display: block;
  margin: 0 0 6px;
}

/* Date */
body#ets_blog_page .ets-blog-list .ets-blog-latest-toolbar,
body#ets_blog_page .ets-blog-list .ets-blog-latest-toolbar *,
.vs-recipes .ets-blog-list .ets-blog-latest-toolbar,
.vs-recipes .ets-blog-list .ets-blog-latest-toolbar * {
  display: block !important;
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #000;
}

/* Cacher description et catégories */
body#ets_blog_page .ets-blog-list .blog_description,
body#ets_blog_page .ets-blog-list .ets-blog-categories,
body#ets_blog_page .ets-blog-list .be-categories,
body#ets_blog_page .ets-blog-list .ets-blog-sidear-post-meta,
.vs-recipes .ets-blog-list .blog_description,
.vs-recipes .ets-blog-list .ets-blog-categories,
.vs-recipes .ets-blog-list .be-categories,
.vs-recipes .ets-blog-list .ets-blog-sidear-post-meta {
  display: none !important;
}

/* Bouton : caché en état normal */
body#ets_blog_page .ets-blog-list .read_more,
.vs-recipes .ets-blog-list .read_more {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 44%;
  right: 0;
  height: 44px;
  background: #fff;
  border: 1px solid #AEAFB2;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  text-transform: none;
  padding: 0;
  white-space: nowrap;
  z-index: 3;
  transition: opacity .3s ease .2s;
}

/* ---- CARD : état hover ---- */
/*
  Padding uniforme 30px sur les 4 côtés :
  - horizontal : 8.2% de 366px ≈ 30px
  - vertical   : 5.52% de 543px ≈ 30px
  Image     : top 5.52% → bottom 37.6% (hauteur ≈ 309px)
  Contenu   : top 62.4% → bottom 5.52% (hauteur ≈ 174px)
*/

/* Image réduite — padding uniforme, !important pour passer le CSS du module */
body#ets_blog_page .ets-blog-list li:hover .ets_item_img,
.vs-recipes .ets-blog-list li:hover .ets_item_img {
  top: 5.52% !important;
  left: 8.2% !important;
  right: 8.2% !important;
  bottom: 37.6% !important;
  width: auto !important;
  height: auto !important;
}

/* Contenu : même marges gauche/droite que l'image, 30px en bas */
body#ets_blog_page .ets-blog-list li:hover .ets-blog-wrapper-content,
.vs-recipes .ets-blog-list li:hover .ets-blog-wrapper-content {
  top: 62.4%;
  left: 8.2%;
  right: 8.2%;
  bottom: 5.52%;
  padding: 12px 0 0;
  justify-content: space-between;
  background: #fff;
}

/* Bouton visible au hover */
body#ets_blog_page .ets-blog-list li:hover .read_more,
.vs-recipes .ets-blog-list li:hover .read_more {
  opacity: 1;
  pointer-events: auto;
}

body#ets_blog_page .ets-blog-list .read_more:hover,
.vs-recipes .ets-blog-list .read_more:hover {
  background: #CAB999;
  color: #000;
  text-decoration: none;
}

/* ===== PAGE DÉTAIL ARTICLE ===== */
body#ets_blog_page .vs-post-detail {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
}

/* Titre */
body#ets_blog_page .vs-post-detail__title {
  font-family: "Work Sans", sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  color: #000;
  margin: 0 0 12px;
}

/* Date */
body#ets_blog_page .vs-post-detail__date {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #000;
  margin: 0 0 24px;
}

/* Séparateur */
body#ets_blog_page .vs-post-detail__sep {
  width: 100%;
  height: 1px;
  background: #AEAFB2;
  margin-bottom: 40px;
}

/* Corps flex : contenu 70% gauche, image 30% droite */
body#ets_blog_page .vs-post-detail__body {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

/* Image : 30% — placée en premier dans le DOM, affichée à droite via order */
body#ets_blog_page .vs-post-detail__img {
  flex: 0 0 30%;
  order: 2;
}

body#ets_blog_page .vs-post-detail__img-link {
  display: block;
}

body#ets_blog_page .vs-post-detail__img img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
  transition: opacity .2s ease;
}

body#ets_blog_page .vs-post-detail__img-link:hover img {
  opacity: .88;
}

/* Contenu : 70% */
body#ets_blog_page .vs-post-detail__content {
  flex: 0 0 calc(70% - 48px);
  min-width: 0;
  order: 1;
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: #000;
}

body#ets_blog_page .vs-post-detail__content p {
  margin-bottom: 16px;
}

body#ets_blog_page .vs-post-detail__content h2,
body#ets_blog_page .vs-post-detail__content h3 {
  font-size: 24px;
  font-weight: 400;
  margin: 24px 0 12px;
}

/* Bouton retour — aligné à droite */
body#ets_blog_page .vs-post-detail__back {
  display: flex;
  justify-content: flex-end;
  margin-top: 48px;
}

body#ets_blog_page .vs-post-detail__back-btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  border: 1px solid #AEAFB2;
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #000;
  text-decoration: none;
}

body#ets_blog_page .vs-post-detail__back-btn:hover {
  background: #CAB999;
  border-color: #CAB999;
  color: #000;
}

/* Responsive : image au-dessus du contenu, centrée */
@media (max-width: 768px) {
  body#ets_blog_page .vs-post-detail__body {
    flex-direction: column;
  }

  body#ets_blog_page .vs-post-detail__img {
    flex: 0 0 auto;
    width: 60%;
    order: 1;
    margin: 0 auto;
  }

  body#ets_blog_page .vs-post-detail__content {
    flex: 0 0 auto;
    order: 2;
  }
}

/* Responsive blog grid */
@media (max-width: 1200px) {
  body#ets_blog_page .ets-blog-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  body#ets_blog_page .ets-blog-list li {
    width: 100%;
  }
}

@media (max-width: 600px) {
  body#ets_blog_page .ets-blog-list {
    grid-template-columns: 1fr;
  }
}

/* Recettes accueil : plein écran mobile (la carte fixe 366px déborderait sinon).
   Placé APRÈS les règles de carte mutualisées → gagne la cascade sur width:366px. */
@media (max-width: 600px) {
  .vs-recipes .ets-blog-list {
    grid-template-columns: 1fr;
  }

  .vs-recipes .ets-blog-list li {
    width: 100%;
  }
}

/* === AUDIENCE PRO — backgrounds spécifiques ========================= */
/* ============================================================
   PAGE FAQ — Figma 178-1618
   body#module-ets_faq-faqs
   ============================================================ */

/* Casser le container Bootstrap pour les sections full-width */
body#module-ets_faq-faqs #wrapper {
  padding-top: 0;
}

body#module-ets_faq-faqs #wrapper>.container {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

body#module-ets_faq-faqs #wrapper>.container>.row {
  margin-left: 0;
  margin-right: 0;
}

body#module-ets_faq-faqs #content-wrapper {
  max-width: 100%;
  flex: 0 0 100%;
  padding-left: 0;
  padding-right: 0;
}

body#module-ets_faq-faqs #main {
  padding: 0 0 0 !important;
  margin-bottom: 0 !important;
}

body#module-ets_faq-faqs #left-column,
body#module-ets_faq-faqs #right-column {
  display: none;
}

body#module-ets_faq-faqs nav.breadcrumb,
body#module-ets_faq-faqs .breadcrumb-wrap,
body#module-ets_faq-faqs header.page-header {
  display: none !important;
}

body#module-ets_faq-faqs .page-content {
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* Override theme.css: #main .page-content { margin-bottom: 1.563rem } */
body#module-ets_faq-faqs #main .page-content {
  margin-bottom: 0 !important;
}

/* Layout principal : accordéon | image botanique */
body#module-ets_faq-faqs .vs-faq {
  display: flex;
  align-items: stretch;
  width: 100%;
}

body#module-ets_faq-faqs .vs-faq__left {
  flex: 0 0 65%;
  padding: 60px;
  min-width: 0;
  background: #f4eedf;
}

body#module-ets_faq-faqs .vs-faq__right {
  flex: 0 0 35%;
  background-size: cover;
  background-position: center;
}

/* Image botanique selon audience */
body.vs-aud-part #module-ets_faq-faqs .vs-faq__right,
body#module-ets_faq-faqs.vs-aud-part .vs-faq__right {
  background-image: url("../img/leaves-bg.webp");
}

body.vs-aud-pro #module-ets_faq-faqs .vs-faq__right,
body#module-ets_faq-faqs.vs-aud-pro .vs-faq__right {
  background-image: url("../img/bg-pro-botanical.webp");
}

/* Liste FAQ */
body#module-ets_faq-faqs .vs-faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

body#module-ets_faq-faqs .vs-faq__item {
  border-bottom: 1px solid #AEAFB2;
}

/* Supprimer outline focus */
body#module-ets_faq-faqs button:focus,
body#module-ets_faq-faqs button:focus-visible,
body#module-ets_faq-faqs a:focus,
body#module-ets_faq-faqs a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ---- État FERMÉ ---- */
body#module-ets_faq-faqs .vs-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 16px;
  transition: background .25s ease, padding .25s ease;
}

body#module-ets_faq-faqs .vs-faq__question-text {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #3d1c10;
  line-height: normal;
  transition: color .25s ease, font-weight .25s ease;
}

/* Cercle autour de la flèche */
body#module-ets_faq-faqs .vs-faq__arrow-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  flex-shrink: 0;
  border-radius: 15px;
  background: transparent;
  transition: background .25s ease;
}

body#module-ets_faq-faqs .vs-faq__arrow {
  display: block;
  flex-shrink: 0;
  transition: transform .3s ease;
}

/* ---- État OUVERT ---- */
body#module-ets_faq-faqs .vs-faq__item.is-open .vs-faq__question {
  background: #3d1c10;
  padding: 30px 20px 10px;
}

body#module-ets_faq-faqs .vs-faq__item.is-open .vs-faq__question-text {
  color: #fff;
  font-weight: 700;
}

body#module-ets_faq-faqs .vs-faq__item.is-open .vs-faq__arrow-wrap {
  background: linear-gradient(131.634deg, #A67A32 16.176%, #F7EA8C 44.881%, #A67A32 87.255%);
}

body#module-ets_faq-faqs .vs-faq__item.is-open .vs-faq__arrow {
  transform: rotate(90deg);
}

/* Flèche : fill sombre en état ouvert (sur cercle or) */
body#module-ets_faq-faqs .vs-faq__item.is-open .vs-faq__arrow path {
  fill: #3d1c10 !important;
}

/* Réponse */
body#module-ets_faq-faqs .vs-faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  background: #3d1c10;
  padding: 0 20px;
}

body#module-ets_faq-faqs .vs-faq__item.is-open .vs-faq__answer {
  padding-top: 6px;
  padding-bottom: 24px;
}

body#module-ets_faq-faqs .vs-faq__answer,
body#module-ets_faq-faqs .vs-faq__answer * {
  font-family: "Work Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #fff !important;
}

body#module-ets_faq-faqs .vs-faq__answer p {
  margin: 0 0 8px !important;
}

body#module-ets_faq-faqs .vs-faq__answer p:last-child {
  margin-bottom: 0 !important;
}

/* Centrage vertical dans l'intro (image + divider + texte) */
body#module-ets_faq-faqs .qs-intro__img {
  display: flex;
  align-items: center;
  justify-content: center;
}

body#module-ets_faq-faqs .qs-section--intro .qs-intro__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Flower : taille réduite + centrée verticalement */
body#module-ets_faq-faqs .qs-section--intro .qs-vdivider__flower {
  width: 130px;
  bottom: auto;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Supprime tout espace résiduel en bas */
body#module-ets_faq-faqs #content,
body#module-ets_faq-faqs #content.page-content,
body#module-ets_faq-faqs #content.card,
body#module-ets_faq-faqs #content.card-block {
  padding: 0 !important;
  margin: 0 !important;
}

body#module-ets_faq-faqs #main {
  padding: 0 !important;
  margin: 0 !important;
}

body#module-ets_faq-faqs #wrapper,
body#module-ets_faq-faqs #wrapper>.container,
body#module-ets_faq-faqs #wrapper>.container>.row {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Éliminer l'espace fantôme en bas — forcer height: auto sur toute la chaîne */
body#module-ets_faq-faqs #wrapper,
body#module-ets_faq-faqs #wrapper>.container,
body#module-ets_faq-faqs #wrapper>.container>.row,
body#module-ets_faq-faqs #content-wrapper,
body#module-ets_faq-faqs #main,
body#module-ets_faq-faqs #content {
  height: auto !important;
  min-height: 0 !important;
}

body#module-ets_faq-faqs #content-wrapper {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
}

body#module-ets_faq-faqs #main {
  flex: 0 0 auto !important;
  min-height: 0 !important;
}

/* Responsive */
@media (max-width: 900px) {
  body#module-ets_faq-faqs .vs-faq {
    flex-direction: column;
  }

  body#module-ets_faq-faqs .vs-faq__right {
    flex: 0 0 auto;
    height: 280px;
  }

  body#module-ets_faq-faqs .vs-faq__left {
    padding: 30px 20px;
  }
}

/* === AUDIENCE PART — bandeaux bleus (dégradé Figma) ================ */
body.vs-aud-part #header .vs-topbar,
body.vs-aud-part .vs-footer-divider,
body.vs-aud-part .vs-baseline,
body.vs-aud-part .vs-section-title,
body.vs-aud-part .vs-cms-header {
  background: linear-gradient(45deg, rgba(0, 30, 59, 1) 0%, rgba(2, 57, 96, 1) 46%, rgba(6, 80, 130, 1) 63%, rgba(6, 80, 130, 1) 68%, rgba(3, 66, 109, 1) 82%, rgba(0, 26, 53, 1) 100%) !important;
}

/* === AUDIENCE PRO — bandeaux rouges (dégradé Figma) ================ */
body.vs-aud-pro #header .vs-topbar,
body.vs-aud-pro .vs-footer-divider,
body.vs-aud-pro .vs-baseline,
body.vs-aud-pro .vs-section-title,
body.vs-aud-pro .vs-cms-header {
  background: linear-gradient(45deg, rgba(117, 0, 0, 1) 0%, rgba(136, 0, 1, 1) 46%, rgba(222, 0, 5, 1) 63%, rgba(222, 0, 5, 1) 68%, rgba(173, 0, 5, 1) 82%, rgba(107, 0, 0, 1) 100%) !important;
}

/* === AUDIENCE PRO — backgrounds spécifiques ========================= */
body.vs-aud-pro .vs-hero {
  background-image: url("../img/pro-vanille.webp");
}

/* Accueil Pro : fond « forêt tropicale / lémurien » sur les sections éditoriale et
   ambassadeur (plein largeur). */
body.vs-aud-pro .vs-ambassador {
  background-image: url("../img/foret-tropicale-lemurien.webp");
  background-attachment: fixed;
}

body.vs-aud-pro .vs-editorial {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  background: url("../img/foret-tropicale-lemurien.webp") center/cover no-repeat;
  background-attachment: fixed;
}

body.vs-aud-pro .vs-editorial .vs-editorial__inner {
  padding-block: 60px;
}

/* Bloc texte éditorial Pro : fond crème translucide + halo + coins arrondis
   (lisibilité par-dessus le fond forêt tropicale). */
body.vs-aud-pro .vs-editorial .vs-editorial__text {
  padding: 30px 10px 30px 20px;
  background-color: #ffefd2f5;
  box-shadow: 0px 0px 76px #ffefd1;
  border-radius: 18px;
}

/* Séparateur vertical éditorial Pro : plus épais + teinte crème. */
body.vs-aud-pro .vs-editorial .vs-editorial__sep::after {
  width: 2px;
  background: #faeacc;
}

/* Sous 1200px : la section Pro est plein largeur (100vw) et l'inner n'a pas de
   padding latéral → le bloc texte crème collait aux bords (à droite en 2 colonnes,
   puis gauche+droite en une colonne sur tablette/mobile). On rétablit un padding
   latéral à TOUS les paliers < 1200px. Sur le palier 2 colonnes (992-1199) on réduit
   aussi la largeur du bloc texte. */
@media (max-width: 1199px) {
  body.vs-aud-pro .vs-editorial .vs-editorial__inner {
    padding-inline: 30px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  body.vs-aud-pro .vs-editorial .vs-editorial__text {
    flex: 0 1 46%;
  }
}

/* =====================================================================
   PAGE CONTACT (cms-id-8)
   ===================================================================== */

/* Masque contenu CMS natif + card-block PS */
:is(body.cms-id-8, body.cms-id-17) section#content.page-cms-8,
:is(body.cms-id-8, body.cms-id-17) #content.card-block {
  display: none !important;
}

/* Reset espacement PS */
:is(body.cms-id-8, body.cms-id-17) #main .page-content {
  margin-bottom: 0 !important;
}

:is(body.cms-id-8, body.cms-id-17) #wrapper>.container {
  max-width: 100%;
  padding: 0;
}

:is(body.cms-id-8, body.cms-id-17) #content-wrapper {
  padding: 0 !important;
}

/* Intro contact — layout 3 colonnes égales (Figma 183:1745) */
:is(body.cms-id-8, body.cms-id-17) .vs-contact-intro .qs-inner {
  min-height: unset;
  align-items: center;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact-intro .qs-intro__img {
  flex: 1 0 0;
  padding: 0;
  min-width: 0;
  display: block;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact-intro .qs-intro__img img {
  width: 100%;
  height: 223px;
  object-fit: cover;
  display: block;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact-intro .qs-vdivider {
  flex: 1 0 0;
  background: none;
  margin: 0;
  min-width: 0;
  align-self: stretch;
  position: relative;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact-intro .qs-vdivider::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #AEAFB2;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact-intro .qs-vdivider__flower {
  width: 193px;
  top: 50%;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact-intro .qs-intro__text {
  flex: 1 0 0;
  padding: 150px 10px 150px 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact-intro .qs-h1 {
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  margin: 0 0 8px;
  color: #000;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact-intro .qs-text {
  font-size: 12px;
  color: #000;
  margin: 0;
}

/* Responsive contact intro */
@media (max-width: 1199px) {
  :is(body.cms-id-8, body.cms-id-17) .vs-contact-intro .qs-inner {
    padding-top: 0 !important;
    padding-bottom: 40px !important;
  }

  :is(body.cms-id-8, body.cms-id-17) .vs-contact-intro .qs-intro__img {
    padding-top: 30px;
  }

  :is(body.cms-id-8, body.cms-id-17) .vs-contact-intro .qs-intro__img img {
    height: 260px;
  }

  :is(body.cms-id-8, body.cms-id-17) .vs-contact-intro .qs-vdivider {
    height: 1px;
    flex: 0 0 1px;
    background: #AEAFB2;
    margin: 100px 0 0;
    width: 100%;
  }

  :is(body.cms-id-8, body.cms-id-17) .vs-contact-intro .qs-vdivider::after {
    display: none;
  }

  :is(body.cms-id-8, body.cms-id-17) .vs-contact-intro .qs-vdivider__flower {
    position: relative !important;
    display: block !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: 193px !important;
    margin: -75px auto 0 !important;
    z-index: 1;
  }

  :is(body.cms-id-8, body.cms-id-17) .vs-contact-intro .qs-intro__text {
    padding: 20px 20px 0 !important;
  }
}

/* === SECTION CONTACT — bande pleine largeur + fond doré translucide === */
:is(body.cms-id-8, body.cms-id-17) .vs-contact {
  width: 100%;
  background: #ab80361f;
}

/* Conteneur interne standard : contenu (form + infos) centré à 1200px */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__container {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Formulaire — ~65% */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__form {
  flex: 0 0 65%;
  padding: 60px 15px;
  min-width: 0;
  background: transparent;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__form-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
  color: #3d1c10;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__label {
  font-family: "Work Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  margin: 0;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__title {
  font-family: "Work Sans", sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: normal;
  margin: 0;
}

/* Séparateur vertical */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__sep {
  width: 1px;
  background: #AEAFB2;
  flex-shrink: 0;
}

/* Infos — ~35% */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__info {
  flex: 0 0 35%;
  padding: 60px 30px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
  background: transparent;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__map {
  flex-shrink: 0;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__map iframe {
  display: block;
  width: 100%;
  height: 343px;
  border: 0;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__h2 {
  font-family: "Work Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #3d1c10;
  margin: 0;
  line-height: normal;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__h2--social {
  margin-top: 47px;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__address {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #2a2a30;
  line-height: normal;
  font-style: normal;
  margin: 0;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__tel,
:is(body.cms-id-8, body.cms-id-17) .vs-contact__mail {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  color: #2a2a30;
  margin: 0;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__tel a,
:is(body.cms-id-8, body.cms-id-17) .vs-contact__mail a {
  color: #747482;
  text-decoration: none;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__social {
  display: flex !important;
  align-items: center !important;
  gap: 23px !important;
  margin-top: 10px;
}

/* Aplatir block-social pour que ses li soient enfants directs du flex parent */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .block-social {
  display: contents !important;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .block-social ul {
  display: contents !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .block-social li {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

/* Copie exacte du style footer (ronds + bordure + outline) recoloré #2a2a30 */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .block-social li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border: 1.5px solid #2a2a30 !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  color: transparent !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease !important;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .block-social li a::before {
  content: "" !important;
  display: block !important;
  width: 21px !important;
  height: 21px !important;
  background-color: #2a2a30 !important;
  mask-size: contain !important;
  -webkit-mask-size: contain !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-position: center !important;
  -webkit-mask-position: center !important;
  flex-shrink: 0 !important;
  transition: background-color 0.2s ease !important;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .block-social li a:hover,
:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .block-social li a:focus {
  border-color: #cab999 !important;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .block-social li a:hover::before,
:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .block-social li a:focus::before {
  background-color: #cab999 !important;
}

/* Mêmes réseaux que le footer : TikTok, Facebook, Instagram, YouTube, LinkedIn */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .block-social li.tiktok {
  order: 1;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .block-social li.facebook {
  order: 2;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .block-social li.instagram {
  order: 3;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .block-social li.youtube {
  order: 4;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .block-social li.linkedin {
  order: 5;
}

/* Lien GMB conservé dans le markup mais masqué (non affiché à la demande) */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .vs-contact__gmb {
  display: none !important;
}

/* TikTok — outline (identique footer) */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .block-social li.tiktok a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='none' stroke='white' stroke-width='30' d='M448 209.91a210.06 210.06 0 0 1-122.77-39.25v178.72A162.55 162.55 0 1 1 185 188.31v89.89a74.62 74.62 0 1 0 52.23 71.18V0h88a121.18 121.18 0 0 0 1.86 22.17A122.18 122.18 0 0 0 381 102.39a121.43 121.43 0 0 0 67 20.14z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='none' stroke='white' stroke-width='30' d='M448 209.91a210.06 210.06 0 0 1-122.77-39.25v178.72A162.55 162.55 0 1 1 185 188.31v89.89a74.62 74.62 0 1 0 52.23 71.18V0h88a121.18 121.18 0 0 0 1.86 22.17A122.18 122.18 0 0 0 381 102.39a121.43 121.43 0 0 0 67 20.14z'/%3E%3C/svg%3E");
}

/* Facebook — outline (identique footer) */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .block-social li.facebook a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='none' stroke='white' stroke-width='30' d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='none' stroke='white' stroke-width='30' d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E");
}

/* YouTube — outline rectangle + triangle (identique footer) */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .block-social li.youtube a::before {
  width: 18px !important;
  height: 15px !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Crect x='32' y='96' width='512' height='320' rx='80' ry='80' fill='none' stroke='white' stroke-width='36'/%3E%3Cpath fill='white' d='M210 175 L390 256 L210 337 Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Crect x='32' y='96' width='512' height='320' rx='80' ry='80' fill='none' stroke='white' stroke-width='36'/%3E%3Cpath fill='white' d='M210 175 L390 256 L210 337 Z'/%3E%3C/svg%3E");
}

/* Instagram — version pleine (identique footer) */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .block-social li.instagram a::before {
  width: 21px !important;
  height: 21px !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__social .block-social li.linkedin a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'/%3E%3C/svg%3E");
}

/* === WIDGET CONTACTFORM — reset complet PS + style Figma === */

/* Masque le titre "CONTACTEZ-NOUS" du module */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget h2,
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .contact-form>h2 {
  display: none !important;
}

/* Masque "Document joint" (pas dans Figma) */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .form-group:has(input[type="file"]) {
  display: none !important;
}

/* Reset conteneur form */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget,
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .contact-form {
  background: transparent !important;
  padding: 0 !important;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: transparent;
}

/* .form-fields = conteneur de tous les groupes */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .form-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Chaque .form-group en colonne par défaut */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .form-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  background: transparent !important;
}

/* Labels → texte 12px Work Sans #2a2a30, pas masqués */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget label {
  display: none;
}

/* Inputs, select, textarea */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget input[type="text"],
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget input[type="email"],
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget input[type="tel"],
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget select,
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget textarea {
  width: 100%;
  height: 34px;
  border: 1px solid #AEAFB2 !important;
  background: #fff !important;
  padding: 5px 7px !important;
  font-family: "Work Sans", sans-serif !important;
  font-size: 12px !important;
  color: #2a2a30 !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  appearance: none;
  -webkit-appearance: none;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23AEAFB2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 28px !important;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget textarea {
  height: auto !important;
  min-height: 200px !important;
  resize: vertical !important;
  padding: 10px !important;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget input::placeholder,
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget textarea::placeholder {
  color: #2a2a30 !important;
  font-size: 12px !important;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget input:focus,
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget textarea:focus,
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget select:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: #3d1c10 !important;
}

/* Checkbox CGU */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .custom-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .custom-checkbox input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  border: 1px solid #b9b9c0 !important;
  border-radius: 5px !important;
  appearance: none !important;
  background: #fff !important;
  cursor: pointer;
  margin: 0 !important;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .custom-checkbox input[type="checkbox"]:checked {
  background: #3d1c10 !important;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .custom-checkbox label,
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .custom-checkbox span {
  display: block !important;
  font-family: "Work Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #747482 !important;
  line-height: normal !important;
}

/* Bouton Envoyer */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__submit,
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget [type="submit"],
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget button[type="submit"] {
  width: 171px !important;
  height: 44px !important;
  background: #fff !important;
  border: 1px solid #aeafb2 !important;
  font-family: "Work Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #000 !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__submit:hover,
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget [type="submit"]:hover,
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget button[type="submit"]:hover {
  background: #3d1c10 !important;
  color: #fff !important;
  border-color: #3d1c10 !important;
}

/* Alertes / messages PS */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .alert {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  border-radius: 0;
}

/* Couleur titres formulaire */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__label {
  color: #3D1C10;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__title {
  color: #3D1C10;
}

/* Couleur placeholders & labels champs */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget input::placeholder,
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget textarea::placeholder {
  color: #3D1C10 !important;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget select {
  color: #3D1C10 !important;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget select option {
  color: #2a2a30;
}

/* Layout lignes formulaire custom (.vs-cf__row) */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__row {
  display: flex;
  gap: 15px;
  width: 100%;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__row--full {
  flex-direction: column;
}

/* Wrapper champ avec icône */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__field--full {
  width: 100%;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  color: #c4a882;
  pointer-events: none;
  flex-shrink: 0;
  line-height: 0;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__icon svg {
  display: block;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget input.vs-cf__input--icon,
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget select.vs-cf__input--icon,
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__input--icon {
  padding-left: 34px !important;
}

/* Champ pièces jointes (photos) — même allure que les autres champs */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__file {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px 10px 34px;
  border: 1px solid #aeafb2;
  background: #fff;
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  color: #3D1C10;
  cursor: pointer;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__file-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__file input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* CGU custom */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__cgu {
  display: flex;
  align-items: center;
  gap: 15px;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__cgu input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0;
  accent-color: #3d1c10;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__cgu label {
  display: block !important;
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  color: #2a2a30;
  margin: 0;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__cgu label a {
  color: #3d1c10;
}

/* Message confirmation envoi */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__success {
  padding: 20px;
  background: #c7e4d3;
  border-left: 3px solid #2d7d52;
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  color: #1a4d33;
}

/* Erreurs validation */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__errors {
  padding: 15px 20px;
  background: #fff4f4;
  border-left: 3px solid #c0392b;
  margin-bottom: 20px;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__errors ul {
  margin: 0;
  padding-left: 16px;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__errors li {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  color: #c0392b;
}


/* ---- Contact responsive ---- */
@media (max-width: 991px) {
  :is(body.cms-id-8, body.cms-id-17) .vs-contact__container {
    flex-direction: column;
  }

  :is(body.cms-id-8, body.cms-id-17) .vs-contact__form {
    flex: 0 0 auto;
    width: 100%;
    padding: 40px 20px 30px;
  }

  :is(body.cms-id-8, body.cms-id-17) .vs-contact__sep {
    width: 100%;
    height: 1px;
    flex-shrink: 0;
  }

  :is(body.cms-id-8, body.cms-id-17) .vs-contact__info {
    flex: 0 0 auto;
    width: 100%;
    padding: 30px 20px 40px;
  }
}

@media (max-width: 480px) {
  :is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__row {
    width: 100%;
    flex-direction: column;
  }
}

/* =============================================================
   FORMULAIRE CONTACT PRO (page CMS id 17) — réutilise TOUT le style du formulaire
   Particulier via .vs-contact__widget (sélecteurs étendus à cms-id-17 ci-dessus).
   Ici uniquement les éléments EN PLUS par rapport au formulaire Particulier :
   titres de section (legend) + choix Oui/Non (radios). Palette identique (#3d1c10).
   ============================================================= */
:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__legend {
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #3d1c10;
  margin: 10px 0 2px;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__choice {
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__choice-label {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  color: #2a2a30;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  color: #2a2a30;
  cursor: pointer;
}

:is(body.cms-id-8, body.cms-id-17) .vs-contact__widget .vs-cf__radio input[type="radio"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #3d1c10;
}

/* Bouton Pro : libellé « Envoyer ma demande » plus long → largeur auto (page 8 reste 171px). */
body.cms-id-17 .vs-contact__widget .vs-cf__submit {
  width: auto !important;
  min-width: 200px;
  padding: 0 26px !important;
}

/* =============================================================
   PAGE CATÉGORIE — "La Boutique" (/15-vente-vanille)
   Figma node 183-1857
   ============================================================= */

/* ---- Supprimer sidebar gauche — full-width ---- */
body.page-category #left-column {
  display: none !important;
}

body.page-category #content-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.page-category #main .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---- Breadcrumb — Figma 183-1964 ----
   Pages "listing" + fiche produit : catégorie, produit, recherche, meilleures ventes,
   nouveautés, promotions. :is() regroupe les classes body — spécificité identique à
   l'ancien `body.page-category #wrapper nav.breadcrumb` (1 id + 1 classe + éléments =
   1,1,1) : :is() prend la spécificité de son argument le plus fort (une classe).
   #wrapper requis pour primer sur le breadcrumb de Classic. */
body:is(.page-category, .page-product, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #wrapper nav.breadcrumb {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 30px 20px !important;
  background: transparent !important;
  margin: 0;
}

body:is(.page-category, .page-product, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #wrapper nav.breadcrumb ol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

body:is(.page-category, .page-product, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #wrapper nav.breadcrumb li {
  display: inline-flex;
  align-items: center;
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: #3d1c10;
}

body:is(.page-category, .page-product, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #wrapper nav.breadcrumb li a {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #3d1c10;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 5px;
}

body:is(.page-category, .page-product, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #wrapper nav.breadcrumb li a:hover {
  color: #b17f4a;
}

/* Icône maison avant "Accueil" */
body:is(.page-category, .page-product, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #wrapper nav.breadcrumb li:first-child a::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: #b17f4a;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
}

/* Séparateur natif PS — masqué (li::after + aria-hidden), on utilise li+li::before */
body:is(.page-category, .page-product, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #wrapper nav.breadcrumb li::after {
  display: none !important;
  content: none !important;
}

body:is(.page-category, .page-product, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #wrapper nav.breadcrumb [aria-hidden="true"] {
  display: none !important;
}

body:is(.page-category, .page-product, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #wrapper nav.breadcrumb li>span[aria-hidden] {
  display: none !important;
}

/* Séparateur "/" entre items via CSS */
body:is(.page-category, .page-product, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #wrapper nav.breadcrumb li+li::before {
  content: '/';
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #3d1c10;
  padding: 0 4px;
}

/* Dernier item (page courante) */
body:is(.page-category, .page-product, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #wrapper nav.breadcrumb li:last-child a {
  color: #3d1c10;
  pointer-events: none;
}

/* ---- Intro — Figma 183-1872 ---- */
body.page-category .vs-cat-intro {
  text-align: center;
  width: 100%;
  padding: 0 0 60px;
}

/* H1 du contenu BO = titre SEO de la catégorie — AFFICHÉ et stylé en titre de marque.
   h2/h3 éventuels du contenu BO restent masqués. */
body.page-category .vs-cat-intro__desc h2,
body.page-category .vs-cat-intro__desc h3 {
  display: none !important;
}

body.page-category .vs-cat-intro__desc h1 {
  display: block;
  font-family: "Work Sans", sans-serif !important;
  font-size: 32px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: #000 !important;
  line-height: normal !important;
  text-align: center !important;
  text-transform: none !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

/* Neutralise les styles inline Word/Calibri sur d'éventuels <span> dans le H1
   (sinon la règle générique .vs-cat-intro__desc span les forcerait à 12px). */
body.page-category .vs-cat-intro__desc h1 * {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}

/* Force Work Sans 12px sur tout le contenu (écrase inline styles Word/Calibri) */
body.page-category .vs-cat-intro__desc,
body.page-category .vs-cat-intro__desc p,
body.page-category .vs-cat-intro__desc span,
body.page-category .vs-cat-intro__desc div {
  font-family: "Work Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #000 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- Séparateur gris full-width (break-out du container Bootstrap) ---- */
body.page-category .vs-separator-wrap {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  padding: 0;
}

body.page-category .vs-separator {
  border: none;
  border-top: 1px solid #aeafb2;
  margin: 0;
  opacity: 1;
  width: 100%;
  display: block;
}

body.page-category .vs-separator-wrap--below {
  display: none;
}

/* ---- Section sous-catégories — Figma 183-2007 ---- */
body.page-category .vs-subcategories {
  width: 100%;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.page-category .vs-subcategories__title {
  font-family: "Work Sans", sans-serif;
  font-size: 32px;
  font-weight: 400;
  color: #000;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}

/* Carousel sous-catégories : 4 cartes visibles + flèches (custom.js). */
body.page-category .vs-subcategories__carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

body.page-category .vs-subcategories__grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge legacy */
  list-style: none;
  margin: 0;
  padding: 4px 2px;
  /* évite de rogner la bordure au survol */
}

body.page-category .vs-subcategories__grid::-webkit-scrollbar {
  display: none;
}

/* Flèches de défilement */
body.page-category .vs-subcat-arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #3d1c10;
  color: #ffffff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
}

body.page-category .vs-subcat-arrow:hover {
  background: #b17f4a;
}

body.page-category .vs-subcat-arrow svg {
  width: 20px;
  height: 20px;
}

/* Masquées quand tout tient (attribut hidden posé par custom.js dès qu'il n'y a pas
   de débordement) ; sinon visibles et grisées (disabled) aux extrémités. */
body.page-category .vs-subcat-arrow[hidden] {
  display: none;
}

body.page-category .vs-subcat-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

body.page-category .vs-subcat-arrow:disabled:hover {
  background: #3d1c10;
}

/* Gouttières latérales des sections "intro" et "catégories" quand le .container
   occupe toute la largeur du viewport — >=1200px (container 100% jusqu'à 1600px)
   et <768px (container mobile pleine largeur) — sinon ces sections (qui débordent du
   padding du container) collent aux bords gauche/droite. Entre 768 et 1199px le
   container Bootstrap est centré/étroit : pas besoin. */
@media (min-width: 1200px) {

  body.page-category .vs-cat-intro,
  body.page-category .vs-subcategories,
  body.page-category .vs-bestsellers {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 767px) {

  body.page-category .vs-cat-intro,
  body.page-category .vs-subcategories,
  body.page-category .vs-bestsellers {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* ---- Décorations florales de fond selon la catégorie (Figma 183:1857) ----
   Line-art placé DERRIÈRE le contenu (visible dans les gouttières), débordant
   des bords gauche/droit. #content-wrapper devient le référent positionné. */
body:is(.page-category, .page-product) #content-wrapper {
  position: relative;
  z-index: 0;
}

/* Couche pleine largeur ÉCRAN (hors container, break-out du container Bootstrap)
   pour que les décors se collent aux bords gauche/droit de l'écran. */
body:is(.page-category, .page-product) .vs-cat-decor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

body:is(.page-category, .page-product) .vs-cat-decor__img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
}

/* Positions communes : droit collé en haut à droite, gauche plus bas à gauche. */
body:is(.page-category, .page-product) .vs-cat-decor__img--right {
  top: 300px;
  right: 0;
}

body:is(.page-category, .page-product) .vs-cat-decor__img--left {
  top: 1050px;
  left: 0;
}

/* Dimensions VANILLE (Figma 2517:6094 / 2517:6171). */
body:is(.page-category, .page-product) .vs-cat-decor--vanille .vs-cat-decor__img--right {
  width: 387px;
  height: 565px;
}

body:is(.page-category, .page-product) .vs-cat-decor--vanille .vs-cat-decor__img--left {
  width: 278px;
  height: 377px;
}

/* Dimensions ÉPICES. */
body:is(.page-category, .page-product) .vs-cat-decor--epices .vs-cat-decor__img--right {
  width: 132px;
  height: 350px;
}

body:is(.page-category, .page-product) .vs-cat-decor--epices .vs-cat-decor__img--left {
  width: 197px;
  height: 239px;
}

/* Dimensions BOUTIQUE (page racine « vente-vanille ») : décor mixte —
   vanille à droite (mêmes tailles que la branche vanille) + épices à gauche. */
body:is(.page-category, .page-product) .vs-cat-decor--boutique .vs-cat-decor__img--right {
  width: 387px;
  height: 565px;
}

body:is(.page-category, .page-product) .vs-cat-decor--boutique .vs-cat-decor__img--left {
  width: 197px;
  height: 239px;
}

/* < 1700px : décor plus discret. */
@media (max-width: 1700px) {
  body:is(.page-category, .page-product) .vs-cat-decor__img {
    opacity: 0.4;
  }
}

/* ---- Décorations florales de fond sur les pages informatives (CMS, FAQ, blog) ----
   Même principe que .vs-cat-decor des catégories : 2 images à gauche (haut/bas) +
   2 à droite (haut/bas), calque plein écran DERRIÈRE le contenu. Le calque est
   injecté dans #content-wrapper par custom.js (3 familles de templates
   hétérogènes : CMS + modules ets_faq / ets_blog) ; la classe .vs-cms-decor-host
   posée sur #content-wrapper en fait le référent + le contexte d'empilement. ---- */
.vs-cms-decor-host {
  position: relative;
  z-index: 0;
}

.vs-cms-decor {
  position: absolute;
  top: 10%;
  bottom: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.vs-cms-decor__img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
}

.vs-cms-decor__img--tl {
  top: 40px;
  left: 0;
  width: 280px;
}

.vs-cms-decor__img--tr {
  top: 40px;
  right: 0;
  width: 300px;
}

.vs-cms-decor__img--bl {
  bottom: 40px;
  left: 0;
  width: 210px;
}

.vs-cms-decor__img--br {
  bottom: 40px;
  right: 0;
  width: 340px;
}

/* Opacité dégressive : >1700px = 1 (normal) ; ≤1700px = 0.5 ; ≤1400px = 0.2 ;
   ≤991px = masqué (chevaucherait le contenu). */
@media (max-width: 1700px) {
  .vs-cms-decor__img {
    opacity: 0.5;
  }
}

@media (max-width: 1400px) {
  .vs-cms-decor__img {
    opacity: 0.2;
  }
}

@media (max-width: 991px) {
  .vs-cms-decor {
    display: none;
  }
}

/* < 1200px : décor réduit (hauteur proportionnelle). */
@media (max-width: 1199px) {
  body:is(.page-category, .page-product) .vs-cat-decor--vanille .vs-cat-decor__img {
    width: 200px;
    height: auto;
  }

  body:is(.page-category, .page-product) .vs-cat-decor--epices .vs-cat-decor__img {
    width: 120px;
    height: auto;
  }

  body:is(.page-category, .page-product) .vs-cat-decor--boutique .vs-cat-decor__img--right {
    width: 200px;
    height: auto;
  }

  body:is(.page-category, .page-product) .vs-cat-decor--boutique .vs-cat-decor__img--left {
    width: 120px;
    height: auto;
  }
}

/* Masqué uniquement en mobile (< 767px). */
@media (max-width: 767px) {
  body:is(.page-category, .page-product) .vs-cat-decor {
    display: none;
  }
}

/* ---- Section "Meilleures ventes" (module vs_categorybestsellers), sous les sous-catégories ----
   Réutilise la carte .vs-product (dont les styles page-category s'appliquent déjà) ;
   ici on ne définit que la grille + l'espacement, aligné sur la grille produits. */
body.page-category .vs-bestsellers {
  margin-top: 50px;
  padding-bottom: 50px;
}

/* Séparateur pleine largeur entre les sous-catégories et les meilleures ventes. */
body.page-category .vs-bestsellers-sep {
  margin-top: 50px;
}

body.page-category .vs-bestsellers-sep+.vs-bestsellers {
  margin-top: 30px;
}

body.page-category .vs-bestsellers__title {
  margin-bottom: 24px;
}

body.page-category .vs-bestsellers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

body.page-category .vs-bestsellers__grid .vs-product {
  min-width: 0;
}

@media (max-width: 1199px) {
  body.page-category .vs-bestsellers__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  body.page-category .vs-bestsellers__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  body.page-category .vs-bestsellers__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Bande ambassadeur bas de page catégorie (copie de .vs-ambassador) ----
   Fond plein écran (break-out du container) qui change selon l'audience ;
   container 1600px (comme la grille produits) avec l'image alignée à droite. */
body.page-category .vs-cat-ambassador,
body.cms-id-9 .vs-cat-ambassador {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  margin-top: 20px;
  background: var(--vs-dark) url("../img/leaves-bg.webp") center/cover no-repeat;
  /* Effet parallaxe : le fond reste fixe au scroll (déclaré APRÈS le shorthand
     `background` qui réinitialise sinon background-attachment). */
  background-attachment: fixed;
}

body.vs-aud-pro.page-category .vs-cat-ambassador {
  background-image: url("../img/bg-pro-botanical.webp");
}

/* Pages catégorie « Épices royales » (Particulier id 16 + Professionnel id 57) :
   fond dédié « cannelle & baies tropicales », sur les DEUX espaces (surcharge le
   fond par défaut ET le fond Pro — placée après eux, même spécificité). */
body.category-id-16.page-category .vs-cat-ambassador,
body.category-id-57.page-category .vs-cat-ambassador {
  background-image: url("../img/cannelle-baies-tropicales.webp");
}

/* Catégories Particulier avec fond dédié (surcharge le fond par défaut) :
   « Autour de la Vanille » (id 19) et « Coffrets et découvertes » (id 17). */
body.category-id-19.page-category .vs-cat-ambassador {
  background-image: url("../img/bg-autour-vanille.jpg");
}

body.category-id-17.page-category .vs-cat-ambassador {
  background-image: url("../img/bg-coffert-decouverte.jpg");
}

/* Catégorie Professionnel « Votre métier » (id 46) : fond dédié
   (surcharge le fond Pro par défaut bg-pro-botanical.webp). */
body.category-id-46.page-category .vs-cat-ambassador {
  background-image: url("../img/bg-coffert-decouverte.jpg");
}

/* Page CMS « Recettes et conseils » (id 9, Particulier) : fond dédié bourbon. */
body.cms-id-9 .vs-cat-ambassador {
  background-image: url("../img/qs-bourbon-1.webp");
}

body.page-category .vs-cat-ambassador__container,
body.cms-id-9 .vs-cat-ambassador__container {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 30px;
}

body.page-category .vs-cat-ambassador__img,
body.cms-id-9 .vs-cat-ambassador__img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 420px;
}

/* Encart signature — juste à gauche de la photo (police cursive système = effet manuscrit,
   aucune font externe). Panneau translucide bordé pour rester lisible sur le fond.
   Pile cursive volontairement FINE : Snell Roundhand (macOS) / Gabriola (Windows) —
   scripts systèmes aux traits déliés — puis repli sur les scripts plus épais. */
body.page-category .vs-cat-ambassador__quote,
body.cms-id-9 .vs-cat-ambassador__quote {
  flex: 0 1 320px;
  max-width: 320px;
  margin: 0;
  padding: 24px 28px;
  background: rgba(30, 20, 15, 0.75);
  border: 1px solid rgba(202, 185, 153, 0.55);
  border-radius: 8px;
}

body.page-category .vs-cat-ambassador__quote blockquote,
body.cms-id-9 .vs-cat-ambassador__quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  color: #e9dcc2;
  font-family: "Snell Roundhand", "Gabriola", "Brush Script MT", "Segoe Script", cursive;
  font-size: 26px;
  font-weight: 300;
  line-height: 1.4;
  quotes: none;
}

@media (max-width: 767px) {

  body.page-category .vs-cat-ambassador__container,
  body.cms-id-9 .vs-cat-ambassador__container {
    justify-content: center;
    padding: 28px 15px;
    gap: 22px;
  }

  body.page-category .vs-cat-ambassador__quote,
  body.cms-id-9 .vs-cat-ambassador__quote {
    flex-basis: 100%;
    max-width: 420px;
    text-align: center;
  }

  body.page-category .vs-cat-ambassador__quote blockquote,
  body.cms-id-9 .vs-cat-ambassador__quote blockquote {
    font-size: 22px;
  }
}

/* ---- Carte catégorie — Figma 183-1997 ---- */
body.page-category .vs-cat-card {
  position: relative;
  border: 1px solid #aeafb2;
  width: 278px;
  height: 368px;
  flex-shrink: 0;
  background: transparent;
  overflow: hidden;
  transition: background 0.3s ease;
}

/* 4 cartes visibles : chaque carte = 1/4 de la largeur (moins les 3 gaps de 16px) */
body.page-category .vs-subcategories__grid li.vs-cat-card {
  flex: 0 0 calc((100% - 48px) / 4);
  min-width: 0;
  max-width: none;
  width: auto;
  scroll-snap-align: start;
}

/* Strip botanique bas de carte — bg selon audience (défaut: particulier) */
body.page-category .vs-cat-card::after {
  content: '';
  position: absolute;
  top: 92.66%;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('../img/leaves-bg.webp') center / cover no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

body.page-category.vs-aud-pro .vs-cat-card::after,
body.vs-aud-pro .page-category .vs-cat-card::after {
  background-image: url('../img/bg-pro-botanical.webp');
}

/* Hover : fond brun, textes blancs, strip botanique visible */
body.page-category .vs-cat-card:hover {
  background: #3d1c10;
}

body.page-category .vs-cat-card:hover::after {
  opacity: 1;
}

body.page-category .vs-cat-card:hover .vs-cat-card__name,
body.page-category .vs-cat-card:hover .vs-cat-card__link {
  color: #fff;
}

/* Zone image — fond blanc uniquement sur l'image */
body.page-category .vs-cat-card__img {
  position: absolute;
  top: 19px;
  left: 19px;
  right: 19px;
  height: 231px;
  overflow: hidden;
  background: #fff;
}

body.page-category .vs-cat-card__img a {
  display: block;
  width: 100%;
  height: 100%;
}

body.page-category .vs-cat-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

body.page-category .vs-cat-card:hover .vs-cat-card__img img {
  transform: scale(1.03);
}

/* Image fallback centrée dans le cadre */
body.page-category .vs-cat-card__img--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.page-category .vs-cat-card__img--fallback a {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.page-category .vs-cat-card__img-fallback {
  width: auto !important;
  height: auto !important;
  max-width: 80%;
  max-height: 80%;
  object-fit: contain !important;
  opacity: 0.5;
}

/* Nom catégorie — hauteur fixe, pas de coupure visible */
body.page-category .vs-cat-card__name {
  position: absolute;
  top: 265px;
  left: 19px;
  right: 19px;
  width: auto;
  height: 30px;
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  line-height: 30px;
  text-decoration: none;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
  z-index: 1;
}

body.page-category .vs-cat-card__link {
  position: absolute;
  top: 300px;
  left: 19px;
  right: 19px;
  width: auto;
  height: 30px;
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  display: block;
  line-height: 30px;
  transition: color 0.3s ease;
  z-index: 1;
  white-space: nowrap;
}

/* ---- Liste produits (catégorie + recherche + meilleures ventes / nouveautés /
   promotions) : même affichage grille + carte partout. :is() regroupe les pages
   listing (spécificité identique à body.page-category, cf. breadcrumb plus haut). ---- */

/* ---- Barre top liste produits ---- */
body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #js-product-list-top {
  border: 1px solid #e8e8e8c7;
  padding: 8px 12px;
  margin-bottom: 20px;
}

@media (min-width: 767px) and (max-width: 991px) {
  body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #js-product-list-top {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
  }

  body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #js-product-list-top .total-products {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none !important;
  }

  body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #js-product-list-top .col-lg-7 {
    flex: 1 1 0;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
  }
}

/* ---- Carte produit — Figma 186-4214 ---- */
body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) .js-product.vs-product {
  height: 526px;
}

body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) .vs-product .product-miniature__inner,
body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) .vs-product .thumbnail-container {
  height: 526px;
}

/* Image : hauteur calculée = 526 - top(14) - footer-zone(149) = 363px */
body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) .vs-product .product-thumbnail {
  padding: 14px 17px 0 15px;
  flex-shrink: 0;
}

body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) .vs-product .product-thumbnail img {
  height: 363px;
  width: 100%;
  object-fit: contain;
}

/* Fallback vanilla-flower : même hauteur que l'image réelle, centré */
body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) .vs-product .product-thumbnail--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 377px;
}

body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) .vs-product .vs-product__img-fallback {
  width: auto !important;
  height: auto !important;
  max-width: 70% !important;
  max-height: 70% !important;
  object-fit: contain !important;
  opacity: 0.45;
}

/* Footer : positionné dans les derniers 19% de la carte */
body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) .vs-product .vs-product__footer {
  padding: 14px 10px 30px;
}

/* ---- Largeur du contenu élargie à 1600px sur grands écrans (moins de fond blanc
   sur les côtés). Le vrai plafond est le .container Bootstrap (1140px) : on le relève
   ici pour les pages listing. En dessous de 1600px il reste fluide (100% / responsive). */
@media (min-width: 1200px) {
  body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #wrapper>.container {
    /* width:100% requis : Bootstrap fige la largeur du .container à 1140px au-delà de
       1200px ; relever max-width seul ne suffit pas, il faut rétablir width:100%. */
    max-width: 1600px;
    width: 100%;
  }
}

/* ---- Grille produits 4 colonnes (grands écrans) ---- */
body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #js-product-list {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  max-width: 100vw;
  background: #ab80361f;
  padding: 40px 20px 20px;
}

body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #js-product-list .products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  float: none !important;
  max-width: 1600px;
  margin: 0 auto !important;
}

body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #js-product-list .products .col-xs-12,
body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #js-product-list .products [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
}

/* Empêche les items de forcer la colonne au-delà de 1fr */
body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #js-product-list .products .vs-product,
body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #js-product-list .products .product-miniature {
  min-width: 0 !important;
}

body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #js-product-list .products .thumbnail-container {
  min-width: 0 !important;
  width: 100% !important;
}

/* ---- Pagination ---- */
body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) .pagination-wrap,
body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) nav.pagination {
  max-width: 1600px;
  margin: 0 auto;
  padding: 40px 20px 60px;
  /* top: évite que la pagination se colle aux produits (visible page 2, dernière rangée courte) */
}

/* Contenu de la pagination centré (neutralise le layout Bootstrap
   col-md-4 + col-md-6 offset-md-2 qui séparait compteur à gauche / liens à droite) */
body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) nav.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 30px;
}

body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) nav.pagination>div {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Liste des pages (Précédent / 1 / 2 / Suivant) — espacée : les li sont en inline sans marge
   dans le thème parent → items collés (« Précédent1 »). On la passe en inline-flex + gap. */
body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) nav.pagination .page-list {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) nav.pagination .page-list li {
  display: inline-flex;
  margin: 0;
}

body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) nav.pagination .page-list li a,
body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) nav.pagination .page-list li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
}

/* ---- Responsive ---- */
@media (max-width: 1199px) {

  /* Carousel : 3 cartes visibles (2 gaps de 16px) */
  body.page-category .vs-subcategories__grid li.vs-cat-card {
    flex: 0 0 calc((100% - 32px) / 3);
  }

  body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #js-product-list .products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 991px) {

  /* Carousel : 2 cartes visibles (1 gap de 16px) */
  body.page-category .vs-subcategories__grid li.vs-cat-card {
    flex: 0 0 calc((100% - 16px) / 2);
  }

  body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #js-product-list .products {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  body.page-category .vs-subcategories__title {
    font-size: 24px;
  }
}

@media (max-width: 767px) {

  /* Carousel : 1 seule catégorie visible */
  body.page-category .vs-subcategories__grid li.vs-cat-card {
    flex: 0 0 100%;
  }
}

@media (max-width: 575px) {
  body.page-category .vs-subcategories__title {
    text-align: center;
  }

  body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #js-product-list .products {
    grid-template-columns: 1fr !important;
  }

  body.page-category .vs-cat-card {
    height: auto;
    min-height: 368px;
  }

  body.page-category .vs-cat-intro {
    padding: 32px 16px 28px;
  }

  body:is(.page-category, .page-search, .page-best-sales, .page-new-products, .page-prices-drop) #js-product-list-top {
    text-align: center;
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
}

/* ---- Burger dans vs-topbar ----
   Anciennement : visibilité + style forcés par page (category/product/cart/
   my-account/order) via des règles !important dédiées, pensées pour l'ancienne
   disposition 1 ligne (burger à gauche, liens à droite, justify-content:space-between).
   Remplacé par la règle universelle du palier <=991px (cf. plus haut, "A partir de
   991px...") qui gère désormais la visibilité ET la disposition 2 lignes centrées
   pour TOUTES les pages — les anciennes règles par page auraient imposé
   justify-content:space-between en conflit avec le centrage. */
#header .vs-topbar .vs-topbar__burger {
  display: none;
}

/* Breadcrumb — même style que page-category */
body.page-cart #wrapper nav.breadcrumb,
body.page-my-account #wrapper nav.breadcrumb,
body.page-customer-account #wrapper nav.breadcrumb {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 30px 20px !important;
  background: transparent !important;
  margin: 0;
}

body.page-cart #wrapper nav.breadcrumb ol,
body.page-my-account #wrapper nav.breadcrumb ol,
body.page-customer-account #wrapper nav.breadcrumb ol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.page-cart #wrapper nav.breadcrumb li,
body.page-my-account #wrapper nav.breadcrumb li,
body.page-customer-account #wrapper nav.breadcrumb li {
  display: inline-flex;
  align-items: center;
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: #3d1c10;
}

body.page-cart #wrapper nav.breadcrumb li a,
body.page-my-account #wrapper nav.breadcrumb li a,
body.page-customer-account #wrapper nav.breadcrumb li a {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #3d1c10;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 5px;
}

body.page-cart #wrapper nav.breadcrumb li a:hover,
body.page-my-account #wrapper nav.breadcrumb li a:hover,
body.page-customer-account #wrapper nav.breadcrumb li a:hover {
  color: #b17f4a;
}

/* Icône maison */
body.page-cart #wrapper nav.breadcrumb li:first-child a::before,
body.page-my-account #wrapper nav.breadcrumb li:first-child a::before,
body.page-customer-account #wrapper nav.breadcrumb li:first-child a::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: #b17f4a;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
}

/* Masquer séparateurs natifs PS */
body.page-cart #wrapper nav.breadcrumb li::after,
body.page-my-account #wrapper nav.breadcrumb li::after,
body.page-customer-account #wrapper nav.breadcrumb li::after {
  display: none !important;
  content: none !important;
}

body.page-cart #wrapper nav.breadcrumb [aria-hidden="true"],
body.page-my-account #wrapper nav.breadcrumb [aria-hidden="true"],
body.page-customer-account #wrapper nav.breadcrumb [aria-hidden="true"] {
  display: none !important;
}

body.page-cart #wrapper nav.breadcrumb li>span[aria-hidden],
body.page-my-account #wrapper nav.breadcrumb li>span[aria-hidden],
body.page-customer-account #wrapper nav.breadcrumb li>span[aria-hidden] {
  display: none !important;
}

/* Séparateur "/" via CSS */
body.page-cart #wrapper nav.breadcrumb li+li::before,
body.page-my-account #wrapper nav.breadcrumb li+li::before,
body.page-customer-account #wrapper nav.breadcrumb li+li::before {
  content: '/';
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #3d1c10;
  padding: 0 4px;
}

/* Dernier item */
body.page-cart #wrapper nav.breadcrumb li:last-child a,
body.page-my-account #wrapper nav.breadcrumb li:last-child a,
body.page-customer-account #wrapper nav.breadcrumb li:last-child a {
  color: #3d1c10;
  pointer-events: none;
}

/* === COMPTE CLIENT & PANIER — couleurs accent par audience ==================
   vs-aud-part : --vs-accent = #3a6cb0  --vs-dark = #15294d  (bleu)
   vs-aud-pro  : --vs-accent = #b23b3b  --vs-dark = #4d1518  (rouge)
   Cible : toutes les sous-pages compte (body.page-customer-account) + panier.
   ========================================================================== */

/* ── Mon compte (page principale) — icônes tuiles ─────────────────────────── */
body.page-my-account #content .links a i,
body.page-customer-account #content .links a i {
  color: var(--vs-accent);
  transition: color 0.2s ease;
}

body.page-my-account #content .links a:hover i,
body.page-my-account #content .links a:focus i,
body.page-customer-account #content .links a:hover i,
body.page-customer-account #content .links a:focus i {
  color: var(--vs-accent);
  filter: brightness(1.15);
}

body.page-my-account #content .links a:hover,
body.page-customer-account #content .links a:hover {
  color: var(--vs-accent);
}

/* ── Tous les liens texte dans le contenu compte ──────────────────────────── */
body.page-my-account #content a:not(.btn):not([href*="mylogout"]),
body.page-customer-account #content a:not(.btn):not([href*="mylogout"]) {
  color: var(--vs-accent);
  transition: color 0.2s ease;
}

body.page-my-account #content a:not(.btn):not([href*="mylogout"]):hover,
body.page-customer-account #content a:not(.btn):not([href*="mylogout"]):hover {
  color: var(--vs-accent);
  filter: brightness(1.15);
}

/* ── Lien Déconnexion (barre de nav en bas) ──────────────────────────────── */
body.page-my-account #content a[href*="mylogout"],
body.page-my-account .logout-link,
body.page-customer-account #content a[href*="mylogout"],
body.page-customer-account .logout-link {
  color: var(--vs-accent);
  transition: color 0.2s ease;
}

body.page-my-account #content a[href*="mylogout"]:hover,
body.page-my-account .logout-link:hover,
body.page-customer-account #content a[href*="mylogout"]:hover,
body.page-customer-account .logout-link:hover {
  filter: brightness(1.15);
}

/* ── Boutons primaires (Enregistrer, Valider, etc.) ───────────────────────── */
body.page-my-account #content .btn-primary,
body.page-my-account #content button[type="submit"],
body.page-customer-account #content .btn-primary,
body.page-customer-account #content button[type="submit"] {
  background-color: var(--vs-dark);
  border-color: var(--vs-dark);
  color: #fff;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

body.page-my-account #content .btn-primary:hover,
body.page-my-account #content button[type="submit"]:hover,
body.page-customer-account #content .btn-primary:hover,
body.page-customer-account #content button[type="submit"]:hover {
  background-color: var(--vs-accent);
  border-color: var(--vs-accent);
}

/* ── Focus des champs (outline couleur audience) ─────────────────────────── */
body.page-my-account #content .form-control:focus,
body.page-customer-account #content .form-control:focus {
  border-color: var(--vs-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vs-accent) 20%, transparent);
  outline: none;
}

/* ── Tableaux : liens, état actif des commandes ──────────────────────────── */
body.page-customer-account #content table a {
  color: var(--vs-accent);
}

body.page-customer-account #content table a:hover {
  color: var(--vs-accent);
  filter: brightness(1.15);
}

body.page-customer-account #content .label-pill.bright {
  background-color: var(--vs-accent);
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
body.page-customer-account #content .pagination .current a,
body.page-customer-account #content .pagination .current span {
  background-color: var(--vs-dark);
  border-color: var(--vs-dark);
  color: #fff;
}

body.page-customer-account #content .pagination a:hover {
  color: var(--vs-accent);
}

/* ── Mon panier — liens produit et label ─────────────────────────────────── */
body.page-cart .cart-grid-body a.label,
body.page-cart .cart-grid-body .product-line-info a {
  color: var(--vs-accent);
  transition: color 0.2s ease;
}

body.page-cart .cart-grid-body a.label:hover,
body.page-cart .cart-grid-body .product-line-info a:hover {
  filter: brightness(1.15);
}

/* ── Liens de bas de page des sous-pages compte ("Retour à votre compte", "Accueil") ── */
body.page-customer-account #main>footer.page-footer {
  display: none !important;
}

/* Masque le bloc "My blog comments" (ets_blog) sur /mon-compte */
body.page-my-account #author-blog-comment-link,
body.page-my-account #author-blog-comment-link~*,
body.page-my-account li:has(#author-blog-comment-link) {
  display: none !important;
}

/* Masque le conteneur AJAX du module productcomments sur le listing
   (on utilise $product.comments_nb serveur directement dans product.tpl) */
.vs-product .product-list-reviews {
  display: none !important;
}

/* ---- displayFooter hooks container ----
   Sans display:none : la modal position:fixed de blockwishlist peut s'afficher.
   height:0 + overflow:hidden masque les autres modules (newsletter, etc.)
   sans bloquer les éléments position:fixed qui s'échappent du flux. */
#vs-modules-hooks {
  height: 0;
  overflow: hidden;
  position: relative;
}

/* ================================================================
   FICHE PRODUIT — Figma 186:2673 / 186:3334
   DOM : vs-product-block (cover | thumbs | info) + vs-product-tabs + vs-product-accessories
   ================================================================ */

/* --- Mise en page générale --- */
body.page-product #wrapper {
  padding-top: 0;
}

body.page-product #wrapper>.container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

body.page-product #wrapper>.container>.row {
  margin-left: 0;
  margin-right: 0;
}

body.page-product #content-wrapper {
  max-width: 100%;
  flex: 0 0 100%;
  padding: 0;
}

body.page-product #main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* --- Supprime la section intro catalogue et le page-header natif --- */
body.page-product .page-header,
body.page-product header.page-header {
  display: none !important;
}

/* Supprime le scroll-box-arrows (flèches JS du carrousel Classic) */
body.page-product .scroll-box-arrows {
  display: none !important;
}

/* Supprime les flags produit (badges "Nouveau" etc.) de la colonne images */
body.page-product .vs-product-block__images .product-flags {
  display: none;
}

/* ================================================================
   CONTAINER PRINCIPAL — Figma 186:3334
   flex row : images (cover+thumbs) | info
   ================================================================ */
body.page-product .vs-product-block {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  border: 1px solid #aeafb2;
  padding: 44px 24px;
}

/* --- Colonne gauche : cover 441px + gap 7px + thumbs 85px (69+8+8) = 533px --- */
body.page-product .vs-product-block__images {
  flex: 0 0 533px;
  width: 533px;
}

body.page-product .vs-product-block__images .page-content {
  padding: 0 !important;
  margin: 0 !important;
  border: none;
  background: none;
  width: 100%;
}

/* images-container : flex row (cover | thumbs) — pleine largeur */
body.page-product .images-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 7px;
  width: 100%;
}

/* Cover principale — 441×441 */
body.page-product .product-cover {
  flex: 0 0 441px;
  width: 441px;
  height: 441px;
  border: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

body.page-product .product-cover picture,
body.page-product .product-cover img.js-qv-product-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.page-product .product-cover .layer {
  display: none;
}

/* Colonne miniatures — .vs-thumbs remplace .js-qv-mask (non manipulé par Classic JS) */
body.page-product .vs-thumbs {
  flex-shrink: 0;
  width: 85px;
  padding: 0 8px;
}

/* Miniatures — colonne verticale 69px */
body.page-product .product-images {
  display: flex;
  flex-direction: column;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 69px;
  flex-shrink: 0;
}

body.page-product .product-images .thumb-container {
  width: 69px;
  height: 69px;
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
}

body.page-product .product-images .thumb-container picture,
body.page-product .product-images .thumb-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-product .product-images .thumb-container:hover img,
body.page-product .product-images .js-thumb-selected {
  outline: 2px solid #b17f4a !important;
  border-color: #b17f4a !important;
}

/* Écrase le bleu teal du thème Classic sur miniature sélectionnée */
body.page-product .product-images img {
  border: 2px solid transparent;
  outline: none;
}

body.page-product .product-images .js-thumb-selected,
body.page-product .product-images img.js-thumb-selected {
  border-color: #b17f4a !important;
  outline: 2px solid #b17f4a !important;
}

/* --- Colonne droite : info produit --- */
body.page-product .vs-product-block__info {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* --- Titre produit (Figma 186:3342 — 32px Work Sans Regular) --- */
body.page-product .vs-product-block__title {
  font-family: "Work Sans", sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  color: #000;
  margin: 0 0 19px;
  text-transform: none !important;
}

/* product-information : flex colonne avec gap 19px entre éléments */
body.page-product .product-information {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Espacement entre sections de la colonne info */
body.page-product .vs-product-block__info .js-product-prices,
body.page-product .vs-product-block__info .product-comments-summary,
body.page-product .vs-product-block__info .product-description-short,
body.page-product .vs-product-block__info .product-actions,
body.page-product .vs-product-block__info .blockreassurance_product,
body.page-product .vs-product-block__info #blockreassurance_product {
  margin-bottom: 8px;
}

/* ================================================================
   HOOK DOUBLE : vs-stars-top (position 2) vs product-additional-info (bas)
   vs-stars-top   → afficher SEULEMENT le résumé étoiles
   product-additional-info → afficher SEULEMENT le partage social
   ================================================================ */

/* TOP : masquer social-sharing + tout div hors product-comments-additional-info */
body.page-product .vs-stars-top .social-sharing,
body.page-product .vs-stars-top>div:not(.product-comments-summary):not(.js-product-comments-summary):not(.product-comments-additional-info) {
  display: none !important;
}

/* Force product-comments-additional-info visible (spécificité 0,5,2 > 0,4,2) */
body.page-product .vs-stars-top>div:not(.product-comments-summary):not(.js-product-comments-summary).product-comments-additional-info {
  display: block !important;
  margin: 0 !important;
}

/* Dans vs-stars-top : afficher uniquement .grade-stars (pas Note ni liens) */
body.page-product .vs-stars-top .product-comments-additional-info .link-comment,
body.page-product .vs-stars-top .product-comments-additional-info>*:not(.comments-note) {
  display: none !important;
}

body.page-product .vs-stars-top .product-comments-additional-info .comments-note {
  margin: 0 !important;
}

body.page-product .vs-stars-top .product-comments-additional-info .comments-note>*:not(.grade-stars) {
  display: none !important;
}

/* BAS : masquer les étoiles (déjà en haut), garder uniquement social-sharing */
body.page-product .product-additional-info .product-comments-additional-info {
  display: none !important;
}

/* Espacement vs-stars-top avec le bloc suivant */
body.page-product .vs-stars-top {
  margin-bottom: 0;
}

/* --- Avis / étoiles (productcomments) --- */
body.page-product .product-comments-summary {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Work Sans", sans-serif;
}

body.page-product .product-comments-summary .comments-nb {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

body.page-product .product-comments-summary .star-content .star,
body.page-product .product-comments-summary .star-content .star-on,
body.page-product .product-comments-summary .star-content i,
body.page-product .product-comments-summary i.fa,
body.page-product .product-comments-summary .fa-star,
body.page-product .product-comments-summary .fa-star-half-o,
body.page-product .product-comments-summary .fa-star-o {
  color: #b17f4a !important;
}

body.page-product .product-comments-summary a {
  font-size: 12px;
  color: #000;
  text-decoration: none;
}

/* Masque le label "dont X TTC" sous le prix */
body.page-product .tax-shipping-delivery-label {
  display: none !important;
}

/* --- Prix --- */
body.page-product .product-prices {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

body.page-product .product-prices .current-price {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Sélecteur corrigé : la classe réelle est .current-price-value (pas .price) */
body.page-product .product-prices .current-price-value,
body.page-product .product-prices .price,
body.page-product .product-price {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #b17f4a !important;
}

body.page-product .product-prices .product-discount .regular-price {
  font-size: 16px;
  font-weight: 700;
  color: #cab999;
  text-decoration: line-through;
}

body.page-product .product-prices .discount-percentage,
body.page-product .product-prices .product-flag.discount {
  background: #0b7acb;
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  border-radius: 3px;
  padding: 4px 7px;
  display: inline-block;
}

/* --- Description courte --- */
body.page-product .product-description-short,
body.page-product .product-description-short p {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #000;
  line-height: 1.6;
  margin: 0;
}

/* --- Séparateurs dans la colonne info --- */
body.page-product .product-information hr,
body.page-product .product-variants-item+hr {
  border: none;
  border-top: 1px solid #aeafb2;
  margin: 0;
}

/* --- Quantité --- */
body.page-product .product-quantity {
  display: flex;
  align-items: center;
  gap: 20px;
}

body.page-product .product-quantity label,
body.page-product .product-quantity .label {
  font-size: 12px;
  color: #aeafb2;
  font-weight: 400;
  white-space: nowrap;
  display: inline !important;
  width: auto !important;
  float: none !important;
}

body.page-product .product-quantity .qty {
  display: flex;
  align-items: center;
}

body.page-product .product-quantity #quantity_wanted {
  width: 29px;
  height: 30px;
  border: 1px solid rgba(174, 175, 178, 0.3);
  text-align: center;
  font-size: 12px;
  padding: 0;
}

body.page-product .product-quantity .input-group-btn .btn {
  width: 29px;
  height: 30px;
  background: #fff;
  border: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
  font-size: 12px;
  font-weight: 700;
  padding: 0;
  line-height: 1;
}

body.page-product .product-quantity .input-group-btn .btn:hover {
  background: #f5f0ea;
}

/* --- Bouton "Ajouter au panier" (Figma 186:3027 — gradient doré) --- */
body.page-product .add-to-cart {
  background: linear-gradient(167.093deg, rgba(166, 122, 50, 0.42) 16.176%, rgba(247, 234, 140, 0.42) 44.881%, rgba(166, 122, 50, 0.42) 87.255%),
    linear-gradient(90deg, #b17f4a 0%, #b17f4a 100%);
  border: none;
  border-radius: 0;
  color: #fff;
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  padding: 15px 29px;
  white-space: nowrap;
}

body.page-product .add-to-cart:hover,
body.page-product .add-to-cart:focus {
  background: linear-gradient(167.093deg, rgba(166, 122, 50, 0.6) 16.176%, rgba(247, 234, 140, 0.6) 44.881%, rgba(166, 122, 50, 0.6) 87.255%),
    linear-gradient(90deg, #b17f4a 0%, #b17f4a 100%);
  color: #fff;
}

/* Bouton ATC : flex row, icône + texte centrés (Figma 186:3027, gap 6px) */
body.page-product .add-to-cart {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

body.page-product .add-to-cart .material-icons {
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

/* Supprime les spinners natifs sur l'input number */
body.page-product #quantity_wanted::-webkit-outer-spin-button,
body.page-product #quantity_wanted::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

body.page-product #quantity_wanted {
  -moz-appearance: textfield;
}

/* Séparateur Figma au-dessus de la zone qty (Figma 186:3354) */
body.page-product .product-add-to-cart {
  border-top: 1px solid #aeafb2;
  padding-top: 10px;
  padding-bottom: 5px;
}

body.page-product .product-quantity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

/* === LIGNE 1 : Quantité + champ qty (Figma 186:3355) === */
body.page-product .vs-qty-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

body.page-product .vs-qty-row .control-label {
  font-size: 12px;
  font-weight: 400;
  color: #aeafb2;
  white-space: nowrap;
  margin: 0;
}

/* Qty widget : input + flèches sur une seule ligne horizontale */
body.page-product .vs-qty-row .qty {
  display: flex;
  align-items: center;
  flex-direction: row;
}

body.page-product .vs-qty-row .qty .input-group {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
}

body.page-product .vs-qty-row .qty .input-group-btn-vertical {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

body.page-product .vs-qty-row .qty #quantity_wanted {
  width: 40px;
  height: 30px;
  border: 1px solid rgba(174, 175, 178, 0.3);
  text-align: center;
  font-size: 12px;
  padding: 0;
  order: 1;
}

body.page-product .vs-qty-row .qty .input-group-btn-vertical {
  order: 2;
  width: 22px;
}

body.page-product .vs-qty-row .qty .input-group-btn-vertical .btn {
  width: 22px;
  height: 16px;
  background: #fff;
  border: 1px solid rgba(174, 175, 178, 0.3);
  border-left: none;
  box-shadow: none;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.page-product .vs-qty-row .qty .input-group-btn-vertical .btn .material-icons {
  font-size: 12px;
  line-height: 1;
  display: block;
}

body.page-product .vs-qty-row .qty .input-group-btn-vertical .btn:hover {
  background: #f5f0ea;
}

/* === LIGNE 2 : bouton ATC + wishlist (Figma 186:3367) === */
body.page-product .vs-cart-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 33px;
}

/* Masque les éléments non Figma */
body.page-product #product-availability,
body.page-product .product-minimal-quantity {
  display: none !important;
}

/* Icône coeur : supprimer tout cercle/border (Figma : coeur nu, pas de cercle) */
body.page-product .wishlist-button-add {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  color: #3d1c10;
}

body.page-product .wishlist-button-add>span,
body.page-product .wishlist-button-add>div {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
}

body.page-product .wishlist-button-add i,
body.page-product .wishlist-button-add .fa,
body.page-product .wishlist-button-add svg {
  color: #3d1c10;
  font-size: 18px;
  background: none !important;
  border: none !important;
}

body.page-product .wishlist-button-add:hover i,
body.page-product .wishlist-button-add:hover .fa,
body.page-product .wishlist-button-add:hover svg {
  color: #b17f4a;
}

/* Masque le bouton "comparer" — absent du Figma */
body.page-product .product-add-to-cart .add-to-compare {
  display: none !important;
}

/* ================================================================
   PRODUCT ADDITIONAL INFO
   DOM : .product-additional-info
         ├── .social-sharing > span + ul > li.facebook/.twitter/.pinterest
         └── .product-comments-additional-info
               ├── .comments-note > span + .grade-stars
               └── .additional-links > a.link-comment × 2
   ================================================================ */

body.page-product .product-additional-info {
  border-top: 1px solid #aeafb2;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Partage social — Figma 186:3378 (Facebook 32×22 | X pill noir | Pinterest 32×22) --- */
body.page-product .social-sharing {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.page-product .social-sharing>span {
  font-size: 12px;
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  color: #000;
  white-space: nowrap;
}

body.page-product .social-sharing ul {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.page-product .social-sharing li {
  display: flex !important;
  width: auto !important;
  height: auto !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  margin-left: 0 !important;
}

/* Base : 32×22px, texte masqué, icône en background */
body.page-product .social-sharing li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 22px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 0;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
}

/* Facebook — #1877F2, icône f blanc */
body.page-product .social-sharing li.facebook a {
  background-color: #1877f2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20'%3E%3Cpath d='M6.5 7H9l-.5 3H6.5V20h-3V10h-2V7h2V5C3.5 2.3 5 1 7.5 1c1 0 2 .1 2 .1V4H8c-1 0-1.5.4-1.5 1.5V7z' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 8px auto;
}

/* Twitter/X — noir, border-radius:19px (pill), icône X blanc */
body.page-product .social-sharing li.twitter a {
  background-color: #000;
  border-radius: 19px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M15.75.5h3L12.5 8.25 20 17.5h-6.5l-4.25-5.5-5.25 5.5H1L8.75 9.25 1.5.5h6.75l3.75 5 4.75-5z' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 12px auto;
}

/* Pinterest — #E60023, icône P blanc */
body.page-product .social-sharing li.pinterest a {
  background-color: #e60023;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M10 0C4.5 0 0 4.5 0 10c0 4.2 2.5 7.8 6.2 9.3-.1-.8-.1-2 .1-2.9.2-.8 1.2-5.3 1.2-5.3s-.3-.6-.3-1.6c0-1.6.9-2.7 2.1-2.7 1 0 1.5.7 1.5 1.6 0 1-.6 2.4-1 3.8.3 1.2 1.2 1.9 2.3 1.9 2.8 0 4.7-3 4.7-7.2 0-3-2.1-5.1-5.2-5.1-3.6 0-5.6 2.7-5.6 5.4 0 1 .4 2.1.9 2.8l-.4 1.4c-.1.2-.2.2-.3.1C4.7 12.8 4 10.8 4 9.1 4 5.5 6.7 2.2 11.5 2.2c4 0 7 2.9 7 6.6 0 3.9-2.5 7.1-5.9 7.1-1.1 0-2.2-.6-2.6-1.2l-.7 2.8c-.3 1-.9 2.2-1.3 2.9.7.2 1.4.3 2.1.3 5.5 0 10-4.5 10-10S15.5 0 10 0z' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 13px auto;
}

/* --- Note / étoiles (productcomments) --- */
body.page-product .product-comments-additional-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.page-product .comments-note {
  display: flex;
  align-items: center;
  gap: 6px;
}

body.page-product .comments-note>span {
  font-size: 12px;
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  color: #000;
}

/* Étoiles — SVG inline (même path que homepage .vs-product__star, viewBox 0 0 20 19) */
/* Override le sprite PNG du module productcomments */
body.page-product .grade-stars .star-content .star,
body.page-product .grade-stars .star-content .star-on {
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-size: 20px 19px !important;
  height: 19px !important;
  overflow: hidden;
}

/* Étoile pleine — #B17F4A, background-position réinitialisé (sprite offset -24px annulé) */
body.page-product .grade-stars .star-content.star-full .star-on {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0l2.39 7.36H20l-6.18 4.49 2.36 6.18-6.18-4.49-6.18 4.49 2.36-6.18L0 7.36h7.61z' fill='%23b17f4a'/%3E%3C/svg%3E") !important;
  background-position: 0 0 !important;
}

/* Étoile vide — beige clair, background-position inline du module préservé (partiel) */
body.page-product .grade-stars .star-content.star-empty .star {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0l2.39 7.36H20l-6.18 4.49 2.36 6.18-6.18-4.49-6.18 4.49 2.36-6.18L0 7.36h7.61z' fill='%23d5c5b5'/%3E%3C/svg%3E") !important;
}

/* --- Liens avis (Lire / Donnez votre avis) --- */
body.page-product .additional-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

body.page-product .additional-links .link-comment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  color: #aeafb2;
  text-decoration: underline;
}

body.page-product .additional-links .link-comment .material-icons {
  font-size: 14px;
  color: #aeafb2;
}

body.page-product .additional-links .link-comment:hover,
body.page-product .additional-links .link-comment:hover .material-icons {
  color: #b17f4a;
}

/* --- Disponibilité stock --- */
body.page-product .product-availability {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  color: #000;
}

/* --- Blocs réassurance — Figma 186:3389 (CSS pur, structure native module) --- */
body.page-product .blockreassurance_product {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

body.page-product .blockreassurance_product>div:not(.clearfix) {
  display: flex;
  align-items: center;
  border: 1px solid #aeafb2;
  min-height: 46px;
  padding-right: 16px;
  gap: 0;
}

/* Barre noire 3px à gauche */
body.page-product .blockreassurance_product>div:not(.clearfix)::before {
  content: "";
  display: block;
  width: 3px;
  min-width: 3px;
  align-self: stretch;
  background: #000;
  border-radius: 3px;
  flex-shrink: 0;
  margin-right: 12px;
}

/* Cacher l'img SVG cassée (URL //modules/... invalide) */
body.page-product .blockreassurance_product .item-product img,
body.page-product .blockreassurance_product .item-product svg {
  display: none !important;
}

/* span.item-product = conteneur icône uniquement */
body.page-product .blockreassurance_product .item-product {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 12px;
}

/* Icône via ::before sur .item-product (placeholder — remplacer avec SVG Figma) */
body.page-product .blockreassurance_product .item-product::before {
  content: "";
  display: block;
  width: 17px;
  height: 17px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Icône 1 — Sécurité (cadenas Figma) */
body.page-product .blockreassurance_product>div:nth-child(1) .item-product::before {
  width: 14px;
  height: 17px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='17' viewBox='0 0 14 17' fill='none'%3E%3Cpath d='M1.75 17C1.26875 17 0.856916 16.8416 0.5145 16.5248C0.172083 16.208 0.000583333 15.8267 0 15.381V7.28571C0 6.84048 0.1715 6.45946 0.5145 6.14267C0.8575 5.82587 1.26933 5.66721 1.75 5.66667H2.625V4.04762C2.625 2.92778 3.05171 1.97335 3.90512 1.18433C4.75854 0.395318 5.79017 0.000540235 7 0C8.20983 0 9.24175 0.394239 10.0957 1.18433C10.9497 1.97443 11.3762 2.92886 11.375 4.04762V5.66667H12.25C12.7312 5.66667 13.1434 5.82533 13.4864 6.14267C13.8294 6.46 14.0006 6.84102 14 7.28571V15.381C14 15.8262 13.8288 16.2075 13.4864 16.5248C13.144 16.8421 12.7318 17.0005 12.25 17H1.75ZM1.75 15.381H12.25V7.28571H1.75V15.381ZM8.23637 12.4764C8.57879 12.1601 8.75 11.7791 8.75 11.3333C8.75 10.8876 8.57879 10.5065 8.23637 10.1903C7.89396 9.87403 7.48183 9.71537 7 9.71429C6.51817 9.71321 6.10633 9.87187 5.7645 10.1903C5.42267 10.5087 5.25117 10.8897 5.25 11.3333C5.24883 11.777 5.42033 12.1582 5.7645 12.4772C6.10867 12.7961 6.5205 12.9545 7 12.9524C7.4795 12.9502 7.89162 12.791 8.23637 12.4764ZM4.375 5.66667H9.625V4.04762C9.625 3.37302 9.36979 2.7996 8.85937 2.32738C8.34896 1.85516 7.72917 1.61905 7 1.61905C6.27083 1.61905 5.65104 1.85516 5.14062 2.32738C4.63021 2.7996 4.375 3.37302 4.375 4.04762V5.66667Z' fill='black'/%3E%3C/svg%3E");
}

/* Icône 2 — Livraison (camion Figma) */
body.page-product .blockreassurance_product>div:nth-child(2) .item-product::before {
  width: 19px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='12' viewBox='0 0 19 12' fill='none'%3E%3Cpath d='M7.22201 10.2994C6.9335 10.5879 6.54219 10.75 6.13416 10.75C5.72614 10.75 5.33482 10.5879 5.04631 10.2994C4.75779 10.0109 4.5957 9.61958 4.5957 9.21155C4.5957 8.80353 4.75779 8.41222 5.04631 8.1237C5.33482 7.83518 5.72614 7.6731 6.13416 7.6731C6.54219 7.6731 6.9335 7.83518 7.22201 8.1237C7.51053 8.41222 7.67262 8.80353 7.67262 9.21155C7.67262 9.61958 7.51053 10.0109 7.22201 10.2994Z' stroke='black' stroke-width='1.5' stroke-miterlimit='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.9143 10.2994C14.6258 10.5879 14.2345 10.75 13.8264 10.75C13.4184 10.75 13.0271 10.5879 12.7386 10.2994C12.4501 10.0109 12.288 9.61958 12.288 9.21155C12.288 8.80353 12.4501 8.41222 12.7386 8.1237C13.0271 7.83518 13.4184 7.6731 13.8264 7.6731C14.2345 7.6731 14.6258 7.83518 14.9143 8.1237C15.2028 8.41222 15.3649 8.80353 15.3649 9.21155C15.3649 9.61958 15.2028 10.0109 14.9143 10.2994Z' stroke='black' stroke-width='1.5' stroke-miterlimit='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.71152 9.21152H11.5192V1.21154C11.5192 1.08913 11.4706 0.971736 11.384 0.885181C11.2975 0.798626 11.1801 0.75 11.0577 0.75H0.75M4.32691 9.21152H2.75C2.68939 9.21152 2.62937 9.19958 2.57337 9.17639C2.51738 9.15319 2.4665 9.1192 2.42364 9.07634C2.38078 9.03348 2.34678 8.9826 2.32359 8.9266C2.3004 8.87061 2.28846 8.81059 2.28846 8.74998V4.98076' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M1.51855 3.05768H4.59547' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.5186 3.05768H15.8339C15.9231 3.0577 16.0104 3.08358 16.0852 3.13218C16.1601 3.18078 16.2192 3.25002 16.2555 3.33152L17.6324 6.42998C17.6586 6.48881 17.6722 6.55248 17.6724 6.6169V8.74997C17.6724 8.81058 17.6604 8.8706 17.6373 8.9266C17.6141 8.98259 17.5801 9.03347 17.5372 9.07633C17.4943 9.11919 17.4435 9.15318 17.3875 9.17638C17.3315 9.19957 17.2715 9.21151 17.2108 9.21151H15.7493M11.5186 9.21151H12.2878' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Icône 3 — Retour (Figma) */
body.page-product .blockreassurance_product>div:nth-child(3) .item-product::before {
  width: 18px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16' fill='none'%3E%3Cpath d='M7.22222 10.7222L9.55556 11.5C9.55556 11.5 15.3889 10.3333 16.1667 10.3333C16.9444 10.3333 16.9444 11.1111 16.1667 11.8889C15.3889 12.6666 12.6667 15 10.3333 15C8 15 6.44444 13.8333 4.88889 13.8333H1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 9.16667C1.77778 8.38889 3.33333 7.22222 4.88889 7.22222C6.44444 7.22222 10.1389 8.77778 10.7222 9.55556C11.3056 10.3333 9.55556 11.5 9.55556 11.5M5.66667 4.88889V1.77778C5.66667 1.5715 5.74861 1.37367 5.89447 1.22781C6.04033 1.08194 6.23817 1 6.44444 1H15.7778C15.9841 1 16.1819 1.08194 16.3278 1.22781C16.4736 1.37367 16.5556 1.5715 16.5556 1.77778V8' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.16699 1H13.0559V4.5H9.16699V1Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Texte : span.block-title */
body.page-product .blockreassurance_product .block-title {
  font-size: 12px;
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  color: #3d1c10 !important;
  line-height: 1.3;
}

/* Cacher la description "(edit with the Customer Reassurance module)" */
body.page-product .blockreassurance_product p {
  display: none !important;
}

.faq_on_product {
  display: none !important;
}

/* --- Couleur #24b9d7 → OR/BRUN de marque (liens, boutons checkout/cart) ---
   Liens <a> et boutons primaires = or/brun de marque sur les DEUX audiences
   (Particulier ET Professionnel). La couleur d'audience (bleu/rouge) reste
   réservée aux bandeaux/header/.text-primary/pagination. Ne PAS remettre la
   couleur d'accent (#3a6cb0 / #b23b3b) ici. */
body.vs-aud-part a,
body.vs-aud-pro a {
  color: #b17f4a;
}

body.vs-aud-part a:hover,
body.vs-aud-pro a:hover {
  color: #6b3a2a;
}

body.vs-aud-part .btn-primary,
body.vs-aud-pro .btn-primary {
  background-color: #b17f4a !important;
  border-color: #b17f4a !important;
  color: #fff !important;
}

body.vs-aud-part .btn-primary:hover,
body.vs-aud-part .btn-primary:focus,
body.vs-aud-part .btn-primary:active,
body.vs-aud-pro .btn-primary:hover,
body.vs-aud-pro .btn-primary:focus,
body.vs-aud-pro .btn-primary:active {
  background-color: #6b3a2a !important;
  border-color: #6b3a2a !important;
}

/* --- Checkout & Confirmation : footer, breadcrumb, wrapper --- */
body#checkout #footer {
  padding: 0 !important;
}

body.page-order nav.breadcrumb {
  display: none !important;
}

body.page-order #wrapper {
  padding-top: 40px !important;
}

body.page-order-confirmation #wrapper {
  padding-top: 40px !important;
}

body.page-order-confirmation nav.breadcrumb {
  display: none !important;
}

/* --- Overrides couleurs ciblés --- */
.page-cart .product-price,
.page-cart .product-price * {
  color: #15294d !important;
}

.block-promo .promo-code-button.cancel-promo {
  color: #15294d !important;
}

.cart-grid-right .promo-discounts .cart-summary-line .label .code {
  color: #15294d !important;
}

.wishlist-list-item:hover .wishlist-list-item-title {
  color: #b17f4a;
}

body.page-customer-account #content .label-pill.bright {
  background-color: var(--vs-accent) !important;
}

/* .text-primary Bootstrap → couleur audience (wishlist, liens, icônes) */
body.vs-aud-part .text-primary,
body.vs-aud-part .text-primary .material-icons,
body.vs-aud-part .wishlist-add-to-new {
  color: #3a6cb0 !important;
}

body.vs-aud-pro .text-primary,
body.vs-aud-pro .text-primary .material-icons,
body.vs-aud-pro .wishlist-add-to-new {
  color: #b23b3b !important;
}

/* Mon compte — hover liens */
body.page-my-account #content a:not(.btn):not([href*="mylogout"]):hover,
body.page-customer-account #content a:not(.btn):not([href*="mylogout"]):hover {
  filter: brightness(0.9);
}

/* Pagination current — couleur selon audience */
body.vs-aud-part .pagination .current a {
  color: #3a6cb0 !important;
  border-color: #3a6cb0 !important;
}

body.vs-aud-pro .pagination .current a {
  color: #b23b3b !important;
  border-color: #b23b3b !important;
}

body.page-product .btn-primary:hover,
body.page-product .btn-primary:focus,
body.page-product .btn-primary:active,
body.page-cart .btn-primary:hover,
body.page-cart .btn-primary:focus,
body.page-cart .btn-primary:active,
body.page-category .btn-primary:hover,
body.page-category .btn-primary:focus,
body.page-category .btn-primary:active,
body.page-checkout .btn-primary:hover,
body.page-checkout .btn-primary:focus,
body.page-checkout .btn-primary:active {
  background-color: #3d1c10 !important;
  border-color: #3d1c10 !important;
}

/* --- Onglets (Description / Détails / Vidéo / Avis) --- */
body.page-product .tabs {
  max-width: 1200px;
  margin: 0 auto;
}

body.page-product .tabs .nav-tabs {
  border-bottom: none;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin-bottom: -1px;
}

body.page-product .tabs .nav-tabs .nav-link {
  border: 1px solid #aeafb2;
  border-radius: 0;
  margin-right: -1px;
  padding: 19px 38px;
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #3d1c10;
  background: #fff;
  white-space: nowrap;
}

body.page-product .tabs .nav-tabs .nav-link.active {
  background: #fff;
  color: #3d1c10;
  border-bottom: 1px solid #fff;
  z-index: 1;
}

body.page-product .tabs .tab-content {
  border: 1px solid #aeafb2;
  padding: 40px;
  min-height: 200px;
}

body.page-product .tabs .tab-content .product-description {
  display: block;
}

body.page-product .tabs .tab-content .product-description img {
  max-width: 455px;
  object-fit: cover;
}

body.page-product .tabs .tab-content p,
body.page-product .tabs .tab-content .product-description p {
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #000;
  line-height: 1.6;
  margin-bottom: 16px;
}

/* --- Onglets wrapper (hors container produit) --- */
body.page-product .vs-product-tabs {
  margin-top: 0;
}

/* Onglet « Recette » (module vs_productrecipe) : contenu éditeur riche. */
body.page-product .vs-product-tabs .product-recipe {
  line-height: 1.6;
}

body.page-product .vs-product-tabs .product-recipe img {
  max-width: 100%;
  height: auto;
}

body.page-product .vs-product-tabs .product-recipe__empty {
  margin: 0;
  color: #8a7d6a;
  font-style: italic;
}

/* Bloc suggestions « Vous pourriez également être intéressé par » (ps_categoryproducts). */
body.page-product .featured-products {
  margin-top: 16px;
}

/* Le titre .featured-products > h2 est masqué globalement (pour l'accueil) ; on le
   ré-affiche sur la fiche produit et on l'aligne sur les titres de section du thème. */
body.page-product .featured-products>h2 {
  display: block;
  font-family: "Work Sans", sans-serif;
  font-size: 32px;
  font-weight: 400;
  color: #000;
  text-align: center;
  text-transform: none;
  line-height: 1.2;
  margin: 0 0 30px;
}

/* --- Section produits associés (Figma 186:3416) --- */
body.page-product .vs-product-accessories {
  padding: 60px 0;
}

body.page-product .vs-product-accessories__title {
  font-family: "Work Sans", sans-serif;
  font-size: 32px;
  font-weight: 400;
  color: #000;
  text-align: center;
  margin-bottom: 73px;
  line-height: 1;
  text-transform: none;
}

body.page-product .vs-product-accessories .products {
  display: flex;
  gap: 25px;
  align-items: stretch;
  flex-wrap: wrap;
  padding-bottom: 30px;
  margin: 0;
}

body.page-product .vs-product-accessories .vs-product {
  flex: 1 1 calc(33.333% - 17px);
  max-width: calc(33.333% - 17px);
  display: flex;
  flex-direction: column;
}

body.page-product .vs-product-accessories .thumbnail-container {
  flex: 1;
}

body.page-product .vs-product-accessories .product-thumbnail {
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
}

body.page-product .vs-product-accessories .product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  display: block;
}

/* --- Responsive mobile --- */
@media (max-width: 991px) {
  body.page-product .vs-product-block {
    flex-direction: column;
    gap: 20px;
    padding: 24px 16px;
  }

  body.page-product .images-container {
    width: 100%;
    flex-direction: column;
  }

  body.page-product .product-cover {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  body.page-product .product-images {
    flex-direction: row;
    width: auto;
  }

  body.page-product .vs-product-block__info {
    width: 100%;
  }

  body.page-product .vs-product-accessories .vs-product {
    flex: 1 1 calc(50% - 13px);
    max-width: calc(50% - 13px);
  }

  body.page-product .tabs .nav-tabs {
    flex-wrap: wrap;
  }

  body.page-product .tabs .tab-content {
    padding: 20px 16px;
  }
}

@media (max-width: 767px) {
  body.page-product .vs-product-block__images {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.page-product .images-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }

  body.page-product .product-cover {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.page-product .product-cover picture,
  body.page-product .product-cover img.js-qv-product-cover {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 575px) {
  body.page-product .vs-product-accessories .vs-product {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* =========================================================
   FORMULAIRE « DEMANDER UN DEVIS » (page CMS Pro id 15)
   Styles autonomes (indépendants du scope contact cms-8/17) : ajouté sous le
   contenu de la page. Palette or/brun de marque.
   ========================================================= */
.vs-devis {
  padding: 40px 20px 60px;
}

.vs-devis__container {
  max-width: 760px;
  margin: 0 auto;
}

.vs-devis__header {
  text-align: center;
  margin-bottom: 28px;
}

.vs-devis__label {
  margin: 0 0 6px;
  color: #b17f4a;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vs-devis__title {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
}

.vs-devis .vs-cf {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vs-devis .vs-cf__row {
  display: flex;
  gap: 16px;
}

.vs-devis .vs-cf__row--full {
  display: block;
}

.vs-devis .vs-cf__field {
  flex: 1 1 0;
  min-width: 0;
}

.vs-devis .vs-cf__field--full {
  width: 100%;
}

.vs-devis .vs-cf__input,
.vs-devis .vs-cf__select,
.vs-devis .vs-cf__textarea {
  width: 100%;
  padding: 12px 14px;
  min-height: 46px;
  border: 1px solid #cdbfa6;
  border-radius: 6px;
  background: #fff;
  color: #2b2b2b;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
}

.vs-devis .vs-cf__input:focus,
.vs-devis .vs-cf__select:focus,
.vs-devis .vs-cf__textarea:focus {
  outline: none;
  border-color: #b17f4a;
  box-shadow: 0 0 0 2px rgba(177, 127, 74, 0.2);
}

.vs-devis .vs-cf__textarea {
  min-height: 150px;
  resize: vertical;
}

.vs-devis .vs-cf__cgu {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
}

.vs-devis .vs-cf__cgu input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.vs-devis .vs-cf__submit {
  align-self: flex-start;
  padding: 14px 30px;
  border: 0;
  border-radius: 6px;
  background: #b17f4a;
  color: #fff;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.vs-devis .vs-cf__submit:hover,
.vs-devis .vs-cf__submit:focus {
  background: #6b3a2a;
}

.vs-devis .vs-cf__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Bouton « document » — page Certifications & documents (espace Professionnel).
   Ouvre le PDF dans un nouvel onglet. Style repris à l'identique des boutons de
   formulaire (.vs-devis .vs-cf__submit) : doré #b17f4a, majuscules, arrondi 6px,
   hover brun #6b3a2a. Ne s'affiche que là où la classe est présente (page Pro). */
.vs-doc-download {
  margin-top: 40px;
  text-align: left;
}

.vs-doc-download__btn,
.vs-doc-download__btn:link,
.vs-doc-download__btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  border: 0;
  border-radius: 6px;
  background: #b17f4a;
  /* !important : bat la couleur de lien du thème parent (.page-content a). */
  color: #fff !important;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.vs-doc-download__btn:hover,
.vs-doc-download__btn:focus {
  background: #6b3a2a;
  color: #fff !important;
  text-decoration: none !important;
}

.vs-devis .vs-cf__errors,
.vs-devis .vs-cf__success {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
}

.vs-devis .vs-cf__errors {
  background: #fcebeb;
  color: #a11414;
}

.vs-devis .vs-cf__errors ul {
  margin: 0;
  padding-left: 18px;
}

.vs-devis .vs-cf__success {
  background: #e9f6ea;
  color: #1b5e20;
}

.vs-devis .vs-cf__success p {
  margin: 0;
}

@media (max-width: 600px) {
  .vs-devis .vs-cf__row {
    flex-direction: column;
  }
}

/* --- Page « Demander un devis » (id 15) : 2 colonnes façon page contact (id 17) ---
   Le formulaire (.vs-devis) est rendu par page.tpl comme frère de #content dans #main.
   On transforme #main en 2 colonnes : contenu à gauche, formulaire à droite, séparateur
   vertical. Le footer du SITE est hors de #main (non impacté) ; le .page-footer interne
   (vide) passe pleine largeur. */
body.cms-id-15 #main {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
}

body.cms-id-15 #main>#content.page-content {
  flex: 1 1 56%;
  max-width: none;
  margin: 0;
  min-height: 0;
  padding: 40px 40px 50px 15px;
}

body.cms-id-15 #main>.vs-devis {
  flex: 1 1 44%;
  min-width: 0;
  border-left: 1px solid #aeafb2;
  padding: 40px 15px 50px 40px;
}

body.cms-id-15 #main>.page-footer {
  flex: 0 0 100%;
  order: 5;
}

body.cms-id-15 .vs-devis__container {
  max-width: none;
  margin: 0;
}

body.cms-id-15 .vs-devis__header {
  text-align: left;
}

/* Colonne étroite : champs empilés (une colonne). */
body.cms-id-15 .vs-devis .vs-cf__row {
  flex-direction: column;
}

/* Responsive : sous 992px, contenu et formulaire s'empilent (séparateur horizontal). */
@media (max-width: 991px) {
  body.cms-id-15 #main {
    display: block;
  }

  body.cms-id-15 #main>#content.page-content {
    padding: 30px 20px;
  }

  body.cms-id-15 #main>.vs-devis {
    border-left: 0;
    border-top: 1px solid #aeafb2;
    padding: 30px 20px 40px;
  }
}

/* =====================================================================
   OFFRES sous « Nos idées recettes » (accueil)
   ===================================================================== */
/* --- Particulier : 2 colonnes 50/50 (Idées cadeaux + Offre découverte) --- */
.vs-giftduo {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  display: flex;
}

.vs-giftduo__col {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.vs-giftduo__col--gift {
  background-image: url("../img/bg-idee-cadeaux.jpg");
}

.vs-giftduo__col--discovery {
  background-image: url("../img/bg-coffret-cadeaux.jpg");
}

.vs-giftduo__panel {
  max-width: 420px;
  width: 100%;
  padding: 36px 40px;
  background: rgba(61, 28, 16, 0.72);
  border-radius: 16px;
  text-align: center;
  color: #ffffff;
}

.vs-giftduo__title {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 28px;
  line-height: 1.2;
}

.vs-giftduo__text {
  margin: 0 0 22px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.5;
}

.vs-giftduo .vs-giftduo__btn,
.vs-prooffer .vs-prooffer__btn {
  display: inline-block;
  padding: 13px 30px;
  background: #b17f4a;
  color: #ffffff;
  font-family: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.vs-giftduo .vs-giftduo__btn:hover,
.vs-giftduo .vs-giftduo__btn:focus,
.vs-prooffer .vs-prooffer__btn:hover,
.vs-prooffer .vs-prooffer__btn:focus {
  background: #6b3a2a;
  color: #ffffff;
}

@media (max-width: 767px) {
  .vs-giftduo {
    flex-direction: column;
  }

  .vs-giftduo__col {
    min-height: 300px;
    padding: 40px 20px;
  }
}

/* --- Professionnel : bande unique, fond forêt tropicale fixe --- */
.vs-prooffer {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: url("../img/foret-tropicale-lemurien.webp") center/cover no-repeat;
  background-attachment: fixed;
}

.vs-prooffer__panel {
  max-width: 720px;
  width: 100%;
  padding: 40px 44px;
  background: rgba(61, 28, 16, 0.72);
  border-radius: 16px;
  text-align: center;
  color: #ffffff;
}

.vs-prooffer__title {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: 30px;
  line-height: 1.2;
}

.vs-prooffer__text {
  margin: 0 0 24px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.6;
}

/* =====================================================================
   Sélecteur de langue FR/EN dans le menu (desktop + off-canvas, 2 espaces)
   ===================================================================== */
#header .vs-topbar .vs-topbar__menu .top-menu>li.vs-lang,
.vs-offcanvas__menu .top-menu>li.vs-lang {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0;
}

/* Padding symétrique autour du trait. !important + forte spécificité (id #header)
   pour battre la règle générique du menu `.top-menu > li > a { padding: 0 !important }`
   (sinon FR et EN se collent). */
#header .vs-topbar .vs-topbar__menu .top-menu>li.vs-lang>a.vs-lang__link,
.vs-offcanvas__menu .top-menu>li.vs-lang>a.vs-lang__link {
  display: inline-flex !important;
  align-items: center;
  padding-left: 12px !important;
  padding-right: 12px !important;
  text-transform: uppercase;
  white-space: nowrap;
}

#header .vs-topbar .vs-topbar__menu .top-menu>li.vs-lang>a.vs-lang__link:first-child,
.vs-offcanvas__menu .top-menu>li.vs-lang>a.vs-lang__link:first-child {
  padding-left: 0 !important;
}

#header .vs-topbar .vs-topbar__menu .top-menu>li.vs-lang>a.vs-lang__link:last-child,
.vs-offcanvas__menu .top-menu>li.vs-lang>a.vs-lang__link:last-child {
  padding-right: 0 !important;
}

.top-menu>li.vs-lang .vs-lang__link:not(.is-active) {
  opacity: 0.6;
}

.top-menu>li.vs-lang .vs-lang__link.is-active {
  opacity: 1;
  font-weight: 700;
}

/* Séparateur centré : trait posé pile entre le padding-droite de FR et le
   padding-gauche de EN (12px de chaque côté). */
.top-menu>li.vs-lang .vs-lang__link+.vs-lang__link {
  border-left: 1px solid currentColor;
}

/* =====================================================================
   Menu principal par audience (blocs ps_linklist rendus par l'override
   linkblock.tpl). Les 2 audiences sont rendues (cache-safe) ; on masque
   celle qui ne correspond pas à l'espace courant via la classe body.
   La classe body.vs-aud-* est posée par requête (header.tpl + custom.js),
   donc le bon menu s'affiche même si le fragment ps_linklist est mis en cache.
   ===================================================================== */
body.vs-aud-part #_desktop_top_menu .top-menu>li.vs-nav-pro,
body.vs-aud-pro #_desktop_top_menu .top-menu>li.vs-nav-part {
  display: none !important;
}

.vs-product-card {
  height: 100%;
  min-width: 0;
}

.vs-product-card .thumbnail-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding: 14px;
  background: #fffdf9;
  border: 1px solid #dfd2b8;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: 0 5px 16px rgba(61, 28, 16, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vs-product-card .thumbnail-container:hover {
  border-color: #b17f4a;
  box-shadow: 0 7px 20px rgba(61, 28, 16, 0.10);
}

.vs-product-card .vs-product-card__photo {
  width: 100%;
  min-width: 0;
  margin: 0 0 13px;
}

.vs-product-card .vs-product-card__image-link {
  display: block;
  width: 100%;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.vs-product-card .vs-product-card__figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e3d7bf;
  border-radius: 4px;
}

.vs-product-card .vs-product-card__figure picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.vs-product-card .vs-product-card__figure picture img {
  display: block;
  width: 100%;
  height: 240px;
  margin: 0;
  object-fit: contain;
}

.vs-product-card .vs-product-card__caption {
  display: none;
  width: 100%;
  margin-top: 8px;
  color: #756653;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}

.vs-product-card .vs-product-card__logo {
  position: absolute;
  top: 8px;
  left: 8px;
  right: auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 4px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(177, 127, 74, 0.35);
  border-radius: 50%;
}

.vs-product-card .vs-product-card__logo img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}

.vs-product-card .vs-product-card__body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.vs-product-card .vs-product-card__name {
  min-width: 0;
  min-height: 44px;
  margin: 0 0 10px;
  padding: 0;
  font-family: "Inria Serif", Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.vs-product-card .vs-product-card__name a {
  color: var(--vs-title, #432918);
  text-decoration: none;
}

.vs-product-card .vs-product-card__name a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vs-product-card .vs-product-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  min-width: 0;
}

.vs-product-card .vs-product-card__price .price {
  color: var(--vs-dark, #3d1c10);
  font-size: 18px;
  font-weight: 700;
}

.vs-product-card .vs-product-card__price .regular-price {
  color: #81776b;
  font-size: 13px;
  text-decoration: line-through;
}

.vs-product-card .vs-product-card__reviews {
  min-width: 0;
  margin-bottom: 10px;
}

.vs-product-card .vs-product-card__quantity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0 0 10px;
  box-sizing: border-box;
}

.vs-product-card .vs-product-card__quantity label {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.vs-product-card .vs-product-card__quantity input {
  display: block;
  width: 76px;
  max-width: 100%;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid #b17f4a;
  border-radius: 2px;
  background: #fffdf9;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: center;
  box-sizing: border-box;
}

.vs-product-card .vs-product-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin-top: auto;
  padding-top: 10px;
  box-sizing: border-box;
}

.vs-product-card .vs-add-to-cart-form {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.vs-product-card .vs-product-buttons .vs-btn-cart,
.vs-product-card .vs-product-buttons .vs-btn-details {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1px solid var(--vs-accent, #b17f4a);
  border-radius: 2px;
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  writing-mode: horizontal-tb;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vs-product-card .vs-product-buttons .vs-btn-cart {
  background: var(--vs-dark, #3d1c10);
  color: #fff;
  border-color: var(--vs-dark, #3d1c10);
}

.vs-product-card .vs-product-buttons .vs-btn-cart:hover {
  background: var(--vs-dark-center, #6b3a2a);
  color: #fff;
  border-color: var(--vs-dark-center, #6b3a2a);
}

.vs-product-card .vs-product-buttons .vs-btn-details {
  background: transparent;
  color: var(--vs-dark, #3d1c10);
}

.vs-product-card .vs-product-buttons .vs-btn-details:hover {
  background: var(--vs-dark, #3d1c10);
  color: #fff;
}

.vs-product-card .vs-product-buttons .vs-btn-cart:focus-visible,
.vs-product-card .vs-product-buttons .vs-btn-details:focus-visible {
  outline: 3px solid var(--vs-accent, #b17f4a);
  outline-offset: 3px;
}

.vs-product-card .product-flags {
  margin-top: 8px;
}

.vs-product-card .product-flags .new,
.vs-product-card .product-flag.new,
.vs-product-card .product-flags li.product-flag.new {
  display: none !important;
}

@media (max-width: 900px) {
  .vs-product-card .thumbnail-container {
    padding: 11px;
  }

  .vs-product-card .vs-product-card__figure picture img {
    height: 210px;
  }

  .vs-product-card .vs-product-card__name {
    font-size: 17px;
  }
}

@media (max-width: 480px) {
  .vs-product-card .vs-product-card__figure picture img {
    height: 250px;
  }

  .vs-product-card .vs-product-card__name {
    min-height: 0;
    font-size: 19px;
  }

  .vs-product-card .vs-product-card__logo {
    width: 42px;
    height: 42px;
  }

  .vs-product-card .vs-product-buttons .vs-btn-cart,
  .vs-product-card .vs-product-buttons .vs-btn-details {
    min-height: 43px;
    padding: 10px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .vs-product-card,
  .vs-product-card * {
    transition: none !important;
  }
}


/* Correction des cartes produits sur la page d'accueil */
body#index .products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
}

body#index .products>.product,
body#index .products>[class*="col-"] {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  flex: none !important;
  box-sizing: border-box;
}

body#index .vs-product-card,
body#index .vs-product-card .thumbnail-container {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body#index .vs-product-card .vs-product-card__photo,
body#index .vs-product-card .vs-product-card__image-link,
body#index .vs-product-card .vs-product-card__figure,
body#index .vs-product-card .vs-product-card__body,
body#index .vs-product-card .vs-product-buttons {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

body#index .vs-product-card .vs-product-card__figure picture img {
  width: 100%;
  height: 240px;
  object-fit: contain;
}

@media (max-width: 1199px) {
  body#index .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body#index .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  body#index .vs-product-card .vs-product-card__figure picture img {
    height: 210px;
  }
}

@media (max-width: 480px) {
  body#index .products {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  body#index .vs-product-card .vs-product-card__figure picture img {
    height: 250px;
  }
}