/* ==========================================================================
   eg-recherche.css : habillage esthetique/accessible de l'interface de recherche (lot 2, ps1)
   Theme marketplace. Charge par themes/marketplace/templates/_partials/head.tpl avec un numero de version (?v=)
   -> a incrementer a chaque modification (contourne le cache navigateur de 7 jours de custom.css).
   Ne modifie ni le coeur de ps_facetedsearch ni celui de creativeelements : surcharge CSS uniquement.
   S'applique a tous les gabarits Creative Elements Listing (selecteurs par classes, pas par id de gabarit).
   Jetons :
     --eg-accent  : teinte fixe FONCEE (contraste >= 4,5:1 sur blanc) pour textes, etats, focus, composants
     --Primary    : couleur du COMPTE adherent (definie par le gabarit du theme) -> accents purement decoratifs
   ========================================================================== */

body {
  --eg-accent: #0B6E85;            /* 5,87:1 sur blanc */
  --eg-accent-tint: rgba(11, 110, 133, .08);
  --eg-text: #2D3134;              /* 12,3:1 */
  --eg-text-2: #555555;            /* 7,46:1 */
  --eg-muted: #5F6368;             /* 6,0:1 */
  --eg-border: #767676;            /* 4,54:1 : bords de champs (composants >= 3:1) */
  --eg-line: #E5E7EA;              /* separateurs decoratifs */
  --eg-rail: #C9CED3;              /* rail du curseur (la poignee, elle, est a >= 3:1) */
  --eg-focus: 2px solid var(--eg-accent);
  --eg-deco: var(--Primary, #0B6E85);
}

/* ---- A1. Focus clavier visible (WCAG 2.4.7) ---------------------------------------------------------------- */
.elementor .ce-filters a.elementor-field-option:focus-visible,
.elementor .ce-filters .ce-filters__tab:focus-visible,
.elementor .ce-filters .ce-filters__title:focus-visible,
.elementor .ce-filters .ce-filters__tree-node > summary:focus-visible,
.elementor .ce-filters select:focus-visible,
.elementor .ce-filters .dialog-close-button:focus-visible,
.elementor .ce-filters__clear a:focus-visible,
.elementor .ce-filters__toggle a:focus-visible,
.elementor .ce-pagination a:focus-visible,
.elementor .ce-per-page__select:focus-visible,
.elementor .ce-sort-order select:focus-visible,
.elementor .ce-sort-order select:focus {
  outline: var(--eg-focus) !important;
  outline-offset: 2px !important;
}
.elementor .ce-filters .elementor-select-wrapper select:focus {
  border-color: var(--eg-accent);
}
/* Curseur de prix : l'anneau est porte par la poignee (l'input est transparent et sans pointer-events) */
.elementor .ce-filters .ce-dual-range input[type="range"]:focus,
.elementor .ce-filters .ce-dual-range input[type="range"]:focus-visible { outline: none !important; }
.elementor .ce-filters .ce-dual-range input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--eg-accent);
}
.elementor .ce-filters .ce-dual-range input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--eg-accent);
}

/* ---- A2. Contrastes et etats (survol / actif) --------------------------------------------------------------- */
.elementor .ce-filters .ce-filters__tab,
.elementor .ce-filters .ce-filters__title { color: var(--eg-text); }
/* "Effacer tout" : etait BLANC sur BLANC (invisible) a cause de la regle CE `.elementor-button` (texte blanc) + fond blanc du theme */
.elementor .ce-filters__clear a.elementor-button {
  color: var(--eg-accent) !important;
  background: transparent !important;
  min-height: 32px;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.elementor .ce-filters__clear a.elementor-button:hover { color: #0A5F73 !important; }

.elementor .ce-filters .elementor-field-option { color: var(--eg-text-2); }
.elementor .ce-filters a.elementor-field-option:hover {
  color: var(--eg-accent);
  background: var(--eg-accent-tint);
}
/* option cochee : fond teinte + libelle en gras + repere decoratif a la couleur du compte */
.elementor .ce-filters a.elementor-field-option:has(input:checked) {
  background: var(--eg-accent-tint);
  color: var(--eg-text);
  box-shadow: inset 3px 0 0 var(--eg-deco);
}
.elementor .ce-filters a.elementor-field-option:has(input:checked) .elementor-field-label { font-weight: 600; }

/* case a cocher : bord a >= 3:1, coche = teinte accent (fin du bleu #0075ff par defaut) */
.elementor .ce-filters .elementor-field-option .ce-checkbox { border-color: var(--eg-border); }
.elementor .ce-filters .elementor-field-option input:checked ~ .ce-checkbox {
  border-color: var(--eg-accent);
  background: var(--eg-accent);
  color: #fff;
}

/* Fournisseur / Marque (<select>) : bord et fleche conformes, hauteur de cible */
.elementor .ce-filters .elementor-select-wrapper select {
  border-color: var(--eg-border);
  min-height: 40px;
  color: var(--eg-text);
}
.elementor .ce-filters .elementor-select-wrapper select:hover { border-color: var(--eg-accent); }
.elementor .ce-filters .elementor-select-wrapper::after { border-right-color: var(--eg-accent); border-bottom-color: var(--eg-accent); }
.elementor .ce-filters .elementor-select-wrapper select option:checked,
.elementor .ce-filters .elementor-select-wrapper select option:hover { background-color: var(--eg-accent); }

/* Curseur de prix (ticket HCA n°6) : meme construction que la PROD (Advanced Search / jQuery UI : trait de 6 px, portion selectionnee a la
   couleur du compte, poignee ronde blanche cerclee CENTREE sur le trait), sur le double curseur natif de Creative Elements (2 <input range>).
   Cause de l'ancien decalage : l'<input> faisait 6 px de haut (comme le trait) et Chrome centre la poignee sur l'input ; le `top:-9px` du lot 2
   supposait une poignee alignee en haut -> poignee 9 px AU-DESSUS du trait. Correctif : l'<input> fait exactement la hauteur de la poignee et son
   centre est celui du trait (identique dans Chrome, Edge, Firefox et Safari, quel que soit leur centrage interne).
   Horizontalement : l'<input> deborde de la moitie de la poignee de chaque cote, si bien que le CENTRE de la poignee suit exactement
   la portion selectionnee (bord gauche/droit), comme en PROD (avant : 12 px d'ecart aux extremites). Poignee 24 px (cible WCAG 2.5.8 ; PROD : 18 px). */
.elementor .ce-filters .ce-dual-range {
  --eg-track: 6px;
  --eg-thumb: 24px;
  height: var(--eg-track);
  background: var(--eg-rail);
  border-radius: 10px;
  width: calc(100% - 40px);         /* marge de 20 px de chaque cote : poignee (12 px), survol x1,2 et anneau de focus (5 px) ne sont pas rognes */
  margin: 30px 20px 22px;
}
.elementor .ce-filters .ce-dual-range__selected { background: var(--eg-deco); border-radius: 10px; }   /* var(--Primary) : couleur du compte, comme la PROD */
.elementor .ce-filters .ce-dual-range input[type="range"] {
  top: calc((var(--eg-track) - var(--eg-thumb)) / 2);
  left: calc(var(--eg-thumb) / -2);
  width: calc(100% + var(--eg-thumb));
  height: var(--eg-thumb);
  padding: 0;
}
.elementor .ce-filters .ce-dual-range input[type="range"]::-webkit-slider-thumb {
  width: var(--eg-thumb); height: var(--eg-thumb); border: 2px solid var(--eg-accent); background: #fff;   /* bague foncee : contraste >= 3:1 (la teinte du compte est trop claire) */
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.elementor .ce-filters .ce-dual-range input[type="range"]::-moz-range-thumb {
  width: var(--eg-thumb); height: var(--eg-thumb); border: 2px solid var(--eg-accent); background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
@media (prefers-reduced-motion: reduce) {
  .elementor .ce-filters .ce-dual-range input[type="range"]::-webkit-slider-thumb,
  .elementor .ce-filters .ce-dual-range input[type="range"]::-moz-range-thumb { transition: none; }
}
.elementor .ce-filters .ce-dual-range + .elementor-field-label { color: var(--eg-text); }

/* Texte secondaire du groupe non cliquable */
.elementor .ce-filters .ce-filters__tree-group { color: var(--eg-muted); }

/* Pagination, tri, produits par page : bords et texte conformes */
.elementor .ce-pagination a.elementor-icon-list-item:not(.ce-disabled) {
  border: 1px solid var(--eg-border);
  color: var(--eg-text);
}
.elementor .ce-pagination a.elementor-icon-list-item:not(.ce-disabled):not(.elementor-active):hover {
  background: var(--eg-accent-tint) !important;
  border-color: var(--eg-accent);
  color: var(--eg-accent);
}
.elementor .ce-pagination a.js-search-link.elementor-active {
  background: var(--eg-accent) !important;
  border: 1px solid var(--eg-accent) !important;
  color: #fff !important;
}
/* points de suspension (lien sans href, ni actif ni desactive) : neutre, pas de faux etat "page courante" */
.elementor .ce-pagination a.js-search-link:not([href]):not(.elementor-active):not(.ce-disabled) {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--eg-muted) !important;
}
.elementor .ce-pagination a.js-search-link.elementor-active .elementor-icon-list-text { color: #fff; }
.elementor .ce-per-page { color: var(--eg-text-2); }
.elementor .ce-per-page__select { border-color: var(--eg-border); color: var(--eg-text); }

/* ==========================================================================
   BLOC B : alignement et hierarchie de l'arbre de categories, titres de facettes, cibles tactiles
   ========================================================================== */

/* Titre de facette : SEUL niveau en majuscules (15 px / 700), cible >= 40 px, separateur entre facettes */
.elementor .ce-filters .ce-filters__tab {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  min-height: 40px;
  padding: 6px 0;
}
.elementor .ce-filters .elementor-field-group {
  margin-bottom: 0;
  padding: 6px 0 12px;
  border-top: 1px solid var(--eg-line);
}
.elementor .ce-filters .ce-filters__clear + .elementor-field-group,
.elementor .ce-filters .elementor-heading-title + .elementor-field-group { border-top: 0; }
.elementor .ce-filters .elementor-field-subgroup { padding-top: 2px; }

/* Ligne d'option : libelle (+ compteur) COLLES a la case, cible 36 px (44 px en tactile), plus de space-between */
.elementor .ce-filters .elementor-field-option {
  justify-content: flex-start;
  gap: 8px;
  min-height: 36px;
  padding: 6px 6px;
  margin-bottom: 0;
  border-radius: 6px;
}
.elementor .ce-filters .elementor-field-option .elementor-field-label {
  flex: 0 1 auto;
  min-width: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
/* Compteur : affichage inchange ("(n)" apres le libelle), seulement adouci et aligne en chiffres tabulaires */
.elementor .ce-filters .elementor-field-label[data-magnitude]::after {
  color: var(--eg-muted);
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Arbre : plus de retrait par padding 20/40/60 ; un filet vertical + 16 px par niveau */
.elementor .ce-filters .ce-filters__tree-item,
.elementor .ce-filters .ce-filters__tree-node { margin-bottom: 0; }
.elementor .ce-filters .ce-filters__tree-item--level1 { margin-bottom: 2px; }
.elementor .ce-filters .ce-filters__tree-item--level2,
.elementor .ce-filters .ce-filters__tree-item--level3,
.elementor .ce-filters .ce-filters__tree-item--level4 { padding-left: 0; }
.elementor .ce-filters .ce-filters__tree-children {
  margin: 0 0 0 11px;
  padding: 0 0 0 5px;
  border-left: 1px solid var(--eg-line);
}
/* Chevron : 24 x 24 (zone cliquable de la ligne, a gauche de la case), couleur accent, rotation a l'ouverture */
.elementor .ce-filters .ce-filters__tree-node > summary { min-height: 36px; }
.elementor .ce-filters .ce-filters__tree-node > summary::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%230B6E85' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  transition: transform .15s ease;
}
.elementor .ce-filters .ce-filters__tree-node[open] > summary::before { transform: rotate(90deg); }
/* Feuilles (sans chevron) : meme retrait que les lignes a chevron pour aligner les cases entre elles */
.elementor .ce-filters .ce-filters__tree-item > a.elementor-field-option,
.elementor .ce-filters .ce-filters__tree-item > .ce-filters__tree-group { margin-left: 24px; }

/* Typographie par niveau : UN seul niveau de majuscules (le titre de facette). 13 px minimum. */
.elementor .ce-filters .ce-filters__tree-item--level1 > .elementor-field-option .elementor-field-label,
.elementor .ce-filters .ce-filters__tree-item--level1 > details > summary .elementor-field-label {
  font-size: 14px; font-weight: 600; color: var(--eg-text); text-transform: none;
}
.elementor .ce-filters .ce-filters__tree-item--level2 > .elementor-field-option .elementor-field-label,
.elementor .ce-filters .ce-filters__tree-item--level2 > details > summary .elementor-field-label {
  font-size: 14px; font-weight: 500; color: var(--eg-text);
}
.elementor .ce-filters .ce-filters__tree-item--level3 > .elementor-field-option .elementor-field-label,
.elementor .ce-filters .ce-filters__tree-item--level3 > details > summary .elementor-field-label {
  font-size: 13px; font-weight: 400; color: var(--eg-text-2);
}
.elementor .ce-filters .ce-filters__tree-item--level4 > .elementor-field-option .elementor-field-label,
.elementor .ce-filters .ce-filters__tree-item--level4 > details > summary .elementor-field-label {
  font-size: 13px; font-weight: 400; color: var(--eg-muted);
}
.elementor .ce-filters a.elementor-field-option:hover .elementor-field-label { color: var(--eg-accent); }

/* Cibles tactiles >= 44 px (tablette et mobile) */
@media (max-width: 1023px) {
  .elementor .ce-filters .elementor-field-option { min-height: 44px; }
  .elementor .ce-filters .ce-filters__tree-node > summary { min-height: 44px; }
  .elementor .ce-filters .ce-filters__tab { min-height: 44px; }
  .elementor .ce-filters .elementor-select-wrapper select { min-height: 44px; }
  .elementor .ce-filters .dialog-lightbox-close-button { width: 44px; height: 44px; margin: 8px; display: flex; align-items: center; justify-content: center; }
}

/* ==========================================================================
   BLOC C : accent unifie, pastilles couleur, puces de filtres actifs, barre tri / par page, pagination
   ========================================================================== */

/* ---- C1. Puces de filtres actifs (HTML : EgListingFilters, module egfacetedsearch) ------------------------------ */
.elementor .ce-filters .eg-active-filters {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.elementor .ce-filters .eg-active-filters li { margin: 0; padding: 0; max-width: 100%; }
.elementor .ce-filters a.eg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 32px;
  padding: 4px 6px 4px 12px;
  border-radius: 16px;
  background: var(--eg-line);
  color: var(--eg-text);
  font: 400 13px/1.3 Roboto, sans-serif;
  text-decoration: none;
}
.elementor .ce-filters a.eg-chip:hover { background: var(--eg-accent-tint); color: var(--eg-accent); box-shadow: inset 0 0 0 1px var(--eg-accent); }
.elementor .ce-filters a.eg-chip:focus-visible { outline: var(--eg-focus) !important; outline-offset: 2px !important; }
.eg-chip__facet { color: var(--eg-muted); }
.eg-chip__x {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}
.eg-chip__x::before, .eg-chip__x::after {
  content: "";
  position: absolute;
  left: 5px; top: 9px;
  width: 10px; height: 2px;
  background: var(--eg-text);
  border-radius: 1px;
  transform: rotate(45deg);
}
.eg-chip__x::after { transform: rotate(-45deg); }

/* ---- C2. Bouton "Filtres" (compteur) et pied de tiroir (masque tant que le tiroir n'est pas ouvert) ---------------- */
.elementor .ce-filters__toggle .elementor-button { min-height: 44px; }
.elementor .ce-filters__toggle .elementor-button-content-wrapper { align-items: center; gap: 8px; }
.eg-filters-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--eg-accent);
  color: #fff;
  font: 700 12px/1 Roboto, sans-serif;
}
.elementor .ce-filters .eg-filters-footer { display: none; }

/* ---- C3. Pastilles couleur (facette Couleur, visible seulement quand un filtre est actif) ------------------------ */
.elementor .ce-filters .elementor-field-type-color .elementor-field-subgroup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;                 /* place pour le double anneau de l'etat coche */
  max-height: 300px;            /* facette Couleur = ~330 valeurs sur ps1 : zone defilante bornee */
  overflow-y: auto;
}
.elementor .ce-filters .elementor-field-type-color a.elementor-field-option {
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.elementor .ce-filters .elementor-field-type-color a.elementor-field-option:hover,
.elementor .ce-filters .elementor-field-type-color a.elementor-field-option:has(input:checked) { background: none; box-shadow: none; }
.elementor .ce-filters .elementor-field-type-color .elementor-field-option .ce-checkbox {
  width: 32px;
  height: 32px;
  aspect-ratio: auto;
  border: 1px solid rgba(0, 0, 0, .35);      /* blanc / champagne visibles sur fond blanc */
  border-radius: 0;                          /* pastilles carrees (a conserver) */
}
.elementor .ce-filters .elementor-field-type-color .elementor-field-option:hover .ce-checkbox { outline: 2px solid var(--eg-accent); outline-offset: 1px; }
.elementor .ce-filters .elementor-field-type-color .elementor-field-option input:checked ~ .ce-checkbox {
  border-color: rgba(0, 0, 0, .35);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--eg-accent);   /* etat coche : double anneau + encoche (blanche ou noire selon la teinte) */
}
/* Repli sans code couleur en BO (Bleu, Bleu Daisy, Noir Floral, Violet, Blanc, Champagne) : puce TEXTE au lieu d'une pastille vide */
.elementor .ce-filters .elementor-field-type-color a.elementor-field-option:has(> .ce-checkbox:not([style])) {
  width: auto;
  height: auto;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--eg-border);
  border-radius: 4px;
  background: #fff;
}
.elementor .ce-filters .elementor-field-type-color a.elementor-field-option:has(> .ce-checkbox:not([style])) .ce-checkbox { display: none; }
.elementor .ce-filters .elementor-field-type-color a.elementor-field-option:has(> .ce-checkbox:not([style])) .elementor-field-label {
  display: inline;
  font-size: 13px;
  color: var(--eg-text);
}
.elementor .ce-filters .elementor-field-type-color a.elementor-field-option:has(> .ce-checkbox:not([style])):has(input:checked) {
  background: var(--eg-accent);
  border-color: var(--eg-accent);
  box-shadow: none;
}
.elementor .ce-filters .elementor-field-type-color a.elementor-field-option:has(> .ce-checkbox:not([style])):has(input:checked) .elementor-field-label,
.elementor .ce-filters .elementor-field-type-color a.elementor-field-option:has(> .ce-checkbox:not([style])):has(input:checked) .elementor-field-label::after { color: #fff; }

/* ---- C4. Barre tri / produits par page ---------------------------------------------------------------------------- */
.elementor .ce-sort-order { align-items: center; justify-content: flex-end; gap: 8px; }
.elementor .ce-sort-order label {
  display: block;
  margin: 0;
  font: 400 14px/1.2 Roboto, sans-serif;
  color: var(--eg-text-2);
  white-space: nowrap;
}
.elementor .ce-sort-order .elementor-select-wrapper { width: auto; flex: 0 1 260px; min-width: 0; }
.elementor .ce-sort-order select {
  width: 100%;
  min-height: 40px;
  font: 400 14px/1.2 Roboto, sans-serif;
  color: var(--eg-text);
  border: 1px solid var(--eg-border) !important;
  border-radius: 6px !important;
}
.elementor .ce-per-page { font-size: 14px; gap: 10px; }
.elementor .ce-per-page__select {
  min-height: 40px;
  min-width: 72px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 14px;
}

/* ---- C4b. Tri : meme composant que la PROD (ticket 5) ------------------------------------------------------------
   Bouton texte + chevron et menu deroulant (classes du theme products-sort-order / dropdo / select-title / select-list), rendu par
   egfacetedsearch/src/Ce/EgListingSortOrder.php ; plus de libelle « Trier par : » (nom accessible = aria-label du bouton).
   Valeurs relevees sur la PROD (theme custom.css, `.listing-top .dropdo`), Poppins comme le reste du theme.
   Ecarts voulus (accessibilite, jetons du lot 2) : survol/focus du menu en --eg-accent + texte blanc (la PROD : texte blanc sur
   --Primary, contraste ~1,7:1), survol du bouton en --eg-text-2 (PROD #787878, 4,3:1), anneau de focus clavier (absent en PROD),
   cibles 44 px sous 1024 px. */
.elementor .ce-sort-order.ce-sort-order--dropdown { display: flex; align-items: center; justify-content: flex-end; gap: 0; margin: 0; }
.elementor .ce-sort-order .products-sort-order {
  position: relative;
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  font: 400 16px/20px Poppins, sans-serif;
  color: #7a7a7a;
}
.elementor .ce-sort-order .products-sort-order .select-title {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: unset;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  appearance: none;
  background: transparent;
  font: 400 14px/1 Poppins, sans-serif;
  letter-spacing: .5px;
  text-align: left;
  text-transform: none;
  color: #2d3134;
  cursor: pointer;
  transition: none;
}
.elementor .ce-sort-order .products-sort-order .select-title:hover,
.elementor .ce-sort-order .products-sort-order .select-title:active { background: transparent; border: 0; color: var(--eg-text-2); }
.elementor .ce-sort-order .products-sort-order .select-title:focus { background: transparent; border: 0; }
.elementor .ce-sort-order .products-sort-order .select-title:focus-visible {
  outline: var(--eg-focus) !important;
  outline-offset: 2px !important;
}
.elementor .ce-sort-order .products-sort-order .select-title i {
  position: relative;
  rotate: 90deg;
  font-size: 24px;
  color: inherit;
}
.elementor .ce-sort-order .products-sort-order .dropdown-menu {
  left: auto;
  right: 0;
  min-width: 160px;
  width: auto;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .25);
  border-radius: 0;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .1);
  z-index: 1000;
}
.elementor .ce-sort-order .products-sort-order.open > .dropdown-menu { display: block; }
.elementor .ce-sort-order .products-sort-order .dropdown-menu > a.select-list {
  display: block;
  padding: 2px 20px;
  font: 400 14px/20px Poppins, sans-serif;
  color: #232323;
  background: transparent;
  text-decoration: none;
  white-space: nowrap;   /* une ligne par tri (« Ventes, ordre décroissant » est plus long que les libellés de la PROD) : le menu s'élargit au besoin */
}
.elementor .ce-sort-order .products-sort-order .dropdown-menu > a.select-list:hover,
.elementor .ce-sort-order .products-sort-order .dropdown-menu > a.select-list:focus {
  background: var(--eg-accent);
  color: #fff;
  text-decoration: none;
}
@media (max-width: 1023px) {
  .elementor .ce-sort-order .products-sort-order .select-title { min-height: 44px; }
  .elementor .ce-sort-order .products-sort-order .dropdown-menu > a.select-list { display: flex; align-items: center; min-height: 44px; }
}

/* ---- C5. Pagination : cibles 40 px (44 px sous 1024 px), police 14 px, nom accessible des fleches ------------------ */
.elementor .elementor-widget .ce-pagination a.elementor-icon-list-item.js-search-link {
  position: relative;
  min-width: 40px;
  height: 40px;
  line-height: 38px;
  padding: 0 6px;
  font-size: 14px;
}
.elementor .ce-pagination a.elementor-icon-list-item .elementor-icon-list-text { font-size: 14px; }
.elementor .ce-pagination__arrow .elementor-icon-list-icon { height: 38px; line-height: 38px; font-size: 14px; }
.elementor .ce-pagination__arrow .elementor-icon-list-text::after {
  content: "Page suivante";
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.elementor .ce-pagination__arrow[rel="prev"] .elementor-icon-list-text::after { content: "Page précédente"; }
@media (max-width: 1024px) {
  .elementor .elementor-widget .ce-pagination a.elementor-icon-list-item.js-search-link { min-width: 44px; height: 44px; line-height: 42px; font-size: 14px; }
  .elementor .ce-pagination__arrow .elementor-icon-list-icon { height: 42px; line-height: 42px; font-size: 14px; }
  .elementor .ce-per-page__select, .elementor .ce-sort-order select { min-height: 44px; }
}
.elementor .ce-pagination a.ce-disabled { opacity: .5; cursor: not-allowed; }

/* ==========================================================================
   BLOC D : tablette / mobile (<= 1023 px)
   Constat (ps1, mesure 390 px) : le panneau maison `.sidebar_filter` passait en position:fixed / left:-100% et ses DEUX declencheurs
   ("FILTRES" .open-filter et le bouton CE .ce-filters__toggle) etaient DANS ce panneau, donc hors ecran : aucun moyen d'ouvrir les filtres.
   Solution : un seul mecanisme = le tiroir natif de Creative Elements (.ce-filters--shown), dont le bouton sort dans le flux, colle sous
   l'en-tete fixe ; le panneau maison et le bouton "masquer la barre laterale" ne servent que sur desktop.
   ========================================================================== */
@media (max-width: 1023px) {
  body { --eg-header-h: 142px; }  /* en-tete fixe du theme sur 2 rangees de 993 a 1023 px (mesure : 142 px) */

  @media (max-width: 992px) { body { --eg-header-h: 71px; } }   /* en-tete a 1 rangee (mesure : 71 px de 360 a 992 px) */

  /* Colonne des filtres : dans le flux, pleine largeur, barre collante sous l'en-tete fixe */
  body .elementor .sidebar_filter.elementor-column,
  body .elementor .sidebar_filter.elementor-column.show {
    position: sticky;
    top: var(--eg-header-h);
    left: auto;
    z-index: 900;                       /* < en-tete (999) ; passe a 10000 quand le tiroir est ouvert (regle suivante) */
    width: 100% !important;
    height: auto;
    overflow: visible;
    padding: 0;
    background: #fff;
    border-bottom: 1px solid var(--eg-line);
    transition: none;
  }
  body .elementor .sidebar_filter.elementor-column:has(.ce-filters--shown) { z-index: 10000; }
  body .elementor .sidebar_filter.elementor-column > .elementor-element-populated { padding: 8px 0 !important; margin: 0 !important; }
  body .elementor .sidebar_filter ~ .elementor-column { width: 100% !important; }
  /* la preference desktop "masquer la barre laterale" (persistee par compte) ne doit pas faire disparaitre le bouton Filtres ici */
  body .elementor .sidebar_filter.ce-sidebar-hidden { display: block !important; }
  /* "FILTRES" (masquer/afficher la barre laterale) : desktop seulement ; ici le bouton Filtres de CE fait le travail */
  body .elementor .sidebar_filter .open-filter,
  body .elementor .sidebar_filter .close-filter { display: none !important; }
  /* aucun filtre disponible (ex. compte a personnalisation restreinte) : pas de barre ni de bouton vides */
  body .elementor .sidebar_filter.elementor-column:not(:has(.ce-filters .elementor-field-group)) { display: none !important; }

  /* Bouton "Filtres" : pleine largeur, 48 px */
  .elementor .ce-filters__toggle,
  .elementor .ce-filters__toggle .elementor-button { width: 100%; }
  .elementor .ce-filters__toggle .elementor-button { min-height: 48px; justify-content: center; border-radius: 8px; }

  /* Tiroir CE ouvert : largeur bornee, titre "Filtres", pied collant avec "Afficher les resultats" */
  .elementor .ce-filters__container.ce-filters--shown .ce-filters {
    width: min(92vw, 380px);
    padding: 12px 20px 0;
    box-sizing: border-box;
    display: flex;                      /* pour plaquer le pied en bas meme si la liste est courte */
    flex-direction: column;
  }
  .elementor .ce-filters__container.ce-filters--shown .ce-filters > * { flex: none; }
  .elementor .ce-filters__container.ce-filters--shown .elementor-heading-title:empty::after {
    content: "Filtres";
    display: block;
    font: 700 18px/44px Roboto, sans-serif;
    color: var(--eg-text);
  }
  .elementor .ce-filters__container.ce-filters--shown .eg-filters-footer {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: auto -20px 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--eg-line);
  }
  .elementor .ce-filters .eg-filters-apply {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 8px;
    background: var(--eg-accent);
    color: #fff;
    font: 600 16px/1.2 Roboto, sans-serif;
    text-decoration: none;
  }
  .elementor .ce-filters .eg-filters-apply:hover { background: #0A5F73; color: #fff; }
  .elementor .ce-filters .eg-filters-apply:focus-visible { outline: 2px solid var(--eg-accent) !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #fff; }
}

/* Mobile etroit : barre tri / par page / pagination empilees et centrees */
@media (max-width: 575px) {
  .elementor .ce-bottom-row { flex-direction: column; align-items: center; gap: 16px; }
  .elementor .ce-bottom-row .ce-pagination { order: 1; justify-content: center; }
  .elementor .ce-bottom-row .ce-per-page { order: 2; justify-content: center; }
  .elementor .ce-sort-order { justify-content: space-between; width: 100%; }
  .elementor .ce-sort-order .elementor-select-wrapper { flex: 1 1 auto; }
  .elementor .ce-sort-order.ce-sort-order--dropdown { justify-content: flex-end; }
}