/** * PurePeptide — raccords entre le balisage WordPress et le design system. * * `css/styles.css` est la référence validée, identique au site statique : on n'y * touche pas. Cette feuille corrige uniquement ce que WordPress et WooCommerce * imposent en plus, et rien d'autre. Chargée après `pp-main`. */ /* ========================================================================== 1 · Hauteurs d'images écrasées par WooCommerce -------------------------------------------------------------------------- `woocommerce-layout.css` pose `.woocommerce img, .woocommerce-page img { height: auto }` — spécificité (0,1,1), qui bat `.pd__photo` ou `.brand__mark` (0,1,0). Résultat sur toute page boutique : le flacon de la fiche passe de 360 px à plus de 800 px et pousse la page vers le bas, tandis que le logo de l'en-tête tombe à 9 px de large. On re-épingle avec `img.classe` (0,2,1) : la victoire ne dépend alors plus de l'ordre de chargement des feuilles, seulement de la spécificité. Les valeurs et les points de rupture recopient `css/styles.css` à l'identique. ========================================================================== */ .woocommerce img.brand__mark, .woocommerce-page img.brand__mark { height: 34px; width: auto; } .woocommerce img.brand__word-img, .woocommerce-page img.brand__word-img { height: 15px; width: auto; } .woocommerce img.pd__photo, .woocommerce-page img.pd__photo { height: 360px; width: auto; } .woocommerce img.product__photo, .woocommerce-page img.product__photo { height: 188px; width: auto; } .woocommerce .ci__thumb img, .woocommerce-page .ci__thumb img { height: 88px; width: auto; } @media (max-width: 900px) { .woocommerce img.hero__media, .woocommerce-page .hero__media img { max-height: 280px; width: auto; } } @media (max-width: 600px) { .woocommerce img.pd__photo, .woocommerce-page img.pd__photo { height: 280px; } .woocommerce .ci__thumb img, .woocommerce-page .ci__thumb img { height: 66px; } } /* Après le palier 600 px, comme dans styles.css où cette règle vient plus bas. */ @media (max-width: 680px) { .woocommerce img.pd__photo, .woocommerce-page img.pd__photo { height: 240px; } .woocommerce img.product__photo, .woocommerce-page img.product__photo { height: 124px; } } /* ========================================================================== 2 · Navigation : wp_nav_menu emballe les liens dans