/* ============================================================
   MENTHYS — Strate 1 : palette et typographie
   Override sur Hummingbird 2.0 · v0.1.0
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  --menthys-navy:      #071A2D;
  --menthys-navy-2:    #0B2238;
  --menthys-copper:    #A66A3F;
  --menthys-bronze:    #B88956;
  --menthys-ivory:     #FBF8F2;
  --menthys-champagne: #E9D8C5;
  --menthys-sable:     #D8C8B8;
  --menthys-ink:       #102033;
  --menthys-muted:     #6F6A64;
  --menthys-success:   #1F5A43;

  --bs-primary:        var(--menthys-navy);
  --bs-secondary:      var(--menthys-copper);
  --bs-body-bg:        var(--menthys-ivory);
  --bs-body-color:     var(--menthys-ink);
  --bs-link-color:     var(--menthys-copper);
  --bs-link-hover-color: var(--menthys-bronze);
  --bs-border-color:   rgba(7, 26, 45, 0.08);

  --bs-font-sans-serif: "Inter", system-ui, -apple-system, sans-serif;
  --bs-body-font-family: "Inter", system-ui, sans-serif;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6;

  /* Icones SVG partagees (sidebar categorytree Strate 8 + grille familles homepage Strate 9) */
  --menthys-icon-tag:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12l8-8a2 2 0 0 1 2.8 0l6.2 6.2a2 2 0 0 1 0 2.8l-8 8a2 2 0 0 1-2.8 0L3 14.8a2 2 0 0 1 0-2.8z'/%3E%3Ccircle cx='9' cy='9' r='1.3'/%3E%3C/svg%3E");
  --menthys-icon-notebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h11l3 3v15H5z'/%3E%3Cpath d='M16 3v3h3'/%3E%3Cpath d='M8 11h8M8 14.5h8M8 18h5'/%3E%3C/svg%3E");
  --menthys-icon-pen:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.2-4.8L16 4.4a1.6 1.6 0 0 1 2.3 0l1.3 1.3a1.6 1.6 0 0 1 0 2.3L8.8 18.8z'/%3E%3Cpath d='M14.5 6.9l2.6 2.6'/%3E%3Cpath d='M4 20l3.5-.9'/%3E%3C/svg%3E");
  --menthys-icon-printer:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='3' y='9' width='18' height='8' rx='1'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E");
  --menthys-icon-folder:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h6l1.6 2H21v11.5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
  --menthys-icon-monitor:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='1.2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E");
  --menthys-icon-box:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5l9-4 9 4-9 4-9-4z'/%3E%3Cpath d='M3 7.5v9l9 4 9-4v-9'/%3E%3Cpath d='M12 11.5v9'/%3E%3C/svg%3E");
  --menthys-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='1.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3Cpath d='M7 14h.01M12 14h.01M17 14h.01M7 17.5h.01M12 17.5h.01'/%3E%3C/svg%3E");
  --menthys-icon-chart:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='13' rx='1.2'/%3E%3Cpath d='M9 21h6M12 17v4'/%3E%3Cpath d='M7 13v-3M11 13V8M15 13v-5'/%3E%3C/svg%3E");
  --menthys-icon-chair:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v6'/%3E%3Cpath d='M4 12h16v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M6 18v2M18 18v2'/%3E%3C/svg%3E");
  --menthys-icon-shield:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 5-3.5 7.5-7 9-3.5-1.5-7-4-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  --menthys-icon-cup:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13v6a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z'/%3E%3Cpath d='M17 9h1.5a2.5 2.5 0 0 1 0 5H17'/%3E%3Cpath d='M8 3c0 1-1 1-1 2M12 3c0 1-1 1-1 2'/%3E%3C/svg%3E");
  --menthys-icon-cap:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l10 5-10 5L2 9z'/%3E%3Cpath d='M6 11.5V16c0 1.5 3 3 6 3s6-1.5 6-3v-4.5'/%3E%3Cpath d='M22 9v6'/%3E%3C/svg%3E");
  --menthys-icon-layers:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3C/svg%3E");
  --menthys-icon-help-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.2 9a2.8 2.8 0 0 1 5.4 1c0 1.8-2.8 1.8-2.8 3.6'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background-color: var(--menthys-ivory);
  color: var(--menthys-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--menthys-navy);
}

h1, .h1 { font-weight: 600; letter-spacing: -1px; }
h2, .h2 { font-weight: 500; }

a, a:visited {
  color: var(--menthys-copper);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--menthys-bronze);
}

.btn-primary,
.btn-primary:visited {
  background-color: var(--menthys-navy);
  border-color: var(--menthys-navy);
  color: var(--menthys-ivory);
  font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: 0;
  padding: 12px 28px;
  transition: all 0.25s ease;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--menthys-navy-2) !important;
  border-color: var(--menthys-navy-2) !important;
  color: var(--menthys-ivory) !important;
}

.btn-secondary {
  background-color: transparent;
  border: 1px solid var(--menthys-copper);
  color: var(--menthys-copper);
  font-weight: 600;
  border-radius: 0;
  padding: 12px 28px;
}
.btn-secondary:hover {
  background-color: var(--menthys-copper);
  border-color: var(--menthys-copper);
  color: var(--menthys-ivory);
}

body, .page-content {
  background-color: var(--menthys-ivory);
}

.form-control:focus {
  border-color: var(--menthys-copper);
  box-shadow: 0 0 0 0.15rem rgba(166, 106, 63, 0.15);
}

.product-price,
.price,
.regular-price {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  color: var(--menthys-copper);
}

.product-flag {
  background-color: var(--menthys-copper) !important;
  color: var(--menthys-ivory) !important;
  border-radius: 0 !important;
  font-size: 10px !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
}
.product-flag.discount,
.product-flag.on-sale {
  background-color: var(--menthys-navy) !important;
}

/* ============================================================
   STRATE 1.5 — Layout pleine largeur (edge-to-edge)
   ============================================================ */

/* Forcer tous les containers Bootstrap à occuper toute la largeur */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.checkout-steps__mobile {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Sur tablette : un peu plus de respiration latérale */
@media (min-width: 768px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

/* Sur desktop large : edge-to-edge plus marqué, mais on évite que les produits
   se collent vraiment aux bords (lisibilité quand même) */
@media (min-width: 1200px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* Très grands écrans (1600px+) : padding plus généreux pour ne pas que
   les produits soient en ligne sur 8 colonnes serrées */
@media (min-width: 1600px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

/* Hero / Image slider : vraiment edge-to-edge, pas de padding */
.ps-imageslider,
.ps-imageslider .container,
#wrapper > .container:has(.ps-imageslider) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

/* Le header doit lui aussi être pleine largeur */
.header-top .container,
.header-bottom .container {
  max-width: 100% !important;
}

/* Footer pleine largeur (mais texte aéré) */
.footer__main .container {
  max-width: 100% !important;
}

/* Grille produits : autoriser plus de colonnes sur très grand écran */
@media (min-width: 1600px) {
  .layout-full-width .products {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1920px) {
  .layout-full-width .products {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
/* ============================================================
   STRATE 2 — Header, hero, navigation, badges
   ============================================================ */

/* ---- HEADER ---- */

/* Ligne de séparation header/contenu en champagne plutôt que gris Bootstrap */
.header-bottom {
  border-bottom: 1px solid var(--menthys-champagne) !important;
}

.header-top {
  border-bottom: 1px solid var(--menthys-champagne) !important;
  font-size: 0.8125rem;
  letter-spacing: 0.3px;
}

/* Header top : liens en muted, pas en noir */
.header-top a:not(.dropdown-item) {
  color: var(--menthys-muted) !important;
}
.header-top a:not(.dropdown-item):hover {
  color: var(--menthys-copper) !important;
}

/* Connexion / Panier en header top */
.header-block__action-btn {
  color: var(--menthys-ink) !important;
  font-size: 0.8125rem;
}
.header-block__action-btn:hover {
  color: var(--menthys-copper) !important;
}

/* Badge panier (nombre d'articles) en cuivre */
.header-block__badge {
  background-color: var(--menthys-copper) !important;
  color: var(--menthys-ivory) !important;
}

/* ---- NAVIGATION ---- */

/* Empeche le menu principal desktop de wrapper sur 2 lignes
   (ex: "Besoin d'aide ?" retombait a la ligne faute de place) */
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree {
  flex-wrap: nowrap;
}

/* Liens nav en ink, pas en secondary */
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .ps-mainmenu__tree-link {
  color: var(--menthys-ink) !important;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  padding: 1.5rem 0.5rem;
}

/* Hover nav : cuivre avec underline */
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .ps-mainmenu__tree-link:hover {
  color: var(--menthys-copper) !important;
}

/* Lien actif : underline cuivre */
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li.current .ps-mainmenu__tree-link {
  color: var(--menthys-copper) !important;
  border-bottom: 2px solid var(--menthys-copper);
  padding-bottom: calc(1.5rem - 2px);
}

/* Dropdown nav : fond ivory, bordure champagne */
.ps-mainmenu:is(.ps-mainmenu--desktop) .ps-mainmenu__tree > li .submenu {
  background-color: var(--menthys-ivory) !important;
  border-top: 2px solid var(--menthys-copper) !important;
  box-shadow: 0 8px 24px rgba(7, 26, 45, 0.08) !important;
}

/* Items dropdown */
.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__left-item {
  color: var(--menthys-ink) !important;
  font-size: 0.9rem;
}
.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__left-item:hover {
  background-color: var(--menthys-champagne) !important;
  color: var(--menthys-copper) !important;
}

/* Liens secondaires dans dropdown */
.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items .menu-item {
  color: var(--menthys-muted) !important;
  font-size: 0.875rem;
}
.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items .menu-item:hover {
  color: var(--menthys-copper) !important;
}

/* ---- HERO / IMAGE SLIDER ---- */

/* Caption : bandeau degrade couvrant toute la zone de legende, pas juste une boite etroite.
   Corrige le titre (h2) qui depassait au-dessus de l'encart et devenait illisible
   sur les zones claires de la photo. */
.ps-imageslider__figure {
  position: relative;
}
.ps-imageslider__figcaption {
  background: none !important;
  background-color: rgba(7, 26, 45, 0.4) !important;
  background-image: none !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 1.75rem 4rem !important;
  margin: 0 !important;
  text-align: left !important;
  border-radius: 0 !important;
}

/* Titre dans le caption : Playfair, toujours clair, ombre de securite pour le contraste */
.ps-imageslider__figcaption h2,
.ps-imageslider__figcaption h3,
.ps-imageslider__figcaption .caption-description {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 600 !important;
  margin: 0 0 0.5rem !important;
}
.ps-imageslider__figcaption h2 strong,
.ps-imageslider__figcaption h2 span {
  border-radius: 2px;
}

/* Texte descriptif dans le caption */
.ps-imageslider__figcaption p,
.ps-imageslider__figcaption div {
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
}

/* Indicateurs du slider (les petits traits en bas) */
.carousel-indicators [data-bs-target] {
  background-color: var(--menthys-champagne) !important;
  opacity: 0.6;
}
.carousel-indicators .active {
  background-color: var(--menthys-copper) !important;
  opacity: 1 !important;
}

/* ---- BADGES PRODUITS ---- */

/* "Neuf" → cuivre */
.product-flag.new,
.product-flag:not(.discount):not(.on-sale):not(.pack):not(.online-only) {
  background-color: var(--menthys-copper) !important;
  color: var(--menthys-ivory) !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
}

/* "-20%" promo → navy */
.product-flag.discount,
.product-flag.on-sale {
  background-color: var(--menthys-navy) !important;
  color: var(--menthys-ivory) !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 4px 10px !important;
}

/* ---- CARTES PRODUITS ---- */

/* Titre produit en ink, hover cuivre */
.product-miniature__title,
.product-line__title {
  color: var(--menthys-ink) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  line-height: 1.3 !important;
}
.product-miniature__title:hover,
.product-line__title:hover {
  color: var(--menthys-copper) !important;
}

/* Prix produit : Playfair + cuivre (renforcement strate 1) */
.product-miniature__price,
.product-miniature__prices .price {
  font-family: "Playfair Display", Georgia, serif !important;
  color: var(--menthys-copper) !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
}

/* Prix barré : muted */
.product-miniature__regular-price {
  color: var(--menthys-muted) !important;
  font-size: 0.875rem !important;
}

/* Fond carte produit : blanc cassé ivory au hover */
.product-miniature__inner:hover {
  box-shadow: 0 4px 20px rgba(7, 26, 45, 0.06) !important;
}

/* ---- BOUTON AJOUTER AU PANIER ---- */

/* Renforcement navy sans arrondi (déjà en strate 1, on force) */
.btn-primary,
.product-miniature .btn-primary,
.add-to-cart {
  background-color: var(--menthys-navy) !important;
  border-color: var(--menthys-navy) !important;
  border-radius: 0 !important;
  color: var(--menthys-ivory) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 10px 20px !important;
  transition: all 0.2s ease !important;
}
.btn-primary:hover,
.product-miniature .btn-primary:hover,
.add-to-cart:hover {
  background-color: var(--menthys-copper) !important;
  border-color: var(--menthys-copper) !important;
}

/* ---- SECTION TITRES (Produits phares, Latest arrivals, etc.) ---- */

.section-title,
.module-products h2,
.page-content--home h2 {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 1.75rem !important;
  color: var(--menthys-navy) !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 1.5rem !important;
}

/* Séparateur cuivre sous les titres de section */
.section-title::after,
.module-products h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  background-color: var(--menthys-copper);
  margin-top: 0.75rem;
}
/* ============================================================
   STRATE 2 — Correction badges (spécificité forcée)
   ============================================================ */

/* Tous les badges produits : reset forcé */
.product-flags .badge,
.product-flags .badge.new,
.product-flags .badge:not(.discount) {
  background-color: var(--menthys-copper) !important;
  color: var(--menthys-ivory) !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
}

/* Badge remise/discount → navy */
.product-flags .badge.discount {
  background-color: var(--menthys-navy) !important;
  color: var(--menthys-ivory) !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 4px 10px !important;
}
/* ============================================================
   STRATE 2 — Badges correction classes exactes Hummingbird
   ============================================================ */

.product-flags li.badge.new {
  background-color: var(--menthys-copper) !important;
  color: var(--menthys-ivory) !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
}

.product-flags li.badge.discount {
  background-color: var(--menthys-navy) !important;
  color: var(--menthys-ivory) !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 4px 10px !important;
}

/* ============================================================
   STRATE 2 — Badges FORCE ABSOLUE (hors layer Bootstrap)
   ============================================================ */

@layer utilities {
  .product-flags li.badge.new,
  ul.product-flags li.badge.new {
    background-color: #A66A3F !important;
    color: #FBF8F2 !important;
    border-radius: 0 !important;
    border: none !important;
  }

  .product-flags li.badge.discount,
  ul.product-flags li.badge.discount {
    background-color: #071A2D !important;
    color: #FBF8F2 !important;
    border-radius: 0 !important;
    border: none !important;
  }
}
/* BADGES FORCE MAX SPECIFICITE */
:is(ul, ol).product-flags :is(li, span).badge:is(.new, [class~="new"]) {
  background-color: #A66A3F !important;
  color: #FBF8F2 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

:is(ul, ol).product-flags :is(li, span).badge:is(.discount, [class~="discount"]) {
  background-color: #071A2D !important;
  color: #FBF8F2 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ============================================================
   STRATE 3 — AGLAE Phase 1 : cartes produit, typographie, espacements
   ============================================================ */

/* ---- GRILLE PRODUITS : respiration ---- */

.products {
  gap: 1.75rem !important;
}

/* ---- CARTE PRODUIT : structure et profondeur ---- */

.product-miniature__inner {
  background-color: #FFFFFF;
  border: 1px solid rgba(7, 26, 45, 0.06);
  border-radius: 2px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  overflow: hidden;
}

.product-miniature__inner:hover {
  box-shadow: 0 14px 32px rgba(7, 26, 45, 0.10) !important;
  border-color: rgba(166, 106, 63, 0.25);
  transform: translateY(-3px);
}

/* ---- IMAGE : ratio stable + zoom doux au survol ---- */

.product-miniature__image-container {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--menthys-champagne);
  position: relative;
}

.product-miniature__image-container .product-miniature__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.product-miniature__inner:hover .product-miniature__image {
  transform: scale(1.06);
}

/* Etat "sans photo" : fond degrade discret + icone "image absente" en filigrane,
   plutot que le rendu delave (opacity + mix-blend-mode) qui laissait surtout
   voir l'icone de lien casse du navigateur. */
.product-miniature__image-container:has(.product-miniature__image[alt="Aucune image disponible"]) {
  background: linear-gradient(135deg, var(--menthys-champagne), var(--menthys-sable));
}
.product-miniature__image-container:has(.product-miniature__image[alt="Aucune image disponible"]) .product-miniature__image {
  opacity: 0;
}
.product-miniature__image-container:has(.product-miniature__image[alt="Aucune image disponible"])::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 32%;
  aspect-ratio: 1 / 1;
  background-color: var(--menthys-muted);
  opacity: 0.5;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='1.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M3 17l5.5-5.5a1.5 1.5 0 0 1 2.1 0L17 18M14.5 15l1.8-1.8a1.5 1.5 0 0 1 2.1 0L21 16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='1.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M3 17l5.5-5.5a1.5 1.5 0 0 1 2.1 0L17 18M14.5 15l1.8-1.8a1.5 1.5 0 0 1 2.1 0L21 16'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ---- CONTENU BAS DE CARTE : respiration ---- */

.product-miniature__bottom {
  padding: 1.1rem 1rem 1.25rem !important;
}

.product-miniature__infos {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.product-miniature__title {
  min-height: 2.4em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- BOUTON APERCU RAPIDE : coherence marque ---- */

.product-miniature__quickview-button,
.product-miniature__quickview-touch {
  background-color: var(--menthys-ivory) !important;
  border: 1px solid var(--menthys-champagne) !important;
  color: var(--menthys-navy) !important;
  border-radius: 0 !important;
  transition: all 0.25s ease !important;
}
.product-miniature__quickview-button:hover,
.product-miniature__quickview-touch:hover {
  background-color: var(--menthys-navy) !important;
  border-color: var(--menthys-navy) !important;
  color: var(--menthys-ivory) !important;
}

/* ---- SECTIONS HOMEPAGE : respiration verticale ---- */

.module-products,
.page-content--home > section,
#custom-text {
  margin-top: 3.5rem !important;
  margin-bottom: 3.5rem !important;
}

/* ---- FIL D'ARIANE : plus discret, plus elegant ---- */

.breadcrumb {
  font-size: 0.8125rem;
  color: var(--menthys-muted);
  padding: 1rem 0 !important;
}
.breadcrumb a {
  color: var(--menthys-muted);
}
.breadcrumb a:hover {
  color: var(--menthys-copper);
}
.breadcrumb-item.active {
  color: var(--menthys-navy);
}

/* ---- PAGE CATEGORIE : titre plus premium ---- */

.category-cover + .page-content h1,
.category-header h1,
#js-product-list-header h1 {
  font-family: "Playfair Display", Georgia, serif !important;
  color: var(--menthys-navy) !important;
  font-weight: 500 !important;
}

/* ============================================================
   STRATE 6 -- Sidebar categorytree avec icones + masquage des tuiles
   ============================================================ */

/* ---- Icones devant chaque famille de la sidebar (arbre categorytree) ---- */

.category-tree__list[data-depth="0"] > .category-tree__item {
  position: relative;
}
.category-tree__list[data-depth="0"] > .category-tree__item > .category-tree__item-header > .category-tree__item-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-left: 0;
}
/* Icones : gerees desormais par de vraies balises <img> (Strate 7), plus par ::before */

/* Kits (feuille sans enfants, pas de .category-tree__item-header wrapper avec bouton) */
.category-tree__list[data-depth="0"] > .category-tree__item > .category-tree__item-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* ---- Masquer les tuiles de sous-categories (remplacees par le moteur de filtre) ---- */

.subcategory {
  display: none !important;
}

/* ============================================================
   STRATE 7 -- Corrections mega-menu (vertical + compact) et page famille
   ============================================================ */

/* ---- MEGA-MENU DESKTOP : panneau compact, pas pleine largeur ---- */

.js-sub-menu.submenu {
  width: auto !important;
  min-width: 560px;
  max-width: 720px;
  left: 0;
  right: auto !important;
}
.js-sub-menu.submenu .container {
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
}
.js-sub-menu.submenu .submenu__row {
  flex-wrap: nowrap;
}
.js-sub-menu.submenu .submenu__left {
  width: 260px !important;
  max-width: 260px !important;
  flex: 0 0 260px;
}
.js-sub-menu.submenu .submenu__right {
  width: auto !important;
  flex: 1 1 auto;
}

/* ---- Sous-categories du panneau droit : liste verticale, pas de grille ---- */

.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items {
  grid-template-columns: 1fr !important;
  row-gap: 0.2rem !important;
  -moz-column-gap: 0 !important;
  column-gap: 0 !important;
}
.submenu__right-items li {
  list-style: none;
}
.submenu__right-items .menu-item {
  display: block;
  padding: 0.4rem 0;
}

/* ---- Icones sidebar categorytree (remplace la tentative :has(), desormais un vrai <img>) ---- */

.category-tree__item-icon {
  border-radius: 50%;
  background-color: var(--menthys-champagne);
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 0.6rem;
  vertical-align: middle;
}
.category-tree__list[data-depth="0"] .category-tree__item-link {
  display: inline-flex;
  align-items: center;
}

/* ---- Page famille (a des sous-categories) : masquer titre + description + tuiles ---- */
/* Les pages sans sous-categories (feuilles) gardent leur titre normalement. */

.category__header:has(.subcategory) {
  display: none !important;
}

/* ============================================================
   STRATE 8 — AGLAE Phase 2 : icones categories (SVG inline) + Phase 3 (transitions)
   ============================================================ */

/* ---- ICONES SVG CATEGORIES (sidebar categorytree, profondeur 0) ----
   La vignette photo (<img class="category-tree__item-icon">, Strate 7) depend
   d'un upload manuel par categorie et ne suit jamais la palette. On la masque
   et on la remplace par une icone vectorielle inline (mask-image), recolorable
   en CSS pur : une seule forme par categorie, aucune requete image. */

.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-icon {
  display: none;
}

.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-link::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-color: var(--menthys-navy);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.25s ease, transform 0.25s ease;
  /* icone par defaut (etiquette) : toute categorie non reconnue ci-dessous */
  -webkit-mask-image: var(--menthys-icon-tag);
  mask-image: var(--menthys-icon-tag);
}

/* Papier bureau (ex-"Papeterie") : bloc-notes */
.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-link[href*="papier-bureau" i]::before,
.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-link[href*="papeterie" i]::before {
  -webkit-mask-image: var(--menthys-icon-notebook);
  mask-image: var(--menthys-icon-notebook);
}

/* Ecriture : stylo */
.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-link[href*="ecriture" i]::before {
  -webkit-mask-image: var(--menthys-icon-pen);
  mask-image: var(--menthys-icon-pen);
}

/* Impression : imprimante */
.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-link[href*="impression" i]::before {
  -webkit-mask-image: var(--menthys-icon-printer);
  mask-image: var(--menthys-icon-printer);
}

/* Classement (ex-"Organisation") : classeur/dossier */
.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-link[href*="classement" i]::before,
.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-link[href*="organisation" i]::before {
  -webkit-mask-image: var(--menthys-icon-folder);
  mask-image: var(--menthys-icon-folder);
}

/* Informatique (consommables-it) : ecran */
.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-link[href*="consommables-it" i]::before {
  -webkit-mask-image: var(--menthys-icon-monitor);
  mask-image: var(--menthys-icon-monitor);
}

/* Emballage : carton */
.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-link[href*="emballage" i]::before {
  -webkit-mask-image: var(--menthys-icon-box);
  mask-image: var(--menthys-icon-box);
}

/* Agenda / Planning : calendrier */
.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-link[href*="agenda-planning" i]::before {
  -webkit-mask-image: var(--menthys-icon-calendar);
  mask-image: var(--menthys-icon-calendar);
}

/* Comm / Presentation : graphique */
.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-link[href*="comm-presentation" i]::before {
  -webkit-mask-image: var(--menthys-icon-chart);
  mask-image: var(--menthys-icon-chart);
}

/* Mobilier / Ergo : chaise */
.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-link[href*="mobilier-ergo" i]::before {
  -webkit-mask-image: var(--menthys-icon-chair);
  mask-image: var(--menthys-icon-chair);
}

/* EPI / Hygiene : bouclier */
.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-link[href*="epi-hygiene" i]::before {
  -webkit-mask-image: var(--menthys-icon-shield);
  mask-image: var(--menthys-icon-shield);
}

/* Cafe / Pause : tasse */
.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-link[href*="cafe-pause" i]::before {
  -webkit-mask-image: var(--menthys-icon-cup);
  mask-image: var(--menthys-icon-cup);
}

/* Scolaire / Peda : toque */
.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-link[href*="scolaire-peda" i]::before {
  -webkit-mask-image: var(--menthys-icon-cap);
  mask-image: var(--menthys-icon-cap);
}

/* Kits : calques empiles */
.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-link[href*="kits" i]::before {
  -webkit-mask-image: var(--menthys-icon-layers);
  mask-image: var(--menthys-icon-layers);
}

/* ---- PHASE 3 : transitions douces + effet de survol sur les icones ---- */

.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-link {
  transition: color 0.25s ease;
}
.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-link:hover {
  color: var(--menthys-copper);
}
.category-tree__list[data-depth="0"] > .category-tree__item .category-tree__item-link:hover::before {
  background-color: var(--menthys-copper);
  transform: scale(1.12);
}

/* ============================================================
   STRATE 9 — APHRODITE : grille de familles sur la page d'accueil
   Module menthyshomefamilies (hook displayHome). Reprend l'esprit
   des cartes produit (Strate 3) et les icones SVG (Strate 8).
   ============================================================ */

.menthys-home-families {
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
}

.menthys-home-families__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menthys-home-families__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  background-color: #FFFFFF;
  border: 1px solid rgba(7, 26, 45, 0.06);
  border-radius: 2px;
  text-align: center;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.menthys-home-families__card:hover {
  box-shadow: 0 14px 32px rgba(7, 26, 45, 0.10);
  border-color: rgba(166, 106, 63, 0.25);
  transform: translateY(-3px);
}

.menthys-home-families__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--menthys-champagne);
  flex-shrink: 0;
  transition: background-color 0.25s ease;
}

.menthys-home-families__icon::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--menthys-navy);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: var(--menthys-icon-tag);
  mask-image: var(--menthys-icon-tag);
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.menthys-home-families__card:hover .menthys-home-families__icon {
  background-color: var(--menthys-copper);
}

.menthys-home-families__card:hover .menthys-home-families__icon::before {
  background-color: #FFFFFF;
  transform: scale(1.1);
}

.menthys-home-families__name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--menthys-ink);
  line-height: 1.3;
}

.menthys-home-families__card:hover .menthys-home-families__name {
  color: var(--menthys-copper);
}

/* Mapping icone <-> famille : cle sur data-slug (link_rewrite exact de la categorie) */
.menthys-home-families__card[data-slug="papier-bureau"] .menthys-home-families__icon::before { -webkit-mask-image: var(--menthys-icon-notebook); mask-image: var(--menthys-icon-notebook); }
.menthys-home-families__card[data-slug="ecriture"] .menthys-home-families__icon::before { -webkit-mask-image: var(--menthys-icon-pen); mask-image: var(--menthys-icon-pen); }
.menthys-home-families__card[data-slug="classement"] .menthys-home-families__icon::before { -webkit-mask-image: var(--menthys-icon-folder); mask-image: var(--menthys-icon-folder); }
.menthys-home-families__card[data-slug="consommables-it"] .menthys-home-families__icon::before { -webkit-mask-image: var(--menthys-icon-monitor); mask-image: var(--menthys-icon-monitor); }
.menthys-home-families__card[data-slug="impression"] .menthys-home-families__icon::before { -webkit-mask-image: var(--menthys-icon-printer); mask-image: var(--menthys-icon-printer); }
.menthys-home-families__card[data-slug="emballage"] .menthys-home-families__icon::before { -webkit-mask-image: var(--menthys-icon-box); mask-image: var(--menthys-icon-box); }
.menthys-home-families__card[data-slug="agenda-planning"] .menthys-home-families__icon::before { -webkit-mask-image: var(--menthys-icon-calendar); mask-image: var(--menthys-icon-calendar); }
.menthys-home-families__card[data-slug="comm-presentation"] .menthys-home-families__icon::before { -webkit-mask-image: var(--menthys-icon-chart); mask-image: var(--menthys-icon-chart); }
.menthys-home-families__card[data-slug="mobilier-ergo"] .menthys-home-families__icon::before { -webkit-mask-image: var(--menthys-icon-chair); mask-image: var(--menthys-icon-chair); }
.menthys-home-families__card[data-slug="epi-hygiene"] .menthys-home-families__icon::before { -webkit-mask-image: var(--menthys-icon-shield); mask-image: var(--menthys-icon-shield); }
.menthys-home-families__card[data-slug="cafe-pause"] .menthys-home-families__icon::before { -webkit-mask-image: var(--menthys-icon-cup); mask-image: var(--menthys-icon-cup); }
.menthys-home-families__card[data-slug="scolaire-peda"] .menthys-home-families__icon::before { -webkit-mask-image: var(--menthys-icon-cap); mask-image: var(--menthys-icon-cap); }
.menthys-home-families__card[data-slug="kits"] .menthys-home-families__icon::before { -webkit-mask-image: var(--menthys-icon-layers); mask-image: var(--menthys-icon-layers); }

/* ============================================================
   STRATE 10 — Corrections footer + bandeau promo pleine largeur
   Footer : taille de texte cohérente + liens sur une seule ligne.
   Bandeau : nouveau bloc header-banner (deja prevu par Hummingbird,
   jusqu'ici jamais alimente) + rappel de l'offre dans le footer.
   ============================================================ */

/* ---- FOOTER : typographie coherente avec le reste du site
   (meme esprit que .breadcrumb / .header-top, Strate 2-3) ---- */

.footer,
.footer p,
.footer li,
.footer a {
  font-size: 0.875rem !important;
}

.footer .footer-block__title,
.footer .footer-block__title a {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
}

.footer .copyright {
  font-size: 0.8125rem !important;
  color: var(--menthys-muted) !important;
}

/* ---- FOOTER : liens sur une seule ligne
   (Paiement securise, Magasins, Devenir vendeur...) ---- */

.footer .footer-block__list a,
.footer .footer-block__list .link-item,
.footer .ets_ws_accountlink a {
  white-space: nowrap;
}

/* Les <li> injectes par le module marketplace embarquent des classes
   Bootstrap de grille (col-lg-4 col-md-6...) pensees pour un autre
   contexte : dans une colonne de footer deja etroite, elles forcent
   le lien sur deux lignes. On les neutralise pour que le <li> prenne
   toute la largeur disponible dans la colonne. */
.footer .ets_ws_accountlink {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---- BANDEAU PROMO PLEINE LARGEUR (au-dessus du header) ----
   Alimente le bloc header-banner deja prevu par Hummingbird
   (hook displayBanner), jusqu'ici jamais rempli faute de module. */

.header-banner {
  background-color: var(--menthys-navy);
  width: 100%;
}

.header-banner__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.55rem 1.5rem;
  color: var(--menthys-ivory);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-align: center;
}

.header-banner__sep {
  color: var(--menthys-bronze);
  font-weight: 700;
}

.header-banner__extra {
  color: var(--menthys-champagne);
}

/* ---- RAPPEL DE L'OFFRE DANS LE FOOTER (pres de la newsletter) ---- */

.footer-promo-reminder {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  margin-bottom: 2rem;
  background-color: var(--menthys-navy);
}

.footer-promo-reminder .footer-promo-reminder__item {
  color: var(--menthys-ivory) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
}

.footer-promo-reminder .footer-promo-reminder__sep {
  color: var(--menthys-bronze);
  font-weight: 700;
}


/* ============================================================
   STRATE 11 — DELPHES : Centre d'aide (/besoin-aide)
   Module menthyscentreaide (hook filterCmsContent sur id_cms=10).
   Grille de tuiles (meme esprit que Strate 9 — APHRODITE) qui bascule
   vers un panneau de questions en accordeon au clic (JS inline du
   module, pas de dependance supplementaire).
   ============================================================ */

.menthys-centre-aide {
  margin-top: 2rem;
  margin-bottom: 3.5rem;
}

/* ---- Grille de tuiles categories (repris de Strate 9) ---- */

.menthys-centre-aide__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menthys-centre-aide__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1.75rem 1rem;
  background-color: #FFFFFF;
  border: 1px solid rgba(7, 26, 45, 0.06);
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.menthys-centre-aide__card:hover,
.menthys-centre-aide__card:focus-visible {
  box-shadow: 0 14px 32px rgba(7, 26, 45, 0.10);
  border-color: rgba(166, 106, 63, 0.25);
  transform: translateY(-3px);
}

.menthys-centre-aide__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--menthys-champagne);
  flex-shrink: 0;
  transition: background-color 0.25s ease;
}

.menthys-centre-aide__icon::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  background-color: var(--menthys-navy);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: var(--menthys-icon-help-circle);
  mask-image: var(--menthys-icon-help-circle);
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.menthys-centre-aide__card:hover .menthys-centre-aide__icon,
.menthys-centre-aide__card:focus-visible .menthys-centre-aide__icon {
  background-color: var(--menthys-copper);
}

.menthys-centre-aide__card:hover .menthys-centre-aide__icon::before,
.menthys-centre-aide__card:focus-visible .menthys-centre-aide__icon::before {
  background-color: #FFFFFF;
  transform: scale(1.1);
}

.menthys-centre-aide__name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--menthys-ink);
  line-height: 1.35;
}

.menthys-centre-aide__card:hover .menthys-centre-aide__name,
.menthys-centre-aide__card:focus-visible .menthys-centre-aide__name {
  color: var(--menthys-copper);
}

/* Mapping icone <-> categorie : cle sur data-icon (champ si.faq_category.icone).
   Reprend les icones deja definies en Strate 1 (memes que Strate 9). */
.menthys-centre-aide__card[data-icon="tag"] .menthys-centre-aide__icon::before { -webkit-mask-image: var(--menthys-icon-tag); mask-image: var(--menthys-icon-tag); }
.menthys-centre-aide__card[data-icon="notebook"] .menthys-centre-aide__icon::before { -webkit-mask-image: var(--menthys-icon-notebook); mask-image: var(--menthys-icon-notebook); }
.menthys-centre-aide__card[data-icon="pen"] .menthys-centre-aide__icon::before { -webkit-mask-image: var(--menthys-icon-pen); mask-image: var(--menthys-icon-pen); }
.menthys-centre-aide__card[data-icon="printer"] .menthys-centre-aide__icon::before { -webkit-mask-image: var(--menthys-icon-printer); mask-image: var(--menthys-icon-printer); }
.menthys-centre-aide__card[data-icon="folder"] .menthys-centre-aide__icon::before { -webkit-mask-image: var(--menthys-icon-folder); mask-image: var(--menthys-icon-folder); }
.menthys-centre-aide__card[data-icon="monitor"] .menthys-centre-aide__icon::before { -webkit-mask-image: var(--menthys-icon-monitor); mask-image: var(--menthys-icon-monitor); }
.menthys-centre-aide__card[data-icon="box"] .menthys-centre-aide__icon::before { -webkit-mask-image: var(--menthys-icon-box); mask-image: var(--menthys-icon-box); }
.menthys-centre-aide__card[data-icon="calendar"] .menthys-centre-aide__icon::before { -webkit-mask-image: var(--menthys-icon-calendar); mask-image: var(--menthys-icon-calendar); }
.menthys-centre-aide__card[data-icon="chart"] .menthys-centre-aide__icon::before { -webkit-mask-image: var(--menthys-icon-chart); mask-image: var(--menthys-icon-chart); }
.menthys-centre-aide__card[data-icon="chair"] .menthys-centre-aide__icon::before { -webkit-mask-image: var(--menthys-icon-chair); mask-image: var(--menthys-icon-chair); }
.menthys-centre-aide__card[data-icon="shield"] .menthys-centre-aide__icon::before { -webkit-mask-image: var(--menthys-icon-shield); mask-image: var(--menthys-icon-shield); }
.menthys-centre-aide__card[data-icon="cup"] .menthys-centre-aide__icon::before { -webkit-mask-image: var(--menthys-icon-cup); mask-image: var(--menthys-icon-cup); }
.menthys-centre-aide__card[data-icon="cap"] .menthys-centre-aide__icon::before { -webkit-mask-image: var(--menthys-icon-cap); mask-image: var(--menthys-icon-cap); }
.menthys-centre-aide__card[data-icon="layers"] .menthys-centre-aide__icon::before { -webkit-mask-image: var(--menthys-icon-layers); mask-image: var(--menthys-icon-layers); }
/* help-circle est aussi la valeur par defaut du champ en base : pas de regle
   dediee necessaire, c'est deja l'image par defaut du bloc ::before ci-dessus. */

/* ---- Panneau questions (bascule au clic sur une tuile) ---- */

.menthys-centre-aide__panel {
  margin-top: 1rem;
}

.menthys-centre-aide__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  margin-bottom: 1.5rem;
  background: none;
  border: none;
  color: var(--menthys-copper);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.menthys-centre-aide__back:hover {
  color: var(--menthys-bronze);
  text-decoration: underline;
}

.menthys-centre-aide__panel-title {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--menthys-navy);
  margin-bottom: 1.5rem;
}

/* ---- Accordeon questions/reponses ---- */

.menthys-centre-aide__accordion {
  border-top: 1px solid var(--menthys-champagne);
}

.menthys-centre-aide__item {
  border-bottom: 1px solid var(--menthys-champagne);
}

.menthys-centre-aide__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  background: none;
  border: none;
  text-align: left;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--menthys-ink);
  cursor: pointer;
}

.menthys-centre-aide__question:hover {
  color: var(--menthys-copper);
}

.menthys-centre-aide__question::after {
  content: "+";
  flex-shrink: 0;
  margin-left: 1rem;
  color: var(--menthys-copper);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.menthys-centre-aide__item--open .menthys-centre-aide__question::after {
  transform: rotate(45deg);
}

.menthys-centre-aide__answer {
  display: none;
  padding: 0 0 1.25rem;
  color: var(--menthys-muted);
  white-space: pre-line;
}

.menthys-centre-aide__item--open .menthys-centre-aide__answer {
  display: block;
}

/* ============================================================
   MENTHYS — Strate 12 : Trouver une cartouche/toner (ARTÉMIS-04)
   Sélecteur en cascade Marque > Série > Modèle > Cartouches,
   même esprit que Strate 11 (centre d'aide) : grille de tuiles
   au premier niveau, listes cliquables ensuite, bascule au clic
   via JS inline du module (pas de dépendance supplémentaire).
   ============================================================ */

.menthys-cartouches {
  margin-top: 2rem;
  margin-bottom: 3.5rem;
}

.menthys-cartouches__intro {
  color: var(--menthys-muted);
  margin-bottom: 1.5rem;
}

/* ---- Grille de tuiles marques (repris de Strate 11) ---- */

.menthys-cartouches__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menthys-cartouches__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1.75rem 1rem;
  background-color: #FFFFFF;
  border: 1px solid rgba(7, 26, 45, 0.06);
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.menthys-cartouches__card:hover,
.menthys-cartouches__card:focus-visible {
  box-shadow: 0 14px 32px rgba(7, 26, 45, 0.10);
  border-color: rgba(166, 106, 63, 0.25);
  transform: translateY(-3px);
}

.menthys-cartouches__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--menthys-champagne);
  flex-shrink: 0;
  transition: background-color 0.25s ease;
}

.menthys-cartouches__icon::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  background-color: var(--menthys-navy);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: var(--menthys-icon-printer);
  mask-image: var(--menthys-icon-printer);
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.menthys-cartouches__card:hover .menthys-cartouches__icon,
.menthys-cartouches__card:focus-visible .menthys-cartouches__icon {
  background-color: var(--menthys-copper);
}

.menthys-cartouches__card:hover .menthys-cartouches__icon::before,
.menthys-cartouches__card:focus-visible .menthys-cartouches__icon::before {
  background-color: #FFFFFF;
  transform: scale(1.1);
}

.menthys-cartouches__name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--menthys-ink);
  line-height: 1.35;
}

.menthys-cartouches__card:hover .menthys-cartouches__name,
.menthys-cartouches__card:focus-visible .menthys-cartouches__name {
  color: var(--menthys-copper);
}

/* ---- Panneaux série / modèle / résultats (bascule au clic) ---- */

.menthys-cartouches__view {
  margin-top: 1rem;
}

.menthys-cartouches__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  margin-bottom: 1.5rem;
  background: none;
  border: none;
  color: var(--menthys-copper);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.menthys-cartouches__back:hover {
  color: var(--menthys-bronze);
  text-decoration: underline;
}

.menthys-cartouches__title {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--menthys-navy);
  margin-bottom: 1.5rem;
}

/* ---- Listes série / modèle ---- */

.menthys-cartouches__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--menthys-champagne);
}

.menthys-cartouches__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--menthys-champagne);
  text-align: left;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--menthys-ink);
  cursor: pointer;
}

.menthys-cartouches__row:hover {
  color: var(--menthys-copper);
}

.menthys-cartouches__row::after {
  content: "→";
  flex-shrink: 0;
  margin-left: 1rem;
  color: var(--menthys-copper);
}

.menthys-cartouches__year {
  color: var(--menthys-muted);
  font-weight: 400;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.875rem;
}

/* ---- Résultats (cartouches compatibles, liées au catalogue) ---- */

.menthys-cartouches__results {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--menthys-champagne);
}

.menthys-cartouches__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--menthys-champagne);
}

.menthys-cartouches__result-type {
  color: var(--menthys-muted);
  font-size: 0.875rem;
  flex-shrink: 0;
}

.menthys-cartouches__result-link {
  color: var(--menthys-copper);
  font-weight: 600;
  text-decoration: none;
}

.menthys-cartouches__result-link:hover {
  text-decoration: underline;
  color: var(--menthys-bronze);
}