/* ============================================================
   MÉRIDIAN — Listing catégorie / recherche
   Filtres ps_facetedsearch (gauche ou haut), PC + mobile.
   Structure réelle du module : #search_filters > .title.filter-mob
   + #facet_all.facet-all.collapse > .facet-all-content > .facet…
   ============================================================ */

.mrd-catalog { padding-block: clamp(28px, 5vw, 56px); }
.mrd-catalog-head { margin-bottom: clamp(20px, 3vw, 34px); }
/* Titre de page : même police (display/Bodoni) et même échelle que les autres
   titres de page (compte, contact) → cohérence sur tout le site. */
.mrd-catalog-head h1 { font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 52px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.05; }
.mrd-catalog-intro { max-width: 640px; margin-top: 12px; }

/* ---- Grille produits ---- */
.prod-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px) clamp(12px, 1.6vw, 22px); }

/* ---- Barre tri / résultats ---- */
.products-selection { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.products-selection .total-products p { font-size: 13px; color: var(--ink-soft); margin: 0; }
.products-selection .sort-by-row { display: flex; align-items: center; gap: 14px; }
.products-sort-order { margin-left: auto; }
.products-sort-order .select-title, .products-sort-order .dropdown-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 40px; padding: 9px 16px; font-size: 12.5px; letter-spacing: .03em; background: none; }
.products-sort-order .select-list { display: block; padding: 9px 14px; font-size: 13.5px; color: var(--ink-soft); }
.products-sort-order .select-list.current { color: var(--ink); font-weight: 600; }

/* ============================================================
   FACETTES — conteneur
   ============================================================ */
#search_filters { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 22px; }
.facet-all-content { display: flex; flex-direction: column; }

/* nettoyer tout */
#search_filters ul { list-style: none; padding: 0; margin: 0; }
#search_filters li { list-style: none; }

/* groupe de facette */
.facet { border-top: 1px solid var(--line); padding: 18px 0; }
.facet-all-content > .facet:first-of-type { border-top: 0; padding-top: 0; }
.facet > .facet-title { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.facet .faceted-slider { display: flex; flex-direction: column; gap: 11px; }
/* liste d'options d'une facette (checkbox/radio) : plusieurs par ligne au lieu d'une colonne */
.facet ul.collapse { display: flex; flex-flow: row wrap; gap: 10px 12px; }
/* facette à choix unique (taille, marque…) : grille fixe à 3 colonnes, quelle que soit la
   longueur des libellés (S/M/L à côté de marques plus longues) */
.facet ul.collapse:has(.custom-radio) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; }

/* bouton "Tout effacer" */
.clear-all-wrapper { margin-bottom: 14px; }
.js-search-filters-clear-all { color: var(--ink-faint); background: none; border: none; font-size: 12.5px; padding: 0; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.js-search-filters-clear-all svg { width: 14px; height: 14px; }

/* libellé de filtre (ligne) */
.facet-label { display: flex; align-items: center; gap: 11px; margin: 0; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
.facet-label:hover, .facet-label.active { color: var(--ink); }
.facet-label .search-link { color: inherit; flex: 1; }
.facet-label .magnitude { color: var(--ink-faint); }
/* ps_facetedsearch/views/dist/front.css impose .facet-label a{width:calc(100% - 30px)} (pensé pour
   l'ancien layout une option par ligne) : ça écrase la largeur fixe des chips taille/couleur. */
#search_filters .facet .facet-label a { width: auto!important; }

/* ---- Case à cocher (carré + check), fidèle maquette ---- */
/* ps_facetedsearch/views/dist/front.css impose top:-7px sur .facet-label .custom-checkbox/.custom-radio
   (spécificité #id + 3 classes) qui décale toutes les cases vers le haut, quel que soit le type de facette. */
#search_filters .facet .facet-label .custom-checkbox,
#search_filters .facet .facet-label .custom-radio { top: 0!important; }
.custom-checkbox { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.custom-checkbox input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.custom-checkbox > input + span:not(.color) { width: 17px; height: 17px; border: 1.5px solid var(--line); border-radius: 2px; display: grid; place-items: center; transition: all .2s; }
.custom-checkbox > input + span:not(.color) .checkbox-checked { width: 12px; height: 12px; fill: var(--bg); opacity: 0; transition: opacity .15s; }
.custom-checkbox > input:checked + span:not(.color) { background: var(--ink); border-color: var(--ink); }
.custom-checkbox > input:checked + span:not(.color) .checkbox-checked { opacity: 1; }

/* ---- Bouton radio : chip bordée (la bordure entoure tout le libellé, pas juste le rond) ---- */
.custom-radio { position: relative; display: inline-flex; flex-shrink: 0; width: 0; }
.custom-radio input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.custom-radio > input + span { display: none; }
.facet-label:has(.custom-radio) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%!important;
  min-height: 25px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  padding: 4px 10px;
  box-sizing: border-box;
  text-align: center;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
/* width:100% : le chip remplit sa colonne de grille (3 par ligne, cf. .facet ul.collapse:has(.custom-radio)
   plus haut), donc S/M/L/TU et les marques plus longues ("Birkenstock") ont toutes la même largeur ;
   le texte peut passer à la ligne (break-word) plutôt que d'être tronqué. */
.facet-label:has(.custom-radio) .search-link {
  flex: 0 1 auto;
  text-align: center;
  line-height: 1.2;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
.facet-label:has(.custom-radio):hover { border-color: var(--ink); }
.facet-label:has(.custom-radio).active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}
.facet-label:has(.custom-radio).active .magnitude { color: inherit; opacity: .75; }

/* ---- Pastille couleur : même logique que les chips taille — toutes la même taille (22px, fixée
   par .color ci-dessous). Le nom de la couleur reste dans le DOM (lecteur d'écran, attribut title
   déjà posé sur le swatch) mais est masqué visuellement pour ne pas élargir certains éléments
   plus que d'autres dans la grille flex-wrap. ---- */
.facet .color { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); display: inline-block; cursor: pointer; background-size: cover; background-position: center; flex-shrink: 0; }
.custom-checkbox > input:checked + .color { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--ink); }
.facet-label:has(.color) { display: inline-flex; }
.facet-label .search-link.noInput {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Curseur de prix (jQuery UI) ---- */
.faceted-slider p { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.ui-slider { position: relative; height: 3px; background: var(--line); border-radius: 3px; margin: 16px 8px; }
.ui-slider .ui-slider-range { position: absolute; height: 100%; background: var(--ink); border-radius: 3px; }
.ui-slider .ui-slider-handle { position: absolute; top: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--ink); transform: translateY(-50%); cursor: grab; outline: none; }

/* ---- dropdown rendu en liste (menu-open) ---- */
.facet-dropdown .dropdown-menu.menu-open { display: flex; flex-direction: column; gap: 9px; position: static; border: 0; box-shadow: none; padding: 0; margin: 0; min-width: 0; background: none; }
.facet-dropdown .dropdown-menu .select-list { padding: 0; color: var(--ink-soft); font-size: 13.5px; }
.facet-dropdown .dropdown-menu .select-list:hover { color: var(--ink); background: none; }

/* icônes collapse mobile */
.facet .collapse-icons svg, .filter-mob .collapse-icons svg { width: 20px; height: 20px; }
.facet .navbar-toggler .remove, .filter-mob .navbar-toggler .remove { display: none; }
[aria-expanded="true"] .navbar-toggler .add { display: none; }
[aria-expanded="true"] .navbar-toggler .remove { display: inline; }

/* ============================================================
   FACETTE CATÉGORIE — arborescence dépliable ("escalier")
   Généré par ptFacetCategoryTree dans facets.tpl. Fermé par défaut ;
   .is-open (clic JS) ou .is-active (catégorie courante) affiche les enfants.
   ============================================================ */
.facet-cat-wrap { display: block; }
.facet-cat-list { display: flex; flex-direction: column; gap: 2px; }
.facet-cat-node { display: flex; flex-direction: column; }
.facet-cat-row { display: flex; align-items: center; gap: 6px; }
.facet-cat-toggle {
  order: -1; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; background: none; color: var(--ink-faint);
  cursor: pointer;
}
.facet-cat-toggle svg { transition: transform .25s var(--ease); }
.facet-cat-node.is-open > .facet-cat-row > .facet-cat-toggle svg { transform: rotate(90deg); }
.facet-cat-toggle:hover { color: var(--ink); }
.facet-cat-node:not(.has-children) > .facet-cat-row { padding-left: 6px; }
.facet-cat-label { order: 0; flex: 1; padding: 6px 0; }
.facet-cat-label .facet-cat-link { flex: 1; color: inherit; line-height: 1.3; }
.facet-cat-children { display: none; padding: 0 10px; }
.facet-cat-node.is-open > .facet-cat-children,
.facet-cat-node.is-active > .facet-cat-children { display: block; }

/* ============================================================
   FILTRE À GAUCHE (filtreGauche) — #search_filters rendu dans #left-column
   Le conteneur garde le style "carte" par défaut + facettes en colonne.
   ============================================================ */
#search_filters.filtreGauche .facet-all-content { flex-direction: column; }

/* ============================================================
   FILTRE EN HAUT (filtreHaut) — barre d'outils sur UNE ligne
   ------------------------------------------------------------
   Layout piloté par le parent persistant .mrd-toolbar--top (et non par
   #search_filters.filtreHaut) afin de rester correct même quand un re-rendu
   AJAX des facettes ne ré-injecte pas la variable $catalogue.
   En desktop : chaque facette = pastille cliquable ouvrant un menu déroulant
   (fidèle à la maquette « TOP FILTER BAR »). En mobile : tiroir natif conservé.
   ============================================================ */

/* la rangée : facettes (gauche) ............ tri (droite) */
.mrd-toolbar--top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--line);
}
.mrd-toolbar-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.mrd-toolbar-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; margin-right: 2px; }
.mrd-toolbar-label svg { flex-shrink: 0; }
/* mobile : le tiroir natif (.filter-mob) porte déjà son titre → libellé masqué */
@media (max-width: 767px) { .mrd-toolbar-label { display: none; } }

/* dans la barre haute, products-top ne montre que le tri (poussé à droite) */
.mrd-toolbar--top #js-product-list-top { flex: 0 0 auto; margin: 0; padding: 0; border: 0; }
.mrd-toolbar--top #js-product-list-top .total-products,
.mrd-toolbar--top #js-product-list-top .showing,
.mrd-toolbar--top #js-product-list-top .filter-button { display: none; }
.mrd-active-filters:empty { display: none; }

@media (min-width: 768px) {
  /* conteneur : on retire la carte, les facettes s'alignent en rangée de pastilles */
  .mrd-toolbar--top #search_filters { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; flex: 1 1 auto; }
  .mrd-toolbar--top #search_filters .facet-all-content { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }

  /* chaque facette : ancre du menu déroulant */
  .mrd-toolbar--top #search_filters .facet { position: relative; border: 0; padding: 0; flex: 0 0 auto; min-width: 0; }

  /* le titre devient une pastille cliquable (avec chevron).
     display:inline-flex est INDISPENSABLE : sans lui le ::after reste une boîte
     inline (width/height ignorés) et le chevron se réduit à une barre verticale. */
  .mrd-toolbar--top #search_filters .facet > .facet-title {
    display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer;
    padding: 9px 15px; border: 1px solid var(--line); border-radius: 40px;
    font-size: 13px; font-weight: 500; letter-spacing: .01em; text-transform: none; color: var(--ink);
    background: transparent; white-space: nowrap; transition: border-color .25s var(--ease), background .25s var(--ease);
    width:fit-content
  }
  .mrd-toolbar--top #search_filters .facet > .facet-title::after {
    content: ""; width: 7px; height: 7px; margin-left: 1px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-1px, -2px); transition: transform .3s var(--ease);
  }
  .mrd-toolbar--top #search_filters .facet > .facet-title:hover { border-color: var(--ink); }
  .mrd-toolbar--top #search_filters .facet.is-open > .facet-title { border-color: var(--ink); }
  .mrd-toolbar--top #search_filters .facet.is-open > .facet-title::after { transform: rotate(-135deg) translate(-1px, -1px); }
  /* facette avec un filtre actif → pastille pleine (signal visuel, comme la maquette) */
  .mrd-toolbar--top #search_filters .facet:has(input:checked) > .facet-title,
  .mrd-toolbar--top #search_filters .facet:has(.facet-label.active) > .facet-title {
    background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600;
  }

  /* le contenu de la facette devient un popover ancré sous la pastille.
     On NE masque PAS via display:none (le slider jQuery-UI a besoin d'une
     largeur > 0 dès le chargement) mais via opacity/visibility. */
  .mrd-toolbar--top #search_filters .facet > ul.collapse,
  .mrd-toolbar--top #search_filters .facet > .facet-dropdown,
  .mrd-toolbar--top #search_filters .facet > .faceted-slider,
  .mrd-toolbar--top #search_filters .facet > .facet-cat-wrap {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
    width: auto; min-width: 232px; max-width: min(360px, 92vw); max-height: 64vh; overflow-y: auto;
    background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
    padding: 16px; box-shadow: var(--shadow-lift);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .mrd-toolbar--top #search_filters .facet.is-open > ul.collapse,
  .mrd-toolbar--top #search_filters .facet.is-open > .facet-dropdown,
  .mrd-toolbar--top #search_filters .facet.is-open > .faceted-slider,
  .mrd-toolbar--top #search_filters .facet.is-open > .facet-cat-wrap {
    opacity: 1; visibility: visible; transform: none;
  }
}

/* ============================================================
   DESKTOP : afficher #facet_all, masquer les éléments mobile
   ============================================================ */
@media (min-width: 768px) {
  #search_filters #facet_all.collapse,
  #search_filters .facet ul.collapse,
  #search_filters .facet .faceted-slider.collapse,
  #search_filters .facet .facet-dropdown.collapse { display: flex !important; }
  #search_filters .facet ul.collapse:has(.custom-radio) { display: grid !important; }
  #search_filters #facet_all.collapse { display: block !important; }
  #search_filters .facet .facet-cat-wrap.collapse { display: block !important; }
  #search_filters > .title.filter-mob,
  #search_filters .facet-all-close,
  #search_filters .facet.no-desk,
  #search_filters .facet > .title.hidden-md-up { display: none !important; }
  /* Le premier .facet visible (celui qui suit le .facet.no-desk masqué en desktop)
     ne doit pas avoir de border-top : c'est lui le 1er bloc affiché. */
  #search_filters .facet.no-desk + .facet { border-top: 0; padding-top: 0; }
  /* La 2e facette visible ne doit pas non plus avoir de border-top. */
  #search_filters .facet.no-desk + .facet + .facet { border-top: 0; }
}

/* ============================================================
   Filtres actifs (chips) + tri
   ============================================================ */
#js-active-search-filters { margin: 0 0 20px; }
/* Titre + chips + « Effacer tout » sur UNE seule rangée. */
#js-active-search-filters.active_filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
#js-active-search-filters .active-filter-title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0; }
#js-active-search-filters ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
/* Poussé en bout de rangée, sur la même ligne que les chips. */
#js-active-search-filters .clear-all-wrapper { margin: 0 0 0 auto; }
.filter-block { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 6px 8px 6px 12px; border: 1px solid var(--line); border-radius: 40px; background: var(--bg-2); }
.filter-block .js-search-link { display: inline-flex; }
.filter-block svg { width: 13px; height: 13px; }

/* ---- Description bas de page catégorie ---- */
/* padding réduit : on neutralise le très grand padding-block de .mrd-section */
.mrd-catalog-desc { border-top: 1px solid var(--line); padding-block: clamp(28px, 4vw, 56px); }

/* texte + image : grille 2 colonnes */
.catdesc-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.catdesc-img img { width: 100%; height: auto; border-radius: 3px; display: block; }

/* texte seul (pas d'image) : colonne unique lisible, centrée */
.catdesc-grid:not(:has(.catdesc-img)) { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; }

/* typographie du contenu riche saisi en back-office */
.catdesc-text { font-size: 15px; line-height: 1.8; color: var(--ink-soft); }
.catdesc-text > :first-child { margin-top: 0; }
.catdesc-text > :last-child { margin-bottom: 0; }
.catdesc-text h2, .catdesc-text h3, .catdesc-text h4 { font-family: var(--font-display); color: var(--ink); font-weight: 500; line-height: 1.2; margin: 1.4em 0 .5em; }
.catdesc-text h2 { font-size: clamp(22px, 2.6vw, 30px); }
.catdesc-text h3 { font-size: clamp(18px, 2vw, 22px); }
.catdesc-text p { margin: 0 0 1em; }
.catdesc-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.catdesc-text ul, .catdesc-text ol { margin: 0 0 1em; padding-left: 1.2em; }
.catdesc-text li { margin-bottom: .4em; }

/* description complémentaire (additional_description) sous le bloc principal */
.catdesc-additional { margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line-soft); font-size: 14.5px; line-height: 1.8; color: var(--ink-soft); }
.catdesc-additional > :first-child { margin-top: 0; }
.catdesc-additional > :last-child { margin-bottom: 0; }

/* ---- Pagination classique (MÉRIDIAN) ---- */
.pagination {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line);
}
/* neutralise la grille Bootstrap héritée du markup (col-md-*, offset, pr-0) */
.pagination > [class*="col-"] { flex: 0 0 auto; width: auto; max-width: none; padding: 0; margin: 0; }

/* liste des pages au-dessus, résumé en légende dessous */
.pagination .page-card { order: 1; }
.pagination .col-md-4 { order: 2; font-size: 12.5px; letter-spacing: .03em; color: var(--ink-faint); text-align: center; }

.pagination .page-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; align-items: center; margin: 0; padding: 0; list-style: none; }
.pagination .page-list li { margin: 0; }

/* maillon : lien de page / flèche */
.pagination .page-list a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 13.5px; color: var(--ink-soft); background: var(--bg);
  text-decoration: none; transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.pagination .page-list a:hover { color: var(--ink); border-color: var(--ink); }
.pagination .page-list a > span { display: inline; }

/* page courante */
.pagination .current a, .pagination .current a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* flèches prev/next (le SVG a un fill figé dans le markup → on force currentColor) */
.pagination .previous svg, .pagination .next svg { width: 18px; height: 18px; fill: currentColor; }

/* spacer « … » : sans cadre */
.pagination .page-list .spacer { display: inline-flex; align-items: center; min-width: 24px; height: 42px; justify-content: center; color: var(--ink-faint); }

/* désactivé (flèche en bout de liste) */
.pagination .disabled, .pagination a.disabled { opacity: .3; pointer-events: none; }

/* ---- Chargement produits : scroll infini / bouton « Voir plus » (product-loader.js) ---- */
/* pagination numérotée masquée quand un mode auto/bouton est actif (reste en DOM : SEO + fallback no-JS) */
.mrd-has-loader .pagination { display: none; }

/* spinner commun */
.mrd-infinite-spinner { width: 22px; height: 22px; border: 2px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: mrd-spin .7s linear infinite; }
@keyframes mrd-spin { to { transform: rotate(360deg); } }

/* scroll infini : sentinelle + spinner visible pendant le chargement */
.mrd-infinite-sentinel { display: flex; justify-content: center; align-items: center; min-height: 1px; }
.mrd-infinite-sentinel.is-loading { padding: clamp(28px, 5vw, 56px) 0; }
.mrd-infinite-sentinel .mrd-infinite-spinner { display: none; }
.mrd-infinite-sentinel.is-loading .mrd-infinite-spinner { display: block; }

/* bouton « Voir plus » */
.mrd-loadmore-wrap { display: flex; justify-content: center; padding-top: clamp(28px, 5vw, 56px); }
.mrd-loadmore { min-width: 240px; }
.mrd-loadmore .mrd-infinite-spinner { display: none; width: 16px; height: 16px; border-width: 2px; border-top-color: currentColor; }
.mrd-loadmore.is-loading { opacity: .7; cursor: progress; }
.mrd-loadmore.is-loading .mrd-infinite-spinner { display: inline-block; }

/* ============================================================
   MOBILE : #facet_all en tiroir gauche (déclenché par .filter-mob)
   ============================================================ */
.filter-mob { display: none; }
@media (max-width: 767px) {
  .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .catdesc-grid { grid-template-columns: 1fr; gap: 28px; }

  #search_filters, #search_filters.filtreHaut, #search_filters.filtreGauche { background: none; border: 0; padding: 0; margin: 0 0 0px; }
  #search_filters > .title.filter-mob {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border: 1px solid var(--line); border-radius: 2px; padding: 9px 16px; cursor: pointer;
  }
  #search_filters > .title.filter-mob .facet-title { margin: 0; font-size: 11px; letter-spacing: .12em; }

  #facet_all { position: fixed; top: 0; left: 0; bottom: 0; width: min(88vw, 360px); background: var(--bg); z-index: 96; box-shadow: var(--shadow-lift); overflow-y: auto; padding: 24px 20px 40px; }
  #facet_all.collapse:not(.in):not(.show) { display: none; }
  #facet_all.in, #facet_all.show { display: block; }
  #facet_all .facet-all-content { flex-direction: column; gap: 0; }
  #facet_all .facet { flex: none; border-top: 1px solid var(--line); padding: 16px 0; }

  .facet-all-close { display: grid; place-items: center; position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; background: none; border: none; z-index: 2; }

  /* entête de facette = accordéon (collapse Bootstrap) */
  .facet > .title.hidden-md-up { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 4px 0; }
  .facet ul.collapse:not(.in):not(.show), .facet .faceted-slider.collapse:not(.in):not(.show), .facet .facet-dropdown.collapse:not(.in):not(.show) { display: none; }
  .facet ul.collapse.in, .facet ul.collapse.show { display: flex; }
  .facet ul.collapse.in:has(.custom-radio), .facet ul.collapse.show:has(.custom-radio) { display: grid; }
}

/* ============================================================
   Layout listing
   ------------------------------------------------------------
   Les facettes ne vivent plus dans le contenu :
   - filtreGauche → rendues dans #left-column (cf. layout-both-columns.tpl),
     la grille PrestaShop (.row + col-*) gère le ratio colonne/contenu ;
   - filtreHaut   → rendues dans la barre d'outils (.mrd-toolbar--top).
   .cat-layout ne contient donc plus que le listing.
   ============================================================ */
.cat-layout { display: block; }
.mrd-listing-body { min-width: 0; }

/* Filtre à gauche : la colonne de facettes colle au scroll (desktop) */
@media (min-width: 768px) {
  .ContainerFiltreGauche #left-column { position: sticky; top: 92px; align-self: flex-start; }
}

/* Filtre en haut : pas de colonne de gauche, le listing prend toute la largeur */
.ContainerFiltreHaut #left-column { display: none; }
.ContainerFiltreHaut #content-wrapper { flex: 0 0 100%; max-width: 100%; }

/* ============================================================
   MÉRIDIAN — Index des marques (page « Toutes les marques »)
   Markup natif : #main.brands-page > .brand-hero + nav.brand-index
   + .brand-group (par initiale) > h2.brand-group-letter + ul.brand-list
   > li.brand > a.brand-image + .brand-body (.brand-name / .brand-desc /
   .brand-products : .brand-cta + .brand-count).
   Chargé sur page_name == 'manufacturer' (mutualisé avec le listing par
   marque) : les classes .brand-* n'existent QUE sur la page index → pas
   de collision avec la grille produits.
   ============================================================ */

.brands-page { padding-block: clamp(32px, 5vw, 64px); }

/* ---------- En-tête ---------- */
.brand-hero { margin-bottom: clamp(20px, 3vw, 36px); padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.brand-hero .eyebrow { margin-bottom: 12px; }
.brand-hero h1 { font-size: clamp(30px, 4.4vw, 52px); }
.brand-hero-sub { margin-top: 12px; font-size: 14px; color: var(--ink-soft); }

/* ---------- Index alphabétique ---------- */
.brand-index {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.brand-index a {
  display: inline-grid; place-items: center;
  min-width: 40px; height: 40px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft);
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.brand-index a:hover { color: var(--accent-ink); background: var(--ink); border-color: var(--ink); }

/* ---------- Groupe par initiale ---------- */
.brand-group { scroll-margin-top: 100px; margin-top: clamp(36px, 5vw, 64px); }
.brand-group:first-of-type { margin-top: 0; }
.brand-group-letter {
  display: flex; align-items: center; gap: 22px;
  margin-bottom: clamp(18px, 2.4vw, 30px);
  font-family: var(--font-display); font-weight: 500; line-height: 1;
  font-size: clamp(30px, 4vw, 46px); color: var(--ink);
}
.brand-group-letter span { flex: 0 0 auto; }
.brand-group-letter::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }

/* ---------- Grille des marques ---------- */
.brand-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: clamp(14px, 1.6vw, 22px); }

.brand {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.brand:hover { border-color: var(--ink); box-shadow: var(--shadow-soft); transform: translateY(-3px); }

/* logo, dans un cadre à ratio fixe */
.brand-image {
  display: grid; place-items: center;
  aspect-ratio: 3 / 2; padding: clamp(18px, 2.2vw, 30px);
  background: var(--bg); border-bottom: 1px solid var(--line-soft);
}
.brand-image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }

/* corps */
.brand-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: clamp(14px, 1.4vw, 18px) clamp(16px, 1.6vw, 20px); }
.brand-name { margin: 0; }
.brand-name a { font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--ink); transition: color .2s; }
.brand-name a:hover { color: var(--accent); }
.brand-desc {
  margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--ink-faint);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.brand-products { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.brand-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink);
}
.brand-cta-arrow { transition: transform .3s var(--ease); }
.brand:hover .brand-cta { color: var(--accent); }
.brand:hover .brand-cta-arrow { transform: translateX(4px); }
.brand-count {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  min-width: 24px; height: 22px; padding: 0 7px;
  border: 1px solid var(--line); border-radius: 40px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
}

@media (max-width: 480px) {
  .brand-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}