/* ============================================================= WC Produits Reliés — styles front-end Chargé uniquement sur les articles (injecté dans via wp_head). ============================================================= */ /* ── Bloc conteneur ── */ .wcpr-bloc { margin: 2em 0; padding: 1.25rem 1.5rem 1.5rem; border: 1px solid #e2e2e2; border-radius: 10px; background: #f9f9f9; font-family: inherit; box-sizing: border-box; } /* ── Titre du bloc ── */ .wcpr-titre { margin: 0 0 1.1rem; padding-bottom: .75rem; border-bottom: 2px solid #e2e2e2; font-size: 1rem; font-weight: 600; color: #222; line-height: 1.4; } /* ── Grille de produits ── */ .wcpr-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; } /* ── Carte produit ── */ .wcpr-item { display: flex; flex-direction: column; text-decoration: none !important; color: inherit !important; background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; } .wcpr-item:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .1); transform: translateY(-2px); text-decoration: none !important; } /* ── Image produit ── */ .wcpr-image { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #f0f0f0; } .wcpr-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .wcpr-item:hover .wcpr-image img { transform: scale(1.04); } /* ── Infos produit ── */ .wcpr-infos { padding: .75rem .65rem .8rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; } /* ── Nom produit ── */ .wcpr-nom { font-size: .83rem; font-weight: 600; color: #1a1a1a; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Prix ── */ .wcpr-prix { font-size: .82rem; color: #555; font-weight: 500; line-height: 1.2; } .wcpr-prix .woocommerce-Price-amount { color: inherit; } .wcpr-prix del { opacity: .55; margin-right: .25em; } .wcpr-prix ins { text-decoration: none; color: #c0392b; } /* ── Bouton ── */ .wcpr-bouton { margin-top: auto; display: inline-block; padding: .32rem .6rem; background: #0a74da; color: #fff !important; border-radius: 5px; font-size: .75rem; font-weight: 500; text-align: center; line-height: 1.4; transition: background .15s ease; } .wcpr-item:hover .wcpr-bouton { background: #085bb5; } /* ── Responsive ── */ @media (max-width: 480px) { .wcpr-bloc { padding: 1rem; } } /* ── Mode thème ─────────────────────────────────────────────── */ /* Le bloc conteneur reste identique, mais on laisse WooCommerce gérer entièrement le style des cards. */ .wcpr-bloc--theme { /* Neutralise les styles de grille custom qui ne s'appliquent qu'au mode personnalisé */ } .wcpr-bloc--theme .wcpr-titre--theme { margin-bottom: 1.25rem; } /* La liste