de 5 modules
* (cpcm_promoflag, ps_featuredproducts, ps_bestsellers,
* ps_newproducts, ps_specials) etaient styles 44px = identique au H1.
* Override : retour a 30px desktop pour restaurer la hierarchie visuelle.
* ============================================================ */
.products-section-title.h1 {
font-size: 1.875rem !important;
}
@media (max-width: 991px) {
.products-section-title.h1 {
font-size: 1.65rem !important;
}
}
@media (max-width: 767px) {
.products-section-title.h1 {
font-size: 1.5rem !important;
}
}
/* ============================================================
* CPCM 2026-05-07 — Patch CLS (Core Web Vitals)
* Reservations d'espace pour eviter les decalages visuels au chargement.
*
* 1. #product-details (Caracteristiques techniques) : 0.38 -> ~0
* La liste des features est injectee/expand par JS apres init,
* pousse tout le contenu sous = layout shift majeur.
*
* 2. .products-carousel .owl-carousel : 0.11 -> ~0
* Owl Carousel JS init apres render -> bloc passe de 0px a ~400px.
* Couvre top featured, cross-sell, autres produits.
* ============================================================ */
#product-details {
min-height: 350px;
}
@media (max-width: 768px) {
#product-details {
min-height: 250px;
}
}
.products-carousel .owl-carousel {
min-height: 380px;
}
@media (max-width: 768px) {
.products-carousel .owl-carousel {
min-height: 280px;
}
}
/* ============================================================
* CPCM 2026-05-07 — Patch CLS phase 2 (calibré mesures réelles Chrome)
* Hauteurs mesurées sur fiche configurateur garage sectionnelle :
* Desktop (1140px) : carousel cat 482 / preview 700 / images 272
* Mobile (304px) : carousel cat 422 / preview 473 / images 78
* ============================================================ */
/* Wrapper carousel miniatures de la galerie (Owl init shift) */
.product-images.position-relative.p-3 {
min-height: 280px;
}
@media (max-width: 991px) {
.product-images.position-relative.p-3 {
min-height: 90px;
}
}
/* Section bloc "Autres produits dans la même catégorie" (cascade bas) */
.category-products.products-carousel.cpcm-home-promos {
min-height: 490px;
}
@media (max-width: 991px) {
.category-products.products-carousel.cpcm-home-promos {
min-height: 430px;
}
}
/* ============================================
CLS FIX 10/05/2026 — anti layout-shift desktop
============================================ */
/* Patch 2 : intro configurateur — pré-rendu côté Smarty.
Description-short visible par défaut (produits sans configurator),
masquée si body.has-configurator. À l'inverse pour le summary. */
.configurator-intro-summary.configurator-only { display: none; }
body.has-configurator .configurator-intro-summary.configurator-only { display: block; }
body.has-configurator .product-description-short.no-configurator-only { display: none; }
/* Patch 2bis (11/05/2026) : DM Concept inject AUSSI un bloc
directement dans #configurator_block
en haut du configurateur. Comme on a déjà rendu la même chose dans
.configurator-intro-summary en haut de page, on cache ce doublon. */
#configurator_block > [id^="product-description-short-"] { display: none; }
/* Patch 3 : largeur fixe vignettes carrousel image produit (desktop),
pour éviter le shift de 61→128 px à l'init du JS owl-carousel. */
@media (min-width: 992px){
.product-images .thumb-container,
.product-images .js-thumb-container {
min-width: 128px !important;
}
}
/* Patch 4 : réserve la hauteur des promo-items home pour éviter le shift
"0,0 0x0 → 360x327" au moment où le layout grid s'applique. */
.cpcm-home-promo-item { min-height: 422px; }
@media (max-width: 991px){
.cpcm-home-promo-item { min-height: 380px; }
}
@media (max-width: 575px){
.cpcm-home-promo-item { min-height: 360px; }
}
/* Patch 5 : aspect-ratio 16:9 sur les miniatures produit (toutes les images
chargées sur le site sont en 1920×1080 = 16:9, mais le tpl PS déclare
width/height = MAX du image type 400×600 → ratio faux = shift au scroll).
Cible : home + listings + catégories + prices-drop + best-sales. */
.product-img.lazy,
.product-img-alt.lazy {
aspect-ratio: 16 / 9;
object-fit: cover;
}