/* ========================================================================== B-1 — Boutique : archives de produits. Mise en file sur les seules archives rendues par archive-product.php — boutique, categories, etiquettes et marques de produits (functions.php, digic_child_boutique_assets). Tous les selecteurs partent en outre de « .main-archive-product », qui n existe que dans ce gabarit : aucune regle n atteint l accueil ni les fiches produit, meme si la feuille venait a etre chargee ailleurs. La carte est le style natif 3 de Digic (« content-product4 », action dans .btn-atc), choisi a l execution par inc/boutique.php. Le parent en fournit deja le bouton visible, son style et ses etats ; cette feuille n ajoute que le cadre d image, la reserve de titre et l alignement du bas de carte. FP-1 — la feuille est aussi mise en file sur la fiche produit principale, pour ses produits associes et ses ventes incitatives, qui recoivent la meme carte (inc/boutique.php). Chaque regle de carte y est etendue par un selecteur AJOUTE, prefixe « .main-single-product :is(.related, .upsells) » ; les selecteurs des archives sont inchanges, et rien ici n atteint la colonne d achat ni la galerie de la fiche. Section 6 : hauteur egale des cartes dans le carrousel. ========================================================================== */ /* 1. Cadre d image — motif de C-4.1, C-6 et C-8.1, aux memes valeurs. Sans cadre, la carte prend le rapport du fichier : mesure B-0, 282 et 319 px de haut pour deux visuels voisins, d ou une grille irreguliere. Rapport 1:1, fond #F2F2F2 de la charte, visuel entier en contain, marge interieure proportionnelle de C-8.1 (5,73 %, calculee sur la largeur du cadre, donc egale sur les quatre cotes d un carre). */ .main-archive-product .products-list.grid .content-product4 .products-thumb, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4 .products-thumb{ display:block; width:100%; aspect-ratio:1 / 1; background:#f2f2f2; } .main-archive-product .products-list.grid .content-product4 .products-thumb .woocommerce-LoopProduct-link, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4 .products-thumb .woocommerce-LoopProduct-link{ display:flex; align-items:center; justify-content:center; height:100%; padding:5.73%; background:transparent; } .main-archive-product .products-list.grid .content-product4 .products-thumb img, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4 .products-thumb img{ width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; } /* 2. Bas de carte aligne sur la rangee (B-1, revu en B-1.1). Les cartes d une rangee ont deja la meme hauteur : le « li » est un element de flex de « .row ». La carte et son contenu en deviennent a leur tour des colonnes flex qui occupent toute cette hauteur. B-1.1 : c est le PRIX qui prend la marge restante (margin-top:auto), et le bloc d action le suit a distance fixe — les 10 px natifs de « .btn-atc » (template.css), que B-1 ecrasait par son propre margin-top:auto. Le couple prix + action est donc ancre ensemble en bas de carte, a 10 px l un de l autre (mesure B-1.1, bas de la boite du prix au haut du bouton, sur toutes les cartes des pages 1 et 2, de 360 a 1440 px), quel que soit le nombre de lignes du titre ou du prix. En B-1, l action seule etait ancree : l ecart variait de 0 a 18 px et le prix touchait le bouton dans la carte la plus haute d une rangee. La reserve de deux lignes de titre devient inutile et est retiree : un titre de trois lignes ne decale plus rien. */ .main-archive-product .products-list.grid > li{ display:flex; } .main-archive-product .products-list.grid .content-product4, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4{ display:flex; flex-direction:column; width:100%; } .main-archive-product .products-list.grid .content-product4 .products-content, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4 .products-content{ display:flex; flex:1 1 auto; } .main-archive-product .products-list.grid .content-product4 .contents, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4 .contents{ display:flex; flex-direction:column; width:100%; } .main-archive-product .products-list.grid .content-product4 .price, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4 .price{ margin-top:auto; } /* Le libelle de categorie, au-dessus du titre, tient sur une ligne. Mesure B-1 a 390 px : « Kaspersky Antivirus au Sénégal » et « Logiciels Microsoft au Sénégal » passaient sur deux lignes et decalaient de 20 px titre, prix et bouton dans cinq rangees sur douze. Information secondaire, lien vers la categorie : elle est coupee par des points de suspension plutot que de deplacer le titre. */ .main-archive-product .products-list.grid .content-product4 .cat-products, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4 .cat-products{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } /* Un montant ne se coupe pas. Le separateur de milliers de la boutique est une espace simple : a quatre colonnes, la fourchette d un produit variable se repliait au milieu d un nombre (mesure B-1 : « 17 650 CFA – 549 » puis « 600 CFA »). Chaque montant reste d un bloc ; la fourchette se replie au tiret. */ .main-archive-product .products-list.grid .content-product4 .price .woocommerce-Price-amount, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4 .price .woocommerce-Price-amount{ white-space:nowrap; } /* 2 bis. Bouton « Demander un devis » (D8) dans la carte. La regle du parent « .content-product4 .btn-atc a » (template.css) est plus specifique que celle de D8 (phase4.css, .digic-child-quote-button) : elle passait le bouton en noir, lui laissait le liseré vert de D8, et, au survol, ramenait son texte a 0 px pour montrer l icone de panier du ::before — un panier sur une demande de devis. On rend au bouton sa couleur D8 (#218663, survol #1a6b4f, valeurs de phase4.css) et son texte au survol, sans icone ; hauteur et rayon restent ceux du bouton panier voisin (30 px de ligne, sans bordure), pour que les deux actions tombent sur la meme ligne. Capitales et graisse de D8 conservees. */ .main-archive-product .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button, .main-archive-product .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button:hover, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button:hover, .main-archive-product .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button:focus, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button:focus{ border:0; font-size:12px; color:#fff; } .main-archive-product .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button{ background:#218663; } .main-archive-product .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button:hover, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button:hover, .main-archive-product .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button:focus, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button:focus{ background:#1a6b4f; } .main-archive-product .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button::before, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button::before{ display:none; } /* Focus clavier de l action. Mesure B-1, parcours a la touche Tab : seul le bouton D8 portait un indicateur (phase4.css, :focus-visible) ; « Ajouter au panier » et « Choix des options » n en montraient aucun (outline none). On leur donne le meme, aux memes valeurs que D8. */ .main-archive-product .products-list.grid .content-product4 .btn-atc a:focus-visible, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4 .btn-atc a:focus-visible{ outline:3px solid #333; outline-offset:2px; } /* Sous 576 px, deux colonnes : la carte descend a 142 px de large a 360 px, et « DEMANDER UN DEVIS » en mesurait 150 (mesure B-1) — seul bouton a deborder, par ses capitales espacees. Il est resserre comme sur la bande de survol des cartes (phase4.css : 11 px), sans retour a la ligne. */ @media (max-width:575px){ .main-archive-product .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button, .main-archive-product .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button:hover, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button:hover, .main-archive-product .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button:focus, .main-single-product :is(.related, .upsells) .products-list.grid .content-product4 .btn-atc a.digic-child-quote-button:focus{ padding:0 8px; font-size:11px; letter-spacing:.02em; } } /* 2 ter. Widget des categories : place de la fleche de depliage. La fleche d une categorie a sous-niveaux (span.arrow, posee par le script du parent) est en position absolue a droite, 15 px de large, et le libelle ne lui reserve rien. Mesure B-1 dans le panneau de 260 px a 390 px : « Avast antivirus au Sénégal (6) », « ESET NOD32 », « Logiciels Adobe » et « Panda » passaient sous la fleche. Le parent pose l entree en « padding:9px 20px !important » et la fleche a « right:20px », DANS ce retrait : le texte allait jusqu a son bord droit. Le retrait droit passe a 40 px — les 20 du parent, les 15 de la fleche, 5 d air —, en !important pour l emporter sur celui du parent (selecteur plus specifique). La fleche, calee sur le bord de la boite de remplissage, ne bouge pas. */ .main-archive-product .sidebar-product .bwp_woo_categories_widget ul.product-categories > li.cat-parent{ padding-right:40px !important; } /* 3. Commande du panneau des categories. Le parent stylise « .bwp-top-bar.top .button-filter-toggle » pour un ; la commande est desormais un