/* =============================================================
LePNJ — thème enfant child_PRS028
Direction : ARCADE (rétro borne, fond crème)
============================================================= */
/* =============================================================
LePNJ — habillage ARCADE (rétro borne, fond crème)
Cible : PrestaShop 8 + thème PRS028 + module tdelementor
Testé contre le balisage réel de www.lepnj.fr (accueil / catégorie / fiche produit)
INSTALLATION
-------------------------------------------------------------
Ce fichier est chargé automatiquement par PrestaShop dès que le thème
enfant child_PRS028 est activé (BO > Apparence > Thème et logo).
Rien à appeler à la main. Pour revenir en arrière : réactiver PRS028.
IMPORTANT — les couleurs posées dans Elementor
-------------------------------------------------------------
Le header, le footer et l'accueil ont leurs couleurs écrites en dur par
Elementor. Ces règles-là sont générées avec l'identifiant du widget
(.elementor-element-xxxxxxx) et gagnent donc en specificite : d'ou les
!important ci-dessous.
Ce fichier ne cite AUCUN identifiant de widget : il cible uniquement les
classes de gabarit (.elementor-location-header, .elementor-widget-*,
.td_mega_menu, .btn-toggle-cart...). Il continue donc de fonctionner si
vous dupliquez, deplacez ou recreez un bloc dans Elementor.
Si malgre tout une couleur d'origine resiste, c'est qu'elle est posee
dans l'editeur : changez-la la-bas, c'est plus propre que d'ajouter un
!important. Les endroits concernes sur votre site :
- bandeau promo (fond rouge) -> section du haut du header
- boutons compte + panier (noirs) -> widgets "account" et "cart"
- couleurs du menu -> widget "mega menu"
- footer : bandeau bas + newsletter
- accueil : titres de sections + boutons des blocs CTA
============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Silkscreen:wght@400;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
--lep-bg: #FFF3DC;
--lep-card: #FFFDF7;
--lep-ink: #12141C;
--lep-text-c: #262A38;
--lep-title-c: #12141C;
--lep-muted: #565C6B;
--lep-accent: #E8402A;
--lep-accent-soft: rgba(232,64,42,.14);
--lep-price-c: #12141C;
--lep-ok: #0A6A5F;
--lep-warn: #E8402A;
--lep-banner-bg: #E8402A;
--lep-banner-fg: #FFF3DC;
--lep-header-bg: #12141C;
--lep-header-bd: 4px solid #12141C;
--lep-nav-bg: #FFF3DC;
--lep-nav-bd: 4px solid #12141C;
--lep-nav-fg: #12141C;
--lep-hero-bg: #1B2A6B;
--lep-hero-fg: #FFF3DC;
--lep-cta-bg: #E8402A;
--lep-cta-bg-h: #C9331E;
--lep-cta-fg: #FFF3DC;
--lep-icon-bg: #FFC300;
--lep-icon-fg: #12141C;
--lep-badge-bg: #FFC300;
--lep-badge-fg: #12141C;
--lep-sale-bg: #12141C;
--lep-sale-fg: #FFC300;
--lep-chip-bg: #FFC300;
--lep-chip-fg: #12141C;
--lep-field-bg: #FFFDF7;
--lep-footer-bg: #FFC300;
--lep-footer-fg: #12141C;
--lep-footer-title: #12141C;
--lep-footer-bar-bg: #12141C;
--lep-footer-bar-fg: #FFF3DC;
--lep-link: #E8402A;
--lep-link-h: #12141C;
--lep-bd: 3px solid #12141C;
--lep-radius: 14px;
--lep-radius-sm: 9px;
--lep-radius-xs: 5px;
--lep-shadow: 5px 5px 0 #12141C; /* ombres DURES, jamais floues */
--lep-font-display: 'Archivo Black', system-ui, sans-serif;
--lep-font-ui: 'Silkscreen', monospace;
--lep-font-text: 'Space Grotesk', system-ui, sans-serif;
}
/* ---------- 1. Bases ---------- */
body,
body#index, body#category, body#product, body#cart, body#checkout {
background: var(--lep-bg) !important;
color: var(--lep-text-c) !important;
font-family: var(--lep-font-text) !important;
}
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-cta__title, .elementor-cta__description,
.td-slide-heading, .h1, .h2, .h3 {
font-family: var(--lep-font-display) !important;
letter-spacing: -.02em !important; text-transform: uppercase;
}
a { color: var(--lep-link); }
a:hover, a:focus { color: var(--lep-link-h); text-decoration: none; }
.site-wrapper, #wrapper { background: transparent; }
/* Boutons génériques PrestaShop */
.btn-primary,
.product-add-to-cart .add-to-cart,
.add-to-cart, .btn-add-to-cart,
.cart-detailed-actions .btn, #checkout .continue,
.block_newsletter .btn {
background: var(--lep-cta-bg) !important;
color: var(--lep-cta-fg) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius-sm) !important;
font-family: var(--lep-font-ui) !important;
box-shadow: 5px 5px 0 #12141C !important; letter-spacing: .1em; text-transform: uppercase; font-size: 12px !important;
}
.btn-primary:hover, .add-to-cart:hover, .btn-add-to-cart:hover,
.cart-detailed-actions .btn:hover {
background: var(--lep-cta-bg-h) !important;
color: var(--lep-cta-fg) !important;
transform: translate(-2px,-2px); box-shadow: 7px 7px 0 #12141C !important;
}
.btn-secondary, .btn-outline-primary, .quick-view {
background: transparent !important;
color: var(--lep-text-c) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius-sm) !important;
}
/* ---------- 2. Header — bandeau promo ----------
= 1re section du gabarit de header (liste d'icones livraison/paiement).
Reperee par sa position, pas par son identifiant. */
.elementor-location-header > .elementor-section:first-child,
.elementor-location-header > .elementor-element:first-child,
.elementor-location-header > .elementor-section:first-child > .elementor-background-overlay {
background-color: var(--lep-banner-bg) !important;
}
.elementor-location-header > .elementor-section:first-child .elementor-icon-list-text,
.elementor-location-header > .elementor-element:first-child .elementor-icon-list-text,
.elementor-location-header > .elementor-section:first-child .elementor-icon-list-icon i,
.elementor-location-header > .elementor-element:first-child .elementor-icon-list-icon i {
color: var(--lep-banner-fg) !important;
font-family: var(--lep-font-ui) !important;
letter-spacing: .1em !important;
text-transform: uppercase;
font-size: 11px !important;
}
/* ---------- 3. Header — barre principale + logo ----------
= toute section de header contenant le logo ou la recherche. */
.elementor-location-header .elementor-section:has(.elementor-widget-site-logo),
.elementor-location-header .elementor-section:has(.elementor-widget-tdsearchblock),
.td-sticky-header .elementor-section:has(.elementor-widget-site-logo) {
background-color: var(--lep-header-bg) !important;
border-bottom: var(--lep-header-bd) !important;
}
/* Repli pour les navigateurs sans :has() */
@supports not selector(:has(*)) {
.elementor-location-header { background-color: var(--lep-header-bg) !important; }
}
.elementor-widget-site-logo .elementor-image img {
background: #FFF3DC; border: 3px solid #FFC300; border-radius: 10px; padding: 6px 12px;
}
/* Recherche (.search_block_top / tdsearchblock) */
.search_block_top .searchbox {
background: var(--lep-field-bg) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius-sm) !important;
overflow: hidden;
}
.search_block_top .search_query_top.form-control {
background: transparent !important;
color: var(--lep-text-c) !important;
font-family: var(--lep-font-text) !important;
}
.search_block_top .search_query_top::placeholder { color: var(--lep-muted) !important; }
.search_block_top .button-search,
.elementor-widget-tdsearchblock .button-search {
background: var(--lep-cta-bg) !important;
color: var(--lep-cta-fg) !important;
fill: var(--lep-cta-fg) !important;
border-radius: 0 var(--lep-radius-sm) var(--lep-radius-sm) 0 !important;
}
.tdsearch_result { background: var(--lep-card) !important; border: var(--lep-bd) !important; }
/* Boutons compte / panier (Elementor 35003e13, 4aa5c82d, 272cf369, 5371ffae) */
.btn-toggle-account, .btn-toggle-cart, .btn-toggle-search {
background-color: var(--lep-icon-bg) !important;
color: var(--lep-icon-fg) !important;
fill: var(--lep-icon-fg) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius-sm) !important;
}
.btn-toggle-account:hover, .btn-toggle-cart:hover, .btn-toggle-search:hover {
background-color: var(--lep-cta-bg) !important;
color: var(--lep-cta-fg) !important;
fill: var(--lep-cta-fg) !important;
}
.btn-toggle-cart .cart-products-count {
background-color: var(--lep-badge-bg) !important;
color: var(--lep-badge-fg) !important;
font-family: var(--lep-font-ui) !important;
border-radius: var(--lep-radius-xs) !important;
}
.btn-toggle-menu { color: var(--lep-text-c) !important; fill: var(--lep-text-c) !important; }
/* ---------- 4. Menu principal (td_mega_menu) ----------
= toute section de header contenant le widget de menu. */
.elementor-location-header .elementor-section:has(.td_mega_menu),
.td-sticky-header .elementor-section:has(.td_mega_menu),
.elementor-widget-td-mega-menu > .elementor-widget-container {
background-color: var(--lep-nav-bg) !important;
border-top: var(--lep-bd) !important;
border-bottom: var(--lep-nav-bd) !important;
}
.td_mega_menu.menu-horizontal { background-color: var(--lep-nav-bg) !important; }
@supports not selector(:has(*)) {
.td_mega_menu.menu-horizontal {
border-top: var(--lep-bd) !important;
border-bottom: var(--lep-nav-bd) !important;
}
}
.td_mega_menu.menu-horizontal .item-level-0 > a,
.menu-vertical .item-level-0 > a {
color: var(--lep-nav-fg) !important;
fill: var(--lep-nav-fg) !important;
font-family: var(--lep-font-ui) !important;
font-size: 12px !important; letter-spacing: .06em; text-transform: uppercase;
}
.td_mega_menu.menu-horizontal .item-level-0:hover > a,
.td_mega_menu.menu-horizontal .item-level-0.current-menu-item > a {
color: var(--lep-accent) !important;
border-bottom: 4px solid #E8402A;
}
.menu_sub.sub-menu-dropdown {
background: var(--lep-card) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius-sm) !important;
box-shadow: var(--lep-shadow) !important;
}
.menu_sub .element_a_depth_1 { color: var(--lep-text-c) !important; font-family: var(--lep-font-text) !important; }
.menu_sub .element_a_depth_1:hover { color: var(--lep-accent) !important; }
/* Renfort : certains gabarits rendent le menu hors de .td_mega_menu */
.elementor-location-header .elementor-nav-menu a,
.elementor-location-header .menu-item > a,
#_desktop_top_menu .top-menu a {
color: var(--lep-nav-fg) !important;
font-family: var(--lep-font-ui) !important;
font-size: 12px !important;
letter-spacing: .06em;
text-transform: uppercase;
}
.elementor-location-header .elementor-nav-menu a:hover,
.elementor-location-header .menu-item > a:hover,
#_desktop_top_menu .top-menu a:hover { color: var(--lep-accent) !important; }
/* Titres courts du header ("Besoin d'aide ?", "Contacter le support") */
.elementor-location-header .elementor-widget-heading .elementor-heading-title {
color: var(--lep-muted) !important;
font-family: var(--lep-font-text) !important;
}
.elementor-location-header .elementor-widget-heading .elementor-heading-title a {
color: var(--lep-accent) !important;
font-family: var(--lep-font-ui) !important;
letter-spacing: .06em;
}
/* ---------- 5. Accueil — slider (module tdslides) ---------- */
.td-slides .td-slide-heading,
.td-slides .td-slide-subtitle,
.td-slides .td-slide-description {
color: var(--lep-hero-fg) !important;
text-transform: uppercase;
}
.td-slides .td-slide-button {
background-color: var(--lep-cta-bg) !important;
color: var(--lep-cta-fg) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius-sm) !important;
font-family: var(--lep-font-ui) !important;
letter-spacing: .1em;
text-transform: uppercase;
box-shadow: 5px 5px 0 #12141C !important; letter-spacing: .1em; text-transform: uppercase; font-size: 12px !important;
}
.td-slides .td-slide-button:hover { background-color: var(--lep-cta-bg-h) !important; }
.bg_title, .td-block-title .bg_title {
background-color: var(--lep-badge-bg) !important;
color: var(--lep-badge-fg) !important;
border-radius: var(--lep-radius-xs) !important;
font-family: var(--lep-font-ui) !important;
}
/* Puces des carrousels. Les FLECHES ne sont pas retouchees : leur mise
en forme et leur position viennent du theme, et mes overrides
(background / border / border-radius) cassaient leur placement. */
.tdcarousel .slick-dots li { background: var(--lep-muted) !important; }
.tdcarousel .slick-dots li.slick-active, .tdcarousel .slick-dots li:hover { background: var(--lep-accent) !important; }
/* Titres de sections d'accueil (302f75e etc.) */
body#index .elementor-widget-heading .elementor-heading-title {
color: var(--lep-title-c) !important;
font-family: var(--lep-font-display) !important;
letter-spacing: -.02em !important; text-transform: uppercase;
}
/* Blocs "call to action" de l'accueil */
.elementor-cta__bg-wrapper { border-radius: var(--lep-radius) !important; border: var(--lep-bd) !important; }
.elementor-cta__button {
background-color: var(--lep-cta-bg) !important;
color: var(--lep-cta-fg) !important;
border-radius: var(--lep-radius-sm) !important;
font-family: var(--lep-font-ui) !important;
}
.elementor-cta__button:hover { background-color: var(--lep-cta-bg-h) !important; color: var(--lep-cta-fg) !important; }
/* ---------- 6. Grille produits (.product-miniature) ---------- */
.product-miniature .thumbnail-container,
.js-product-miniature .thumbnail-container {
background: var(--lep-card) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius) !important;
box-shadow: var(--lep-shadow) !important;
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease;
}
.product-miniature .thumbnail-container:hover { transform: translate(-2px,-2px); box-shadow: 9px 9px 0 #E8402A !important; }
.product-miniature .product-title a, .product-title a {
color: var(--lep-title-c) !important;
font-family: var(--lep-font-text) !important; /* lisible : jamais la police pixel ici */
font-weight: 700 !important;
font-size: 15px !important;
line-height: 1.35 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
/* Titre sur 2 lignes plutot que tronque a l'ellipse */
.product-miniature .product-title {
display: block !important;
min-height: 42px;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
.product-miniature .product-price-and-shipping .price,
.product-price, .current-price .price, .current-price span {
color: var(--lep-price-c) !important;
font-family: var(--lep-font-display) !important;
font-size: 22px !important;
}
.product-miniature .regular-price, .regular-price { color: var(--lep-muted) !important; text-decoration: line-through; }
.product-flags li.product-flag,
.product-flags .product-flag {
background: var(--lep-badge-bg) !important;
color: var(--lep-badge-fg) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius-xs) !important;
font-family: var(--lep-font-ui) !important;
font-size: 10px !important;
letter-spacing: .1em;
text-transform: uppercase;
transform: rotate(-3deg);
}
.product-flags li.product-flag.discount,
.product-flags li.product-flag.on-sale { background: var(--lep-sale-bg) !important; color: var(--lep-sale-fg) !important; }
/* Info stock (module tdstockinfo) */
.td-stock-info, .tdstockinfo, #product-availability, .product-available {
color: var(--lep-ok) !important;
font-family: var(--lep-font-text) !important;
font-weight: 600;
}
.product-last-items, .product-unavailable { color: var(--lep-warn) !important; font-weight: 600; }
/* ---------- 7. Page catégorie ---------- */
#category #js-product-list-header, #category .block-category {
background: var(--lep-hero-bg) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius) !important;
overflow: hidden;
}
#category .block-category h1, #category .block-category .category-description {
color: var(--lep-hero-fg) !important;
}
#search_filters, #search_filters_wrapper, .block-categories {
background: var(--lep-card) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius) !important;
box-shadow: var(--lep-shadow) !important;
}
#search_filters .facet-title, #search_filters .h6, .block-categories .h6 {
color: var(--lep-title-c) !important;
font-family: var(--lep-font-ui) !important;
letter-spacing: .08em;
text-transform: uppercase;
}
#search_filters .custom-checkbox input[type=checkbox]:checked + span,
#search_filters .custom-checkbox span { border-color: var(--lep-accent) !important; }
.js-search-filters-clear-all, .filter-block, .active-filter-title {
background: var(--lep-chip-bg) !important;
color: var(--lep-chip-fg) !important;
border: var(--lep-bd) !important;
border-radius: 999px !important;
}
.products-sort-order .select-title, .total-products p {
color: var(--lep-text-c) !important;
font-family: var(--lep-font-ui) !important;
}
.pagination .page-list a, .pagination a {
color: var(--lep-text-c) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius-sm) !important;
font-family: var(--lep-font-ui) !important;
}
.pagination .current a { background: var(--lep-accent-soft) !important; color: var(--lep-accent) !important; }
/* ---------- 8. Fiche produit ---------- */
#product .product-prices,
#product .product-information .product-actions {
background: var(--lep-card) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius) !important;
box-shadow: var(--lep-shadow) !important;
padding: 22px !important;
}
#product h1, #product .product-title, #product .h1 {
color: var(--lep-title-c) !important;
font-family: var(--lep-font-display) !important;
letter-spacing: -.02em !important; text-transform: uppercase;
}
#product .current-price span, #product .product-price {
color: var(--lep-price-c) !important;
font-family: var(--lep-font-display) !important;
}
#product .product-discount .regular-price { color: var(--lep-muted) !important; }
#product .discount, #product .product-flags .discount-percentage {
background: var(--lep-sale-bg) !important;
color: var(--lep-sale-fg) !important;
border-radius: var(--lep-radius-xs) !important;
}
#product .tabs, .product-tabs {
background: transparent !important;
border: 0 !important;
}
#product .nav-tabs .nav-link {
color: var(--lep-muted) !important;
font-family: var(--lep-font-ui) !important;
letter-spacing: .08em;
text-transform: uppercase;
border: 0 !important;
}
#product .nav-tabs .nav-link.active {
color: var(--lep-accent) !important;
border-bottom: 2px solid var(--lep-accent) !important;
}
.blockreassurance_product .block-title { color: var(--lep-title-c) !important; font-family: var(--lep-font-ui) !important; }
.product-quantity .input-group, .product-quantity #quantity_wanted {
border: var(--lep-bd) !important;
border-radius: var(--lep-radius-sm) !important;
background: var(--lep-field-bg) !important;
color: var(--lep-text-c) !important;
}
/* ---------- 9. Panier & tunnel ---------- */
#cart .cart-grid-body .card, #cart .card,
.cart-summary, #js-checkout-summary,
#checkout .card, #checkout-personal-information-step .card {
background: var(--lep-card) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius) !important;
box-shadow: var(--lep-shadow) !important;
}
.cart-summary .cart-summary-line .value, .cart-total .value {
color: var(--lep-price-c) !important;
font-family: var(--lep-font-display) !important;
}
.cart-item .product-line-info .label, .cart-item .product-line-info a {
color: var(--lep-title-c) !important;
font-family: var(--lep-font-text) !important;
font-weight: 700 !important;
}
#checkout .checkout-step .step-title, .step-title {
color: var(--lep-title-c) !important;
font-family: var(--lep-font-ui) !important;
letter-spacing: .06em;
text-transform: uppercase;
}
#checkout .checkout-step.-current .step-title { color: var(--lep-accent) !important; }
.js-cart-line-product-quantity, .cart-line-product-quantity {
border: var(--lep-bd) !important;
border-radius: var(--lep-radius-sm) !important;
}
/* ---------- 10. Footer (gabarit Elementor "footer") ---------- */
.elementor-location-footer > .elementor-section,
.elementor-location-footer > .elementor-element { background-color: var(--lep-footer-bg) !important; }
.elementor-location-footer .title_block,
.elementor-widget-footer-links .title_block {
color: var(--lep-footer-title) !important;
font-family: var(--lep-font-ui) !important;
letter-spacing: .1em;
text-transform: uppercase;
}
.elementor-widget-footer-links .elementor-icon-list-text,
.elementor-location-footer .elementor-icon-list-text { color: var(--lep-footer-fg) !important; }
.elementor-widget-footer-links .elementor-icon-list-item:hover .elementor-icon-list-text,
.elementor-location-footer .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--lep-accent) !important; }
/* Newsletter (module ps_emailsubscription) */
.block_newsletter input[name=email],
.elementor-location-footer input[name=email] {
background: var(--lep-field-bg) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius-sm) !important;
color: var(--lep-text-c) !important;
}
.block_newsletter button[type=submit],
.elementor-location-footer .elementor-widget-newsletter button {
background-color: var(--lep-cta-bg) !important;
color: var(--lep-cta-fg) !important;
border-radius: var(--lep-radius-sm) !important;
font-family: var(--lep-font-ui) !important;
letter-spacing: .08em;
}
.block_newsletter button[type=submit]:hover { background-color: var(--lep-cta-bg-h) !important; }
/* Bandeau bas = derniere section du gabarit de footer */
.elementor-location-footer > .elementor-section:last-child,
.elementor-location-footer > .elementor-element:last-child { background-color: var(--lep-footer-bar-bg) !important; }
.elementor-location-footer > .elementor-section:last-child .elementor-heading-title,
.elementor-location-footer > .elementor-element:last-child .elementor-heading-title { color: var(--lep-footer-bar-fg) !important; }
.elementor-location-footer .elementor-social-icon {
background-color: var(--lep-icon-bg) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius-sm) !important;
}
.elementor-location-footer .elementor-social-icon i, .elementor-location-footer .elementor-social-icon svg {
color: var(--lep-icon-fg) !important;
fill: var(--lep-icon-fg) !important;
}
.elementor-location-footer .elementor-social-icon:hover { background-color: var(--lep-cta-bg) !important; border-color: var(--lep-cta-bg) !important; }
.elementor-location-footer .elementor-social-icon:hover i, .elementor-location-footer .elementor-social-icon:hover svg { color: var(--lep-cta-fg) !important; fill: var(--lep-cta-fg) !important; }
/* ---------- 11. Divers ---------- */
.modal-content, #offcanvas_sidecart .modal-content, #offcanvas_account .modal-content, #offcanvas_mobile_menu .modal-content {
background: var(--lep-card) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius) !important;
}
.loader-wrapper.precss { background: var(--lep-bg) !important; }
.loader-section .box1 { background: var(--lep-accent) !important; }
#back-to-top, .back-to-top {
background: var(--lep-cta-bg) !important;
color: var(--lep-cta-fg) !important;
border-radius: var(--lep-radius-sm) !important;
}
.cc-window.cc-banner { background: var(--lep-footer-bar-bg) !important; }
.cc-window .cc-btn { background: var(--lep-cta-bg) !important; color: var(--lep-cta-fg) !important; }
/* ---------- 12. Mobile ---------- */
@media (max-width: 767px) {
.product-miniature .thumbnail-container { box-shadow: none !important; }
.btn-primary, .add-to-cart, .btn-add-to-cart { min-height: 46px; }
.td_mega_menu.menu-horizontal .item-level-0 > a { padding: 14px 12px !important; }
}
/* =============================================================
13. BLOCS À MONTER DANS ELEMENTOR
-------------------------------------------------------------
Le CSS ne peut pas créer de nouvelles sections : il ne fait que
les habiller. Le hero et la barre de réassurance jaune doivent
donc être ajoutés une fois dans Elementor (accueil = post 5),
avec un widget "HTML". Le code à coller est dans le fichier
BLOCS-ELEMENTOR.html livré à côté de ce thème.
Ensuite, tout le style vient d'ici — vous ne retouchez plus le HTML.
============================================================= */
/* ---------- 13a. Hero arcade ---------- */
.lep-hero {
position: relative;
overflow: hidden;
padding: 56px 44px 52px;
background: var(--lep-hero-bg);
border: var(--lep-bd);
border-radius: var(--lep-radius) var(--lep-radius) 0 0;
}
/* effet scanlines CRT + trame de points, purement décoratif */
.lep-hero::before,
.lep-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.lep-hero::before {
background-image: repeating-linear-gradient(0deg, rgba(255,243,220,.07) 0 2px, transparent 2px 5px);
}
.lep-hero::after {
background-image: radial-gradient(circle at 50% 50%, rgba(255,195,0,.18) 0 22%, transparent 22%);
background-size: 46px 46px;
}
.lep-hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
gap: 36px;
align-items: center;
}
.lep-hero__badge {
display: inline-block;
padding: 8px 13px;
background: var(--lep-badge-bg);
color: var(--lep-badge-fg);
font-family: var(--lep-font-ui);
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
border-radius: var(--lep-radius-xs);
transform: rotate(-2deg);
box-shadow: 4px 4px 0 var(--lep-ink);
}
.lep-hero__title {
font-family: var(--lep-font-display) !important;
font-size: clamp(34px, 5vw, 70px);
line-height: .94;
letter-spacing: -.03em;
color: var(--lep-hero-fg) !important;
margin: 20px 0 0;
text-transform: uppercase;
text-wrap: balance;
}
.lep-hero__title em {
font-style: normal;
color: var(--lep-icon-bg);
-webkit-text-stroke: 3px var(--lep-ink);
paint-order: stroke fill;
}
.lep-hero__text {
font-family: var(--lep-font-text);
font-size: 18px;
line-height: 1.6;
font-weight: 500;
color: rgba(255,243,220,.82);
max-width: 520px;
margin: 20px 0 0;
}
.lep-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.lep-hero__btn {
padding: 16px 26px;
border-radius: var(--lep-radius-sm);
border: var(--lep-bd);
font-family: var(--lep-font-ui);
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
background: var(--lep-cta-bg);
color: var(--lep-cta-fg) !important;
box-shadow: 6px 6px 0 var(--lep-ink);
transition: transform .15s ease, box-shadow .15s ease;
}
.lep-hero__btn:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--lep-ink); }
.lep-hero__btn--alt {
background: var(--lep-bg);
color: var(--lep-ink) !important;
box-shadow: 6px 6px 0 var(--lep-ok);
}
.lep-hero__btn--alt:hover { box-shadow: 8px 8px 0 var(--lep-ok); }
.lep-hero__stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.lep-hero__stat {
background: rgba(255,243,220,.08);
border: 2px solid rgba(255,243,220,.22);
border-radius: var(--lep-radius-sm);
padding: 12px 16px;
}
.lep-hero__stat b {
display: block;
font-family: var(--lep-font-ui);
font-size: 18px;
font-weight: 400;
color: var(--lep-icon-bg);
}
.lep-hero__stat span {
display: block;
font-family: var(--lep-font-text);
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255,243,220,.6);
margin-top: 5px;
}
/* Visuel de droite : 3 cartes en eventail.
Construit en flex (et non en positions absolues) : la hauteur ne
s'effondre pas quand Elementor enveloppe le bloc dans ses conteneurs,
et l'eventail se reserre tout seul sur ecran etroit.
Remplacez le contenu des .lep-hero__card par vos ![]()
produits. */
.lep-hero__deck {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
min-height: 0;
padding: 26px 0 34px;
}
.lep-hero__card {
flex: 0 0 auto;
width: clamp(110px, 15vw, 200px);
aspect-ratio: 7 / 10;
border: var(--lep-bd);
border-radius: var(--lep-radius-sm);
box-shadow: 8px 8px 0 rgba(18,20,28,.55);
overflow: hidden;
display: grid;
place-items: center;
font-family: var(--lep-font-ui);
font-size: 10px;
text-align: center;
color: rgba(18,20,28,.6);
background: var(--lep-icon-bg);
}
.lep-hero__card img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.lep-hero__card:nth-child(1) {
transform: rotate(-11deg) translateY(14px);
margin-right: -22px;
background: var(--lep-ok);
}
.lep-hero__card:nth-child(2) {
width: clamp(126px, 17vw, 226px);
transform: rotate(2deg);
z-index: 2;
box-shadow: 10px 10px 0 rgba(18,20,28,.6);
background: var(--lep-icon-bg);
}
.lep-hero__card:nth-child(3) {
transform: rotate(13deg) translateY(18px);
margin-left: -22px;
background: var(--lep-accent);
}
.lep-hero__sticker {
position: absolute;
right: 4%;
bottom: 0;
z-index: 3;
background: var(--lep-bg);
border: var(--lep-bd);
border-radius: var(--lep-radius-xs);
padding: 9px 12px;
font-family: var(--lep-font-ui);
font-size: 10px;
color: var(--lep-ink);
transform: rotate(-4deg);
box-shadow: 4px 4px 0 var(--lep-ink);
white-space: nowrap;
}
/* ---------- 13b. Barre de réassurance jaune ---------- */
.lep-trust {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
background: var(--lep-icon-bg);
border: var(--lep-bd);
border-top: 0;
border-radius: 0 0 var(--lep-radius) var(--lep-radius);
}
.lep-trust__item {
display: flex;
align-items: center;
gap: 13px;
padding: 18px 20px;
border-right: 3px solid var(--lep-ink);
}
.lep-trust__item:last-child { border-right: 0; }
.lep-trust__icon {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: var(--lep-radius-sm);
background: var(--lep-ink);
color: var(--lep-icon-bg);
display: grid;
place-items: center;
font-size: 16px;
line-height: 1;
}
.lep-trust__icon img, .lep-trust__icon svg { width: 20px; height: 20px; }
.lep-trust b {
display: block;
font-family: var(--lep-font-text);
font-size: 14px;
font-weight: 700;
color: var(--lep-ink);
}
.lep-trust span {
display: block;
font-family: var(--lep-font-text);
font-size: 12px;
font-weight: 600;
color: rgba(18,20,28,.65);
margin-top: 2px;
}
/* Variante autonome, si la barre n'est pas collée sous le hero */
.lep-trust--seule { border-top: var(--lep-bd); border-radius: var(--lep-radius); }
/* ---------- 13c. Séparateur damier ---------- */
.lep-damier {
height: 18px;
border-top: var(--lep-bd);
border-bottom: var(--lep-bd);
background-color: var(--lep-icon-bg);
background-image:
linear-gradient(45deg, var(--lep-ink) 25%, transparent 25% 75%, var(--lep-ink) 75%),
linear-gradient(45deg, var(--lep-ink) 25%, transparent 25% 75%, var(--lep-ink) 75%);
background-size: 18px 18px;
background-position: 0 0, 9px 9px;
}
/* ---------- 13d. Responsive des blocs 13 ---------- */
@media (max-width: 991px) {
.lep-hero__inner { grid-template-columns: minmax(0, 1fr); }
.lep-hero__deck { order: -1; padding: 10px 0 26px; }
.lep-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lep-trust__item:nth-child(2n) { border-right: 0; }
.lep-trust__item:nth-child(-n+2) { border-bottom: 3px solid var(--lep-ink); }
}
@media (max-width: 575px) {
.lep-hero { padding: 32px 20px 30px; }
.lep-hero__card { width: 92px; }
.lep-hero__card:nth-child(2) { width: 106px; }
.lep-hero__sticker { right: 50%; transform: translateX(50%) rotate(-4deg); font-size: 9px; }
.lep-trust { grid-template-columns: minmax(0, 1fr); }
.lep-trust__item { border-right: 0; border-bottom: 3px solid var(--lep-ink); }
.lep-trust__item:last-child { border-bottom: 0; }
}
/* =============================================================
14. Bouton "Ajouter au panier" visible sur les cartes produits
-------------------------------------------------------------
PRS028 masque ce bouton en liste, ou ne l'affiche qu'au survol.
Le mieux reste de l'activer dans le panneau de reglages du theme
("Show add to cart button in product list"). Ces regles servent
de secours si l'option n'existe pas.
============================================================= */
.product-miniature .product-actions,
.product-miniature .product-add-to-cart,
.product-miniature .product-list-actions,
.js-product-miniature .highlighted-informations,
.js-product-miniature .product-availability {
opacity: 1 !important;
visibility: visible !important;
position: static !important;
transform: none !important;
display: block !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
pointer-events: auto !important;
}
.product-miniature .product-add-to-cart .add-to-cart,
.product-miniature form[action*="cart"] button[type=submit],
.product-miniature .btn-add-to-cart {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 12px;
padding: 13px 10px;
background: var(--lep-cta-bg) !important;
color: var(--lep-cta-fg) !important;
border: 2px solid var(--lep-ink) !important;
border-radius: var(--lep-radius-sm) !important;
font-family: var(--lep-font-ui) !important;
font-size: 11px !important;
letter-spacing: .08em;
text-transform: uppercase;
box-shadow: none !important;
}
.product-miniature .product-add-to-cart .add-to-cart:hover,
.product-miniature .btn-add-to-cart:hover { background: var(--lep-cta-bg-h) !important; }
/* =============================================================
15. Polices — a n'activer QUE si le panneau de reglages du theme
impose ses propres polices et ecrase celles du thème.
Dans ce cas, decommentez le bloc ci-dessous (retirer le / * et * /).
============================================================= */
/*
body, body * {
font-family: var(--lep-font-text) !important;
}
h1, h2, h3, h4, h5, h6,
.elementor-heading-title, .product-title, .product-title a,
.price, .current-price span, .h1, .h2, .h3 {
font-family: var(--lep-font-display) !important;
}
.btn, .btn-primary, .btn-secondary, button, .product-flag,
.title_block, .facet-title, .step-title, .pagination a,
.td_mega_menu .item-level-0 > a {
font-family: var(--lep-font-ui) !important;
}
*/
/* =============================================================
16. Corrections apres relecture du rendu reel
============================================================= */
/* ---------- 16a. Liseré turquoise autour des visuels produits ----------
Reste de la couleur d'origine du theme (#26bdc7). */
.product-miniature .thumbnail-container .product-thumbnail,
.product-miniature .thumbnail-container img,
.product-miniature .product-image,
.product-miniature .thumbnail-container .product-thumbnail img {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* Le cadre visible, c'est celui de la carte — un seul, pas deux */
.product-miniature .thumbnail-container {
padding: 0 !important;
background: var(--lep-card) !important;
}
/* ---------- 16b. Bloc texte de la carte ---------- */
.product-miniature .product-description,
.product-miniature .product-meta {
padding: 14px !important;
background: var(--lep-card) !important;
text-align: left !important;
}
.product-miniature .product-price-and-shipping {
text-align: left !important;
margin: 8px 0 0 !important;
}
.product-miniature .product-price-and-shipping .price,
.product-miniature .price {
font-size: 24px !important;
line-height: 1 !important;
}
/* Le bouton dans le flux de la carte, pas colle sous elle */
.product-miniature .product-add-to-cart,
.product-miniature .product-actions {
padding: 0 14px 14px !important;
background: var(--lep-card) !important;
}
.product-miniature .product-add-to-cart .add-to-cart,
.product-miniature .btn-add-to-cart {
margin-top: 0 !important;
box-shadow: 3px 3px 0 var(--lep-ink) !important;
}
.product-miniature .product-add-to-cart .add-to-cart:active,
.product-miniature .btn-add-to-cart:active {
transform: translate(3px, 3px);
box-shadow: none !important;
}
/* ---------- 16c. Etoiles de notation ---------- */
.product-miniature .star-content .star,
.grade-stars .star-content .star,
.comments-note .star-content { color: var(--lep-accent) !important; }
/* ---------- 16d. Barre de tri / affichage ---------- */
.products-selection, #js-product-list-top {
background: var(--lep-card) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius-sm) !important;
padding: 10px 14px !important;
}
.products-selection .select-title, .products-selection .sort-by,
#js-product-list-top .total-products p {
color: var(--lep-text-c) !important;
font-family: var(--lep-font-text) !important;
font-weight: 600;
}
.products-selection select, .products-sort-order .select-title {
background: var(--lep-field-bg) !important;
border: 2px solid var(--lep-ink) !important;
border-radius: var(--lep-radius-sm) !important;
color: var(--lep-text-c) !important;
}
/* Bascule grille / liste */
#js-product-list-top .display a, .view-switcher a { color: var(--lep-muted) !important; }
#js-product-list-top .display a.selected, .view-switcher a.active { color: var(--lep-accent) !important; }
/* =============================================================
17. Cartes produits : cadre autour de TOUTE la carte + hauteurs egales
-------------------------------------------------------------
Sur PRS028, .thumbnail-container n'enveloppe que le visuel : le cadre
et l'ombre doivent donc etre portes par .product-miniature elle-meme.
============================================================= */
/* Le cadre et l'ombre passent sur la carte entiere */
.product-miniature:hover, .js-product-miniature:hover {
transform: translate(-2px, -2px);
box-shadow: 9px 9px 0 var(--lep-accent) !important;
}
/* ...et sont retires du conteneur de visuel, qui les portait avant */
.product-miniature .thumbnail-container,
.js-product-miniature .thumbnail-container {
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
border-bottom: 3px solid var(--lep-ink) !important;
}
.product-miniature:hover .thumbnail-container { transform: none !important; box-shadow: none !important; }
/* ---------- 17b. Produit indisponible ----------
Un bouton rouge vif sur un produit en rupture attire l'oeil pour rien :
on le passe en gris inactif. */
.product-miniature .add-to-cart[disabled],
.product-miniature .btn-add-to-cart[disabled],
.product-miniature .add-to-cart.disabled,
.product-miniature .product-unavailable .btn {
background: #E4DCC6 !important;
color: #565C6B !important;
border-color: #B9B19C !important;
box-shadow: none !important;
cursor: not-allowed;
}
/* Badge "rupture de stock" : gris plutot que jaune vif */
.product-flags li.product-flag.out_of_stock,
.product-flags li.product-flag.rupture,
.product-flags .out-of-stock {
background: var(--lep-ink) !important;
color: #C9C2AE !important;
transform: rotate(0deg) !important;
}
/* Visuel legerement desature quand le produit est indisponible */
.product-miniature:has(.add-to-cart[disabled]) .thumbnail-container img,
.product-miniature:has(.product-flag.out_of_stock) .thumbnail-container img {
filter: saturate(.55) opacity(.85);
}
/* =============================================================
18. Badges POSES SUR le visuel + alignement des vignettes
-------------------------------------------------------------
Sur PRS028, .product-flags est un bloc dans le flux, place AVANT
l'image : les badges poussent donc la vignette vers le bas et
decalent les cartes entre elles. On le sort du flux.
============================================================= */
/* ---------- 18a. Le conteneur du visuel devient le repere ---------- */
.product-miniature .thumbnail-container,
.js-product-miniature .thumbnail-container {
position: relative !important;
display: block !important;
padding: 0 !important;
overflow: hidden !important;
border-bottom: 0 !important; /* annule le trait de la section 17 */
}
.product-miniature .thumbnail-container .product-thumbnail,
.product-miniature .thumbnail-container > a {
display: block !important;
line-height: 0;
border-bottom: 3px solid var(--lep-ink) !important;
}
.product-miniature .thumbnail-container img,
.product-miniature .product-thumbnail img {
display: block !important;
width: 100% !important;
height: auto !important;
}
/* ---------- 18b. Les badges par-dessus l'image ---------- */
.product-miniature .product-flags,
.js-product-miniature .product-flags {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
bottom: auto !important;
z-index: 3;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
max-width: calc(100% - 20px);
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
background: none !important;
border: 0 !important;
pointer-events: none;
}
.product-miniature .product-flags li.product-flag,
.product-miniature .product-flags .product-flag {
position: static !important;
margin: 0 !important;
width: auto !important;
display: inline-block !important;
transform: rotate(-3deg);
transform-origin: left center;
box-shadow: 3px 3px 0 rgba(18,20,28,.25);
}
/* Deuxieme badge incline dans l'autre sens : effet autocollant */
.product-miniature .product-flags li.product-flag:nth-child(2) { transform: rotate(2deg); }
/* ---------- 18c. Vignettes alignees ----------
Les colonnes Bootstrap sont en inline-block : sans vertical-align,
elles se calent sur la ligne de base et se decalent d'une carte a l'autre. */
#products .products, .products.row, .product-list {
display: flex !important;
flex-wrap: wrap !important;
align-items: stretch !important;
}
#products .products > *, .products.row > *, .product-list > * {
vertical-align: top !important;
float: none !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
}
/* La piste du carrousel est laissee intacte : slick calcule sa largeur
et la position de chaque diapo. Toute regle de display / flex-wrap /
largeur posee ici casse l'affichage (une seule diapo pleine largeur). */
/* Reserve la meme place au titre partout : 2 ou 3 lignes ne decalent plus le prix */
.product-miniature .product-title,
.js-product-miniature .product-title {
min-height: 4.2em !important;
display: flex !important;
align-items: flex-start;
justify-content: center;
text-align: center;
}
.product-miniature .product-price-and-shipping { margin-top: auto !important; }
/* ---------- 18d. Badge "rupture de stock" ---------- */
.product-flags li.product-flag.out_of_stock,
.product-flags li.product-flag.rupture,
.product-flags .out-of-stock {
background: var(--lep-ink) !important;
color: #C9C2AE !important;
border-color: var(--lep-ink) !important;
}
/* =============================================================
18. Correctifs d'alignement + badges poses SUR le visuel
============================================================= */
/* ---------- 18a. (retiree) ----------
Une grille CSS etait forcee ici sur le conteneur des vignettes.
Elle cassait les carrousels (slick) et la mise en page native de
PRS028 : on laisse desormais le theme gerer la disposition.
Seuls les badges, les visuels et le bouton panier sont retouches. */
/* ---------- 18b. Badges (nouveau / promo / rupture) ----------
Par defaut PRS028 les empile AU-DESSUS du visuel, en pleine largeur.
On les repositionne en surimpression, en haut a gauche de l'image. */
.product-miniature .thumbnail-container,
.js-product-miniature .thumbnail-container { position: relative !important; }
.product-miniature .product-flags,
.js-product-miniature .product-flags,
ul.product-flags {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
bottom: auto !important;
z-index: 3 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
width: auto !important;
max-width: calc(100% - 20px);
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
pointer-events: none;
}
.product-miniature .product-flags li.product-flag,
.js-product-miniature .product-flags li.product-flag,
ul.product-flags li.product-flag {
position: static !important;
display: inline-block !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 6px 9px !important;
line-height: 1 !important;
white-space: nowrap;
background: var(--lep-badge-bg) !important;
color: var(--lep-badge-fg) !important;
border: 2px solid var(--lep-ink) !important;
border-radius: var(--lep-radius-xs) !important;
font-family: var(--lep-font-ui) !important;
font-size: 9px !important;
letter-spacing: .06em;
text-transform: uppercase;
transform: rotate(-3deg);
box-shadow: 2px 2px 0 var(--lep-ink);
}
/* Le 2e badge penche dans l'autre sens : effet autocollant */
.product-miniature .product-flags li.product-flag:nth-child(2) { transform: rotate(2deg); }
/* Couleurs par type de badge */
.product-miniature .product-flags li.product-flag.new,
.product-miniature .product-flags li.product-flag.nouveau {
background: var(--lep-accent) !important; color: #FFF3DC !important;
}
.product-miniature .product-flags li.product-flag.discount,
.product-miniature .product-flags li.product-flag.on-sale,
.product-miniature .product-flags li.product-flag.discount-percentage,
.product-miniature .product-flags li.product-flag.discount-amount {
background: var(--lep-ink) !important; color: var(--lep-badge-bg) !important;
}
.product-miniature .product-flags li.product-flag.pack,
.product-miniature .product-flags li.product-flag.online-only {
background: var(--lep-ok) !important; color: #FFF3DC !important;
}
/* Le coeur / apercu rapide reste au-dessus des badges */
.product-miniature .highlighted-informations,
.product-miniature .quick-view,
.product-miniature .wishlist-button-add { z-index: 4 !important; }
/* ---------- 18d. Mobile ---------- */
@media (max-width: 575px) {
.product-miniature .product-title { min-height: 3.2em !important; font-size: 13px !important; }
.product-miniature .price { font-size: 19px !important; }
}
/* =============================================================
19. Carrousels — securites
============================================================= */
/* Rupture de stock : bouton lisible */
.product-miniature .add-to-cart[disabled],
.product-miniature .btn-add-to-cart[disabled],
.product-miniature .add-to-cart.disabled {
background: #EFE7D2 !important;
color: #3A3F52 !important;
border-color: var(--lep-ink) !important;
opacity: 1 !important;
}
/* =============================================================
20. Bloc de reassurance a illustrations (accueil + fiche produit)
-------------------------------------------------------------
Version cadree du bloc "paiement securise / expedition rapide /
livraison offerte". Meme bloc HTML aux deux endroits : il passe
tout seul de 3 colonnes (accueil) a 1 colonne empilee des que la
place manque (colonne de fiche produit, mobile).
Les PNG restent vos illustrations actuelles. Le carre blanc qui
jurait sur le creme est masque par le cadre : plus besoin de
reexporter en transparent (mais c'est mieux si vous le faites).
============================================================= */
.lep-reass {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.lep-reass__item {
display: flex;
align-items: center;
gap: 14px;
padding: 14px;
background: var(--lep-card);
border: var(--lep-bd);
border-radius: var(--lep-radius);
box-shadow: var(--lep-shadow);
}
/* Cadre du personnage : fond de couleur par service, image detouree dessus */
.lep-reass__fig {
flex: 0 0 auto;
width: 76px;
height: 76px;
display: grid;
place-items: center;
border: 2px solid var(--lep-ink);
border-radius: var(--lep-radius-sm);
overflow: hidden;
background: var(--lep-icon-bg);
}
.lep-reass__item:nth-child(2) .lep-reass__fig { background: #F6C9A8; }
.lep-reass__item:nth-child(3) .lep-reass__fig { background: #8FD3CB; }
.lep-reass__fig img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
/* Neutralise le fond blanc des PNG non detoures */
mix-blend-mode: multiply;
}
.lep-reass__txt { min-width: 0; }
.lep-reass__txt b {
display: block;
font-family: var(--lep-font-text);
font-weight: 700;
font-size: 15px;
line-height: 1.25;
color: var(--lep-ink);
text-transform: none;
letter-spacing: 0;
}
.lep-reass__txt span {
display: block;
margin-top: 5px;
font-family: var(--lep-font-ui);
font-size: 9px;
line-height: 1.5;
letter-spacing: .04em;
color: #565C6B;
text-transform: uppercase;
}
/* Variante compacte : colonne de fiche produit ou bas de page */
.lep-reass--compact { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.lep-reass--compact .lep-reass__item { padding: 10px 12px; box-shadow: none; }
.lep-reass--compact .lep-reass__fig { width: 52px; height: 52px; }
.lep-reass--compact .lep-reass__txt b { font-size: 14px; }
/* Le module natif blockreassurance suit le meme habillage, si vous
preferez le garder plutot que de coller le bloc HTML */
.blockreassurance_product > div,
#block-reassurance li {
background: var(--lep-card) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius) !important;
box-shadow: var(--lep-shadow) !important;
margin-bottom: 10px !important;
padding: 12px 14px !important;
}
#block-reassurance li img, .blockreassurance_product img {
width: 34px !important;
height: 34px !important;
mix-blend-mode: multiply;
}
.blockreassurance_product .block-title, #block-reassurance span {
font-family: var(--lep-font-text) !important;
font-weight: 700 !important;
color: var(--lep-ink) !important;
}
@media (max-width: 575px) {
.lep-reass { grid-template-columns: minmax(0, 1fr); }
.lep-reass__fig { width: 58px; height: 58px; }
}
/* =============================================================
21. Cadres — habillage seul, aucune disposition imposee
-------------------------------------------------------------
Lecon des essais precedents : sur PRS028 la disposition des
vignettes, le zoom du visuel produit et les carrousels sont
pilotes par le theme et son JS. Ce fichier ne pose donc plus
que des couleurs, des bordures et des ombres.
Pour toute question de POSITION (miniatures, nombre de produits
par ligne, fleches de carrousel) : panneau de reglages du theme.
============================================================= */
/* Carte produit en liste */
.product-miniature, .js-product-miniature {
background: var(--lep-card) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius) !important;
box-shadow: var(--lep-shadow) !important;
transition: box-shadow .18s ease;
}
.product-miniature:hover, .js-product-miniature:hover {
box-shadow: 8px 8px 0 var(--lep-accent) !important;
}
.product-miniature .thumbnail-container,
.js-product-miniature .thumbnail-container {
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Visuel principal de la fiche produit : cadre sur le conteneur.
AUCUNE regle sur l'image, sur ses parents, ni sur les hauteurs :
le zoom et le carrousel d'images sont pilotes par le JS du theme,
et toute contrainte CSS ici les casse. */
#product .product-cover {
background: var(--lep-card) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius) !important;
box-shadow: 8px 8px 0 var(--lep-ink) !important;
}
/* Miniatures : couleur du cadre uniquement */
#product .js-qv-mask .thumb,
#product .product-images .thumb {
border: 2px solid var(--lep-ink) !important;
border-radius: var(--lep-radius-sm) !important;
}
#product .js-qv-mask .thumb.selected,
#product .product-images .thumb.selected,
#product .js-qv-mask .thumb:hover { border-color: var(--lep-accent) !important; }
/* ---------- Fleches de carrousel ----------
Diagnostic final : sur le carrousel de produits les deux fleches se
superposaient exactement (d'ou l'impression qu'il n'y en a qu'une).
Mes selecteurs .slick-prev / .slick-next ne les atteignaient pas :
le theme ne leur donne pas ces classes.
On les cible donc par leur POSITION dans le bloc (la premiere a
gauche, la derniere a droite), ce qui fonctionne quel que soit le
nom de leurs classes.
Le carrousel des marques, lui, est deja bien place par le theme :
il ne recoit que la couleur, aucune regle de position.
============================================================= */
/* --- Couleur : tous les carrousels, sans toucher aux positions --- */
.tdcarousel .slick-arrow,
.tdcarousel button.slick-prev,
.tdcarousel button.slick-next {
background: var(--lep-icon-bg) !important;
color: var(--lep-ink) !important;
border: 2px solid var(--lep-ink) !important;
border-radius: var(--lep-radius-sm) !important;
box-shadow: 3px 3px 0 var(--lep-ink) !important;
}
.tdcarousel .slick-arrow:hover,
.tdcarousel button.slick-prev:hover,
.tdcarousel button.slick-next:hover {
background: var(--lep-accent) !important;
color: #FFF3DC !important;
}
.tdcarousel .slick-arrow::before,
.tdcarousel .slick-arrow i,
.tdcarousel .slick-arrow svg {
color: inherit !important;
fill: currentColor !important;
opacity: 1 !important;
}
/* --- Position : carrousel de produits uniquement --- */
.elementor-products-carousel .block_content.tdcarousel { position: relative !important; }
.elementor-products-carousel .block_content.tdcarousel .slick-arrow {
position: absolute !important;
top: 50% !important;
bottom: auto !important;
margin: 0 !important;
z-index: 6 !important;
width: 40px !important;
height: 40px !important;
display: grid !important;
place-items: center !important;
transform: translateY(-50%) !important;
}
/* La premiere fleche du bloc part a gauche, la derniere a droite */
.elementor-products-carousel .block_content.tdcarousel .slick-arrow:first-of-type {
left: -20px !important;
right: auto !important;
}
.elementor-products-carousel .block_content.tdcarousel .slick-arrow:last-of-type {
left: auto !important;
right: -20px !important;
}
@media (max-width: 1199px) {
.elementor-products-carousel .block_content.tdcarousel .slick-arrow:first-of-type { left: -4px !important; }
.elementor-products-carousel .block_content.tdcarousel .slick-arrow:last-of-type { right: -4px !important; }
}
/* Titres turquoise restes dans les descriptions saisies au BO */
#product .product-description [style*="26bdc7"],
#product .product-description [style*="3ccf65"],
#product #description [style*="26bdc7"],
#product #description [style*="3ccf65"] { color: var(--lep-accent) !important; }
/* =============================================================
22. Corrections basees sur le balisage reel de la fiche produit
-------------------------------------------------------------
Releve dans le code source de www.lepnj.fr :
Visuel principal
.images-container.js-images-container
> .product-cover
> ul.product-flags
> .js-product-cover-images.row[data-count]
> .product-img.product-img-N.col-xs-12.col-sm-6
> .position-relative > .easyzoom > a > picture > img
> .product-thumbs-outer > .product-thumbs[data-count]
> .product-thumb.product-thumb-N > picture > img.thumb
Carrousel de produits
.elementor-products-carousel
> .block_content.tdcarousel.slick-arrows-middle
> .products.row
> .product_list[data-settings] (slick : 4 par vue en xl)
> .row_items
> article.product-miniature.col-12
============================================================= */
/* ---------- 22a. Visuel principal : une image, pleine largeur ----------
Le theme met les images cote a cote (col-sm-6 quand data-count=2) :
c'est ce qui coupait le visuel en deux. easyzoom / le carrousel
vertical n'utilisent pas ces colonnes, on peut donc les annuler. */
.js-product-cover-images.row {
display: block !important;
margin: 0 !important;
}
.js-product-cover-images > .product-img {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
padding: 0 !important;
}
/* Sur les navigateurs sans :has(), toutes les images restent empilees :
seule la premiere est affichee par defaut, le carrousel gere le reste. */
.js-product-cover-images .easyzoom,
.js-product-cover-images .easyzoom > a,
.js-product-cover-images picture { display: block; }
.js-product-cover-images img.img-fluid {
display: block;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
/* Badge et loupe poses par-dessus */
.product-cover > ul.product-flags {
position: absolute;
top: 12px;
left: 12px;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.product-cover { position: relative; }
.js-product-cover-images .layer { z-index: 4; }
/* ---------- 22b. Miniatures ---------- */
.product-thumbs .product-thumb img,
.product-thumbs .product-thumb img.thumb {
display: block;
width: 100%;
height: auto;
background: var(--lep-card);
border: 2px solid var(--lep-ink);
border-radius: var(--lep-radius-sm);
}
.product-thumbs .product-thumb.slick-active img,
.product-thumbs .product-thumb:hover img { border-color: var(--lep-accent) !important; }
/* Le bloc carrousel est exclu des regles de grille ci-dessus */
.tdcarousel .products.row {
display: block !important;
flex-wrap: nowrap !important;
}
.tdcarousel .products.row > * { display: block !important; }
/* ---------- 22c. Fenetres d'image de hauteur fixe ----------
UNE seule technique, appliquee partout ou une image doit tenir dans
un cadre : la balise ![]()
recoit une hauteur fixe et object-fit
contain. Consequences :
- l'image est TOUJOURS centree, horizontalement et verticalement ;
- elle n'est JAMAIS rognee ni deformee, quel que soit son format ;
- le cadre a toujours la meme hauteur, d'un produit a l'autre.
Aucune regle sur les conteneurs, les colonnes, la piste du carrousel
ou les niveaux intermediaires : le JS du theme (easyzoom, slick)
continue de fonctionner normalement. */
/* Visuel principal de la fiche produit
------------------------------------------------------------------
cover (et non contain) : l'image est AGRANDIE pour remplir une
fenetre courte, ses bords sont rognes. Vos photos ayant de larges
marges vides autour du produit, c'est ce vide qui disparait : cadre
plus court, produit plus grand.
object-position: center center -> rognage reparti a parts egales en
haut et en bas. NE PAS changer cette valeur : les essais avec top et
bottom decalent la photo dans le cadre au lieu de deplacer le rognage.
Deux valeurs a regler si besoin :
height hauteur du cadre noir (480px)
object-fit cover = zoom + rognage | contain = entiere, plus petite
Ne pas depasser ~500px en hauteur : au-dela, cover doit agrandir la
photo pour remplir la fenetre, et le produit grossit.
Solution de fond : recadrer les photos produits a l'export pour
supprimer le vide autour du produit. Le compromis disparaitrait. */
.js-product-cover-images .product-img img,
.js-product-cover-images img.img-fluid {
width: 100% !important;
height: 480px !important;
max-width: 100% !important;
max-height: none !important;
object-fit: cover !important;
object-position: center center !important;
margin: 0 !important;
}
/* Vignettes du carrousel de produits lies : meme hauteur pour toutes,
donc des cartes de proportions identiques. */
.tdcarousel .product-miniature .product-thumbnail img,
.tdcarousel .product-miniature img.img-fluid {
width: 100% !important;
height: 240px !important;
max-height: none !important;
object-fit: contain !important;
object-position: center center !important;
}
@media (max-width: 991px) {
.js-product-cover-images .product-img img,
.js-product-cover-images img.img-fluid { height: 380px !important; }
.tdcarousel .product-miniature .product-thumbnail img,
.tdcarousel .product-miniature img.img-fluid { height: 190px !important; }
}
@media (max-width: 575px) {
.js-product-cover-images .product-img img,
.js-product-cover-images img.img-fluid { height: 300px !important; }
.tdcarousel .product-miniature .product-thumbnail img,
.tdcarousel .product-miniature img.img-fluid { height: 160px !important; }
}
/* ---------- 22d. Ombre des cartes en carrousel ----------
L'ombre portee de 5 px depassait de la piste : le cadre de la derniere
carte visible etait coupe a droite. Ombre reduite a 3 px pour les
cartes du carrousel uniquement. Aucune largeur n'est modifiee. */
.tdcarousel .product-miniature,
.tdcarousel .js-product-miniature {
box-shadow: 3px 3px 0 var(--lep-ink) !important;
}
.tdcarousel .product-miniature:hover,
.tdcarousel .js-product-miniature:hover {
box-shadow: 3px 3px 0 var(--lep-accent) !important;
}
/* =============================================================
23. Bloc "Nos marques" sur fond bleu, logos encadres
-------------------------------------------------------------
Cible le balisage reel du widget "brands" de tdelementor :
.elementor-brands > .block_content.tdcarousel > .brands.row
> .elementor-brands-carousel > .row_items > .item.col-12 > a > img
Aucune classe a ajouter dans Elementor : cela s'applique partout
ou le widget Marques est present (accueil, fiche produit...).
============================================================= */
.elementor-brands {
background: var(--lep-hero-bg) !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius) !important;
box-shadow: var(--lep-shadow) !important;
padding: 26px 30px !important;
}
/* Chaque logo devient une tuile creme encadree */
.elementor-brands .item.col-12 { padding: 0 7px !important; }
.elementor-brands .item.col-12 > a {
display: block !important;
background: #FFF3DC !important;
border: var(--lep-bd) !important;
border-radius: var(--lep-radius-sm) !important;
padding: 10px 12px !important;
transition: transform .18s ease, box-shadow .18s ease;
}
.elementor-brands .item.col-12 > a > img {
display: block !important;
width: 100% !important;
height: 68px !important;
object-fit: contain !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.elementor-brands .item.col-12 > a:hover {
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 var(--lep-icon-bg) !important;
}
/* Titre de la section, s'il est place dans la meme colonne */
.elementor-brands + .elementor-widget-heading .elementor-heading-title { color: inherit; }
/* Puces du carrousel, lisibles sur le bleu.
Les fleches gardent le style et la position definis en section 22c. */
.elementor-brands .slick-dots li { background: rgba(255,243,220,.4) !important; }
.elementor-brands .slick-dots li.slick-active { background: var(--lep-icon-bg) !important; }
@media (max-width: 767px) {
.elementor-brands { padding: 18px 14px !important; }
.elementor-brands .item.col-12 > a > img { height: 54px !important; }
}
/* =============================================================
24b. Responsive — LA cause du decalage : la colonne des filtres
-------------------------------------------------------------
Constat sur la capture : un large vide a gauche, puis les cartes
coupees a droite. La grille n'etait pas en cause — c'est la colonne
laterale (#left-column) qui gardait sa largeur de bureau. Elle
poussait #content-wrapper vers la droite, donc hors de l'ecran.
En mobile, les deux colonnes passent a 100% et s'empilent.
============================================================= */
@media (max-width: 991px) {
#left-column, #right-column {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
#content-wrapper, #main > .row > #content-wrapper {
box-sizing: border-box !important;
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
#main > .row, .row.has-sidebar {
margin-left: 0 !important;
margin-right: 0 !important;
flex-wrap: wrap !important;
}
/* Les filtres, en mobile, sont replies : ils ne doivent pas occuper
une hauteur inutile au-dessus des produits. */
#left-column #search_filters_wrapper { margin-bottom: 14px; }
}
/* Garde-fou global : plus aucun element ne peut elargir la page */
@media (max-width: 991px) {
html, body { max-width: 100% !important; overflow-x: hidden !important; }
#wrapper, #main, #content, #products, #js-product-list {
box-sizing: border-box !important;
max-width: 100% !important;
}
}
/* =============================================================
24c. Responsive — fenetre de carrousel plus large que son bloc
-------------------------------------------------------------
Mesure relevee en mobile : .slick-list = 359px dans un conteneur de
339px. Les 20px d'excedent depassent a droite, ce qui rogne la
derniere vignette visible.
On contraint uniquement la FENETRE et le bloc. La piste (.slick-track)
et les largeurs de diapositive restent calculees par le theme : elles
doivent rester larges, ce sont les clones hors-champ.
============================================================= */
@media (max-width: 991px) {
.tdcarousel,
.elementor-brands .block_content.tdcarousel {
box-sizing: border-box !important;
max-width: 100% !important;
overflow: hidden !important;
}
.tdcarousel .slick-list {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
overflow: hidden !important;
}
}
/* =============================================================
24. Responsive — cartes produits
-------------------------------------------------------------
HISTORIQUE — A LIRE AVANT TOUTE MODIFICATION ICI.
La mise en page des cartes est NATIVE au theme et fonctionne :
.products.row.grid est un conteneur FLEX, et les classes
cols-xs-2 / cols-sm-2 / cols-md-3 / cols-lg-4 donnent aux cartes
leur largeur (50% en mobile, soit 2 par ligne).
Deux erreurs ont ete commises et corrigees :
1. imposer grid-template-columns: repeat(2, 1fr) sur le conteneur
-> se combinait au 50% du theme : cartes de 86px, bandes vides
2. imposer flex: none / width: auto sur les cartes
-> annulait le 50% du theme : une seule carte par ligne, qui
depasse a droite
REGLE : aucune largeur, aucun flex, aucun grid-template sur
.products, .product-miniature ou leurs conteneurs. Le nombre
d'articles par ligne se regle dans le widget Elementor
("Number item to show on device < 768"), jamais en CSS.
Ci-dessous : uniquement ce qui ne touche pas a la mise en page.
============================================================= */
@media (max-width: 767px) {
/* Le cadre et l'ombre sont comptes DANS la largeur, sinon la carte
depasse sa colonne de quelques pixels. C'est la seule correction
structurelle legitime a cet endroit. */
.product-miniature, .js-product-miniature,
.product-miniature *, .js-product-miniature * { box-sizing: border-box !important; }
/* Ombre portee reduite : a 5px elle debordait de la colonne */
.product-miniature, .js-product-miniature { box-shadow: 3px 3px 0 var(--lep-ink) !important; }
/* Visuel : hauteur homogene, image entiere, jamais etiree */
.product-miniature .thumbnail-container img,
.product-miniature .product-thumbnail img {
width: 100% !important;
height: 150px !important;
object-fit: contain !important;
background: #FFFDF7;
}
/* Textes : tailles adaptees a une demi-largeur d'ecran */
.product-miniature .product-title a {
font-size: 12.5px !important;
line-height: 1.35 !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
.product-miniature .price { font-size: 17px !important; }
.product-miniature .add-to-cart,
.product-miniature .btn-add-to-cart {
font-size: 9px !important;
letter-spacing: .02em !important;
padding: 10px 6px !important;
box-shadow: 3px 3px 0 var(--lep-ink) !important;
}
.product-miniature .product-flags li.product-flag { font-size: 8px !important; padding: 4px 6px !important; }
}
/* =============================================================
24a. Mobile : gouttiere en MARGE, cadre sur la carte
-------------------------------------------------------------
Mecanique exacte, mesuree : article.product-miniature EST la colonne
(flex: 0 0 50%) et sa gouttiere est un PADDING de 5px. Un padding est
interieur : la bordure se dessine donc au bord exterieur de la
colonne, et deux colonnes voisines ont leurs cadres bord a bord.
Correction : on remplace ce padding par une MARGE de meme valeur et
on reduit la base flex d'autant. Le calcul reste juste
(2 x (50% - 10px) + 4 x 5px = 100%), le nombre de cartes par ligne
ne change pas, et deux cadres sont desormais separes de 10px —
assez pour l'ombre portee de 3px.
Ne pas revenir a un padding ici : c'est la cause du chevauchement.
============================================================= */
@media (max-width: 767px) {
.products.row > .product-miniature,
.products.row > .js-product-miniature {
box-sizing: border-box !important;
flex: 0 0 calc(50% - 10px) !important;
width: calc(50% - 10px) !important;
max-width: calc(50% - 10px) !important;
margin: 0 5px 12px !important;
padding: 0 !important;
background: var(--lep-card) !important;
border: 3px solid var(--lep-ink) !important;
border-radius: 14px !important;
box-shadow: 3px 3px 0 var(--lep-ink) !important;
overflow: hidden !important;
}
/* La rangee garde ses marges negatives : elles compensent les 5px */
.products.row { justify-content: flex-start !important; }
/* Plus aucun cadre interieur : un seul cadre, celui de la carte */
.product-miniature .thumbnail-container {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
border-bottom: 3px solid var(--lep-ink) !important;
box-shadow: none !important;
}
.product-miniature .thumbnail-container img,
.product-miniature .product-thumbnail img {
width: 100% !important;
height: 150px !important;
object-fit: contain !important;
border: 0 !important;
border-radius: 0 !important;
background: #FFFDF7 !important;
}
.product-miniature .product-description { padding: 10px 8px 12px !important; }
}
/* ---------- 24a-bis. Contenu interne recale ----------
Le debordement mesurait exactement 10px, soit le padding retire de
.product-miniature. Le theme le compensait par des marges negatives
sur les blocs internes ; sans ce padding, elles font deborder le
contenu a droite. On les neutralise et on recentre. */
@media (max-width: 767px) {
.product-miniature > *,
.product-miniature .product-description,
.product-miniature .product-title,
.product-miniature .product-price-and-shipping,
.product-miniature .product-flags,
.product-miniature .thumbnail-container,
.product-miniature .product-thumbnail {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
left: auto !important;
right: auto !important;
}
/* Visuel centre dans son cadre */
.product-miniature .thumbnail-container { display: block !important; text-align: center !important; }
.product-miniature .thumbnail-container img,
.product-miniature .product-thumbnail img {
display: block !important;
margin: 0 auto !important;
object-position: center center !important;
}
/* Textes centres, coupures propres */
.product-miniature .product-title,
.product-miniature .product-price-and-shipping { text-align: center !important; }
.product-miniature .product-title a { display: block !important; padding: 0 4px !important; }
/* Bouton : centre, jamais plus large que la carte */
.product-miniature .product-description > .add-to-cart,
.product-miniature .add-to-cart,
.product-miniature .btn-add-to-cart,
.product-miniature form,
.product-miniature .product-actions {
box-sizing: border-box !important;
width: auto !important;
max-width: calc(100% - 16px) !important;
margin: 0 auto !important;
display: block !important;
text-align: center !important;
}
/* Badge "rupture de stock" : cale sur le bord gauche du cadre */
.product-miniature .product-flags { width: auto !important; left: 8px !important; }
}
/* ---------- 24a-ter. Bouton d'ajout : recentrage ----------
Le bouton restait decale a droite : son conteneur (form ou
.product-add-to-cart) portait encore une marge negative du theme,
et mes selecteurs precedents etaient moins specifiques que les
siens. On remonte la specificite en partant de .products.row. */
@media (max-width: 767px) {
.products.row > .product-miniature .product-add-to-cart,
.products.row > .product-miniature .product-actions,
.products.row > .product-miniature form,
.products.row > .product-miniature [class*="add-to-cart"],
.products.row > .product-miniature .btn-primary,
.products.row > .product-miniature .btn {
box-sizing: border-box !important;
position: static !important;
float: none !important;
transform: none !important;
inset: auto !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 6px !important;
padding-right: 6px !important;
}
/* Le conteneur du bouton occupe toute la largeur utile et centre */
.products.row > .product-miniature .product-add-to-cart,
.products.row > .product-miniature .product-actions,
.products.row > .product-miniature form {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
justify-content: center !important;
}
/* Le bouton lui-meme ne depasse jamais le cadre */
.products.row > .product-miniature [class*="add-to-cart"],
.products.row > .product-miniature .btn-primary {
width: calc(100% - 16px) !important;
max-width: calc(100% - 16px) !important;
text-align: center !important;
}
}
/* ---------- 24a-quater. min-width du bouton + alignement vertical ----------
1. Le bouton d'ajout porte un min-width en pixels (theme). Une largeur
en calc() ne peut pas passer sous un min-width : d'ou le
debordement persistant malgre les regles precedentes. On remet
min-width a 0.
2. Les titres font 2 ou 3 lignes selon le produit, ce qui decalait les
boutons en hauteur. La carte devient une colonne flex et le bloc
du bouton est pousse en bas (margin-top: auto), donc tous les
boutons d'une meme ligne s'alignent. */
@media (max-width: 767px) {
.products.row > .product-miniature [class*="add-to-cart"],
.products.row > .product-miniature .btn,
.products.row > .product-miniature .btn-primary,
.products.row > .product-miniature button,
.products.row > .product-miniature .product-add-to-cart,
.products.row > .product-miniature .product-actions,
.products.row > .product-miniature form {
min-width: 0 !important;
white-space: normal !important;
}
/* Hauteurs egales et bouton en bas de carte */
.products.row { align-items: stretch !important; }
.products.row > .product-miniature,
.products.row > .js-product-miniature {
display: flex !important;
flex-direction: column !important;
}
.products.row > .product-miniature .product-description {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
}
.products.row > .product-miniature .product-add-to-cart,
.products.row > .product-miniature .product-actions,
.products.row > .product-miniature form:last-child {
margin-top: auto !important;
}
/* Titre : hauteur reservee pour 3 lignes, pour que les prix
s'alignent aussi entre deux cartes voisines */
.products.row > .product-miniature .product-title {
min-height: 3.9em !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
}
}
/* ---------- 24a-quinquies. Bouton pousse en bas, quel que soit son balisage ----------
Le bouton restait decale en hauteur : mes selecteurs visaient
.product-add-to-cart / form, alors qu'ici le bouton est un enfant
direct de .product-description. On cible donc le DERNIER enfant du
bloc, quel que soit sa balise ou sa classe. */
@media (max-width: 767px) {
.products.row > .product-miniature .product-description > *:last-child {
margin-top: auto !important;
}
/* Le titre n'a plus besoin de hauteur reservee : le bouton est ancre
en bas, les cartes d'une meme ligne s'alignent d'elles-memes. */
.products.row > .product-miniature .product-title {
min-height: 0 !important;
display: block !important;
}
}
/* ---------- 24a-sexies. Alignement des boutons : hauteur de titre fixe ----------
Pourquoi pas margin-top: auto : une marge automatique ne pousse un
element que s'il reste de l'espace LIBRE dans le conteneur flex.
Mesure faite sur le site : .product-description n'en a pas, donc
auto se resout a 0px et le bouton ne bouge pas.
Methode deterministe : les titres occupent tous la meme hauteur
(4 lignes), donc prix et boutons tombent a la meme position sur
toutes les cartes d'une meme ligne.
Si un titre depasse 4 lignes, il est tronque proprement avec des
points de suspension plutot que de decaler la carte. */
@media (max-width: 767px) {
.products.row > .product-miniature .product-title {
display: block !important;
min-height: 0 !important;
height: 4.6em !important; /* 4 lignes a 1.15em */
margin: 0 0 2px !important;
overflow: hidden !important;
}
.products.row > .product-miniature .product-title a {
display: -webkit-box !important;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden !important;
font-size: 12.5px !important;
line-height: 1.15 !important;
}
/* Le prix garde une hauteur constante lui aussi */
.products.row > .product-miniature .product-price-and-shipping {
min-height: 2em !important;
margin: 0 0 8px !important;
}
/* Le bloc du bouton n'a plus besoin d'etre pousse */
.products.row > .product-miniature .product-add-to-cart { margin-top: 0 !important; }
}