/*
 * Thème metfi : listes de produits (catégorie, recherche, nouveautés,
 * meilleures ventes, promotions, marque, fournisseur), bloc « rien à
 * afficher » et page 404.
 *
 * Chargée après metfi.css (priorité 230) : elle reprend ses variables
 * (--mf-couleurs-*, --mf-typo-*, --mf-formes-*, --mf-cadre-marge), ses
 * nuances, ses boutons (.mf-btn) et la grille des vignettes de l'accueil
 * (.mf-grille-produits), sans les redéfinir.
 *
 * Classic stylise les listes par des sélecteurs à identifiant (#products,
 * #left-column, #search_filters…) : les règles qui doivent l'emporter sur
 * elles portent le même identifiant.
 *
 * Points de rupture : ceux de metfi.css (mobile sous 768 px ; sous 1024 px,
 * colonnes plus étroites). La colonne de gauche de classic (col-md-4
 * col-lg-3) est gardée à partir de 768 px.
 */

/* ------------------------------------------------------ en-tête de liste
 * Placé sous le fil d'Ariane, au-dessus des colonnes (product-list.tpl).
 * Fil d'Ariane des listes seulement (celui qui précède l'en-tête) : un peu
 * d'air sous l'en-tête du site, classic n'en met pas.
 */
#wrapper .breadcrumb:has(+ #js-product-list-header) {
  padding: 16px 0 4px;
}
/* Fil d'Ariane d'un seul niveau (catégorie Accueil) : classic le masque,
   l'en-tête prend sa place. */
#wrapper .breadcrumb[data-depth="1"] + .mf-liste-entete {
  padding-top: 40px;
}
.mf-liste-entete {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0 32px;
  color: var(--mf-couleurs-encre, #141414);
}
.mf-liste-entete__titre {
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.mf-liste-entete__detail {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-size: 17px;
  font-weight: 600;
}
.mf-liste-entete__description,
.mf-banniere__description {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.65;
}
.mf-liste-entete__description {
  color: var(--mf-couleurs-texte, #444444);
}
.mf-liste-entete__description > :last-child,
.mf-banniere__description > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------- bannière photo
 * Catégorie avec image : comme le hero de l'accueil, texte sur fond encre à
 * gauche, photo à droite sur toute la hauteur. Photo recadrée (cover) : une
 * vraie photographie, pas une photo produit sur fond blanc.
 */
.mf-banniere {
  margin-bottom: 40px;
  background: var(--mf-couleurs-encre, #141414);
  color: var(--mf-couleurs-fond, #ffffff);
}
.mf-banniere__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 360px;
}
.mf-banniere__texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 56px 48px 56px 0;
}
.mf-banniere__titre {
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.mf-banniere__description {
  color: var(--mf-nuance-sur-encre-texte);
}
.mf-banniere__visuel {
  position: relative;
  overflow: hidden;
  background: var(--mf-nuance-fond-visuel);
}
/* Recadrage un peu au-dessus du centre : sur les photos de produits en
   situation, le haut de l'objet (plateau, grille) compte plus que le sol. */
.mf-banniere__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

/* ------------------------------------------------------------ contenu */
#products.mf-liste__produits {
  color: var(--mf-couleurs-encre, #141414);
}
/* Classic met la liste en flex centré (#products .products) : la grille de
   l'accueil reprend la main ; ses colonnes viennent de metfi.css. */
#products .mf-grille-produits {
  display: grid;
  justify-content: stretch;
}

/* Sous-catégories : pastilles, une ligne qui défile sur mobile. À partir de
   768 px, l'arbre des catégories de la colonne de gauche les montre déjà :
   pas de doublon. */
.mf-sous-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.mf-pastille {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond-doux, #f3f3f1);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.mf-pastille,
.mf-pastille:hover,
.mf-pastille:focus {
  color: var(--mf-couleurs-encre, #141414);
}
.mf-pastille:hover {
  background: var(--mf-couleurs-bordure, #e6e6e4);
}

/* ----------------------------------------- barre : nombre, filtres, tri */
.mf-liste-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 28px;
}
.mf-liste-outils__total {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-size: 15px;
  font-weight: 600;
}
.mf-liste-outils__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Tri : bouton contour de la charte et sa liste. Classic : .products-sort-order. */
.mf-tri {
  display: flex;
  position: relative;
  align-items: center;
  gap: 12px;
}
.mf-tri__libelle {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.mf-tri__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  min-width: 220px;
  height: var(--mf-formes-hauteur-bouton, 48px);
  margin: 0;
  padding: 0 14px 0 16px;
  border: 1.5px solid var(--mf-couleurs-encre, #141414);
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond, #ffffff);
  color: var(--mf-couleurs-encre, #141414);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.mf-tri__bouton .mf-icone {
  flex: 0 0 auto;
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}
.mf-tri.open .mf-tri__bouton .mf-icone {
  transform: rotate(-90deg);
}
.products-sort-order .dropdown-menu.mf-tri__menu {
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  z-index: 20;
  box-sizing: border-box;
  width: auto;
  min-width: 220px;
  margin: 0;
  padding: 6px 0;
  border: 1px solid var(--mf-couleurs-bordure, #e6e6e4);
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond, #ffffff);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--mf-couleurs-encre, #141414) 14%, transparent);
}
.products-sort-order .mf-tri__menu .mf-tri__option {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  background: transparent;
  color: var(--mf-couleurs-encre, #141414);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.products-sort-order .mf-tri__menu .mf-tri__option:hover,
.products-sort-order .mf-tri__menu .mf-tri__option:focus {
  background: var(--mf-couleurs-fond-doux, #f3f3f1);
  color: var(--mf-couleurs-encre, #141414);
  text-decoration: none;
}
.products-sort-order .mf-tri__menu .mf-tri__option.current {
  font-weight: 800;
}

/* ------------------------------------------------- filtres actifs
 * Gabarit de ps_facetedsearch (section#js-active-search-filters), en pastilles.
 */
#js-active-search-filters.active_filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  background: none;
}
#js-active-search-filters .active-filter-title {
  margin: 0 4px 0 0;
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
}
#js-active-search-filters ul {
  display: contents;
}
#js-active-search-filters .filter-block {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin: 0;
  padding: 0 6px 0 12px;
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond-doux, #f3f3f1);
  color: var(--mf-couleurs-encre, #141414);
  font-size: 14px;
  font-weight: 600;
}
#js-active-search-filters .filter-block .js-search-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--mf-couleurs-encre, #141414);
}
#js-active-search-filters .filter-block .close {
  margin: 0;
  color: inherit;
  font-size: 18px;
}

/* ---------------------------------------------------------- pagination */
.pagination.mf-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  width: auto;
  margin: 48px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--mf-couleurs-bordure, #e6e6e4);
  font-size: 15px;
}
.mf-pagination__resume {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-size: 14px;
}
.pagination .mf-pagination__pages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  background: none;
}
.pagination .mf-pagination__pages .mf-pagination__page {
  display: block;
}
.pagination .mf-pagination__lien,
.pagination .mf-pagination__espace {
  display: inline-flex;
  float: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--mf-couleurs-bordure, #e6e6e4);
  border-radius: var(--mf-formes-rayon, 4px);
  color: var(--mf-couleurs-encre, #141414);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
}
.pagination a.mf-pagination__lien:hover,
.pagination a.mf-pagination__lien:focus {
  border-color: var(--mf-couleurs-encre, #141414);
  color: var(--mf-couleurs-encre, #141414);
  text-decoration: none;
}
.pagination .current .mf-pagination__lien {
  border-color: var(--mf-couleurs-encre, #141414);
  background: var(--mf-couleurs-encre, #141414);
  color: var(--mf-couleurs-fond, #ffffff);
}
.pagination .mf-pagination__espace {
  border-color: transparent;
}
.mf-pagination__lien--precedent .mf-icone {
  transform: rotate(180deg);
}

/* ------------------------------------------------- colonne de gauche
 * Blocs des modules (ps_categorytree, ps_facetedsearch, ps_brandlist,
 * ps_supplierlist), gabarits non redéfinis : habillés ici. Classic vise les
 * filtres par « #category #left-column … » : #wrapper donne ici le même poids.
 */
#left-column .block-categories {
  margin: 0 0 32px;
  padding: 0;
  background: none;
  box-shadow: none;
}
#left-column .block-categories .category-top-menu > li > a.h6 {
  display: block;
  margin: 0 0 8px;
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#left-column .block-categories .category-sub-menu {
  margin: 0;
}
#left-column .block-categories .category-sub-menu li[data-depth="0"] > a {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--mf-couleurs-bordure, #e6e6e4);
  color: var(--mf-nuance-encre-adoucie);
  font-size: 15px;
  font-weight: 600;
}
#left-column .block-categories .category-sub-menu .category-sub-link {
  color: var(--mf-nuance-encre-adoucie);
  font-size: 14px;
}
#left-column .block-categories .category-sub-menu a:hover,
#left-column .block-categories .category-sub-menu a:focus {
  color: var(--mf-couleurs-encre, #141414);
  text-decoration: none;
}
#left-column .block-categories .collapse-icons {
  top: 10px;
}

/* Marques et fournisseurs : rien à montrer quand la boutique n'en a pas
   (ps_brandlist et ps_supplierlist affichent alors « Aucune marque »). */
#wrapper #left-column #search_filters_brands:not(:has(li, option)),
#wrapper #left-column #search_filters_suppliers:not(:has(li, option)) {
  display: none;
}
#wrapper #left-column #search_filters_brands,
#wrapper #left-column #search_filters_suppliers,
#wrapper #left-column #search_filters {
  margin: 0 0 32px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
#wrapper #left-column #search_filters_wrapper {
  margin-right: 0;
  margin-left: 0;
}
#wrapper #left-column #search_filters_brands .facet-label,
#wrapper #left-column #search_filters_suppliers .facet-label,
#wrapper #left-column #search_filters > .h6 {
  display: block;
  margin: 0 0 8px;
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#wrapper #left-column #search_filters .facet {
  border-bottom: 1px solid var(--mf-couleurs-bordure, #e6e6e4);
}
#wrapper #left-column #search_filters .facet .facet-title {
  color: var(--mf-couleurs-encre, #141414);
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
}
#wrapper #left-column #search_filters .facet ul li {
  padding: 10px 0;
  border-top: 0;
}
#wrapper #left-column #search_filters .facet .facet-label a,
#wrapper #left-column #search_filters_brands a,
#wrapper #left-column #search_filters_suppliers a {
  color: var(--mf-nuance-encre-adoucie);
  font-size: 15px;
}
#wrapper #left-column #search_filters .facet .magnitude {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
}

/* --------------------------------------------------- rien à afficher
 * Liste vide, recherche sans résultat, 404 (errors/not-found.tpl). Classic :
 * .page-not-found en 570 px, gris, précisé par #products et #pagenotfound
 * (identifiant du <body> de la 404).
 */
.mf-vide.page-not-found,
#products .mf-vide.page-not-found,
#pagenotfound .mf-vide.page-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  max-width: 680px;
  margin: 8px auto 64px;
  padding: 48px 32px;
  overflow: visible;
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond-doux, #f3f3f1);
  color: var(--mf-couleurs-encre, #141414);
  font-size: 16px;
  text-align: center;
}
.mf-vide.page-not-found :where(h1, h2, h4),
#products .mf-vide.page-not-found :where(h1, h2, h4),
#pagenotfound .mf-vide.page-not-found :where(h1, h2, h4) {
  margin: 0;
  color: var(--mf-couleurs-encre, #141414);
  font-size: 26px;
  font-weight: var(--mf-typo-graisse-titres, 800);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
}
/* Titre de la page 404 : #main pour passer devant les règles à identifiant
   ci-dessus (la 404 d'une catégorie ou d'un produit n'a pas #pagenotfound). */
#main .mf-vide .mf-vide__titre--page {
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
/* Page 404 : le bloc est seul dans la page (classic : 10rem de marge basse). */
#pagenotfound #main .mf-vide.page-not-found {
  margin: 40px auto 96px;
}
.mf-vide.page-not-found p {
  max-width: 520px;
  margin: 0;
  color: var(--mf-couleurs-texte, #444444);
  font-size: 16px;
  line-height: 1.6;
}
.mf-vide.page-not-found p.mf-surtitre {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-size: 13px;
  text-transform: uppercase;
}
.mf-vide__recherche {
  width: 100%;
  max-width: 480px;
  margin-top: 8px;
}
/* Champ du widget ps_searchbar : sa feuille le vise par #search_widget
   (identifiant que porte aussi celui de l'en-tête), d'où l'identifiant ici. */
.mf-vide #search_widget {
  display: block;
  float: none;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: visible;
}
.mf-vide #search_widget form {
  display: block;
  position: relative;
  margin: 0;
}
.mf-vide #search_widget form input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--mf-formes-hauteur-bouton, 48px);
  padding: 0 16px 0 46px;
  border: 1.5px solid var(--mf-couleurs-encre, #141414);
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond, #ffffff);
  color: var(--mf-couleurs-encre, #141414);
  font-family: inherit;
  font-size: 16px; /* 16 px : iOS ne zoome pas sur le champ */
  outline: none;
}
.mf-vide #search_widget form input[type="text"]:focus {
  box-shadow: 0 0 0 1px var(--mf-couleurs-encre, #141414);
}
.mf-vide #search_widget form i.search {
  position: absolute;
  top: 50%;
  left: 14px;
  padding: 0;
  transform: translateY(-50%);
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-size: 22px;
}
/* Croix « effacer » de ps_searchbar : elle n'agit que sur le premier champ
   de la page (celui de l'en-tête). */
.mf-vide #search_widget form i.clear {
  display: none;
}
.mf-vide__accueil {
  margin-top: 8px;
}
#main .mf-vide a.mf-btn--plein,
#main .mf-vide a.mf-btn--plein:hover,
#main .mf-vide a.mf-btn--plein:focus {
  color: var(--mf-btn-inverse);
}

/* Pied de catégorie (description complémentaire, gabarit de classic). */
#js-product-list-footer .card {
  margin-top: 48px;
  border: 0;
  box-shadow: none;
}
#js-product-list-footer .category-additional-description {
  color: var(--mf-couleurs-texte, #444444);
  font-size: 16px;
  line-height: 1.65;
}

/* -------------------------------------------- colonnes étroites (< 1024) */
@media (max-width: 1023.98px) {
  .mf-banniere__titre {
    font-size: 44px;
  }
  .mf-banniere__texte {
    padding: 40px 32px 40px 0;
  }
}
@media (min-width: 768px) {
  #wrapper:has(#left-column .block-categories) .mf-sous-categories {
    display: none;
  }
}
/* Tablette : à côté de la colonne de gauche, deux vignettes par ligne. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  #products .mf-grille-produits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------- mobile */
@media (max-width: 767.98px) {
  .mf-liste-entete {
    gap: 8px;
    padding: 8px 0 20px;
  }
  #wrapper .breadcrumb[data-depth="1"] + .mf-liste-entete {
    padding-top: 24px;
  }
  .mf-liste-entete__titre {
    font-size: 28px;
  }
  .mf-liste-entete__detail,
  .mf-liste-entete__description,
  .mf-banniere__description {
    font-size: 16px;
    line-height: 1.6;
  }

  /* Bannière : photo bord à bord en haut, puis le texte. */
  .mf-banniere {
    margin-bottom: 24px;
  }
  .mf-banniere__grille {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .mf-banniere__visuel {
    order: -1;
    height: 200px;
    margin: 0 calc(-1 * var(--mf-cadre-marge));
  }
  .mf-banniere__texte {
    gap: 12px;
    padding: 24px 0 28px;
  }
  .mf-banniere__titre {
    font-size: 32px;
    letter-spacing: -0.02em;
  }

  /* Colonne de gauche : l'arbre des catégories double le menu et les
     pastilles de sous-catégories, marques et fournisseurs sont secondaires ;
     seuls les filtres restent, derrière leur bouton. */
  #left-column .block-categories,
  #wrapper #left-column #search_filters_brands,
  #wrapper #left-column #search_filters_suppliers {
    display: none;
  }
  /* Filtres dépliés par le bouton (theme.js de classic retire hidden-sm-down
     et masque le contenu) : panneau plein écran, bouton OK en haut. */
  #wrapper #left-column #search_filters_wrapper:not(.hidden-sm-down) {
    position: fixed;
    inset: 0;
    z-index: 1000;
    margin: 0;
    padding: 0 var(--mf-cadre-marge) 24px;
    overflow-y: auto;
    background: var(--mf-couleurs-fond, #ffffff);
  }
  #wrapper #left-column #search_filter_controls {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mf-couleurs-bordure, #e6e6e4);
    background: var(--mf-couleurs-fond, #ffffff);
    text-align: left;
  }
  #wrapper #left-column #search_filter_controls button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--mf-formes-hauteur-bouton-mobile, 52px);
    margin: 0 0 0 auto;
    padding: 0 24px;
    border: 1.5px solid var(--mf-couleurs-encre, #141414);
    border-radius: var(--mf-formes-rayon, 4px);
    background: var(--mf-couleurs-encre, #141414);
    color: var(--mf-couleurs-fond, #ffffff);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
  }
  #wrapper #left-column #search_filters .facet .title {
    min-height: 52px;
  }

  .mf-sous-categories {
    flex-wrap: nowrap;
    margin: 0 calc(-1 * var(--mf-cadre-marge)) 20px;
    padding: 0 var(--mf-cadre-marge);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mf-sous-categories::-webkit-scrollbar {
    display: none;
  }
  .mf-pastille {
    flex: 0 0 auto;
    min-height: 48px;
  }

  /* Barre : le nombre sur sa ligne, puis filtres et tri côte à côte. */
  .mf-liste-outils {
    gap: 10px;
    margin-bottom: 20px;
  }
  .mf-liste-outils__total {
    width: 100%;
    font-size: 14px;
  }
  .mf-liste-outils__actions {
    width: 100%;
    margin-left: 0;
  }
  .mf-liste-outils__filtrer,
  .mf-tri {
    flex: 1 1 0;
    min-width: 0;
  }
  .mf-liste-outils__filtrer {
    padding: 0 16px;
  }
  .mf-tri__libelle {
    display: none;
  }
  .mf-tri__bouton {
    width: 100%;
    min-width: 0;
    height: var(--mf-formes-hauteur-bouton-mobile, 52px);
  }
  .mf-tri__bouton > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .products-sort-order .dropdown-menu.mf-tri__menu {
    left: 0;
    min-width: 0;
  }
  .products-sort-order .mf-tri__menu .mf-tri__option {
    min-height: 48px;
  }

  .pagination.mf-pagination {
    flex-direction: column;
    justify-content: center;
    margin-top: 32px;
  }
  .pagination .mf-pagination__pages {
    justify-content: center;
  }
  .pagination .mf-pagination__lien,
  .pagination .mf-pagination__espace {
    min-width: 48px;
    height: 48px;
  }
  /* Précédente et suivante : la flèche seule, le mot reste lu. */
  .mf-pagination__lien--precedent > span,
  .mf-pagination__lien--suivant > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .mf-vide.page-not-found,
  #products .mf-vide.page-not-found,
  #pagenotfound .mf-vide.page-not-found {
    margin: 0 0 40px;
    padding: 32px 20px;
  }
  #pagenotfound #main .mf-vide.page-not-found {
    margin: 24px 0 48px;
  }
  .mf-vide.page-not-found :where(h1, h2, h4),
  #products .mf-vide.page-not-found :where(h1, h2, h4),
  #pagenotfound .mf-vide.page-not-found :where(h1, h2, h4) {
    font-size: 22px;
  }
  #main .mf-vide .mf-vide__titre--page {
    font-size: 28px;
  }
  .mf-vide #search_widget form input[type="text"] {
    height: var(--mf-formes-hauteur-bouton-mobile, 52px);
  }
  .mf-vide__accueil {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mf-pastille,
  .mf-tri__bouton .mf-icone {
    transition: none;
  }
}