/* * Carte produit — composant partagé entre la grille du catalogue et les blocs * « produits liés » / « ventes incitatives » de la fiche produit. * * Avant la fusion, ces deux contextes portaient deux copies divergentes du même * composant : le catalogue avec des valeurs réglables, la fiche produit avec des * valeurs codées en dur. Les écarts légitimes (arrondi, marge intérieure, ombre, * graisse du prix) passent désormais par des variables, que chaque module * renseigne dans son bloc :root. * * Les bascules oui/non sont portées par des classes sur , posées en PHP : * le fichier reste statique, donc mis en cache par le navigateur. */ /* ---------- Fil d'Ariane ---------- */ /* * Dans shared.css et non dans catalog.css ou product.css : le fil d'Ariane * apparaît aussi bien en boutique que sur une fiche, et la règle serait sinon * écrite deux fois. * * WooCommerce le rend comme du texte plat : des séparés par des nœuds * texte, sans conteneur par niveau. Le séparateur n'est donc pas stylable ; * seuls la taille, la couleur et les liens le sont. */ .woocommerce-breadcrumb { margin: 0 0 18px; padding: 0; font-size: 12px; line-height: 1.6; color: var(--wcdc-muted); } .woocommerce-breadcrumb a { color: var(--wcdc-primary); text-decoration: none; } .woocommerce-breadcrumb a:hover { text-decoration: underline; } /* ---------- Grille ---------- */ /* * flex-wrap + largeurs en calc(), exactement comme les extensions d'origine. * * Une version de ce plugin a tenté display:grid : arithmétiquement équivalent, * mais la mise en page était cassée sous Divi. Retour à la disposition éprouvée. * Voir CHANGELOG.md. * * align-items: stretch donne des cartes de hauteur égale sur une même ligne ; * combiné au margin-top:auto du bouton, les bas de carte s'alignent. */ .woocommerce ul.products { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; /* * La gouttière est portée par le CONTENEUR, pas par les cartes. * * Les extensions d'origine posaient un margin-right sur chaque carte, puis * le retiraient à la dernière de chaque ligne avec :nth-child(Nn) — N étant * gravé dans le sélecteur par PHP. En passant à des feuilles statiques, ce * N ne pouvait plus l'être, et la règle dépendait d'une classe posée sur * . Une classe manquante — cache de page servant un HTML antérieur, * contexte non reconnu — et la dernière carte gardait sa gouttière : trois * cartes plus trois gouttières dépassent 100 %, la troisième passait à la * ligne. * * Avec gap, les cartes n'ont plus aucune marge : il n'y a plus de dernière * carte à traiter, donc plus de N, donc plus de classe. */ gap: var(--wcdc-gap, 30px); /* * Indispensable, et pas seulement décoratif : WooCommerce fait flotter le * compteur de résultats à gauche et le formulaire de tri à droite, sans * conteneur autour. Un conteneur flex établit un contexte de formatage de * bloc, dont la boîte se rétrécit pour ne pas chevaucher un flottant — la * grille entière se retrouve alors comprimée entre les deux. * * woocommerce-layout.css pose déjà ce clear, mais ce fichier n'est pas * toujours chargé sous Divi : on ne s'en remet pas à lui. */ clear: both; padding: 0; list-style: none; } /* * WooCommerce comme Divi posent un clearfix ::before / ::after sur le