/* ============================================================
   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 ul.collapse, .facet .faceted-slider { display: flex; flex-direction: column; gap: 11px; }

/* 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); }

/* ---- Case à cocher (carré + check), fidèle maquette ---- */
.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 (cercle) ---- */
.custom-radio { position: relative; display: inline-flex; flex-shrink: 0; }
.custom-radio input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.custom-radio > input + span { width: 18px; height: 18px; border: 1.5px solid var(--line); border-radius: 50%; transition: all .2s; }
.custom-radio > input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 4px var(--ink); }

/* ---- Pastille couleur (swatch + nom) ---- */
.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); }

/* ---- 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; }

/* ============================================================
   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 {
    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 {
    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_all.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; }
}

/* ============================================================
   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)); }
}