/* ==========================================================================
   CK Card System — hauteur de carte constante (CKWash)
   --------------------------------------------------------------------------
   MESURE AVANT (page accessoires, 1440px, 9 cartes d'une meme grille) :
     hauteurs de carte : 360, 360, 400, 400, 440, 460, 360, 360, 440  -> 4 valeurs
     hauteurs d'image  : 304, 328, 400, 440, 460                      -> 5 valeurs
   Cause : la colonne media portait min-height:360px mais laissait l'image
   garder son ratio. Toute image plus haute que 360 poussait la carte.

   SPECIFICITE — pourquoi ces selecteurs sont si longs :
   19 regles concurrentes definissent deja la hauteur de cette image, dont des
   blocs <style> de page en (0,4,2), par exemple :
     body.page-id-19743 .elementor-20192 .elementor-element-99c298f img
        { height: 220px !important; max-height: 220px !important }
   Un selecteur court perd, meme charge en dernier. On monte donc a (0,4,3)
   via l'attribut data-elementor-id, qui designe le TEMPLATE de Loop Item —
   identifiant stable, contrairement aux regles .post-26393 existantes qui
   ciblent des produits precis et cessent de matcher des qu'on ajoute un
   produit a la grille.

   NON TRAITE ICI : le JS du viewer pose sur l'image un style inline
   "scale: 1.25 !important". Un style inline !important ne peut pas etre
   surcharge en CSS. Ce n'est pas bloquant : une transformation n'affecte pas
   la mise en page, donc la hauteur de carte reste egale. A traiter cote JS.
   ========================================================================== */

/* 420 depuis le 2026-08-12 (360 avant).
   Les photos produit sont toutes en portrait — 800x1200 et 750x1000 — donc
   c'est la HAUTEUR de la boite qui borne le rendu, jamais sa largeur : a
   1280 px la boite utile fait 283x404 pour une toile rendue de 269 de large.
   Elargir la colonne media n'agrandirait donc rien, seule la hauteur compte. */
.elementor-20192 {
	--ck-card-media-height: 420px;
	--ck-card-media-padding: 8px;
}

/* 1. Zone media : hauteur constante. overflow:hidden borne le scale inline. */
html body .e-loop-item.product.elementor-20192[data-elementor-id="20192"] .elementor-element-99c298f {
	height: var(--ck-card-media-height) !important;
	min-height: var(--ck-card-media-height) !important;
	max-height: var(--ck-card-media-height) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: var(--ck-card-media-padding) !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

html body .e-loop-item.product.elementor-20192[data-elementor-id="20192"] .elementor-element-99c298f > .elementor-widget-container {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* 2. L'image s'inscrit dans la zone sans deformation ni rognage. */
html body .e-loop-item.product.elementor-20192[data-elementor-id="20192"] .elementor-element-99c298f img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	object-position: center !important;
}

/* 3. La carte remplit sa cellule : les colonnes restent alignees. */
html body .e-loop-item.product.elementor-20192[data-elementor-id="20192"] {
	height: 100% !important;
}

/* 4. Egalisation par rangee.
   Mesure : rangee 2 = 360 / 377 / 401 px. Les cartes ne s'etiraient pas a la
   hauteur de leur rangee, car le bloc de pictos varie beaucoup d'un produit a
   l'autre (162 a 341 px selon le nombre de caracteristiques).
   align-items: stretch aligne les cartes SANS masquer de contenu : la rangee
   prend la hauteur de sa carte la plus haute, les autres s'y ajustent. */
html body .elementor-loop-container.elementor-grid {
	align-items: stretch !important;
}

html body .elementor-loop-container.elementor-grid > .e-loop-item.product.elementor-20192 {
	height: 100% !important;
	align-self: stretch !important;
}

html body .e-loop-item.product.elementor-20192[data-elementor-id="20192"] > .elementor-element {
	height: 100% !important;
}

/* La colonne texte est une colonne flex : c'est elle qui repartit le jeu
   vertical. La repartition elle-meme est traitee plus bas, section BLOC BAS. */
html body .e-loop-item.product.elementor-20192[data-elementor-id="20192"] .elementor-element-127ab75 {
	display: flex !important;
	flex-direction: column !important;
}

/* 4. Responsive : la zone se reduit, sans jamais redependre du ratio image. */
@media (max-width: 1024px) {
	.elementor-20192 { --ck-card-media-height: 300px; }
}

@media (max-width: 767px) {
	.elementor-20192 {
		--ck-card-media-height: 240px;
		--ck-card-media-padding: 6px;
	}
}

/* ==========================================================================
   PICTOS — une seule regle pour tous les gabarits (2026-08-07)
   --------------------------------------------------------------------------
   Meme couche que celle posee sur CKLaundry le meme jour, aux memes valeurs :
   c'est ce qui raccorde enfin les deux sites.

   POURQUOI ELLE EST NECESSAIRE ICI AUSSI
   CKWash utilise 11 gabarits de boucle. Les regles de picto existantes sont
   toutes bornees au seul gabarit 20192 :
     products-page.css l. 326  conteneur 34 px + overflow:hidden   (0,4,1)
     products-page.css l. 351  image 42 px                         (0,4,1)
     products-page.css l. 615  image 30 px sous 767 px             (0,4,1)
   Les gabarits 6877, 10713 et 10702 — herites de CKLaundry, utilises sur
   centrales-de-paiement, sur-mesure et micro — ne recoivent rien du tout.

   VALEURS : case 46 px, boite 40 px (34 / 30 sous 767 px).
   CKWash rendait ses pictos a 42 px, CKLaundry a 40. On retient 40 :
     - 208 pictos sont deja a 40 sur CKLaundry contre 34 ici : on deplace la
       population la plus petite, c'est le changement le moins risque ;
     - la case a 46 px reste au-dessus du plancher de 44 px recommande pour
       une cible tactile, et les pictos sont dans une carte cliquable.

   SPECIFICITE (0,5,3) : au-dessus des trois regles ci-dessus, sans citer un
   seul hachage de widget. Elle couvre donc les 11 gabarits.

   :has(img[src*=".svg"]) N'EST PAS DECORATIF : sur plusieurs gabarits la
   photo produit est elle aussi dans un widget Image. Un selecteur nu la
   reduirait a 40 px.
   ========================================================================== */

.e-loop-item.product {
	--ck-icon-cell: 46px;
	--ck-icon-box: 40px;
}

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(--ck-icon-cell) !important;
	min-height: var(--ck-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(--ck-icon-cell) !important;
	padding: 0 !important;
	overflow: visible !important;
}

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(--ck-icon-box) !important;
	width: var(--ck-icon-box) !important;
	height: var(--ck-icon-box) !important;
	min-width: var(--ck-icon-box) !important;
	min-height: var(--ck-icon-box) !important;
	max-width: var(--ck-icon-box) !important;
	max-height: var(--ck-icon-box) !important;
	margin: 0 auto !important;
	object-fit: contain !important;
	object-position: center !important;
	/* Calibrage optique CONSERVE, comme sur CKLaundry : la table
	   --ck-card-icon-scale (54 entrees ici) egalise l'ENCRE, pas la boite.
	   Sans elle, les SVG a forte marge transparente paraissent nettement
	   plus petits que les autres a taille de boite egale. Une transformation
	   n'affecte pas la mise en page : la case reste constante. */
	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;
}

@media (max-width: 767px) {
	.e-loop-item.product {
		--ck-icon-cell: 34px;
		--ck-icon-box: 30px;
	}
}

/* ==========================================================================
   BLOC BAS — centrage vertical et ferrage a gauche (2026-08-12)
   --------------------------------------------------------------------------
   MESURE AVANT, page /pupitres-haute-pression-lavage/ a 1280 px :
     titre a x=323, bouton a x=323, premiere icone a x=373   -> 50 px de retrait
     21 px entre le sous-titre et la 1re rangee de pictos
     12 px entre la derniere rangee et le bouton             -> pas centre

   POURQUOI 21 CONTRE 12
   La colonne texte est etiree a la hauteur de sa rangee (regle 4 ci-dessus).
   L'ancien margin-top:auto pose sur le bloc bas absorbait la TOTALITE du jeu
   d'un seul cote : tout au-dessus des pictos, rien en dessous. Plus la carte
   etait haute, plus l'ecart se creusait. Deux marges auto — une sur la 1re
   rangee, une sur le bouton — partagent ce meme jeu a parts egales.

   SELECTEURS SANS HACHAGE
   Le bloc bas est designe par ce qu'il contient (rangee > case > picto SVG),
   jamais par .elementor-element-c42594e : les 11 gabarits de boucle du site
   sont des clones d'un meme dessin, les hachages, eux, changent.
   :has() ne pouvant pas etre imbrique, la chaine est ecrite a plat.
   ========================================================================== */

.e-loop-item.product {
	/* entre deux rangees de pictos */
	--ck-card-row-gap: 8px;
	/* avant le bloc pictos ET avant le bouton : les deux respirations
	   d'articulation de la carte, tenues egales */
	--ck-card-block-gap: 22px;
}

/* 1. La colonne texte s'etire a la hauteur de la carte.
      Elementor lui pose align-self:start : mesuree a 364 px dans une carte de
      420, elle n'avait aucun jeu a repartir et tout ce qui suit restait sans
      effet. C'est la premiere piece a corriger. */
html body .e-loop-item.product
	.e-con:has(> .e-con > .e-con > .e-con > .elementor-widget-image img[src*=".svg"]) {
	align-self: stretch !important;
	height: auto !important;
}

/* 2. Le bloc bas prend toute la hauteur libre de cette colonne. */
html body .e-loop-item.product
	.e-con:has(> .e-con > .e-con > .elementor-widget-image img[src*=".svg"]) {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	margin-top: 0 !important;
	justify-content: flex-start !important;
	gap: var(--ck-card-row-gap) !important;
}

/* 3. Le jeu se partage : autant au-dessus des pictos qu'au-dessus du bouton.
      Le bouton reste ancre en pied de carte, il est le dernier enfant.

      La compensation de padding remet les deux respirations a egalite. Sans
      elle il reste 14 px d'ecart, invisibles dans le CSS mais bien la :
        au-dessus des pictos  = 22 px (margin-bottom du sous-titre) + jeu/2
        au-dessus du bouton   =  8 px (gap du bloc)                 + jeu/2
      Les deux constantes etant nommees, l'ecart se corrige par soustraction
      au lieu d'un nombre magique. */
html body .e-loop-item.product
	.e-con:has(> .e-con > .e-con > .elementor-widget-image img[src*=".svg"])
	> .e-con:first-child,
html body .e-loop-item.product
	.e-con:has(> .e-con > .e-con > .elementor-widget-image img[src*=".svg"])
	> .e-con:has(> .elementor-widget-eael-creative-button) {
	margin-top: auto !important;
}

html body .e-loop-item.product
	.e-con:has(> .e-con > .e-con > .elementor-widget-image img[src*=".svg"])
	> .e-con:has(> .elementor-widget-eael-creative-button) {
	padding-top: calc(var(--ck-card-block-gap) - var(--ck-card-row-gap)) !important;
}

/* 4. La grille de pictos se serre sur son contenu et se cale a gauche.

      C'est le BLOC qui se deplace : a l'interieur d'une case, l'icone reste
      centree au-dessus de ses libelles, eux-memes centres. Une premiere
      version ferrait le contenu de chaque case — refusee le 2026-08-12, ce
      n'est pas la demande.

      AVANT : les deux colonnes valaient 1fr, soit 143 px chacune pour des
      libelles mesures entre 47 et 128 px. La grille occupait donc les 295 px
      de la colonne texte et son contenu flottait au milieu de cases trop
      larges : la premiere icone tombait 50 px a droite de l'axe du titre.
      APRES : chaque colonne prend la largeur du plus long libelle de la
      carte, la grille se tasse a gauche (justify-content:start).

      POURQUOI UNE VARIABLE ET PAS max-content
      Les trois rangees sont trois grilles independantes. Avec max-content
      chacune calculerait ses colonnes dans son coin — mesure sur la carte
      Pupitouch : colonne 2 demarrerait a 53, 95 puis 112 px selon la rangee.
      Il faut donc une largeur commune, mesuree par carte : c'est le script
      ckwash-picto-grid-hug (mu-plugin ckwash-product-cards-loader.php).
      Sans le script, le repli 1fr redonne exactement la mise en page d'avant.

      Sous 768 px, rien ne change : mise en page validee le 2026-08-03. */
@media (min-width: 768px) {
	html body .e-loop-item.product
		.e-con:has(> .e-con > .elementor-widget-image img[src*=".svg"]) {
		grid-template-columns:
			repeat(2, minmax(0, var(--ck-card-picto-col, 1fr))) !important;
		justify-content: start !important;
	}
}

/* ==========================================================================
   PHOTO PRODUIT — calibrage optique (2026-08-12)
   --------------------------------------------------------------------------
   Meme principe que --ck-card-icon-scale pour les pictos : on egalise
   l'ENCRE, pas la boite. object-fit:contain calibre la TOILE du fichier, or
   les toiles ne sont pas cadrees de la meme facon. Alpha mesure par
   tools/gen-photo-scale.py (depot casierlibreservice) :

     pupitouch.webp             800x1200   sujet 410x1081   90% de la boite
     Pupinox.webp               800x1200   sujet 417x1062   88%
     PUPITOUCH_encastre-1.webp  750x1000   sujet 378x561    52%
     Pupinox_-encastre.webp     750x1000   sujet 315x470    44%

   Les deux "encastre" perdent la moitie de leur toile en vide transparent :
   a boite egale ils sont rendus deux fois plus petits que leurs voisins.
   Les valeurs ci-dessous sont les plafonds calcules, marge de securite 4%
   comprise — la zone media est en overflow:hidden, le sujet ne touche
   jamais le bord. Aucun media n'est modifie, donc pas de regeneration de
   srcset : la correction est reversible en supprimant la ligne.

   Le sujet reste toujours reduit, jamais agrandi au-dela de sa definition
   source (378x561 rendu a 237x351), il n'y a donc pas de perte de nettete.
   ========================================================================== */

html body .e-loop-item.product
	.elementor-widget-image:not(:has(img[src*=".svg"]))
	img {
	transform: scale(var(--ck-card-photo-scale, 1)) !important;
	transform-origin: center center !important;
}

html body .e-loop-item.product img[src*="PUPITOUCH_encastre-1.webp"] {
	--ck-card-photo-scale: 1.66;
}

html body .e-loop-item.product img[src*="Pupinox_-encastre.webp"] {
	--ck-card-photo-scale: 1.9;
}