/* ============================================
   LCM Theme -- Chalet Contemporain
   Tons naturels chauds, minimalisme chaleureux
   ============================================

   TABLE DES MATIERES
   ------------------
   LAYER 1 — Base & composants (L. ~8 → ~1451)
     Layout, tokens, base, header-nav, megamenu, breadcrumb,
     sidebar, category header, product grid, boutons, pagination,
     sort, forms, footer, badges, scrollbar, responsive, tri
   LAYER 2 — Refinements post-migration 9.1 (L. ~1452 → ~1902)
     Product miniatures, product page, pagination refinements,
     subcategory cards, quickview, listing polish
   LAYER 3 — Header layout block (L. ~1904 → fin)
     Doit rester en fin de fichier (cascade last-word)

   BREAKPOINTS (Bootstrap 5, utilises dans ce fichier)
   ---------------------------------------------------
     xs  < 576px       (max-width: 575.98px)
     sm  >= 576px      (min-width: 576px)
     md  >= 768px      (min-width: 768px)
     lg  >= 992px      (min-width: 992px)
     xl  >= 1200px     (min-width: 1200px)
     xxl >= 1400px     (min-width: 1400px)
   Pour les max-width, toujours utiliser .98px pour eviter le chevauchement avec le min-width suivant.
   ============================================ */

/* --- Fonts (self-hosted woff2, axes variables) ---
   lcm_theme charge une police Inter VARIABLE (inter-latin.woff2, axes 300→700) qui remplace les
   fichiers statiques par-graisse empaquetés par hummingbird dans theme.css
   (inter-latin-400/600-normal-<hash>.woff2).

   Pour que le navigateur n'aille JAMAIS chercher les fichiers hummingbird — et éviter le doublon
   ~48 Ko/page — on exploite le comportement de cascade @font-face implémenté par Chrome et Firefox :
   à descripteurs IDENTIQUES (family + style + weight + unicode-range), la DERNIÈRE @font-face
   déclarée l'emporte (convention d'implémentation, pas une garantie normative stricte de CSS Fonts L4).
   custom.css étant chargé après theme.css (FrontController::setMedia priority 1000), on y redéclare
   les faces exactes de hummingbird (Inter / normal / 400 et 600 / même unicode-range latin) pointant
   vers la police variable : elles « shadow » les faces hummingbird, jamais téléchargées. Les autres
   poids (300/700) sont servis par la face variable de plage 300-700 ci-dessus, qui l'emporte aussi
   en pratique.

   Vérifié empiriquement (Chrome headless + --log-net-log, 2026-06-05) sur home / catégorie / produit :
   AUCUNE woff2 statique hummingbird n'est fetch (gain réel ≈ 47 Ko/page froide). Limite connue : les
   subsets latin-ext et autres ne sont pas shadowés — non rendus en FR/IT/EN (cf. deployement_todo.md).

   => Aucune redirection .htaccess nécessaire : l'ancien hack 302 (qui polluait le crawl Screaming
   Frog du clone SEO) a été supprimé. Le problème de police vit désormais entièrement dans la couche
   CSS — fix orthogonal. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1DC0-1DFF, U+20A0-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Shadow-faces : descripteurs strictement identiques aux faces statiques latines de hummingbird
   (Inter / normal / 400 et 600 / même unicode-range), src redirigé vers la police variable.
   Déclarées après theme.css, elles gagnent la cascade @font-face et neutralisent le download des
   woff2 hummingbird sans aucune redirection serveur. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Red Hat Text (variable 300-700) remplace Cormorant Garamond.
   size-adjust: 87% = ratio de largeur mesuré Cormorant/RedHat (fontTools, texte FR mixte) :
   les titres et items de menu occupent la même largeur qu'avant, aucun reflow de layout. */
@font-face {
  font-family: 'Red Hat Text';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  size-adjust: 87%;
  src: url('../fonts/redhat-text-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Red Hat Text';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  size-adjust: 87%;
  src: url('../fonts/redhat-text-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Red Hat Text';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  size-adjust: 87%;
  src: url('../fonts/redhat-text-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Red Hat Text';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  size-adjust: 87%;
  src: url('../fonts/redhat-text-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Layout --- */
.container {
  max-width: 90vw;
}

/* --- Variables (tokens) --- */
:root {
  /* Palette naturelle */
  --lcm-ecru: #f5f0e8;
  --lcm-ecru-clair: #f7f4ee;
  --lcm-beige: #e8e0d4;
  --lcm-brun: #5c4a3a;
  --lcm-brun-fonce: #5c4a32;
  --lcm-charbon: #2c2c2c;
  --lcm-noir: #1a1a1a;
  --lcm-blanc: #faf8f5;
  --lcm-blanc-pur: #fff;
  --lcm-mousse: #4f711f;
  --lcm-mousse-clair: #74a52d;
  --lcm-mousse-pale: #f0f5e1;
  --lcm-rouge-pale: #fbeaec;
  --lcm-bordeaux: #7a2f3a;             /* prix barré / ancien prix (ton vineux désaturé) */
  --lcm-gris: #706b63;                /* WCAG AA 4.5:1 sur blanc/ecru */
  --lcm-gris-clair: #d4cfc8;
  --lcm-gris-texte: #6e6963;          /* breadcrumb text — WCAG AA 4.5:1 sur blanc/ecru */
  --lcm-gris-placeholder: #6b6660;    /* form placeholders */
  --lcm-or-champagne: #b89968;        /* or champagne desature (fines lignes deco) */

  /* Layout */
  --lcm-header-height: 136px;

  /* Radius */
  --lcm-radius-sm: 6px;
  --lcm-radius: 8px;
  --lcm-radius-lg: 12px;

  /* Transitions */
  --lcm-transition-fast: 0.15s ease;
  --lcm-transition: 0.2s ease;
  --lcm-transition-slow: 0.3s ease;
  --lcm-transition-image: 0.5s ease-in-out;

  /* Shadows */
  --lcm-shadow-card: 0 2px 8px rgba(var(--bs-primary-rgb), 0.06);
  --lcm-shadow-card-hover: 0 4px 14px rgba(var(--bs-primary-rgb), 0.10);
  --lcm-shadow-elevated: 0 -4px 16px rgba(var(--bs-primary-rgb), 0.10);
  --lcm-shadow-menu: 0 8px 24px rgba(var(--bs-primary-rgb), 0.08);

  /* Image filter (subtle sepia applied to product/cat imagery) */
  --lcm-image-filter: sepia(0.10) saturate(0.91) brightness(0.99) contrast(1.01);
  --lcm-image-filter-hover: sepia(0) saturate(1) brightness(1) contrast(1);

  /* Fonts */
  --lcm-font-body: 'Inter', sans-serif;
  --lcm-font-heading: 'Inter', sans-serif;
  --lcm-font-display: 'Red Hat Text', 'Inter', sans-serif;

  /* Override Bootstrap */
  --bs-primary: var(--lcm-brun-fonce);
  --bs-primary-rgb: 92, 74, 50;
  --bs-link-color: var(--lcm-noir);
  --bs-link-color-rgb: 26, 26, 26;
  --bs-link-hover-color: var(--lcm-brun);
  --bs-link-hover-color-rgb: 139, 115, 85;
  --bs-link-decoration: none;
  --bs-body-bg: var(--lcm-blanc);
  --bs-body-color: var(--lcm-charbon);
  --bs-success: var(--lcm-mousse);
  --bs-success-rgb: 79, 113, 31;
  --bs-dark: var(--lcm-charbon);
  --bs-dark-rgb: 44, 44, 44;
  --bs-dark-bg-subtle: var(--lcm-gris-clair);
  --bs-danger: #b43541;
  --bs-danger-rgb: 180, 53, 65;
  --bs-link-danger-color: #b43541;
  --bs-link-danger-color-rgb: 180, 53, 65;
  --bs-border-color: #e6dede;
  --bs-border-color-translucent: rgba(230, 222, 222, 0.5);
  --bs-success-text-emphasis: var(--lcm-mousse);
  --bs-success-bg-subtle: var(--lcm-mousse-pale);
  --bs-success-border-subtle: #c5d59a;
  --bs-danger-text-emphasis: var(--bs-danger);
  --bs-danger-bg-subtle: var(--lcm-rouge-pale);
  --bs-danger-border-subtle: #e0b0b3;
  --bs-body-font-family: var(--lcm-font-body);
}

/* --- Base --- */
/* TEMPORAIRE : scale typo +10% (toutes les valeurs en rem du site). A retirer apres eval. */
html {
  font-size: 110%;
}

body {
  font-family: var(--lcm-font-body);
  background-color: var(--lcm-blanc);
  color: var(--lcm-charbon);
  font-weight: 300;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--lcm-noir);
  text-decoration: none;
  transition: color var(--lcm-transition);
}

a:hover {
  color: var(--lcm-brun);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lcm-font-display);
  font-weight: 500;
  color: var(--lcm-noir);
  letter-spacing: 0.02em;
}

/* --- Header --- */
.header {
  background-color: var(--lcm-blanc);
  border-bottom: 1px solid var(--lcm-beige);
  box-shadow: none;
}

.header__banner {
  background-color: var(--lcm-noir);
  color: var(--lcm-ecru);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.header__banner a {
  color: var(--lcm-ecru);
}

.header-bottom {
  border-bottom: 1px solid var(--lcm-beige);
}

/* Nav bar — desktop category menu */
.main-menu {
  width: 100%;
}

.js-menu-desktop {
  width: 100%;
}

.main-menu__tree {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: space-evenly;
  width: 100%;
}

.main-menu__tree__item {
  flex: 0 0 auto;
  text-align: center;
}

.main-menu__tree__link {
  font-family: var(--lcm-font-display);
  font-size: 1.1rem;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.06em;
  font-feature-settings: 'liga' 1, 'kern' 1;
  color: var(--lcm-charbon);
  padding: 0.6rem 0.6rem;
  transition: color var(--lcm-transition-fast);
}

/* Megamenu dropdown positioning — was inherited from hummingbird 1.0.0 theme.css, dropped in 2.0.0 */
.main-menu__tree {
  position: relative;
}
.main-menu__tree > li {
  position: static;
}
.main-menu__tree > li .menu-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1000;
  transition: opacity 0.1s ease 0s, visibility 0s linear 0.1s;
  opacity: 0;
  visibility: hidden;
  display: block !important; /* hummingbird @layer pose display:none */
  pointer-events: none;
  background-color: rgba(250, 248, 245, 0.65);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
}

/* Decoration (76) has many subcats — slightly compact */
#category-76 .lcm-mega__columns {
  column-count: 5;
  column-gap: 0.5rem;
}

#category-76 .lcm-mega__group {
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.5rem;
  gap: 0.4rem;
}

#category-76 .lcm-mega__title {
  font-size: 0.7rem;
}

#category-76 .lcm-mega__link {
  font-size: 0.68rem;
  padding: 0.1rem 0;
}

.main-menu__tree > li:hover .menu-container {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.1s ease 0.15s, visibility 0s linear 0s;
}

.main-menu__tree__link:hover {
  color: var(--lcm-brun);
}

/* Pas de focus ring au clic souris — garde focus-visible pour la nav clavier */
.main-menu__tree__link:focus {
  outline: none;
}
.main-menu__tree__link:focus-visible {
  outline: 2px solid var(--lcm-brun);
  outline-offset: 2px;
  border-radius: var(--lcm-radius-sm);
}

.main-menu__tree__item.current .main-menu__tree__link {
  color: var(--lcm-brun);
}

/* Mobile menu accordion */
.lcm-mobile-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lcm-mobile-menu__item {
  border-bottom: 1px solid var(--lcm-beige);
}

.lcm-mobile-menu__row {
  display: flex;
  align-items: center;
}

.lcm-mobile-menu__link {
  flex: 1;
  padding: 0.75rem 1rem;
  font-family: var(--lcm-font-body);
  font-size: 0.9rem;
  color: var(--lcm-charbon);
  text-decoration: none;
}

.lcm-mobile-menu__link:hover {
  color: var(--lcm-brun);
}

[data-depth="0"] > .lcm-mobile-menu__item > .lcm-mobile-menu__row > .lcm-mobile-menu__link {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
}

.lcm-mobile-menu__toggle {
  border: none;
  background: none;
  padding: 0.75rem;
  color: var(--lcm-gris);
  cursor: pointer;
  transition: transform var(--lcm-transition);
}

.lcm-mobile-menu__toggle[aria-expanded="true"] {
  transform: rotate(180deg);
}

.lcm-mobile-menu__toggle .material-icons {
  font-size: 20px;
}

/* Nested levels */
.lcm-mobile-menu__list .lcm-mobile-menu__list {
  padding-left: 0.75rem;
  background: var(--lcm-ecru);
}

.lcm-mobile-menu__list .lcm-mobile-menu__list .lcm-mobile-menu__link {
  font-size: 0.82rem;
  padding: 0.5rem 1rem;
}

.lcm-mobile-menu__list .lcm-mobile-menu__list .lcm-mobile-menu__list {
  padding-left: 0.5rem;
}

.lcm-mobile-menu__list .lcm-mobile-menu__list .lcm-mobile-menu__list .lcm-mobile-menu__link {
  font-size: 0.78rem;
  color: var(--lcm-gris);
}

/* Megamenu dropdown */
.main-menu__tree > li > .menu-container {
  border-top: 1px solid var(--lcm-beige);
  box-shadow: var(--lcm-shadow-menu);
  padding: 1.5rem 0;
}

/* Panel edge detection handled by JS aim-aware */

/* Megamenu bento masonry */
.lcm-mega__columns {
  column-count: 4;
  column-gap: 0.6rem;
  display: block;
}

/* Each bento box: 2-column layout (text left, image right) */
.lcm-mega__group {
  break-inside: avoid;
  background: var(--lcm-blanc);
  border: 1px solid var(--lcm-beige);
  border-radius: var(--lcm-radius);
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.6rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  align-items: start;
  transition: border-color var(--lcm-transition), box-shadow var(--lcm-transition);
}

.lcm-mega__group:hover {
  border-color: rgba(var(--bs-primary-rgb), 0.2);
  box-shadow: var(--lcm-shadow-card);
}

/* Solo cats — compact, 2/3 text + 1/3 thumb, entire card clickable */
.lcm-mega__group--simple {
  align-items: center;
  grid-template-columns: 2fr 1fr;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.lcm-mega__group--simple .lcm-mega__title {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.lcm-mega__thumb-solo {
  line-height: 0;
}

.lcm-mega__thumb-solo a {
  display: block;
}

.lcm-mega__thumb-solo img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--lcm-radius-sm);
  filter: var(--lcm-image-filter);
  transition: filter var(--lcm-transition-slow);
}

.lcm-mega__group--simple:hover .lcm-mega__thumb-solo img {
  filter: var(--lcm-image-filter-hover);
}

/* Text column */
.lcm-mega__text {
  min-width: 0;
}

.lcm-mega__title {
  font-family: var(--lcm-font-display);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lcm-charbon);
  display: block;
  padding-bottom: 0.3rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid var(--lcm-beige);
  text-decoration: none;
}

.lcm-mega__title:hover {
  color: var(--lcm-brun);
}

.lcm-mega__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lcm-mega__link {
  font-family: var(--lcm-font-body);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--lcm-gris);
  padding: 0.2rem 0;
  display: block;
  text-decoration: none;
  transition: color var(--lcm-transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lcm-mega__link:hover {
  color: var(--lcm-brun);
}

/* Carousel indicator */
.lcm-mega__title--active {
  color: var(--lcm-brun);
}

.lcm-mega__list li {
  position: relative;
}

.lcm-mega__link--active > a {
  color: var(--lcm-brun);
}

.lcm-mega__link--active::before {
  content: '›';
  position: absolute;
  left: -0.75em;
  color: var(--lcm-brun);
  font-weight: 600;
}

/* Carousel column */
.lcm-mega__carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--lcm-radius-sm);
  overflow: hidden;
}

.lcm-mega__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  display: block;
  line-height: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 3s ease-in-out;
}
.lcm-slide--on {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.lcm-mega__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--lcm-image-filter);
}

.lcm-mega__group:hover .lcm-mega__slide img {
  filter: var(--lcm-image-filter-hover);
}

/* Header rules centralisees en fin de fichier — voir === HEADER === */

/* Search */
.header .search-widgets input[type="search"],
.header .search-widgets .js-search-input {
  border: 1px solid var(--lcm-beige) !important;
  border-radius: var(--lcm-radius) !important;
  background-color: var(--lcm-blanc-pur) !important;
  font-family: var(--lcm-font-body);
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  color: var(--lcm-charbon);
}

.header .search-widgets input[type="search"]:focus,
.header .search-widgets .js-search-input:focus {
  border-color: var(--lcm-brun) !important;
  background-color: var(--lcm-blanc-pur) !important;
  box-shadow: none;
  outline: none;
}

.header .search-widgets input::placeholder {
  color: var(--lcm-gris);
}

/* Header language selector — match search input */
.header .language-selector__wrapper .form-select {
  border: 1px solid var(--lcm-beige);
  border-radius: var(--lcm-radius);
  background-color: var(--lcm-blanc);
  font-family: var(--lcm-font-body);
  font-size: 0.85rem;
  padding: 8px 2.5rem 8px 1rem;
  color: var(--lcm-charbon);
  height: 39px;
}

.header .language-selector__wrapper .form-select:focus {
  border-color: var(--lcm-brun);
  box-shadow: none;
}

/* Header icons */
.header-block__icon {
  color: var(--lcm-noir);
}

/* --- Breadcrumb --- */
.breadcrumb {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lcm-gris-texte);
  padding: 1rem 0;
  align-items: center;
}

ol.breadcrumb .breadcrumb-item {
  display: flex !important;
  align-items: center !important;
}

ol.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  float: none !important;
  display: flex !important;
  align-items: center !important;
}

.breadcrumb a {
  color: var(--lcm-gris-texte);
}

.breadcrumb a:hover {
  color: var(--lcm-brun);
}

/* --- Sidebar / Left Column --- */
.wrapper__left-column {
  position: sticky;
  top: var(--lcm-header-height);
  align-self: flex-start;
  max-height: calc(100vh - var(--lcm-header-height));
  overflow-y: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-right: 1px solid var(--lcm-beige);
}

/* Sidebar scrollbar ultra-fine */
.wrapper__left-column::-webkit-scrollbar {
  width: 3px;
}

.wrapper__left-column::-webkit-scrollbar-track {
  background: transparent;
}

.wrapper__left-column::-webkit-scrollbar-thumb {
  background: var(--lcm-gris-clair);
  border-radius: 3px;
}

.wrapper__left-column::-webkit-scrollbar-thumb:hover {
  background: var(--lcm-gris);
}

.block-category {
  margin-bottom: 2rem;
}

/* Category Tree */
.category-tree__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-tree__item {
  border-bottom: 1px solid var(--lcm-beige);
  border-top: none;
  border-left: none;
  border-right: none;
}

.category-tree__item:last-child {
  border-bottom: none;
}

.category-tree__item__header {
  font-family: var(--lcm-font-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lcm-charbon);
  padding: 0.65rem 0;
  transition: color var(--lcm-transition);
}

.category-tree__item__header:hover,
.category-tree__item__header a:hover {
  color: var(--lcm-brun);
}

.category-tree__item__link {
  color: var(--lcm-charbon);
  font-size: 0.85rem;
  padding: 0.5rem 0 0.5rem 0.75rem;
  display: block;
  transition: all var(--lcm-transition);
  border-left: 2px solid transparent;
}

.category-tree__item__link:hover {
  color: var(--lcm-brun);
  border-left-color: var(--lcm-brun);
  padding-left: 1rem;
}

/* Active category */
.category-tree__item--active > .category-tree__item__header,
.category-tree__item__link--active {
  color: var(--lcm-brun-fonce);
  font-weight: 500;
}

/* Accordion chevrons */
.accordion-button {
  background-color: transparent;
  color: var(--lcm-charbon);
  box-shadow: none;
  font-family: var(--lcm-font-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.65rem 0;
}

.accordion-button:not(.collapsed) {
  background-color: transparent;
  color: var(--lcm-brun-fonce);
  box-shadow: none;
}

/* Chevron doux SVG fin */
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9590' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-size: 1rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-left: 0.5rem;
  filter: none;
  transition: transform 0.25s ease;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c4a32' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Sidebar accordion - espace pour le chevron */
.wrapper__left-column .accordion-button {
  padding-right: 1.5rem;
  position: relative;
}

.wrapper__left-column .accordion-button::after {
  position: absolute;
  right: 0.25rem;
}

.accordion-item {
  border: none;
  border-bottom: 1px solid var(--lcm-beige);
  background-color: transparent;
}

/* Faceted search (filters) */
.facet-title {
  font-family: var(--lcm-font-body);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lcm-charbon);
}

/* --- Category Header --- */
.category-cover {
  display: none;
}

#category-description,
.block-category .block-category__description {
  font-family: var(--lcm-font-body);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--lcm-gris);
  max-width: none;
  margin-bottom: 2rem;
}

@media (max-width: 991.98px) {
  #category-description,
  .block-category .block-category__description {
    display: none;
  }
}

/* Category title */
.page-category h1,
.block-category h1 {
  font-family: var(--lcm-font-display);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--lcm-noir);
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}

/* --- Product Grid --- */
.product-miniature {
  margin-bottom: 2rem;
  border: none;
  background: none;
}

.product-miniature .card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--lcm-radius-lg);
  background: var(--lcm-blanc-pur);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 4px 16px rgba(92,74,50,0.06);
  transition: box-shadow 0.4s ease;
  overflow: hidden;
  position: relative;
}

.product-miniature .card:hover {
  border-color: rgba(0,0,0,0.09);
  box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 8px 24px rgba(92,74,50,0.10);
}

/* Disable parent theme zoom */
.product-miniature .product-miniature__link:hover .product-miniature__image {
  transform: none;
}

/* Product image */
.product-miniature__image-container,
.product-miniature .thumbnail-container {
  background-color: var(--lcm-blanc-pur);
  border-radius: 0;
  overflow: hidden;
  position: relative;
  padding: 1.25rem 1rem;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.product-miniature__image-container img,
.product-miniature .thumbnail-container img {
  object-fit: contain;
  border-radius: 0;
  width: 100%;
  height: 100%;
  filter: var(--lcm-image-filter);
  transition: filter 0.6s ease;
}

.product-miniature:hover .product-miniature__image-container img,
.product-miniature:hover .thumbnail-container img {
  filter: var(--lcm-image-filter-hover);
}

.product-miniature .product-miniature__image {
  border-radius: 0;
}

/* Product info */
.product-miniature .product-miniature__infos {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0.75rem 1rem 1rem;
  background: transparent;
  text-align: center;
  position: static;
}

.product-miniature .product-miniature__title {
  font-family: var(--lcm-font-heading);
  font-size: 0.90rem;
  font-weight: 460;
  line-height: 1.45;
  letter-spacing: 0.01em;
  margin: 0;
  padding: 0.85rem 0.75rem 0;
  text-transform: capitalize;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.2em;
}

.product-miniature__title a {
  color: var(--lcm-charbon);
  text-decoration: none;
  transition: color var(--lcm-transition);
}

.product-miniature__title a:hover {
  color: var(--lcm-brun);
}

.product-miniature__description {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--lcm-gris);
  text-align: center;
  letter-spacing: 0.005em;
  padding: 0.35rem 0.75rem 0;
  margin: auto 0 0;
}

/* Price */
.product-miniature .product-miniature__price {
  font-family: var(--lcm-font-body);
  font-weight: 450;
  color: var(--lcm-charbon);
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-align: center;
  width: 100%;
}

.product-miniature__discount-price,
.product-miniature .product-miniature__regular-price,
.product-miniature .regular-price {
  color: var(--lcm-bordeaux);
  text-decoration: line-through;
  font-size: 0.78rem;
  font-weight: 400;
  text-align: center;
  width: 100%;
}

/* Quick view - liquid glass overlay on image (raised 2x higher) */
.product-miniature .product-miniature__quickview {
  position: absolute;
  top: 70%;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  margin: 0;
  padding: 0.5rem;
  background: linear-gradient(to bottom, rgba(245, 240, 235, 0.35) 0%, rgba(245, 240, 235, 0.35) 60%, rgba(250, 248, 245, 0.75) 80%, rgba(255, 255, 255, 0.95) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: none;
  border-radius: 2em 2em 0 0;
  box-shadow: var(--lcm-shadow-elevated);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.35s cubic-bezier(0.22, 0.68, 0, 1.04), transform 0.4s cubic-bezier(0.22, 0.68, 0, 1.04);
}

.product-miniature:hover .product-miniature__quickview {
  opacity: 1;
  transform: translateY(0);
}

.product-miniature .product-miniature__quickview_button {
  background: transparent;
  color: var(--lcm-charbon);
  border: none;
  border-radius: var(--lcm-radius);
  font-family: var(--lcm-font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.5rem 0.8rem;
  width: 100%;
  justify-content: center;
}

.product-miniature .product-miniature__quickview_button .material-icons {
  font-size: 1.25rem;
}

/* Quickview modal - liquid glass header */
body:has(.modal.quickview) .modal-backdrop {
  --bs-backdrop-opacity: 0.05;
  pointer-events: none;
}

body.modal-open {
  overflow: auto !important;
  padding-right: 0 !important;
}

.modal.quickview .modal-content {
  background: transparent;
  overflow: hidden;
}

.modal.quickview .modal-body {
  background: var(--lcm-blanc);
  overflow: hidden;
}

.modal.quickview .modal-footer {
  background: var(--lcm-blanc);
}

.modal.quickview .modal-header {
  background: linear-gradient(to bottom, rgba(250, 248, 245, 0.06) 0%, rgba(250, 248, 245, 0.4) 40%, var(--lcm-blanc) 100%);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  border-bottom: none;
  box-shadow: none;
  padding: 1.5rem 1rem;
}

.modal.quickview .modal-header .btn-close {
  opacity: 0.6;
  transition: opacity var(--lcm-transition-slow);
}

.modal.quickview .modal-header .btn-close:hover {
  opacity: 1;
}

/* Product variants (color dots) */
.product-miniature__variants {
  min-height: 22px;
}

.product-miniature__variants .variant-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  width: 100%;
  margin: 0;
  padding: 0.25rem 0 0;
  list-style: none;
}

.product-miniature__variants .color {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  border: 1.5px solid rgba(0,0,0,0.08);
  transition: box-shadow var(--lcm-transition), transform var(--lcm-transition);
}

.product-miniature__variants .color:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(92,74,50,0.2);
}

/* Product thumbnails — selected border */
.thumbnails__container .thumbnail img {
  border: 2px solid transparent;
  border-radius: var(--lcm-radius);
}

.thumbnails__container .thumbnail.active img {
  border-color: var(--lcm-brun);
}

/* Delivery info (replaces stock alert) */
.lcm-delivery-info {
  font-size: 0.85rem;
  color: var(--lcm-charbon);
  padding: 0.5rem 0;
}

.lcm-delivery-info__text {
  color: var(--lcm-mousse);
}

/* Add to cart button */
[data-button-action="add-to-cart"] {
  border-radius: var(--lcm-radius);
  padding: 0 0.75rem;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Qty selector — harmonized */
.product-miniature .input-group,
.product-actions .input-group {
  height: 38px;
}

.product-miniature .input-group .form-control,
.product-actions .input-group .form-control {
  border-radius: 0;
  border-color: var(--lcm-beige);
  height: 38px;
  text-align: center;
}

.product-miniature .input-group .btn,
.product-actions .input-group .btn {
  border-color: var(--lcm-beige);
  height: 38px;
  padding: 0 0.5rem;
}

.product-miniature .input-group .btn:first-child,
.product-actions .input-group .btn:first-child {
  border-radius: var(--lcm-radius) 0 0 var(--lcm-radius);
}

.product-miniature .input-group .btn:last-child,
.product-actions .input-group .btn:last-child {
  border-radius: 0 var(--lcm-radius) var(--lcm-radius) 0;
}

/* Add to cart icon - organic tote bag */
[data-button-action="add-to-cart"] .material-icons {
  font-size: 0;
  display: inline-block;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf8f5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  vertical-align: middle;
}

/* --- Buttons --- */
.btn-primary {
  --bs-btn-bg: var(--lcm-noir);
  --bs-btn-border-color: var(--lcm-noir);
  --bs-btn-hover-bg: var(--lcm-brun-fonce);
  --bs-btn-hover-border-color: var(--lcm-brun-fonce);
  --bs-btn-active-bg: var(--lcm-brun-fonce);
  --bs-btn-active-border-color: var(--lcm-brun-fonce);
  --bs-btn-disabled-bg: var(--lcm-gris);
  --bs-btn-disabled-border-color: var(--lcm-gris);
  color: var(--bs-btn-color);
  border-radius: var(--lcm-radius);
  font-family: var(--lcm-font-body);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.5rem 1.5rem;
  min-height: 38px;
  font-weight: 400;
}
.btn-primary:hover { color: var(--bs-btn-hover-color); }

.btn-outline-primary {
  --bs-btn-color: var(--lcm-noir);
  --bs-btn-border-color: var(--lcm-noir);
  --bs-btn-hover-bg: var(--lcm-noir);
  --bs-btn-hover-border-color: var(--lcm-noir);
  --bs-btn-hover-color: var(--lcm-blanc);
  --bs-btn-active-bg: var(--lcm-brun-fonce);
  --bs-btn-active-border-color: var(--lcm-brun-fonce);
  border-radius: var(--lcm-radius);
  font-family: var(--lcm-font-body);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
}

.btn-secondary {
  --bs-btn-bg: var(--lcm-ecru);
  --bs-btn-border-color: var(--lcm-beige);
  --bs-btn-color: var(--lcm-charbon);
  --bs-btn-hover-bg: var(--lcm-beige);
  --bs-btn-hover-border-color: var(--lcm-gris-clair);
  --bs-btn-hover-color: var(--lcm-noir);
  border-radius: var(--lcm-radius);
}

/* --- Pagination --- */
.page-item.active .page-link {
  background-color: var(--lcm-noir);
  border-color: var(--lcm-noir);
}

.page-link {
  color: var(--lcm-charbon);
  border-radius: var(--lcm-radius);
  border-color: var(--lcm-beige);
  font-family: var(--lcm-font-body);
  font-size: 0.85rem;
}

.page-link:hover {
  color: var(--lcm-brun);
  background-color: var(--lcm-ecru);
  border-color: var(--lcm-beige);
}

/* --- Sort / Toolbar --- */
.sort-by-row {
  font-family: var(--lcm-font-body);
  font-size: 0.85rem;
}

.sort-by-row select,
.form-select {
  border-radius: var(--lcm-radius);
  border-color: var(--lcm-beige);
  font-size: 0.85rem;
  color: var(--lcm-charbon);
}

.form-select:focus {
  border-color: var(--lcm-brun);
  box-shadow: none;
}

/* --- Forms --- */
.form-control {
  border-radius: var(--lcm-radius);
  border-color: var(--lcm-beige);
  font-family: var(--lcm-font-body);
}

.form-control:focus {
  border-color: var(--lcm-brun);
  box-shadow: 0 0 0 0.15rem rgba(139, 115, 85, 0.15);
}

/* --- Footer --- */
.footer {
  background-color: var(--lcm-noir);
  color: var(--lcm-gris-clair);
  margin-top: 4rem;
}

.footer a {
  color: var(--lcm-gris-clair);
  transition: color var(--lcm-transition);
}

.footer a:hover {
  color: var(--lcm-blanc);
}

/* Bande colonnes accolee a la bande "before" : pas de filet ni de gap au-dessus
   (.footer{margin-top:4rem} s'applique aussi a .footer__main, on l'annule ici) */
.footer__main {
  margin-top: 0;
}

/* Titres de colonnes — police display + filet sous-jacent discret (classe reelle : footer-block) */
.footer-block__title {
  font-family: var(--lcm-font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--lcm-blanc);
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .footer-block__title {
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(184, 153, 104, 0.22);
  }
}

.footer-block__list a {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--lcm-gris-clair);
  transition: color var(--lcm-transition), padding-inline-start var(--lcm-transition-fast);
}

.footer-block__list a:hover {
  color: var(--lcm-blanc);
  padding-inline-start: 0.25rem;
}

.footer__before {
  background-color: var(--lcm-ecru);
  border-top: 1px solid var(--lcm-beige);
}

/* Reseaux sociaux (ps_socialfollow) — pastilles circulaires sombres sur fond ecru */
.footer__before .ps-socialfollow a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  color: var(--lcm-brun);
  border: 1px solid var(--lcm-gris-clair);
  transition: color var(--lcm-transition), background-color var(--lcm-transition),
    border-color var(--lcm-transition), transform var(--lcm-transition);
}

.footer__before .ps-socialfollow a:hover {
  color: var(--lcm-blanc-pur);
  background-color: var(--lcm-brun);
  border-color: var(--lcm-brun);
  transform: translateY(-2px);
}

/* Email subscription (footer before) — fond clair Bootstrap, text doit etre sombre */
.footer .ps-emailsubscription,
.footer .ps-emailsubscription p,
.footer .ps-emailsubscription .h3 {
  color: var(--lcm-charbon);
}

/* Carousel indicators — min 24px touch target (a11y) */
.carousel-indicators button {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50%;
  opacity: 0.4;
}

.carousel-indicators button.active {
  opacity: 1;
}

/* Newsletter */
.email-subscription {
  background-color: var(--lcm-ecru);
}

.email-subscription input[type="email"] {
  border-radius: var(--lcm-radius);
  border: 1px solid var(--lcm-beige);
}

.email-subscription input[type="email"]::placeholder {
  color: var(--lcm-gris-placeholder);
}

.email-subscription .email-subscription__content__infos p {
  color: var(--lcm-gris-placeholder);
}

.email-subscription .btn {
  border-radius: var(--lcm-radius);
  background-color: var(--lcm-noir);
  border-color: var(--lcm-noir);
  color: var(--lcm-blanc);
}

/* Footer — business info (replaces default PS copyright) */
.lcm-footer-info {
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid rgba(212, 207, 200, 0.12);
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--lcm-gris-clair);
  padding-bottom: 1.25rem;
}

.lcm-footer-info__brand {
  font-family: var(--lcm-font-display);
  font-weight: 600;
  color: var(--lcm-blanc);
  font-size: 0.95rem;
}

.lcm-footer-info__sep {
  margin: 0 0.25em;
  opacity: 0.35;
}

.lcm-footer-info__address {
  font-style: normal;
  margin-bottom: 0.15rem;
  opacity: 0.75;
  font-size: 0.8rem;
}

.lcm-footer-info__contact a {
  color: var(--lcm-gris-clair);
  text-decoration: none;
  transition: color var(--lcm-transition);
}

.lcm-footer-info__contact a:hover {
  color: var(--lcm-blanc);
}

.lcm-footer-info__copyright {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  opacity: 0.45;
  letter-spacing: 0.04em;
}

/* --- Badges / Labels --- */
.badge,
.badge-primary,
.bg-primary {
  background-color: var(--lcm-brun-fonce) !important;
  border-radius: var(--lcm-radius);
  font-family: var(--lcm-font-body);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* Discount badge */
.product-flag {
  font-family: var(--lcm-font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--lcm-radius);
  padding: 0.25rem 0.5rem;
}

/* ===========================================================================
   Étiquette "Soldes" — vignette papier kraft, impression deux tons (plat texturé)
   Rendu via l'override themes/lcm_theme/.../product-flags.tpl, qui émet
   .lcm-saletag (ul) + .lcm-saletag__row (li) AU LIEU de `badge on-sale/discount`.
   On échappe ainsi à la règle brune `!important` d'hummingbird placée dans
   @layer bs-base (un !important layered bat tout !important hors-layer, quelle
   que soit la spécificité) : ici aucun `!important` n'est nécessaire.
   - Le <ul> est l'étiquette papier ; les <li> en sont les lignes internes.
   - Ancrage : le lien (et non .card) devient le contexte positionné, pour que
     l'étiquette se pose sur le coin de la photo, pas sur le titre.
   =========================================================================== */
.product-miniature .product-miniature__link {
  position: relative;
}

/* Visuel kraft commun (liste ET fiche produit). Positionnement par contexte
   plus bas. Sélecteur (0,1,0) : bat la base hummingbird `.product-flags` par
   ordre de source (custom.css après theme.css) + unlayered > layered. */
.lcm-saletag {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  right: auto;
  bottom: auto;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: auto;
  min-width: 3.7rem;
  max-width: calc(100% - 1.2rem);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
  /* Papier kraft + grain (fractalNoise) posé à plat, fondu en multiply */
  background-color: #e9dfc9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  background-blend-mode: multiply;
  border: 1px solid var(--lcm-or-champagne);
  border-radius: 2px;
  /* Double filet vintage champagne (insets, à plat) + ombre douce pour décoller
     l'étiquette du fond clair de la photo (lisibilité). */
  box-shadow:
    0 2px 7px rgba(60, 48, 34, 0.22),
    inset 0 0 0 2px #e9dfc9,
    inset 0 0 0 3px rgba(184, 153, 104, 0.45);
}

/* Lignes internes : capitales, à plat */
.lcm-saletag__row {
  margin: 0;
  width: 100%;
  text-align: center;
  font-family: var(--lcm-font-body);
  text-transform: uppercase;
  line-height: 1;
  color: var(--lcm-brun-fonce);
}

/* "SOLDES" — eyebrow discret, encre vert mousse, lettrage large */
.lcm-saletag__row--on-sale {
  padding: 0.4rem 0.85rem 0.3rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--lcm-mousse);
}

/* "−60 %" — HÉROS de l'étiquette : grand, gras, brun (contraste max sur kraft) */
.lcm-saletag__row--discount {
  padding: 0.12rem 0.85rem 0.42rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--lcm-brun-fonce);
  font-variant-numeric: tabular-nums;
}

/* Filet séparateur seulement quand la valeur suit "SOLDES" */
.lcm-saletag__row--on-sale + .lcm-saletag__row--discount {
  border-top: 1px solid rgba(184, 153, 104, 0.55);
}

/* Wrapper de ruban : neutre (display:contents) partout — cards + autres
   listings + fiche. Sur la fiche, c'est le <ul> lui-même qui devient le ruban
   de coin (technique mono-élément), donc le wrapper reste transparent. */
.lcm-ribbon {
  display: contents;
}

/* ----- Fiche produit : ruban de COIN avec REPLIS — technique mono-élément de
   Temani Afif (css-generators.com/ribbon-shapes #6). Replis dessinés par
   border-image: conic-gradient (ombre foncée) + clip-path (encoches), et calage
   au coin par transform. Parent positionné + overflow:hidden = .product__carousel. */
.product__carousel {
  overflow: hidden;
}

.product__carousel .lcm-saletag {
  --f: 0.7em; /* taille du repli */
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  z-index: 3;
  margin: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  display: inline-block;
  white-space: nowrap;
  font-size: 0.95rem;
  line-height: 2.1;
  padding-inline: 1.05lh;
  padding-bottom: var(--f);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* kraft (texture héritée de .lcm-saletag de base) */
  background-color: #e9dfc9;
  /* repli : ombre plus foncée peinte dans les encoches du clip-path */
  border-image: conic-gradient(#00000055 0 0) 51% / var(--f);
  clip-path: polygon(
    100% calc(100% - var(--f)), 100% 100%,
    calc(100% - var(--f)) calc(100% - var(--f)),
    var(--f) calc(100% - var(--f)), 0 100%,
    0 calc(100% - var(--f)),
    999px calc(100% - var(--f) - 999px),
    calc(100% - 999px) calc(100% - var(--f) - 999px));
  transform: translate(-29.29%, -100%) rotate(-45deg);
  transform-origin: 100% 100%;
}

/* <li> en inline → « SOLDES −60 % » sur une seule ligne, deux tons conservés */
.product__carousel .lcm-saletag__row {
  display: inline;
  width: auto;
  padding: 0;
}

.product__carousel .lcm-saletag__row--on-sale {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  margin-right: 0.3em;
}

.product__carousel .lcm-saletag__row--discount {
  font-size: 0.95rem;
}

.product__carousel .lcm-saletag__row--on-sale + .lcm-saletag__row--discount {
  border-top: 0;
}

/* --- Reassurance block --- */
.blockreassurance {
  background-color: var(--lcm-ecru);
  border-top: 1px solid var(--lcm-beige);
}

/* --- Selection / Focus --- */
::selection {
  background-color: var(--lcm-brun);
  color: var(--lcm-blanc);
}

/* --- Scrollbar subtle --- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--lcm-blanc);
}

::-webkit-scrollbar-thumb {
  background: var(--lcm-gris-clair);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--lcm-gris);
}

/* --- Sidebar category title --- */
.wrapper__left-column .block-category__title,
.wrapper__left-column .category-tree > .category-tree__item > .category-tree__item__header {
  font-family: var(--lcm-font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Sidebar separators lighter */
.wrapper__left-column .category-tree__item {
  border-bottom: 1px dashed rgba(232, 224, 212, 0.7);
}

/* Sidebar items more padding */
.wrapper__left-column .category-tree__item__header {
  padding: 0.8rem 0;
}

.wrapper__left-column .category-tree__item__link {
  padding: 0.6rem 0 0.6rem 0.75rem;
}

/* Active item rounded left indicator */
.wrapper__left-column .category-tree__item__link--active {
  border-left: 3px solid var(--lcm-brun-fonce);
  border-radius: 0 4px 4px 0;
  padding-left: 1rem;
}

/* Hierarchie visible : chaque niveau d'accordion-body ajoute un indent + guide discret */
.wrapper__left-column .accordion-body {
  padding: 0 0 0 0.9rem;
  margin-left: 0.35rem;
  border-left: 1px solid rgba(232, 224, 212, 0.65);
}

/* Les items imbriques ont moins de separation verticale que le niveau 1 */
.wrapper__left-column .accordion-body .category-tree__item {
  border-bottom: 1px dashed rgba(232, 224, 212, 0.4);
}
.wrapper__left-column .accordion-body .category-tree__item:last-child {
  border-bottom: none;
}

/* Sous-niveaux : casse typographique et poids attenues pour renforcer la hierarchie */
.wrapper__left-column .accordion-body .category-tree__item__header {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.82rem;
  padding: 0.5rem 0;
}
.wrapper__left-column .accordion-body .accordion-body .category-tree__item__header {
  font-size: 0.78rem;
  color: var(--lcm-gris-texte);
}

/* --- Responsive --- */

/* xl: sidebar visible, 4 cards */
@media (min-width: 1200px) {
  .layout-left-column #products .products > .col-xl-4 {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* lg: sidebar visible, 3 cards */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .layout-left-column #products .products > .col-xl-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

/* xs: 1 card per row below 576px (override Hummingbird col-xs-6) */
@media (max-width: 575.98px) {
  #products .products > .col-xs-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* md and below: sidebar hidden (content moved to offcanvas via JS) */
/* Content-wrapper takes full width when sidebar is hidden */
@media (max-width: 991.98px) {
  .layout-left-column .wrapper__content {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Header: logo order at lg instead of xl (matches menu breakpoint) */
/* Legacy logo order rule removed — new grid handles ordering via grid-template-areas */

/* Sidebar content inside offcanvas */
#offcanvas-sidebar {
  padding: 0 1rem;
  overflow-y: auto;
}

#offcanvas-sidebar .block-category__title,
#offcanvas-sidebar .category-tree > .category-tree__item > .category-tree__item__header {
  font-family: var(--lcm-font-display);
  font-size: 1.2rem;
  font-weight: 500;
}

#offcanvas-sidebar .category-tree__item {
  border-bottom: 1px dashed rgba(232, 224, 212, 0.7);
}

@media (max-width: 767.98px) {
  .page-category h1,
  .block-category h1 {
    font-size: 1.6rem;
  }

  /* subcategory responsive — voir "Subcategory cards (post-9.1)" */

}

/* --- Tri produits --- */
.lcm-sort-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  color: var(--lcm-charbon);
  border: none;
  padding: 0;
  font-family: var(--lcm-font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.lcm-sort-trigger .material-icons {
  font-size: 1.1rem;
}

.products-sort-order .dropdown-menu {
  display: block !important;
  background: linear-gradient(to bottom, rgba(245, 240, 235, 0.35) 0%, rgba(250, 248, 245, 0.75) 50%, rgba(255, 255, 255, 0.95) 100%);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  color: var(--lcm-charbon);
  border: none;
  border-radius: var(--lcm-radius);
  box-shadow: var(--lcm-shadow-elevated);
  padding: 0.3rem 0;
  margin-top: 0.5rem;
  right: auto;
  left: 0;
  transform-origin: top left;
  transform: scale(0.4);
  opacity: 0;
  filter: blur(8px);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease,
              filter 0.3s ease,
              visibility 0s linear 0.3s;
}

.products-sort-order .dropdown-menu.show {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease,
              filter 0.3s ease,
              visibility 0s linear 0s;
}

.products-sort-order .dropdown-menu .dropdown-item {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--lcm-transition-fast), transform var(--lcm-transition-fast), background-color var(--lcm-transition-fast);
}

.products-sort-order .dropdown-menu.show .dropdown-item {
  opacity: 1;
  transform: translateX(0);
}

.products-sort-order .dropdown-menu.show .dropdown-item:nth-child(1) { transition-delay: 0.1s; }
.products-sort-order .dropdown-menu.show .dropdown-item:nth-child(2) { transition-delay: 0.15s; }
.products-sort-order .dropdown-menu.show .dropdown-item:nth-child(3) { transition-delay: 0.2s; }
.products-sort-order .dropdown-menu.show .dropdown-item:nth-child(4) { transition-delay: 0.25s; }

.products-sort-order .dropdown-menu:not(.show) .dropdown-item {
  transition-delay: 0s;
}

.products-sort-order .dropdown-menu .dropdown-item {
  color: var(--lcm-charbon);
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
}

.products-sort-order .dropdown-menu .dropdown-item:hover,
.products-sort-order .dropdown-menu .dropdown-item:focus {
  background-color: rgba(245, 240, 235, 0.5);
  color: var(--lcm-brun);
}

/* Product page — desktop: titre plus gros, prix plus petit */
@media (min-width: 992px) {
  .product__name {
    font-size: 2.75rem;
  }
  .product__current-price {
    font-size: 1.5rem;
  }
  .lcm-prices .lcm-prices__tax-label {
    font-size: 0.95rem;
    color: var(--lcm-gris);
  }
  .product__meta {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }
  .product__brand-name {
    text-transform: capitalize;
  }
}

/* ============================================
   LAYER 2 — Refinements post-migration hummingbird 2.0.0
   (complete Layer 1 ; doivent rester apres pour cascade)
   ============================================ */

/* --- Product miniatures grid (post-9.1) --- */
/*
 * Hummingbird 2.0.0 defines .products grid inside @layer (ps-pages/ps-components).
 * Unlayered custom.css rules win over @layer rules by design — BUT if the browser
 * has a stale cached theme.css (pre-@layer version), the grid rules simply don't
 * exist at all. Re-declaring them here, unlayered, ensures the grid always applies.
 */
/* xs/sm: 1 col — md/lg: 2 cols — xl/xxl: 3 cols */
.layout-full-width .products,
.layout-left-column .products,
.layout-right-column .products,
.layout-both-columns .products {
  display: grid !important;
  gap: 1.5rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* Neutralise the per-item margin-bottom that would double-space the grid gap */
.products > .product-miniature {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .layout-full-width .products,
  .layout-left-column .products,
  .layout-right-column .products,
  .layout-both-columns .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Sidebar hidden below lg (d-none d-lg-block sur #left-column) → center column reprend toute la largeur */
@media (min-width: 768px) and (max-width: 991.98px) {
  .layout-left-column #content-wrapper.center-column.col-md-8,
  .layout-left-column .center-column.col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 1200px) {
  .layout-full-width .products,
  .layout-left-column .products,
  .layout-right-column .products,
  .layout-both-columns .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* --- Product page (post-9.1) --- */
.lcm-product__description {
  margin-top: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--lcm-charbon);
}

.lcm-product__brand,
.lcm-product__reference {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--lcm-gris);
}

.lcm-product__brand-label,
.lcm-product__ref-label {
  font-weight: 500;
  margin-right: 0.25rem;
}

.lcm-product__brand-value,
.lcm-product__ref-value {
  color: var(--lcm-charbon);
}

a.lcm-product__brand-value {
  text-decoration: underline dashed rgba(232, 224, 212, 0.7);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a.lcm-product__brand-value:hover {
  text-decoration-color: var(--lcm-or-champagne);
}

.lcm-product__meta .btn {
  background: var(--lcm-blanc-pur);
  border: 1px solid var(--lcm-beige);
  color: var(--lcm-charbon);
}
.lcm-product__meta .btn:hover,
.lcm-product__meta .btn:focus {
  background: var(--lcm-ecru-clair);
  border-color: var(--lcm-brun);
  color: var(--lcm-brun-fonce);
}

.lcm-prices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 0 1.5rem;
}

.lcm-prices__discount-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.lcm-prices__regular-price {
  text-decoration: line-through;
  color: var(--lcm-bordeaux);
  font-size: 0.95rem;
}

/* Fiche produit : remise en % (text-primary-emphasis retiré du tpl) en bordeaux */
.lcm-prices__discount-percentage,
.lcm-prices__discount-amount {
  color: var(--lcm-bordeaux);
  font-weight: 600;
}

.lcm-prices__current-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.lcm-prices__price {
  font-family: var(--lcm-font-display);
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--lcm-noir);
}

.lcm-prices__tax-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--lcm-gris);
  letter-spacing: 0.05em;
}

.lcm-product__delivery {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0;
  color: var(--lcm-brun);
  font-size: 0.85rem;
}

.lcm-product__delivery .material-icons {
  font-size: 18px;
}
/* --- Pagination (post-9.1) --- */
.pagination__nav {
  margin: 2rem 0;
  display: flex;
  justify-content: center;
}

.pagination__container {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination__container .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--lcm-beige);
  background: transparent;
  color: var(--lcm-charbon);
  font-size: 0.85rem;
  font-family: var(--lcm-font-body);
  border-radius: var(--lcm-radius);
  cursor: pointer;
  transition: all var(--lcm-transition-fast);
}

.pagination__container .page-link:hover {
  background: var(--lcm-ecru);
  border-color: var(--lcm-brun);
  color: var(--lcm-brun);
}

.pagination__container .page-link.active,
.pagination__container .pagination__item--current .page-link {
  background: var(--lcm-brun);
  border-color: var(--lcm-brun);
  color: var(--lcm-blanc);
  font-weight: 500;
}

.pagination__container .pagination__spacer {
  border: none;
  cursor: default;
  background: transparent;
}

.pagination__container .pagination__spacer:hover {
  background: transparent;
  border: none;
  color: var(--lcm-charbon);
}

.pagination__container .material-icons {
  font-size: 18px;
}
/* --- Subcategory cards (post-9.1) ---
   CSS grid pur — pas de Bootstrap row/col pour eviter les conflits
   avec les @layer hummingbird 2.0. Design harmonise avec cards produit. */

.subcategory {
  display: block;
  margin-bottom: 2rem;
  margin-inline: 0;
  padding: 0;
}

.subcategory__list,
.subcategory__list--with-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  overflow-x: visible;
  padding: 0;
  margin: 0;
}

@media (min-width: 992px) {
  .subcategory__list,
  .subcategory__list--with-images {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

.subcategory__wrapper {
  min-width: 0;
}

.subcategory__link,
.subcategory__link--with-image {
  display: flex;
  flex-direction: column;
  background: var(--lcm-blanc-pur);
  border: 1px solid var(--lcm-beige);
  border-radius: var(--lcm-radius);
  overflow: hidden;
  transition: box-shadow var(--lcm-transition-slow), border-color var(--lcm-transition-slow);
  text-decoration: none;
  color: inherit;
  height: 100%;
  box-shadow: var(--lcm-shadow-card);
  white-space: normal;
  padding: 0;
}

.subcategory__link:hover,
.subcategory__link--with-image:hover {
  border-color: rgba(var(--bs-primary-rgb), 0.18);
  box-shadow: var(--lcm-shadow-card-hover);
}

.subcategory__image {
  width: calc(100% + 2px);
  margin: -1px -1px 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--lcm-ecru);
}

.subcategory__image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.subcategory__image img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
  border-radius: 0;
  filter: var(--lcm-image-filter);
  transition: filter 0.5s ease, transform 0.4s ease;
}

.subcategory__link:hover .subcategory__image img {
  filter: var(--lcm-image-filter-hover);
  transform: scale(1.02);
}

.subcategory__content {
  padding: 1rem 1.25rem 1.25rem;
  text-align: center;
}

.subcategory__title {
  font-family: var(--lcm-font-body);
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lcm-charbon);
  margin: 0;
  line-height: 1.3;
  transition: color var(--lcm-transition);
}

.subcategory__link:hover .subcategory__title {
  color: var(--lcm-brun);
}
/* --- Sibling categories (lcm_siblingcategories module) --- */

.lcm-siblings {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--lcm-beige);
}

.lcm-siblings__title {
  display: block;
  font-family: var(--lcm-font-heading);
  font-size: 1.15rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lcm-charbon);
  margin: 0 0 2rem;
  padding: 0.75rem 1rem;
  text-align: center;
}
/* --- Quickview (post-9.1) --- */
.lcm-quickview__reference {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--lcm-gris);
}

.lcm-quickview__ref-label {
  font-weight: 500;
  margin-right: 0.25rem;
}

.lcm-quickview__ref-value {
  color: var(--lcm-charbon);
}

.lcm-quickview__full-link a {
  color: var(--lcm-gris);
  font-size: 0.8rem;
  text-decoration: underline;
}

.lcm-quickview__full-link a:hover {
  color: var(--lcm-brun);
}

/* Modal radius preserved */
.modal-dialog.quickview .modal-content,
.modal-xl .modal-content {
  border-radius: var(--lcm-radius-lg);
  border: 1px solid var(--lcm-beige);
}

/* 2-column grid layout for quickview body — mirrors hummingbird 2.0.0 rule
   needed because served theme.css may be an older build without this rule */
@media (min-width: 768px) {
  .page-product--quickview {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
/* --- Listing product cards polish (post-9.1) --- */
/* Cards same height within a row */
.products { align-items: stretch; }
.products > article.product-miniature { display: flex; }
.product-miniature__infos__bottom {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  gap: 0.5rem;
}

/* Swatches centered + flex wrap */
.product-miniature__variants {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-height: 20px;
  margin: 0.25rem 0;
}

/* Action row: centered, buttons harmonized */
.product-miniature__action {
  display: flex;
  justify-content: center;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  width: 100%;
}

.lcm-miniature__form {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
}

.lcm-miniature__qty { flex: 0 0 auto; }

/* Action buttons base */
.product-miniature .lcm-miniature__btn {
  flex: 1 1 auto;
  font-family: var(--lcm-font-body);
  font-size: 0.8rem;
  line-height: 1;
  font-weight: 450;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--lcm-radius);
  padding: 0.45rem 0.85rem;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.product-miniature .lcm-miniature__btn:not(.lcm-miniature__btn--cart) {
  background: var(--lcm-blanc-pur);
  border: 1px solid var(--lcm-beige);
  color: var(--lcm-charbon);
}
.product-miniature .lcm-miniature__btn:not(.lcm-miniature__btn--cart):hover,
.product-miniature .lcm-miniature__btn:not(.lcm-miniature__btn--cart):focus {
  background: var(--lcm-ecru-clair);
  border-color: var(--lcm-brun);
  color: var(--lcm-brun-fonce);
}
.product-miniature .lcm-miniature__btn--cart {
  flex: 0 0 auto;
  height: 36px;
  min-height: 0;
  padding: 0 0.75rem;
  min-width: 44px;
  background: var(--lcm-brun-fonce);
  border: 1px solid var(--lcm-brun-fonce);
  color: var(--lcm-blanc-pur);
}
.product-miniature .lcm-miniature__btn--cart:hover,
.product-miniature .lcm-miniature__btn--cart:focus {
  background: var(--lcm-brun);
  border-color: var(--lcm-brun);
  color: var(--lcm-blanc-pur);
}
.product-miniature .lcm-miniature__btn-icon {
  width: 20px;
  height: 20px;
  display: block;
}
/* ================================================================
   HEADER
   Grille universelle : auto | 1fr | auto
   - Colonne left  : hamburger (mobile) + logo
   - Colonne center: search bar centree (max-width pour respirer)
   - Colonne right : nav2 desktop OU icons user+cart mobile
   Logo : auto-shrink via min-width: 0 + max-width: 100% sur l'img
   Row height : variable CSS --row-h, tune par breakpoint en fin de section
   ================================================================ */

/* Header container : full width (bypass .container { max-width: 90vw } defined earlier)
   Gagne ~100px de largeur a lg/md pour distribuer logo + search + nav2. */
.header-bottom .header-bottom__container,
.header-bottom__container.container {
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

.lcm-header__grid {
  --row-h: 88px;
  height: var(--row-h);
  display: grid;
  /* fit-content(35%) : logo prend sa natural size quand la place est dispo,
     sinon shrink plus aggressivement jusqu'a 35% du grid width max. */
  grid-template-columns: fit-content(35%) minmax(0, 1fr) auto;
  grid-template-areas: "left center right";
  gap: 0.5rem;
  align-items: stretch;
  padding: 0;
}

.lcm-header__left {
  grid-area: left;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: var(--row-h);
  max-height: var(--row-h);
  overflow: hidden;
}

.lcm-header__center {
  grid-area: center;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lcm-header__right {
  grid-area: right;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Logo : centrage vertical via line-height (bypass de la lutte display:block/flex
   causee par bootstrap utilities .d-block/.d-md-block sur .navbar-brand).
   Le parent (a.navbar-brand) reste en display block, line-height = hauteur de row,
   l'img est inline-block + vertical-align middle = centree sur la baseline du line. */
.lcm-header__logo {
  height: 100%;
  min-width: 0;
  overflow: hidden;
  line-height: var(--row-h);
  font-size: 0; /* kill whitespace between inline elements */
  white-space: nowrap;
}
.lcm-header__logo > *,
.lcm-header__logo a.navbar-brand,
.lcm-header__logo .navbar-brand,
.lcm-header__logo h1 {
  height: 100% !important;
  max-height: 100% !important;
  max-width: none !important; /* override hummingbird .navbar-brand max-width: 250px */
  margin: 0 !important;
  padding: 0 !important;
  line-height: var(--row-h) !important;
  font-size: 0;
  text-align: left;
}
.lcm-header__logo img,
.lcm-header__logo svg,
.lcm-header__logo .navbar-brand img {
  display: inline-block !important; /* vertical-align ne fonctionne que sur inline/inline-block */
  vertical-align: middle !important;
  height: auto !important;
  max-height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain;
}

/* Hamburger */
.lcm-header__hamburger {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 0.4rem 0.6rem;
  color: var(--lcm-charbon);
}
.lcm-header__hamburger:hover {
  color: var(--lcm-brun);
}

/* Search bar centree dans sa cellule, max-width pour eviter etalement */
.lcm-header__search {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lcm-header__search-bar {
  width: 100%;
  max-width: 520px;
}
.lcm-header__search-icon {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 0.4rem 0.6rem;
  color: var(--lcm-charbon);
}
.lcm-header__search-icon:hover {
  color: var(--lcm-brun);
}

/* Nav2 desktop */
.lcm-header__nav2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.lcm-header__nav2 .header-block {
  white-space: nowrap;
}

/* Mobile icons */
.lcm-header__mobile-user,
.lcm-header__mobile-cart {
  display: flex;
  align-items: center;
}

/* ---- Header breakpoints (tous remembres dessous) ---- */

/* xs (< 576) : compact mobile, logo large */
@media (max-width: 575.98px) {
  .lcm-header__grid {
    --row-h: 72px;
    grid-template-columns: 1fr auto;
    gap: 0.25rem;
    padding: 0;
  }
  .lcm-header__left { gap: 0.25rem; width: 100%; }
  .lcm-header__logo { width: 100%; }
  .lcm-header__logo .navbar-brand { width: 100% !important; }
  .lcm-header__logo img.logo {
    width: 80% !important;
    max-width: none !important;
    height: auto !important;
  }
  .lcm-header__right { gap: 0.15rem; }
  .lcm-header__right .header-block__action-btn { padding: 0.25rem 0.4rem; }
  .lcm-header__search-bar { max-width: none; }
}

/* sm (576 - 767) : logo large aussi */
@media (min-width: 576px) and (max-width: 767.98px) {
  .lcm-header__grid {
    --row-h: 80px;
    grid-template-columns: 1fr auto;
  }
  .lcm-header__left { width: 100%; }
  .lcm-header__logo { width: 100%; }
  .lcm-header__logo .navbar-brand { width: 100% !important; }
  .lcm-header__logo img.logo {
    width: 80% !important;
    max-width: none !important;
    height: auto !important;
  }
}

/* md (768 - 991) : row mobile */
@media (min-width: 768px) and (max-width: 991.98px) {
  .lcm-header__grid { --row-h: 80px; }
}

/* Desktop (>= 992) : nav2 + search bar full */
/* lg only (992-1199) : row reduite pour que logo + search + nav2 tiennent sans tronquer */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .lcm-header__grid { --row-h: 72px; }
}

/* xl (>= 1200) : row 88, search respire */
@media (min-width: 1200px) {
  .lcm-header__grid { --row-h: 88px; }
  .lcm-header__search-bar { max-width: 560px; }
}

/* xxl (>= 1400) : search bar max */
@media (min-width: 1400px) {
  .lcm-header__search-bar { max-width: 600px; }
}

/* Header-bottom : hauteur forcée >= lg */
@media (min-width: 992px) {
  .header-bottom {
    height: 80px;
    min-height: 80px;
  }
}

/* Nav full-width : barre desktop masquee < lg mais DOM present (offcanvas mobile vit dedans) */
.header-nav-full-width {
  height: 0;
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.header-nav-full-width .offcanvas {
  visibility: visible;
}
@media (min-width: 992px) {
  .header-nav-full-width {
    height: 52px;
    min-height: 52px;
    overflow: visible;
    visibility: visible;
    display: flex;
    align-items: center;
  }
  .header-nav-full-width::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    height: 1px;
    background-color: var(--lcm-or-champagne);
    opacity: 0.25;
    pointer-events: none;
  }
}

.header-nav-full-width .main-menu {
  height: 100%;
}

.js-menu-desktop {
  align-self: stretch;
  display: flex;
}

#top-menu {
  height: 100%;
}

#top-menu > li {
  display: flex;
  align-items: center;
  height: 100%;
}

#top-menu > li > a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 1rem;
}

#top-menu > li > a.dropdown-toggle::after {
  display: none;
}

/* ================================================================
   /HEADER
   ================================================================ */

/* ================================================================
   PAGE NOUVEAUX PRODUITS — masque le compteur "Il y a N produits"
   ================================================================ */
.page-new-products .products__count { display: none; }

/* ================================================================
   PANIER — icone poubelle a la place du texte "Retirer"
   Le aria-label original reste intact pour les lecteurs d'ecran.
   ================================================================ */
.cart-overview .js-remove-from-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 0;
  color: var(--bs-gray-600, #6c757d);
  text-decoration: none;
  transition: color .15s ease;
}
.cart-overview .js-remove-from-cart::before {
  content: "\e872";
  font-family: "Material Icons";
  font-size: 1.25rem;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
.cart-overview .js-remove-from-cart:hover { color: var(--bs-danger, #b43541); }

/* Radio/checkbox background — crisp white instead of theme creamy white */
.form-check-input {
  --bs-form-check-bg: #ffffff;
}

/* Funnel: text-editable inputs must read clearly as "editable zones".
   Bootstrap defaults to --bs-body-bg (= --lcm-blanc cream #faf8f5) which
   blends with the page. Force pure white on all input fields and textareas
   inside cart + checkout so the user instantly sees "this is a text zone".
   Excludes :disabled and [readonly] so those keep their muted Bootstrap bg. */
.cart-grid .form-control:not(:disabled):not([readonly]),
.cart-grid .form-select:not(:disabled):not([readonly]),
.cart-grid textarea:not(:disabled):not([readonly]),
.checkout-grid .form-control:not(:disabled):not([readonly]),
.checkout-grid .form-select:not(:disabled):not([readonly]),
.checkout-grid textarea:not(:disabled):not([readonly]) {
  background-color: #ffffff;
}

/* Unselected radio/checkbox — bump border visibility (Bootstrap default
   inherits --bs-border-color #e6dede which gives ~1.07:1 on white,
   failing WCAG 1.4.11 non-text contrast). Use a tinted brown at 0.45 alpha
   for warm tone consistent with palette while reaching ~2.5:1.
   Transition added so checking/unchecking fades smoothly. */
.form-check-input {
  border-color: rgba(var(--bs-primary-rgb), 0.45);
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* Focus ring — replace Bootstrap blue with brown tint that matches
   --bs-primary (brun-fonce). Bootstrap may hardcode the rgba; this rule
   wins by specificity + explicit declaration. */
.form-check-input:focus {
  border-color: var(--lcm-brun-fonce);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Checked state — fill and border in brun-fonce.
   Keeps the radio dot/checkmark visible (white inner via Bootstrap SVG bg). */
.form-check-input:checked {
  background-color: var(--lcm-brun-fonce);
  border-color: var(--lcm-brun-fonce);
}

/* Bug fix: when <a> carries a .btn-* class, the global link colors
   (--bs-link-color and --bs-link-hover-color) override the button's own
   --bs-btn-color/--bs-btn-hover-color, breaking contrast on filled buttons.
   Lock the button colors for both default and hover states. */
a.btn {
  color: var(--bs-btn-color);
}
a.btn:hover,
a.btn:focus {
  color: var(--bs-btn-hover-color);
}

/* Address cards — "warm paper on wood" affordance.
   No movement (no translateY) — affordance is built only from bg, border,
   shadow and ring transitions. Cards stay in place; their visual weight
   shifts smoothly between unselected and selected states. */
.address-card {
  background-color: var(--lcm-blanc-pur);
  box-shadow:
    0 1px 2px rgba(var(--bs-primary-rgb), 0.05),
    0 4px 12px rgba(var(--bs-primary-rgb), 0.07);
  transition:
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    background-color 0.28s ease;
}

.address-card--radio:hover,
.address-card--add-address:hover {
  box-shadow:
    0 2px 5px rgba(var(--bs-primary-rgb), 0.08),
    0 10px 24px rgba(var(--bs-primary-rgb), 0.12);
}

.address-card--add-address:hover {
  background-color: var(--lcm-ecru-clair);
}

.address-card--radio.selected {
  background-color: var(--lcm-ecru-clair);
  border-color: var(--lcm-brun);
  box-shadow:
    0 0 0 1px var(--lcm-brun),
    0 2px 6px rgba(var(--bs-primary-rgb), 0.09),
    0 8px 20px rgba(var(--bs-primary-rgb), 0.11);
}

.address-card--radio.selected:hover {
  box-shadow:
    0 0 0 1px var(--lcm-brun),
    0 3px 8px rgba(var(--bs-primary-rgb), 0.11),
    0 12px 28px rgba(var(--bs-primary-rgb), 0.14);
}

/* CGV (conditions to approve) — bigger click target on the entire row,
   not just the small checkbox. Pairs with JS in custom.js that toggles
   the checkbox on row click (except on links). Reduces validation friction. */
#conditions-to-approve .form-check {
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  margin: 0.25rem 0;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#conditions-to-approve .form-check:hover {
  background-color: var(--lcm-ecru-clair);
  border-color: var(--lcm-brun);
}

#conditions-to-approve .form-check-input {
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.15em;
}

/* Inside the CGV row, make the actual link to the terms page visible
   so the user knows they can open the full text without having to click
   tiny text. */
#conditions-to-approve .form-check a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Checkout step number — make the round badge feel clickable.
   Pairs with the JS delegate in custom.js that forwards clicks to the
   sibling .checkout-steps__btn. Disabled for unreachable steps. */
.checkout-steps__step .checkout-steps__number {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.checkout-steps__step .checkout-steps__number:hover {
  transform: scale(1.06);
}

.checkout-steps__step:has(.checkout-steps__btn[disabled]) .checkout-steps__number {
  cursor: not-allowed;
}

.checkout-steps__step:has(.checkout-steps__btn[disabled]) .checkout-steps__number:hover {
  transform: none;
}

/* Cart summary products row — merged "X articles" + chevron + subtotal value
   into a single accordion-button row. The button keeps Bootstrap accordion
   mechanics (data-bs-toggle/target, aria-expanded). We hide Bootstrap's
   default chevron::after and render our own inline material icon next to
   the label so the layout is: [label + chevron] ←→ [value]. */
.cart-summary__products-trigger.accordion-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0;
  font-family: var(--lcm-font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lcm-charbon);
  background-color: transparent;
  box-shadow: none;
  border: 0;
}

.cart-summary__products-trigger.accordion-button:not(.collapsed) {
  background-color: transparent;
  color: var(--lcm-charbon);
  box-shadow: none;
}

.cart-summary__products-trigger.accordion-button:focus {
  box-shadow: none;
  border: 0;
}

/* Hide Bootstrap default chevron — we render our own next to the label */
.cart-summary__products-trigger.accordion-button::after {
  display: none;
}

.cart-summary__products-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.cart-summary__products-chevron {
  font-size: 1.25rem;
  color: var(--lcm-charbon);
  transition: transform 0.2s ease;
}

.cart-summary__products-trigger.accordion-button:not(.collapsed) .cart-summary__products-chevron {
  transform: rotate(180deg);
}

.cart-summary__products-value {
  font-weight: 500;
}

/* Remove inter-section separators in the right-column summary.
   Hummingbird ships <hr> tags + border-block on .cart-summary__total
   that fragment the recap visually. The earlier override of
   cart-summary-products.tpl already drops the <hr> tags; here we
   neutralize the top/bottom borders on the Total TTC block too. */
.cart-summary__total {
  border-block: 0;
}

#js-checkout-summary hr {
  display: none;
}

/* Voucher accordion — harmonize with the lcm_fidelite cart widget so
   the two siblings (in panier and in checkout sidebar) share the same
   visual language: warm cream box, soft warm gray border, gentle padding.
   Overrides Bootstrap's accordion-flush which removes borders/bg. */
.cart-voucher__accordion.accordion-flush {
  margin-top: 1rem;
  background-color: var(--lcm-blanc);
  border: 1px solid var(--lcm-gris-clair);
  border-radius: 8px;
  overflow: hidden;
}

.cart-voucher__accordion .accordion-item {
  background-color: transparent;
  border: 0;
}

.cart-voucher__accordion-button.accordion-button {
  padding: 0.75rem 1rem;
  font-family: var(--lcm-font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lcm-charbon);
  background-color: transparent;
  box-shadow: none;
}

.cart-voucher__accordion-button.accordion-button:not(.collapsed) {
  color: var(--lcm-charbon);
  background-color: transparent;
  box-shadow: none;
}

.cart-voucher__accordion-button.accordion-button:focus {
  border-color: transparent;
  box-shadow: none;
}

.cart-voucher__accordion .accordion-body {
  padding: 0 1rem 1rem 1rem;
}

.cart-voucher__form {
  display: flex;
  gap: 0.5rem;
}

.cart-voucher__form .form-control {
  flex: 1;
}

/* Applied vouchers list above the accordion — keep tight to the box */
.cart-voucher__list {
  margin-bottom: 0.5rem;
  padding-left: 0;
  list-style: none;
}

/* Checkout flow uniformity: treat all .btn-outline-primary inside the
   checkout grid as filled primary (black bg, brown hover). Keeps semantic
   HTML (a vs button) intact, only swaps the visual treatment.
   Apply to addresses, shipping and payment steps. */
.checkout-grid .btn-outline-primary,
.cart-grid .btn-outline-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--lcm-noir);
  --bs-btn-border-color: var(--lcm-noir);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--lcm-brun-fonce);
  --bs-btn-hover-border-color: var(--lcm-brun-fonce);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--lcm-brun-fonce);
  --bs-btn-active-border-color: var(--lcm-brun-fonce);
}

/* Shipping line in cart — light weight when address unknown */
.cart-summary__value--light {
  font-weight: 400;
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
}

/* Checkout steps — gradient connectors between states.
   ::before = left half of step (= right half of previous connector)
   ::after  = right half of step (= left half of next connector)
   Gradients converge toward the badge color at the badge edge. */

/* Current step: ::before fades green→charbon (success → current),
   ::after fades charbon→gray (current → future) */
.checkout-steps__step--current::before {
  background: linear-gradient(to right, var(--bs-success), var(--bs-dark));
}
.checkout-steps__step--current::after {
  background: linear-gradient(to right, var(--bs-dark), var(--bs-dark-bg-subtle));
}

/* Success step (already SCSS solid green) — keep as-is via gradient for consistency */
.checkout-steps__step--success::before,
.checkout-steps__step--success::after {
  background: linear-gradient(to right, var(--bs-success), var(--bs-success));
}