/*
 * Pictogrammes des cartes produit CKWash.
 * Chaque SVG est calibre d'apres sa surface reellement dessinee, marges
 * transparentes comprises. La cible visuelle est de 32 px dans un cadre
 * technique de 40 px, sur tous les breakpoints.
 */

body
  .e-loop-item.product:is(
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"]
  )
  :is(
    .elementor-element-3870f72,
    .elementor-element-f84bca3,
    .elementor-element-65dd5a7,
    .elementor-element-4684545,
    .elementor-element-b5050db,
    .elementor-element-b2d1eae
  ) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  overflow: visible !important;
}

body
  .e-loop-item.product:is(
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"]
  )
  :is(
    .elementor-element-3870f72,
    .elementor-element-f84bca3,
    .elementor-element-65dd5a7,
    .elementor-element-4684545,
    .elementor-element-b5050db,
    .elementor-element-b2d1eae
  )
  :is(.elementor-widget-container, a) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  overflow: visible !important;
}

body
  .e-loop-item.product:is(
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"]
  )
  :is(
    .elementor-element-3870f72,
    .elementor-element-f84bca3,
    .elementor-element-65dd5a7,
    .elementor-element-4684545,
    .elementor-element-b5050db,
    .elementor-element-b2d1eae
  )
  img:is([src*=".svg"], [data-lazy-src*=".svg"]) {
  display: block !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: translate(
      var(--ck-card-icon-shift-x, 0%),
      var(--ck-card-icon-shift-y, 0%)
    )
    scale(var(--ck-card-icon-scale, 1.2)) !important;
  transform-origin: center center !important;
}

img:is([src*="/4-boutons-bleu.svg"], [data-lazy-src*="/4-boutons-bleu.svg"]) { --ck-card-icon-scale: 1.221; --ck-card-icon-shift-x: -0.92%; --ck-card-icon-shift-y: -0.31%; }
img:is([src*="/abris-lumineux.svg"], [data-lazy-src*="/abris-lumineux.svg"]) { --ck-card-icon-scale: 1.24; --ck-card-icon-shift-x: -0.08%; --ck-card-icon-shift-y: -0.16%; }
img:is([src*="/acier-inoxydablebleu.svg"], [data-lazy-src*="/acier-inoxydablebleu.svg"]) { --ck-card-icon-scale: 1.19; --ck-card-icon-shift-x: -0.07%; --ck-card-icon-shift-y: 0%; }
img:is([src*="/affichage-bleu.svg"], [data-lazy-src*="/affichage-bleu.svg"]) { --ck-card-icon-scale: 1.257; --ck-card-icon-shift-x: 0.55%; --ck-card-icon-shift-y: 0.39%; }
img:is([src*="/afficheur-tactilebleu.svg"], [data-lazy-src*="/afficheur-tactilebleu.svg"]) { --ck-card-icon-scale: 1.231; --ck-card-icon-shift-x: -0.62%; --ck-card-icon-shift-y: -0.15%; }
img:is([src*="/Alerte-de-stockbleu.svg"], [data-lazy-src*="/Alerte-de-stockbleu.svg"]) { --ck-card-icon-scale: 1.027; --ck-card-icon-shift-x: -0.96%; --ck-card-icon-shift-y: -0.39%; }
img:is([src*="/antifraude.svg"], [data-lazy-src*="/antifraude.svg"]) { --ck-card-icon-scale: 1.317; --ck-card-icon-shift-x: -0.16%; --ck-card-icon-shift-y: -0.08%; }
img:is([src*="/applicationsbleu.svg"], [data-lazy-src*="/applicationsbleu.svg"]) { --ck-card-icon-scale: 1.24; --ck-card-icon-shift-x: -1.16%; --ck-card-icon-shift-y: -0.16%; }
img:is([src*="/Borne-de-recharge.svg"], [data-lazy-src*="/Borne-de-recharge.svg"]) { --ck-card-icon-scale: 1.35; --ck-card-icon-shift-x: 0%; --ck-card-icon-shift-y: 1.35%; }
img:is([src*="/capacite.svg"], [data-lazy-src*="/capacite.svg"]) { --ck-card-icon-scale: 1.336; --ck-card-icon-shift-x: 1%; --ck-card-icon-shift-y: 0.42%; }
img:is([src*="/Carte-electroniquebleu.svg"], [data-lazy-src*="/Carte-electroniquebleu.svg"]) { --ck-card-icon-scale: 1.208; --ck-card-icon-shift-x: 1.06%; --ck-card-icon-shift-y: -1.36%; }
img:is([src*="/carte-fidelitebleu.svg"], [data-lazy-src*="/carte-fidelitebleu.svg"]) { --ck-card-icon-scale: 1.174; --ck-card-icon-shift-x: -0.07%; --ck-card-icon-shift-y: 0.07%; }
img:is([src*="/casiers-intelligents.svg"], [data-lazy-src*="/casiers-intelligents.svg"]) { --ck-card-icon-scale: 1.362; --ck-card-icon-shift-x: 0.85%; --ck-card-icon-shift-y: 0.6%; }
img:is([src*="/compatibilite.svg"], [data-lazy-src*="/compatibilite.svg"]) { --ck-card-icon-scale: 1.121; --ck-card-icon-shift-x: -0.07%; --ck-card-icon-shift-y: -0.07%; }
img:is([src*="/Dimensionsbleu.svg"], [data-lazy-src*="/Dimensionsbleu.svg"]) { --ck-card-icon-scale: 1.032; --ck-card-icon-shift-x: -0.77%; --ck-card-icon-shift-y: 0.9%; }
img:is([src*="/distributionbleu.svg"], [data-lazy-src*="/distributionbleu.svg"]) { --ck-card-icon-scale: 1.181; --ck-card-icon-shift-x: 0.15%; --ck-card-icon-shift-y: -2.21%; }
img:is([src*="/double-mode-copie.svg"], [data-lazy-src*="/double-mode-copie.svg"]) { --ck-card-icon-scale: 1.238; --ck-card-icon-shift-x: -0.39%; --ck-card-icon-shift-y: -0.7%; }
img:is([src*="/en-stock.svg"], [data-lazy-src*="/en-stock.svg"]) { --ck-card-icon-scale: 1.28; --ck-card-icon-shift-x: 0.08%; --ck-card-icon-shift-y: 2.56%; }
img:is([src*="/entreesortie.svg"], [data-lazy-src*="/entreesortie.svg"]) { --ck-card-icon-scale: 1.123; --ck-card-icon-shift-x: 0%; --ck-card-icon-shift-y: 0%; }
img:is([src*="/Filtrage-et-surtensionbleu.svg"], [data-lazy-src*="/Filtrage-et-surtensionbleu.svg"]) { --ck-card-icon-scale: 1.205; --ck-card-icon-shift-x: 0.98%; --ck-card-icon-shift-y: 0.98%; }
img:is([src*="/finition.svg"], [data-lazy-src*="/finition.svg"]) { --ck-card-icon-scale: 1.07; --ck-card-icon-shift-x: 0%; --ck-card-icon-shift-y: 0%; }
img:is([src*="/Fixation-bleue.svg"], [data-lazy-src*="/Fixation-bleue.svg"]) { --ck-card-icon-scale: 1.109; --ck-card-icon-shift-x: -0.07%; --ck-card-icon-shift-y: 0.55%; }
img:is([src*="/fixation.svg"], [data-lazy-src*="/fixation.svg"]) { --ck-card-icon-scale: 1.133; --ck-card-icon-shift-x: -0.07%; --ck-card-icon-shift-y: 0%; }
img:is([src*="/Fonction.svg"], [data-lazy-src*="/Fonction.svg"]) { --ck-card-icon-scale: 1.407; --ck-card-icon-shift-x: -0.09%; --ck-card-icon-shift-y: -0.09%; }
img:is([src*="/gestion-a-distance.svg"], [data-lazy-src*="/gestion-a-distance.svg"]) { --ck-card-icon-scale: 1.272; --ck-card-icon-shift-x: 0.8%; --ck-card-icon-shift-y: 0.56%; }
img:is([src*="/GONFLEUR.svg"], [data-lazy-src*="/GONFLEUR.svg"]) { --ck-card-icon-scale: 1.074; --ck-card-icon-shift-x: -0.4%; --ck-card-icon-shift-y: 0%; }
img:is([src*="/INSTALLATION.svg"], [data-lazy-src*="/INSTALLATION.svg"]) { --ck-card-icon-scale: 1.203; --ck-card-icon-shift-x: 0%; --ck-card-icon-shift-y: -0.15%; }
img:is([src*="/Lecteur-de-billetsbleu.svg"], [data-lazy-src*="/Lecteur-de-billetsbleu.svg"]) { --ck-card-icon-scale: 1.328; --ck-card-icon-shift-x: 1.24%; --ck-card-icon-shift-y: -0.17%; }
img:is([src*="/lecteur-Qr-code-bleu.svg"], [data-lazy-src*="/lecteur-Qr-code-bleu.svg"]) { --ck-card-icon-scale: 1.137; --ck-card-icon-shift-x: -0.07%; --ck-card-icon-shift-y: -0.07%; }
img:is([src*="/lecture-rapidebleu.svg"], [data-lazy-src*="/lecture-rapidebleu.svg"]) { --ck-card-icon-scale: 1.293; --ck-card-icon-shift-x: 1.86%; --ck-card-icon-shift-y: -0.73%; }
img:is([src*="/Livraison-express-2.svg"], [data-lazy-src*="/Livraison-express-2.svg"]) { --ck-card-icon-scale: 1.087; --ck-card-icon-shift-x: 0.07%; --ck-card-icon-shift-y: -0.14%; }
img:is([src*="/Lumiere-bleu.svg"], [data-lazy-src*="/Lumiere-bleu.svg"]) { --ck-card-icon-scale: 1.094; --ck-card-icon-shift-x: 0.07%; --ck-card-icon-shift-y: -0.07%; }
img:is([src*="/machine_a_laver.svg"], [data-lazy-src*="/machine_a_laver.svg"]) { --ck-card-icon-scale: 1.481; --ck-card-icon-shift-x: -0.09%; --ck-card-icon-shift-y: 0%; }
img:is([src*="/marketingbleu.svg"], [data-lazy-src*="/marketingbleu.svg"]) { --ck-card-icon-scale: 1.032; --ck-card-icon-shift-x: -0.65%; --ck-card-icon-shift-y: 0.06%; }
img:is([src*="/Modulaire2.svg"], [data-lazy-src*="/Modulaire2.svg"]) { --ck-card-icon-scale: 1.149; --ck-card-icon-shift-x: -0.07%; --ck-card-icon-shift-y: -0.07%; }
img:is([src*="/modulairebleu.svg"], [data-lazy-src*="/modulairebleu.svg"]) { --ck-card-icon-scale: 0.913; --ck-card-icon-shift-x: 0.17%; --ck-card-icon-shift-y: -0.97%; }
img:is([src*="/Monnayeurbleu.svg"], [data-lazy-src*="/Monnayeurbleu.svg"]) { --ck-card-icon-scale: 1.488; --ck-card-icon-shift-x: 1.77%; --ck-card-icon-shift-y: -1.3%; }
img:is([src*="/Options.svg"], [data-lazy-src*="/Options.svg"]) { --ck-card-icon-scale: 1.201; --ck-card-icon-shift-x: -0.08%; --ck-card-icon-shift-y: 0.08%; }
img:is([src*="/paiement-a-linternational.svg"], [data-lazy-src*="/paiement-a-linternational.svg"]) { --ck-card-icon-scale: 1.288; --ck-card-icon-shift-x: -0.16%; --ck-card-icon-shift-y: -0.08%; }
img:is([src*="/paimentbleu.svg"], [data-lazy-src*="/paimentbleu.svg"]) { --ck-card-icon-scale: 1.196; --ck-card-icon-shift-x: 0.15%; --ck-card-icon-shift-y: 0.67%; }
img:is([src*="/Parfumeur.svg"], [data-lazy-src*="/Parfumeur.svg"]) { --ck-card-icon-scale: 1.19; --ck-card-icon-shift-x: -0.15%; --ck-card-icon-shift-y: -0.07%; }
img:is([src*="/personnalisationbleu.svg"], [data-lazy-src*="/personnalisationbleu.svg"]) { --ck-card-icon-scale: 1.196; --ck-card-icon-shift-x: 0.67%; --ck-card-icon-shift-y: -0.97%; }
img:is([src*="/Pieces-reconnaissables.svg"], [data-lazy-src*="/Pieces-reconnaissables.svg"]) { --ck-card-icon-scale: 1.228; --ck-card-icon-shift-x: -0.08%; --ck-card-icon-shift-y: -0.08%; }
img:is([src*="/Pilotage-par-la-centrale3_blue.svg"], [data-lazy-src*="/Pilotage-par-la-centrale3_blue.svg"]) { --ck-card-icon-scale: 1.079; --ck-card-icon-shift-x: -0.07%; --ck-card-icon-shift-y: -0.07%; }
img:is([src*="/polyvalent.svg"], [data-lazy-src*="/polyvalent.svg"]) { --ck-card-icon-scale: 1.141; --ck-card-icon-shift-x: -0.14%; --ck-card-icon-shift-y: -0.07%; }
img:is([src*="/protection.svg"], [data-lazy-src*="/protection.svg"]) { --ck-card-icon-scale: 1.098; --ck-card-icon-shift-x: -0.07%; --ck-card-icon-shift-y: -0.07%; }
img:is([src*="/protectionbleu.svg"], [data-lazy-src*="/protectionbleu.svg"]) { --ck-card-icon-scale: 1.28; --ck-card-icon-shift-x: -0.96%; --ck-card-icon-shift-y: 0.96%; }
img:is([src*="/puissance.svg"], [data-lazy-src*="/puissance.svg"]) { --ck-card-icon-scale: 1.105; --ck-card-icon-shift-x: 0.21%; --ck-card-icon-shift-y: 0.48%; }
img:is([src*="/refrigere.svg"], [data-lazy-src*="/refrigere.svg"]) { --ck-card-icon-scale: 1.157; --ck-card-icon-shift-x: -0.07%; --ck-card-icon-shift-y: -0.07%; }
img:is([src*="/sans-especebleu.svg"], [data-lazy-src*="/sans-especebleu.svg"]) { --ck-card-icon-scale: 1.265; --ck-card-icon-shift-x: 0.47%; --ck-card-icon-shift-y: 0.47%; }
img:is([src*="/securitebleu.svg"], [data-lazy-src*="/securitebleu.svg"]) { --ck-card-icon-scale: 1.147; --ck-card-icon-shift-x: 0.72%; --ck-card-icon-shift-y: -1%; }
img:is([src*="/souffleur.svg"], [data-lazy-src*="/souffleur.svg"]) { --ck-card-icon-scale: 1.127; --ck-card-icon-shift-x: 0.77%; --ck-card-icon-shift-y: 0.14%; }
img:is([src*="/Tension-dalimentation-bleu.svg"], [data-lazy-src*="/Tension-dalimentation-bleu.svg"]) { --ck-card-icon-scale: 1.347; --ck-card-icon-shift-x: 0.34%; --ck-card-icon-shift-y: 0.42%; }
img:is([src*="/Vitesse-acceptation.svg"], [data-lazy-src*="/Vitesse-acceptation.svg"]) { --ck-card-icon-scale: 1.21; --ck-card-icon-shift-x: -0.08%; --ck-card-icon-shift-y: -0.08%; }

/* Cadre optique commun pour les modèles qui étaient encore incohérents.
 *
 * Les coefficients ci-dessus compensent les marges transparentes propres à
 * chaque SVG. Ils agrandissent donc parfois la boîte CSS de l'image jusqu'à
 * 59px alors que le dessin visible vise bien 32px. Le cadre fixe ci-dessous
 * masque uniquement ces marges transparentes : les pictogrammes restent
 * entiers, centrés et ne peuvent plus chevaucher leurs libellés.
 *
 * Le template 20192 (Accessoires & consommables) reste géré par products-page.css.
 */
body
  .e-loop-item.product:is(
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"]
  )
  :is(
    .elementor-element-3870f72,
    .elementor-element-f84bca3,
    .elementor-element-65dd5a7,
    .elementor-element-4684545,
    .elementor-element-b5050db,
    .elementor-element-b2d1eae
  ) {
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  overflow: hidden !important;
}

body
  .e-loop-item.product:is(
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"]
  )
  :is(
    .elementor-element-3870f72,
    .elementor-element-f84bca3,
    .elementor-element-65dd5a7,
    .elementor-element-4684545,
    .elementor-element-b5050db,
    .elementor-element-b2d1eae
  )
  :is(.elementor-widget-container, a) {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Grilles d'icones — 2 cols, conteneur a gauche, cellules centrees.
 * align-items:start (pas stretch) : evite le recentrage vertical Elementor
 * qui decale la colonne droite quand un texte (ex. Securite) est plus long. */
body
  .e-loop-item.product:is(
    [data-elementor-id="20192"],
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"],
    .elementor-20192,
    .elementor-20379,
    .elementor-20393,
    .elementor-20408,
    .elementor-26210
  )
  :is(
    .elementor-element-3215a42,
    .elementor-element-1d0bb3d,
    .elementor-element-144a753
  ) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-auto-flow: row !important;
  align-items: start !important;
  align-content: start !important;
  justify-content: start !important;
  justify-self: start !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto 0 0 !important;
  margin-inline: 0 auto !important;
  padding: 2px 0 0 !important;
  box-sizing: border-box !important;
}

/* Univers CB / Integration (20408) : resserrer l'ecart horizontal entre
 * les 2 colonnes d'icones (retour utilisateur 2026-07-30). Autres templates
 * (ex. Peripheriques 20192/20379) conservent le gap 10px. */
body
  .e-loop-item.product:is(
    [data-elementor-id="20408"],
    .elementor-20408
  )
  :is(
    .elementor-element-3215a42,
    .elementor-element-1d0bb3d,
    .elementor-element-144a753
  ) {
  gap: 6px !important;
  column-gap: 6px !important;
  row-gap: 8px !important;
  width: max-content !important;
  max-width: 100% !important;
}

body
  .e-loop-item.product:is(
    [data-elementor-id="20192"],
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"],
    .elementor-20192,
    .elementor-20379,
    .elementor-20393,
    .elementor-20408,
    .elementor-26210
  )
  :is(
    .elementor-element-3215a42,
    .elementor-element-1d0bb3d,
    .elementor-element-144a753
  )
  > .e-con {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: start !important;
  align-content: flex-start !important;
  row-gap: 0 !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

/* Dans chaque cellule : titre + sous-texte centres sous l'icone. */
body
  .e-loop-item.product:is(
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"],
    .elementor-20379,
    .elementor-20393,
    .elementor-20408,
    .elementor-26210
  )
  :is(
    .elementor-element-3215a42,
    .elementor-element-1d0bb3d,
    .elementor-element-144a753
  )
  > .e-con
  > .elementor-widget,
body
  .e-loop-item.product:is(
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"],
    .elementor-20379,
    .elementor-20393,
    .elementor-20408,
    .elementor-26210
  )
  :is(
    .elementor-element-3215a42,
    .elementor-element-1d0bb3d,
    .elementor-element-144a753
  )
  > .e-con
  > .elementor-widget
  :is(.elementor-widget-container, p) {
  text-align: center !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  body
    .e-loop-item.product:is(
      [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"]
    )
    :is(
      .elementor-element-3215a42,
      .elementor-element-1d0bb3d,
      .elementor-element-144a753
    ) {
    gap: 8px !important;
  }
}

@media (max-width: 767px) {
  body
    .e-loop-item.product:is(
      [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"]
    )
    :is(
      .elementor-element-3215a42,
      .elementor-element-1d0bb3d,
      .elementor-element-144a753
    ) {
    gap: 6px !important;
    padding-top: 2px !important;
  }


  body
    .e-loop-item.product:is(
      [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"]
    )
    :is(
      .elementor-element-3870f72,
      .elementor-element-f84bca3,
      .elementor-element-65dd5a7,
      .elementor-element-4684545,
      .elementor-element-b5050db,
      .elementor-element-b2d1eae
    ) {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  body
    .e-loop-item.product:is(
      [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"]
    )
    :is(
      .elementor-element-3870f72,
      .elementor-element-f84bca3,
      .elementor-element-65dd5a7,
      .elementor-element-4684545,
      .elementor-element-b5050db,
      .elementor-element-b2d1eae
    )
    :is(.elementor-widget-container, a) {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  body
    .e-loop-item.product:is(
      [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"]
    )
    :is(
      .elementor-element-3870f72,
      .elementor-element-f84bca3,
      .elementor-element-65dd5a7,
      .elementor-element-4684545,
      .elementor-element-b5050db,
      .elementor-element-b2d1eae
    )
    img:is([src*=".svg"], [data-lazy-src*=".svg"]) {
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
  }
}

/* =====================================================================
 * Respiration des cartes produit — retour utilisateur 2026-07-31.
 * Portee : tous les gabarits de carte produit (20192, 20379, 20393,
 * 20408, 26210), donc toutes les pages catalogue.
 *
 * 1. Rythme vertical d'une case d'icone : icone / titre / valeur.
 *    Le titre suit maintenant directement le cadre de l'icone, puis la
 *    valeur conserve 2 px de respiration.
 * 2. Grille d'icones centree dans la colonne de droite.
 * 3. Bouton « Voir les details » centre a tous les breakpoints (il etait
 *    cale a gauche au-dessus de 1024 px) et marges internes reequilibrees
 *    (14/40 -> 20/46 ; l'icone ronde reste posee en absolu a droite).
 * 4. Plateau photo : la colonne image valait 1,55fr et la photo, en
 *    object-fit contain, flottait a 70-110 px du bloc texte selon le
 *    format. Colonnes egales + object-position 75% : l'ecart suit
 *    desormais la forme reelle de chaque photo.
 *
 * Mesure sur les 48 cartes de /nos-produits/ : ecart photo/texte
 * 78-121 px -> 14-50 px (moyenne 32), bouton a 0 px du centre.
 * ===================================================================== */

/* --- 1. Rythme vertical icone -> titre -> valeur --------------------- */
html
  body
  .e-loop-item.product:is(
    [data-elementor-id="20192"],
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"],
    .elementor-20192,
    .elementor-20379,
    .elementor-20393,
    .elementor-20408,
    .elementor-26210
  )
  :is(
    .elementor-element-3215a42,
    .elementor-element-1d0bb3d,
    .elementor-element-144a753
  )
  > .e-con
  > .elementor-widget.elementor-widget-image {
  margin: 0 !important;
}

html
  body
  .e-loop-item.product:is(
    [data-elementor-id="20192"],
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"],
    .elementor-20192,
    .elementor-20379,
    .elementor-20393,
    .elementor-20408,
    .elementor-26210
  )
  :is(
    .elementor-element-3215a42,
    .elementor-element-1d0bb3d,
    .elementor-element-144a753
  )
  > .e-con
  > :nth-child(2) {
  margin: 0 !important;
}

html
  body
  .e-loop-item.product:is(
    [data-elementor-id="20192"],
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"],
    .elementor-20192,
    .elementor-20379,
    .elementor-20393,
    .elementor-20408,
    .elementor-26210
  )
  :is(
    .elementor-element-3215a42,
    .elementor-element-1d0bb3d,
    .elementor-element-144a753
  )
  > .e-con
  > :nth-child(3) {
  margin: 2px 0 0 !important;
}

/* --- 2. Grille d'icones : air entre les lignes + bloc centre --------- */
html
  body
  .e-loop-item.product:is(
    [data-elementor-id="20192"],
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"],
    .elementor-20192,
    .elementor-20379,
    .elementor-20393,
    .elementor-20408,
    .elementor-26210
  )
  .elementor-element-c42594e {
  gap: 8px !important;
  row-gap: 8px !important;
  column-gap: 8px !important;
}

html
  body
  .e-loop-item.product:is(
    [data-elementor-id="20192"],
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"],
    .elementor-20192,
    .elementor-20379,
    .elementor-20393,
    .elementor-20408,
    .elementor-26210
  )
  :is(
    .elementor-element-3215a42,
    .elementor-element-1d0bb3d,
    .elementor-element-144a753
  ) {
  margin-inline: 0 !important;
  padding-top: 0 !important;
}

/* --- 3. CTA « Voir les details » : centre + marges internes ---------- */
html
  body
  .e-loop-item.product:is(
    [data-elementor-id="20192"],
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"],
    .elementor-20192,
    .elementor-20379,
    .elementor-20393,
    .elementor-20408,
    .elementor-26210
  )
  .elementor-element-56c304f {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-top: 4px !important;
  padding: 0 !important;
}

html
  body
  .e-loop-item.product:is(
    [data-elementor-id="20192"],
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"],
    .elementor-20192,
    .elementor-20379,
    .elementor-20393,
    .elementor-20408,
    .elementor-26210
  )
  .elementor-element-56c304f
  > .elementor-element-dea00a4,
html
  body
  .e-loop-item.product:is(
    [data-elementor-id="20192"],
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"],
    .elementor-20192,
    .elementor-20379,
    .elementor-20393,
    .elementor-20408,
    .elementor-26210
  )
  .elementor-element-56c304f
  .elementor-widget-container {
  display: flex !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html
  body
  .e-loop-item.product:is(
    [data-elementor-id="20192"],
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"],
    .elementor-20192,
    .elementor-20379,
    .elementor-20393,
    .elementor-20408,
    .elementor-26210
  )
  a.eael-creative-button.eael-cb-icon-position-right {
  margin: 0 !important;
  padding: 0 46px 0 20px !important;
}

/* --- 4. Plateau photo : rapprocher la photo du bloc texte ------------ */
@media (min-width: 1025px) {
  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20192"],
      [data-elementor-id="20379"],
      [data-elementor-id="20393"],
      [data-elementor-id="20408"],
      [data-elementor-id="26210"],
      .elementor-20192,
      .elementor-20379,
      .elementor-20393,
      .elementor-20408,
      .elementor-26210
    )
    > .elementor-element-2136fca {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 14px !important;
  }

  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20192"],
      [data-elementor-id="20379"],
      [data-elementor-id="20393"],
      [data-elementor-id="20408"],
      [data-elementor-id="26210"],
      .elementor-20192,
      .elementor-20379,
      .elementor-20393,
      .elementor-20408,
      .elementor-26210
    )
    .elementor-element-99c298f
    img {
    object-position: 75% center !important;
  }
}

/* =====================================================================
 * Nos produits — rangée Distributeur / Casier Libre Service
 *
 * Les deux produits partagent le loop template 20192, mais leur contenu
 * n'a pas la même hauteur. Le cadre, le départ des pictogrammes et le CTA
 * sont donc calés sur un contrat commun, uniquement pour cette rangée.
 * Le mobile/tablette conserve l'empilement validé et ses retours de titre.
 * ===================================================================== */
@media (min-width: 1025px) {
  html
    body.page-id-22316
    .elementor-loop-container:has(> .post-26393):has(> .post-25825) {
    grid-auto-rows: 1fr !important;
  }

  html
    body.page-id-22316
    .elementor-loop-container:has(> .post-26393):has(> .post-25825)
    > .e-loop-item.product:is(.post-26393, .post-25825) {
    height: 100% !important;
  }

  html
    body.page-id-22316
    .elementor-loop-container:has(> .post-26393):has(> .post-25825)
    > .e-loop-item.product:is(.post-26393, .post-25825)
    > .elementor-element-2136fca {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    height: 422px !important;
    min-height: 422px !important;
  }

  html
    body.page-id-22316
    .elementor-loop-container:has(> .post-26393):has(> .post-25825)
    > .e-loop-item.product:is(.post-26393, .post-25825)
    .elementor-element-127ab75 {
    align-self: stretch !important;
    height: 422px !important;
    min-height: 422px !important;
  }

  html
    body.page-id-22316
    .elementor-loop-container:has(> .post-26393):has(> .post-25825)
    > .e-loop-item.product:is(.post-26393, .post-25825)
    .elementor-element-c42594e {
    position: relative !important;
    flex: 0 0 calc(100% - 96.3px) !important;
    height: calc(100% - 96.3px) !important;
    min-height: 0 !important;
  }

  html
    body.page-id-22316
    .elementor-loop-container:has(> .post-26393):has(> .post-25825)
    > .e-loop-item.product:is(.post-26393, .post-25825)
    .elementor-element-56c304f {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    margin-block: 0 !important;
  }

  /* Casier n'a pas le sous-titre "Fixation murale" : on réserve la même
     hauteur d'en-tête sans créer de pictogramme ni de contenu artificiel. */
  html
    body.page-id-22316
    .elementor-loop-container:has(> .post-26393):has(> .post-25825)
    > .e-loop-item.product.post-25825
    .elementor-element-c42594e {
    margin-top: 47.5px !important;
  }

  /* Le titre contient un <br> éditorial. On le restitue sur une ligne à
     24 px sur desktop ; le texte reste libre de revenir à la ligne. */
  html
    body.page-id-22316
    .e-loop-item.product.post-26393
    .elementor-element-89511c0
    .elementor-heading-title {
    font-size: 0 !important;
  }

  html
    body.page-id-22316
    .e-loop-item.product.post-26393
    .elementor-element-89511c0
    .elementor-heading-title::before {
    content: "Distributeur de produit";
    font-size: 24px;
  }

  html
    body.page-id-22316
    .e-loop-item.product.post-26393
    .elementor-element-89511c0
    .elementor-heading-title br {
    display: none !important;
  }
}

/* Tablette : seuls 20393 / 20408 / 26210 restent sur deux colonnes,
 * 20192 passe deja en pleine largeur (product-cards-tablet.css). */
@media (min-width: 768px) and (max-width: 1024px) {
  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20393"],
      [data-elementor-id="20408"],
      [data-elementor-id="26210"],
      .elementor-20393,
      .elementor-20408,
      .elementor-26210
    )
    > .elementor-element-2136fca {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 14px !important;
  }

  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20393"],
      [data-elementor-id="20408"],
      [data-elementor-id="26210"],
      .elementor-20393,
      .elementor-20408,
      .elementor-26210
    )
    .elementor-element-99c298f
    img {
    object-position: 75% center !important;
  }
}

/* Mobile : cartes en pleine largeur, rythme legerement resserre. */
@media (max-width: 767px) {
  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20192"],
      [data-elementor-id="20379"],
      [data-elementor-id="20393"],
      [data-elementor-id="20408"],
      [data-elementor-id="26210"],
      .elementor-20192,
      .elementor-20379,
      .elementor-20393,
      .elementor-20408,
      .elementor-26210
    )
    .elementor-element-c42594e {
    gap: 8px !important;
    row-gap: 8px !important;
    column-gap: 8px !important;
  }

  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20192"],
      [data-elementor-id="20379"],
      [data-elementor-id="20393"],
      [data-elementor-id="20408"],
      [data-elementor-id="26210"],
      .elementor-20192,
      .elementor-20379,
      .elementor-20393,
      .elementor-20408,
      .elementor-26210
    )
    :is(
      .elementor-element-3215a42,
      .elementor-element-1d0bb3d,
      .elementor-element-144a753
    )
    > .e-con
    > :nth-child(2) {
    /* Meme rythme serre sur tablette : le titre suit le cadre de l'icone. */
    margin: 0 !important;
  }
}

/* =====================================================================
 * Grille catalogue — espace entre cartes / rangées (2026-07-31).
 * Cible : même respiration sur tous les gabarits, proportionnée au format.
 * Mesure live /nos-produits/ @1440 avant correctif :
 *   Bornes/Pupitres 20192 : 36×20 OK
 *   Intégration 20408/26210 : 36×10 (col trop serrée)
 *   Accessoires (page-id-22316) : 56×24 + icônes 12 px + cols 1.75fr
 * ===================================================================== */
html body {
  --ck-card-grid-row-gap: clamp(24px, 2.5vw, 36px);
  --ck-card-grid-col-gap: 20px;
}

html
  body
  .elementor-loop-container:has(
    > .e-loop-item.product:is(
      [data-elementor-id="20192"],
      [data-elementor-id="20379"],
      [data-elementor-id="20393"],
      [data-elementor-id="20408"],
      [data-elementor-id="26210"],
      .elementor-20192,
      .elementor-20379,
      .elementor-20393,
      .elementor-20408,
      .elementor-26210
    )
  ) {
  align-items: stretch !important;
  grid-auto-rows: auto !important;
  gap: var(--ck-card-grid-row-gap) var(--ck-card-grid-col-gap) !important;
  row-gap: var(--ck-card-grid-row-gap) !important;
  column-gap: var(--ck-card-grid-col-gap) !important;
}

html
  body
  .elementor-loop-container
  > .e-loop-item.product:is(
    [data-elementor-id="20192"],
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"],
    .elementor-20192,
    .elementor-20379,
    .elementor-20393,
    .elementor-20408,
    .elementor-26210
  ) {
  /* Ne pas forcer height:100% : avec overflow:clip (products-page) cela
   * coupe la derniere carte d'une grille impaire (ex. STARTBOX Evo Drive). */
  height: auto !important;
  min-height: 0 !important;
  align-self: stretch !important;
  margin: 0 !important;
  overflow: visible !important;
}

html
  body
  .elementor-loop-container
  > .e-loop-item.product:is(
    [data-elementor-id="20192"],
    [data-elementor-id="20379"],
    [data-elementor-id="20393"],
    [data-elementor-id="20408"],
    [data-elementor-id="26210"],
    .elementor-20192,
    .elementor-20379,
    .elementor-20393,
    .elementor-20408,
    .elementor-26210
  )
  > .elementor-element-2136fca {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Nos produits Accessoires : annuler 56×24 / 1.75fr / icônes 12 px. */
html
  body.page-id-22316
  .elementor-loop-container:has(> .e-loop-item.product) {
  gap: var(--ck-card-grid-row-gap) var(--ck-card-grid-col-gap) !important;
  row-gap: var(--ck-card-grid-row-gap) !important;
  column-gap: var(--ck-card-grid-col-gap) !important;
}

/* Desktop/tablette seulement : ne pas forcer 2 cols photo/texte en mobile. */
@media (min-width: 768px) {
@media (min-width: 768px) {
  html
    body.page-id-22316
    .e-loop-item.product[data-elementor-id="20192"]
    > .elementor-element-2136fca,
  html
    body.page-id-22316
    .e-loop-item.product.elementor-20192
    > .elementor-element-2136fca {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 14px !important;
  }
}
}

html
  body.page-id-22316
  .e-loop-item.product
  .elementor-element-c42594e,
html
  body
  .e-loop-item.product[data-elementor-id="20192"]
  .elementor-element-c42594e {
  gap: 8px !important;
  row-gap: 8px !important;
  column-gap: 8px !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  html body {
    --ck-card-grid-row-gap: clamp(20px, 2.2vw, 28px);
    --ck-card-grid-col-gap: 16px;
  }
}

@media (max-width: 767px) {
  html body {
    --ck-card-grid-row-gap: 24px;
    --ck-card-grid-col-gap: 0px;
  }

  html
    body
    .elementor-loop-container:has(
      > .e-loop-item.product:is(
        [data-elementor-id="20192"],
        [data-elementor-id="20379"],
        [data-elementor-id="20393"],
        [data-elementor-id="20408"],
        [data-elementor-id="26210"],
        .elementor-20192,
        .elementor-20379,
        .elementor-20393,
        .elementor-20408,
        .elementor-26210
      )
    ) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    row-gap: 24px !important;
    column-gap: 0 !important;
  }

  /* Mobile : restaurer le format centre d'avant (ne pas appliquer le desktop gauche). */
  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20192"],
      [data-elementor-id="20379"],
      [data-elementor-id="20393"],
      [data-elementor-id="20408"],
      [data-elementor-id="26210"],
      .elementor-20192,
      .elementor-20379,
      .elementor-20393,
      .elementor-20408,
      .elementor-26210
    )
    :is(
      .elementor-element-3215a42,
      .elementor-element-1d0bb3d,
      .elementor-element-144a753
    )
    > .e-con {
    justify-items: center !important;
    text-align: center !important;
  }

  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20192"],
      [data-elementor-id="20379"],
      [data-elementor-id="20393"],
      [data-elementor-id="20408"],
      [data-elementor-id="26210"],
      .elementor-20192,
      .elementor-20379,
      .elementor-20393,
      .elementor-20408,
      .elementor-26210
    )
    :is(
      .elementor-element-3870f72,
      .elementor-element-f84bca3,
      .elementor-element-65dd5a7,
      .elementor-element-4684545,
      .elementor-element-b5050db,
      .elementor-element-b2d1eae
    ),
  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20192"],
      [data-elementor-id="20379"],
      [data-elementor-id="20393"],
      [data-elementor-id="20408"],
      [data-elementor-id="26210"],
      .elementor-20192,
      .elementor-20379,
      .elementor-20393,
      .elementor-20408,
      .elementor-26210
    )
    :is(
      .elementor-element-3870f72,
      .elementor-element-f84bca3,
      .elementor-element-65dd5a7,
      .elementor-element-4684545,
      .elementor-element-b5050db,
      .elementor-element-b2d1eae
    )
    :is(.elementor-widget-container, a) {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20192"],
      [data-elementor-id="20379"],
      [data-elementor-id="20393"],
      [data-elementor-id="20408"],
      [data-elementor-id="26210"],
      .elementor-20192,
      .elementor-20379,
      .elementor-20393,
      .elementor-20408,
      .elementor-26210
    )
    :is(
      .elementor-element-3215a42,
      .elementor-element-1d0bb3d,
      .elementor-element-144a753
    )
    > .e-con
    > .elementor-widget {
    text-align: center !important;
  }

  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20192"],
      [data-elementor-id="20379"],
      [data-elementor-id="20393"],
      [data-elementor-id="20408"],
      [data-elementor-id="26210"],
      .elementor-20192,
      .elementor-20379,
      .elementor-20393,
      .elementor-20408,
      .elementor-26210
    )
    :is(
      .elementor-element-3215a42,
      .elementor-element-1d0bb3d,
      .elementor-element-144a753
    )
    > .e-con
    > .elementor-widget
    :is(.elementor-widget-container, p) {
    text-align: center !important;
  }

  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20192"],
      [data-elementor-id="20379"],
      [data-elementor-id="20393"],
      [data-elementor-id="20408"],
      [data-elementor-id="26210"],
      .elementor-20192,
      .elementor-20379,
      .elementor-20393,
      .elementor-20408,
      .elementor-26210
    )
    .elementor-element-89511c0,
  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20192"],
      [data-elementor-id="20379"],
      [data-elementor-id="20393"],
      [data-elementor-id="20408"],
      [data-elementor-id="26210"],
      .elementor-20192,
      .elementor-20379,
      .elementor-20393,
      .elementor-20408,
      .elementor-26210
    )
    .elementor-element-89511c0
    :is(h1, h2, h3, .product_title) {
    text-align: center !important;
  }

  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20192"],
      [data-elementor-id="20379"],
      [data-elementor-id="20393"],
      [data-elementor-id="20408"],
      [data-elementor-id="26210"],
      .elementor-20192,
      .elementor-20379,
      .elementor-20393,
      .elementor-20408,
      .elementor-26210
    )
    .elementor-element-56c304f,
  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20192"],
      [data-elementor-id="20379"],
      [data-elementor-id="20393"],
      [data-elementor-id="20408"],
      [data-elementor-id="26210"],
      .elementor-20192,
      .elementor-20379,
      .elementor-20393,
      .elementor-20408,
      .elementor-26210
    )
    .elementor-element-56c304f
    .elementor-widget-container {
    justify-content: center !important;
  }

  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20192"],
      [data-elementor-id="20379"],
      [data-elementor-id="20393"],
      [data-elementor-id="20408"],
      [data-elementor-id="26210"],
      .elementor-20192,
      .elementor-20379,
      .elementor-20393,
      .elementor-20408,
      .elementor-26210
    )
    a.eael-creative-button.eael-cb-icon-position-right {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20192"],
      [data-elementor-id="20379"],
      [data-elementor-id="20393"],
      [data-elementor-id="20408"],
      [data-elementor-id="26210"],
      .elementor-20192,
      .elementor-20379,
      .elementor-20393,
      .elementor-20408,
      .elementor-26210
    )
    > .elementor-element-2136fca {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* =====================================================================
 * Pictogrammes mobile — mise a niveau de taille (retour utilisateur).
 *
 * Mesure sur /nos-produits/ @390px avant correctif :
 *   20379/20393/20408/26210 : cadre 32 / image 36 -> dessin visible 29 px
 *   20192 (24 cartes sur 48) : cadre 34 / image 30 SANS compensation
 *     optique -> dessin visible 16 a 20 px, soit ~35 % de moins que les
 *     autres gabarits pour un meme picto.
 * Le mobile etait donc plus petit que le bureau (dessin 32 px) alors que
 * la cellule fait la meme largeur (144 px mobile contre 147 px bureau).
 *
 * Nouvelle cible mobile : cadre 44 px / image 50 px -> dessin visible
 * ~40 px sur TOUS les gabarits (retour utilisateur : 40/46 restait trop
 * petit). Verifie sur les 48 cartes : aucun picto rogne, aucun debordement
 * horizontal, +36 px de hauteur par carte. L'ecart picto -> libelle passe
 * de 8 a 4 px, le libelle flottait sous un pictogramme plus grand.
 * Le bureau et la tablette ne changent pas.
 * ===================================================================== */
@media (max-width: 767px) {
  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20192"],
      .elementor-20192
    )
    :is(
      .elementor-element-3870f72,
      .elementor-element-f84bca3,
      .elementor-element-65dd5a7,
      .elementor-element-4684545,
      .elementor-element-b5050db,
      .elementor-element-b2d1eae
    ) {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    overflow: hidden !important;
  }

  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20192"],
      .elementor-20192
    )
    :is(
      .elementor-element-3870f72,
      .elementor-element-f84bca3,
      .elementor-element-65dd5a7,
      .elementor-element-4684545,
      .elementor-element-b5050db,
      .elementor-element-b2d1eae
    )
    :is(.elementor-widget-container, a) {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    overflow: hidden !important;
  }

  /* Le gabarit 20192 etait le seul a ne pas recevoir la compensation des
   * marges transparentes de chaque SVG (transform: none dans
   * products-page.css). Sans elle, agrandir l'image ne suffit pas : le
   * dessin reste 30 % plus petit que sur les autres cartes. Les
   * coefficients par fichier sont deja definis plus haut dans ce fichier,
   * on se contente de les activer, en mobile uniquement. */
  html
    body
    .e-loop-item.product:is(
      [data-elementor-id="20192"],
      .elementor-20192
    )
    :is(
      .elementor-element-3870f72,
      .elementor-element-f84bca3,
      .elementor-element-65dd5a7,
      .elementor-element-4684545,
      .elementor-element-b5050db,
      .elementor-element-b2d1eae
    )
    img {
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: translate(
        var(--ck-card-icon-shift-x, 0%),
        var(--ck-card-icon-shift-y, 0%)
      )
      scale(var(--ck-card-icon-scale, 1.2)) !important;
    transform-origin: center center !important;
  }
}

/* La section Accessoires de /nos-produits/ porte des selecteurs Elementor
 * plus specifiques que les autres grilles. On neutralise explicitement son
 * ancien masque 34 px avant la regle commune ci-dessous. */
html body.page-id-22316 .elementor.elementor-22316 .elementor-element-02e8802
  .e-loop-item.product[data-elementor-id="20192"]
  :is(
    .elementor-element-3870f72, .elementor-element-f84bca3,
    .elementor-element-65dd5a7, .elementor-element-4684545,
    .elementor-element-b5050db, .elementor-element-b2d1eae
  ),
html body.page-id-22316 .elementor.elementor-22316 .elementor-element-02e8802
  .e-loop-item.product[data-elementor-id="20192"]
  :is(
    .elementor-element-3870f72, .elementor-element-f84bca3,
    .elementor-element-65dd5a7, .elementor-element-4684545,
    .elementor-element-b5050db, .elementor-element-b2d1eae
  ) :is(.elementor-widget-container, a) {
  flex-basis: 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  overflow: visible !important;
}

@media (max-width: 767px) {
  html body.page-id-22316 .elementor.elementor-22316 .elementor-element-02e8802
    .e-loop-item.product[data-elementor-id="20192"]
    :is(
      .elementor-element-3870f72, .elementor-element-f84bca3,
      .elementor-element-65dd5a7, .elementor-element-4684545,
      .elementor-element-b5050db, .elementor-element-b2d1eae
    ),
  html body.page-id-22316 .elementor.elementor-22316 .elementor-element-02e8802
    .e-loop-item.product[data-elementor-id="20192"]
    :is(
      .elementor-element-3870f72, .elementor-element-f84bca3,
      .elementor-element-65dd5a7, .elementor-element-4684545,
      .elementor-element-b5050db, .elementor-element-b2d1eae
    ) :is(.elementor-widget-container, a) {
    flex-basis: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    overflow: visible !important;
  }
}

/* Application finale du cadre anti-rognage, apres les variantes historiques. */
html body .e-loop-item.product:is(
  [data-elementor-id="20192"], [data-elementor-id="20379"],
  [data-elementor-id="20393"], [data-elementor-id="20408"],
  [data-elementor-id="26210"], .elementor-20192, .elementor-20379,
  .elementor-20393, .elementor-20408, .elementor-26210
) :is(
  .elementor-element-3870f72, .elementor-element-f84bca3,
  .elementor-element-65dd5a7, .elementor-element-4684545,
  .elementor-element-b5050db, .elementor-element-b2d1eae
),
html body .e-loop-item.product:is(
  [data-elementor-id="20192"], [data-elementor-id="20379"],
  [data-elementor-id="20393"], [data-elementor-id="20408"],
  [data-elementor-id="26210"], .elementor-20192, .elementor-20379,
  .elementor-20393, .elementor-20408, .elementor-26210
) :is(
  .elementor-element-3870f72, .elementor-element-f84bca3,
  .elementor-element-65dd5a7, .elementor-element-4684545,
  .elementor-element-b5050db, .elementor-element-b2d1eae
) :is(.elementor-widget-container, a) {
  flex-basis: 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  overflow: visible !important;
}

@media (max-width: 767px) {
  html body .e-loop-item.product:is(
    [data-elementor-id="20192"], [data-elementor-id="20379"],
    [data-elementor-id="20393"], [data-elementor-id="20408"],
    [data-elementor-id="26210"], .elementor-20192, .elementor-20379,
    .elementor-20393, .elementor-20408, .elementor-26210
  ) :is(
    .elementor-element-3870f72, .elementor-element-f84bca3,
    .elementor-element-65dd5a7, .elementor-element-4684545,
    .elementor-element-b5050db, .elementor-element-b2d1eae
  ),
  html body .e-loop-item.product:is(
    [data-elementor-id="20192"], [data-elementor-id="20379"],
    [data-elementor-id="20393"], [data-elementor-id="20408"],
    [data-elementor-id="26210"], .elementor-20192, .elementor-20379,
    .elementor-20393, .elementor-20408, .elementor-26210
  ) :is(
    .elementor-element-3870f72, .elementor-element-f84bca3,
    .elementor-element-65dd5a7, .elementor-element-4684545,
    .elementor-element-b5050db, .elementor-element-b2d1eae
  ) :is(.elementor-widget-container, a) {
    flex-basis: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    overflow: visible !important;
  }
}

/* =====================================================================
 * 2026-08-04 — Pictogrammes mobile : taille reduite + respiration.
 *
 * Retour utilisateur : les pictos poses le 2026-08-03 (cadre 44 / image
 * 50 -> dessin 40 px) sont trop gros et le libelle est colle dessous.
 * Mesure prod @390px avant correctif (encre reelle du SVG via canvas) :
 *   dessin 40 px sur les 4 gabarits, ecart encre -> libelle 0 a 2 px.
 *
 * Nouvelle cible : cadre 36 / image 40 -> plus grande dimension du
 * dessin = 32 px sur TOUS les pictos (la compensation optique par
 * fichier, deja definie plus haut, egalise les marges transparentes),
 * et 10 px de gouttiere entre le dessin et son libelle.
 * Mesure apres correctif : dessin 32 px partout (les valeurs plus
 * basses correspondent a des pictos plus larges que hauts, dont la
 * largeur fait bien 32), ecart encre -> libelle 10 a 15 px, aucun
 * debordement horizontal. Reference de rythme : cklaundry (~10 px).
 *
 * Le cadre reste en overflow visible : l'image compensee depasse le
 * cadre de quelques pixels transparents, la gouttiere est donc portee
 * par le row-gap du conteneur picto+libelle, pas par une marge.
 * Le bureau et la tablette ne changent pas.
 * ===================================================================== */
@media (max-width: 767px) {
  html body .e-loop-item.product.product:is(
    [data-elementor-id="20192"], [data-elementor-id="20379"],
    [data-elementor-id="20393"], [data-elementor-id="20408"],
    [data-elementor-id="26210"], .elementor-20192, .elementor-20379,
    .elementor-20393, .elementor-20408, .elementor-26210
  ) :is(
    .elementor-element-3870f72, .elementor-element-f84bca3,
    .elementor-element-65dd5a7, .elementor-element-4684545,
    .elementor-element-b5050db, .elementor-element-b2d1eae
  ),
  html body .e-loop-item.product.product:is(
    [data-elementor-id="20192"], [data-elementor-id="20379"],
    [data-elementor-id="20393"], [data-elementor-id="20408"],
    [data-elementor-id="26210"], .elementor-20192, .elementor-20379,
    .elementor-20393, .elementor-20408, .elementor-26210
  ) :is(
    .elementor-element-3870f72, .elementor-element-f84bca3,
    .elementor-element-65dd5a7, .elementor-element-4684545,
    .elementor-element-b5050db, .elementor-element-b2d1eae
  ) :is(.elementor-widget-container, a) {
    flex-basis: 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    overflow: visible !important;
  }

  html body .e-loop-item.product.product:is(
    [data-elementor-id="20192"], [data-elementor-id="20379"],
    [data-elementor-id="20393"], [data-elementor-id="20408"],
    [data-elementor-id="26210"], .elementor-20192, .elementor-20379,
    .elementor-20393, .elementor-20408, .elementor-26210
  ) :is(
    .elementor-element-3870f72, .elementor-element-f84bca3,
    .elementor-element-65dd5a7, .elementor-element-4684545,
    .elementor-element-b5050db, .elementor-element-b2d1eae
  ) .elementor-widget-container img {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* Gouttiere picto -> libelle : le conteneur qui empile la cellule du
   * pictogramme et son intitule (identifiant Elementor variable, d'ou
   * le :has). row-gap seul, pour ne pas rouvrir la colonne. */
  html body .e-loop-item.product:is(
    [data-elementor-id="20192"], [data-elementor-id="20379"],
    [data-elementor-id="20393"], [data-elementor-id="20408"],
    [data-elementor-id="26210"], .elementor-20192, .elementor-20379,
    .elementor-20393, .elementor-20408, .elementor-26210
  ) .e-con:has(> :is(
    .elementor-element-3870f72, .elementor-element-f84bca3,
    .elementor-element-65dd5a7, .elementor-element-4684545,
    .elementor-element-b5050db, .elementor-element-b2d1eae
  )) {
    row-gap: 7px !important;
  }
}

/* Rapprocher le sous-titre de son titre (retour utilisateur 2026-08-04).
 * Le row-gap de 10 px ci-dessus vaut aussi entre le titre et le texte,
 * qui se retrouvait plus loin de son titre que le titre ne l'est du
 * pictogramme : les trois elements ne se lisaient plus comme un groupe.
 * La 3e cellule (le sous-titre) remonte de 6 px -> picto 10 / texte 4.
 * Cible par rang et non par identifiant : les ids Elementor du titre et
 * du sous-titre changent a chaque cellule. */
@media (max-width: 767px) {
  html body .e-loop-item.product:is(
    [data-elementor-id="20192"], [data-elementor-id="20379"],
    [data-elementor-id="20393"], [data-elementor-id="20408"],
    [data-elementor-id="26210"], .elementor-20192, .elementor-20379,
    .elementor-20393, .elementor-20408, .elementor-26210
  ) .e-con:has(> :is(
    .elementor-element-3870f72, .elementor-element-f84bca3,
    .elementor-element-65dd5a7, .elementor-element-4684545,
    .elementor-element-b5050db, .elementor-element-b2d1eae
  )) > :nth-child(3) {
    margin-top: -3px !important;
  }
}