/* ========================================================================== CK Card System — respiration du titre de carte (CKLaundry) -------------------------------------------------------------------------- MESURE AVANT (moyenne-et-grande-laverie, 1280 px) : titre "T.A.M" : font-size 23px, line-height 23px, margin-bottom 0 sous-ligne suivante : demarre a -6 px du bas du titre -> elles se chevauchent visuellement. La ligne "Tactile / Applique / Moyenne" etait donc collee au nom du produit. Ce fichier ne fait QUE cela. Une version precedente imposait aussi une zone image de hauteur fixe : les mesures etaient bonnes (une seule taille au lieu de quatre) mais le rendu etait moins beau, les images se retrouvant retrecies dans du vide. Elle est conservee en .desactive-20260806. PORTEE : .elementor-element-89511c0 est le bloc du titre produit, commun aux modeles de boucle. Identifiant de TEMPLATE, stable — pas un identifiant de produit, qui cesserait de matcher des qu'on en ajoute un. ========================================================================== */ .e-loop-item.product { --ckl-card-title-gap: 12px; } /* Espace sous le nom du produit. */ html body .elementor.e-loop-item.product .elementor-element-89511c0 { margin-bottom: var(--ckl-card-title-gap) !important; } /* Interligne un peu ouverte : a 23px pour 23px de police, les jambages des majuscules accentuees touchaient la ligne suivante. */ html body .elementor.e-loop-item.product .elementor-element-89511c0 .product_title { line-height: 1.25 !important; margin-bottom: 0 !important; } @media (max-width: 767px) { .e-loop-item.product { --ckl-card-title-gap: 10px; } } /* ========================================================================== PICTOS — une seule regle pour tous les gabarits (2026-08-07) -------------------------------------------------------------------------- MESURE AVANT, page /nos-produits/ a 1280 px, 58 cartes, 3 gabarits : 3605 (42 cartes) : pictos 40 px, tous identiques 8407 (15 cartes) : 42 / 44 / 49 / 56 px 6877 (1 carte) : 42 / 45 / 46 / 49 px Preuve : afficheur-tactilebleu.svg, MEME fichier, meme boite de 40 px, rendu 40 px sur 3605 et 49 px sur 8407. DEUX CAUSES, toutes deux traitees ici : 1. Le bloc de normalisation existant est scope au seul gabarit 3605 — il vit dans le CSS additionnel (post custom_css 171), pas dans le plugin. Les six autres gabarits ne recevaient rien. 2. product-card-icons-normalized.css se contredisait : l. 59-94 impose 40 px a l'IMAGE, l'ancien bloc 188-215 imposait 34 px + overflow:hidden. Corrige le 2026-08-07 (3e voie) : case 46 px, overflow:visible. CE QUE FAIT CETTE COUCHE Case de hauteur constante, boite d'image constante, aucun rognage. Le calibrage optique par SVG (--ck-card-icon-scale / -shift-x / -shift-y, defini dans product-card-icons-normalized.css) agit sur le DESSIN a l'interieur de la boite : il egalise l'encre sans deplacer les voisins. POURQUOI :has(img[src*=".svg"]) ET PAS .elementor-widget-image SEUL Sur le gabarit 3605, la photo produit est elle aussi dans un widget Image (22 cartes mesurees, 436 a 483 px). Un selecteur nu la reduirait a 40 px. Le SVG est le seul discriminant fiable : les pictos sont en .svg, les photos produit en .webp. SPECIFICITE — (0,5,3), volontairement au-dessus des deux concurrents : product-card-icons-normalized.css (ex-l.188) (0,4,2) conteneur CSS additionnel (post 171), bloc 3605 (0,4,2) tailles Le reset de calib (--ck-card-icon-scale:1 + transform:none) du CSS 171 a ete retire le 2026-08-07 (3e voie) : le scale/shift optique reprend. Aucun hachage de widget, aucun identifiant de produit : la regle couvre les 7 gabarits de CKLaundry, et tout gabarit ajoute plus tard. ========================================================================== */ .e-loop-item.product { --ckl-icon-cell: 52px; /* la case : ce qui fixe le rythme vertical */ --ckl-icon-box: 48px; /* la boite de l'image, donc l'encre visible */ --ckl-icon-label-gap: 2px; } /* 1. La case. Hauteur constante, jamais de rognage. */ html body .e-loop-item.product[data-elementor-id] .elementor-widget-image:has(img[src*=".svg"]) { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: var(--ckl-icon-cell) !important; min-height: var(--ckl-icon-cell) !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; transform: none !important; } html body .e-loop-item.product[data-elementor-id] .elementor-widget-image:has(img[src*=".svg"]) > :is(.elementor-widget-container, a) { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: var(--ckl-icon-cell) !important; padding: 0 !important; overflow: visible !important; } /* 2. La boite de l'image. Constante, quelle que soit l'icone. Le calibrage optique reste applique, mais il ne change plus la boite. */ html body .e-loop-item.product[data-elementor-id] .elementor-widget-image img:is([src*=".svg"], [data-lazy-src*=".svg"]) { display: block !important; flex: 0 0 var(--ckl-icon-box) !important; width: var(--ckl-icon-box) !important; height: var(--ckl-icon-box) !important; min-width: var(--ckl-icon-box) !important; min-height: var(--ckl-icon-box) !important; max-width: var(--ckl-icon-box) !important; max-height: var(--ckl-icon-box) !important; margin: 0 auto !important; object-fit: contain !important; object-position: center !important; /* CALIBRAGE OPTIQUE RETABLI — 2026-08-07, apres relecture a l'ecran. Je l'avais d'abord neutralise en me fiant aux nombres : la boite devenait strictement egale partout. A l'oeil c'etait pire — sur une meme rangee, "Afficheur Tactile" et "Personnalisation" paraissaient bien plus petits que "Inox" et "Marketing", parce que leurs SVG ont beaucoup de marge transparente autour du dessin. La table --ck-card-icon-scale corrige exactement cela : elle egalise l'ENCRE, pas la boite. Elle n'affecte pas la mise en page (une transformation ne pousse pas les voisins), donc la case reste constante et les rangees restent alignees. Lecon : ici l'egalite se juge a l'oeil, pas au getBoundingClientRect. */ transform: translate( var(--ck-card-icon-shift-x, 0%), var(--ck-card-icon-shift-y, 0%) ) scale(var(--ck-card-icon-scale, 1)) !important; transform-origin: center center !important; } /* 2b. Le libelle colle a son picto. MESURE AVANT (1920 px) : 11 px entre le bas de l'icone et le haut du texte, dont 8 px de marge propre au libelle et 3 px de jeu dans la case. La case vaut desormais exactement la boite + 4 px, et la marge tombe. */ /* RETIRE : une reecriture de grid-template-rows sur le bloc picto. Elle supposait trois rangees (icone, libelle, sous-libelle) ; le gabarit 8407 n'a pas cette structure et le libelle remontait de 62 px. Seule la marge du libelle est touchee, c'est suffisant et sans hypothese de structure. */ html body .e-loop-item.product[data-elementor-id] .e-con:has(> .elementor-widget-image img[src*=".svg"]) > .elementor-widget-image + .elementor-widget-text-editor { margin-block-start: var(--ckl-icon-label-gap) !important; margin-block-end: 0 !important; padding-block-start: 0 !important; } /* 3. Mobile : memes valeurs que celles deja validees sur 3605. */ @media (max-width: 767px) { .e-loop-item.product { --ckl-icon-cell: 40px; --ckl-icon-box: 36px; } }