/* * ParisManhattan — Parcours d'achat * Panier, commande, compte client, connexion. * * Chargé uniquement sur les pages WooCommerce (voir functions.php). * Les valeurs viennent du kit Elementor du site : on ne réinvente pas la charte. */ /* Les jetons de charte (couleurs, polices, espacements) sont définis dans pm.css, qui est chargé sur tout le site et dont cette feuille dépend. */ /* ------------------------------------------------------------------ 1. Cadre général des pages du parcours ------------------------------------------------------------------ */ /* .pm-parcours est posée sur : elle englobe donc toute la page. */ .pm-parcours .woocommerce { font-family: var(--pm-texte); color: var(--pm-noir); } .pm-parcours h1, .pm-parcours h2, .pm-parcours h3 { font-family: var(--pm-titre); font-weight: 700; line-height: 1.15; color: var(--pm-noir); } .pm-parcours h1 { font-size: clamp(1.9rem, 5vw, 2.75rem); margin: 0 0 0.35em; } .pm-parcours h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin: 0 0 0.75em; } /* ------------------------------------------------------------------ 2. Fil d'étapes du tunnel (panier → livraison → paiement) ------------------------------------------------------------------ */ .pm-etapes { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 0 0 2.5rem; padding: 0; list-style: none; font-family: var(--pm-titre); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; } .pm-etapes li { display: flex; align-items: center; gap: 0.6rem; color: var(--pm-texte-doux); } .pm-etapes li::before { content: counter(pm-etape); counter-increment: pm-etape; display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border: 1px solid currentColor; border-radius: 50%; font-size: 0.8rem; } .pm-etapes { counter-reset: pm-etape; } .pm-etapes li[aria-current="step"] { color: var(--pm-rose); font-weight: 600; } .pm-etapes li[aria-current="step"]::before { background: var(--pm-rose-action); border-color: var(--pm-rose-action); color: var(--pm-blanc); } .pm-etapes li[data-etat="fait"] { color: var(--pm-noir); } .pm-etapes li[data-etat="fait"]::before { content: "✓"; background: var(--pm-noir); border-color: var(--pm-noir); color: var(--pm-blanc); } /* ------------------------------------------------------------------ 3. Boutons ------------------------------------------------------------------ */ .woocommerce .pm-parcours .button, .woocommerce .pm-parcours button.button, .woocommerce .pm-parcours input.button, .woocommerce .pm-parcours a.button, .woocommerce .pm-parcours .checkout-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-block-size: 3rem; padding: 0.85rem 2rem; border: 1px solid var(--pm-noir); border-radius: var(--pm-rayon); background: var(--pm-noir); color: var(--pm-blanc); font-family: var(--pm-titre); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .woocommerce .pm-parcours .button:hover, .woocommerce .pm-parcours button.button:hover, .woocommerce .pm-parcours a.button:hover { background: var(--pm-rose-action); border-color: var(--pm-rose-action); color: var(--pm-blanc); } /* Action principale : payer, valider. Le libellé blanc est hérité de la règle ci-dessus : ce fond doit donc porter le rose accessible, pas le rose de marque. */ .woocommerce .pm-parcours .checkout-button, .woocommerce .pm-parcours #place_order, .woocommerce .pm-parcours .button.alt { inline-size: 100%; background: var(--pm-rose-action); border-color: var(--pm-rose-action); font-size: 1rem; } .woocommerce .pm-parcours .checkout-button:hover, .woocommerce .pm-parcours #place_order:hover, .woocommerce .pm-parcours .button.alt:hover { background: var(--pm-rose-action-survol); border-color: var(--pm-rose-action-survol); } /* Action secondaire : continuer mes achats, modifier */ .woocommerce .pm-parcours .pm-bouton-discret, .woocommerce .pm-parcours .button.pm-secondaire { background: transparent; color: var(--pm-noir); } .woocommerce .pm-parcours .pm-bouton-discret:hover { background: var(--pm-noir); color: var(--pm-blanc); } :where(.pm-parcours) :focus-visible { outline: 2px solid var(--pm-rose); outline-offset: 3px; } /* ------------------------------------------------------------------ 4. Champs de formulaire ------------------------------------------------------------------ */ .pm-parcours .form-row { margin: 0 0 1.1rem; padding: 0; } .pm-parcours label { display: block; margin-block-end: 0.4rem; font-family: var(--pm-titre); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pm-noir); } .pm-parcours .required { color: var(--pm-rose); text-decoration: none; } .pm-parcours input[type="text"], .pm-parcours input[type="email"], .pm-parcours input[type="tel"], .pm-parcours input[type="password"], .pm-parcours input[type="number"], .pm-parcours textarea, .pm-parcours select, .pm-parcours .select2-container .select2-selection--single { inline-size: 100%; min-block-size: 3rem; padding: 0.75rem 1rem; border: 1px solid var(--pm-bordure); border-radius: var(--pm-rayon); background: var(--pm-blanc); font-family: var(--pm-texte); font-size: 1rem; /* 16px minimum : évite le zoom automatique sur iPhone */ color: var(--pm-noir); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .pm-parcours input:focus, .pm-parcours textarea:focus, .pm-parcours select:focus { border-color: var(--pm-rose); box-shadow: 0 0 0 3px rgb(228 34 120 / 12%); outline: none; } /* --- Le champ « Pays/région » --------------------------------------- WooCommerce remplace ce menu déroulant par celui de select2, qui a sa propre mise en forme : une hauteur de 28 px, une ligne de texte calée sur cette hauteur, et une marge basse négative de 4 px. Notre feuille lui donnait 3 rem de haut, mais sans toucher à la ligne de texte : celle-ci restait donc collée en haut d'une boîte plus grande, et le champ lui-même remontait de 4 px par rapport à ses voisins. D'où le « France » qui ne tombait pas en face de son cadre. On centre le contenu et on annule la marge. */ .pm-parcours .select2-container .select2-selection--single { display: flex; align-items: center; margin: 0; padding-block: 0; } .pm-parcours .select2-container .select2-selection__rendered { padding: 0; line-height: 1.4; color: var(--pm-noir); } /* La flèche était posée à 1 px du haut, calculée pour une boîte de 28 px. On la centre sur la hauteur réelle. */ .pm-parcours .select2-container .select2-selection__arrow { inset-block-start: 50%; inset-inline-end: 0.75rem; block-size: auto; transform: translateY(-50%); } /* La liste déroulante reprend le cadre des champs. */ .pm-parcours .select2-dropdown { border-color: var(--pm-bordure); border-radius: var(--pm-rayon); } .pm-parcours .select2-container .select2-search__field { min-block-size: 2.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--pm-bordure); font-family: var(--pm-texte); } .pm-parcours .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--pm-rose-clair); color: var(--pm-noir); } /* L'indication de saisie était à 2,45:1 sur blanc : trop pâle pour être lue. On la remonte au gris de texte de la charte, 5,41:1. */ .pm-parcours input::placeholder, .pm-parcours textarea::placeholder { color: var(--pm-texte-doux); } /* ================================================================== 5. PANIER ================================================================== Le widget Elementor fournit deja la structure : .e-cart__container en deux colonnes, avec une colonne de droite collante. On ne refait donc pas la mise en page, on l'habille. ================================================================== */ /* --- Cadre general --------------------------------------------- */ .pm-parcours .e-cart__container { gap: clamp(1.5rem, 4vw, 3.5rem); } .pm-parcours .e-cart-section { margin-block-end: 1.5rem; } /* --- Le tableau devient une liste de lignes aerees -------------- Elementor stylise ces cellules avec quatre classes (.elementor-widget-woocommerce-cart .woocommerce table.cart td.x). Sans prefixe equivalent, tout ce qui suit serait ecrase. ---------------------------------------------------------------- */ .pm-parcours .woocommerce-cart-form, .pm-parcours .e-shop-table { border: 0; background: transparent; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart, .pm-parcours table.shop_table.cart { inline-size: 100%; border: 0; border-collapse: collapse; background: transparent; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart thead th, .pm-parcours table.shop_table.cart thead th { padding: 0 0 0.85rem; border: 0; border-block-end: 1px solid var(--pm-noir); background: transparent; font-family: var(--pm-titre); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; text-align: start; color: var(--pm-noir); } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart tbody td, .pm-parcours table.shop_table.cart tbody td { padding: 1.5rem 0.75rem 1.5rem 0; border: 0; border-block-end: 1px solid var(--pm-bordure); background: transparent; vertical-align: middle; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart tbody tr:last-child td, .pm-parcours table.shop_table.cart tbody tr:last-child td { border-block-end: 0; } /* Croix de suppression : discrete, mais confortable au doigt. */ .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart td.product-remove, .pm-parcours table.shop_table.cart td.product-remove { inline-size: 3rem; padding-inline-end: 0; text-align: start; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart td.product-remove a.remove, .pm-parcours table.shop_table.cart td.product-remove a.remove { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: transparent; color: var(--pm-texte-doux); font-size: 1.35rem; font-weight: 400; line-height: 1; text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart td.product-remove a.remove:hover, .pm-parcours table.shop_table.cart td.product-remove a.remove:hover { background: var(--pm-rose-clair); color: var(--pm-rose-action); } /* Le visuel prime : c'est un site de mode. */ .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart td.product-thumbnail, .pm-parcours table.shop_table.cart td.product-thumbnail { inline-size: 7rem; padding-inline-end: 1.25rem; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart td.product-thumbnail img, .pm-parcours table.shop_table.cart td.product-thumbnail img { display: block; inline-size: 6rem; max-inline-size: none; block-size: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--pm-gris); } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart td.product-name, .pm-parcours table.shop_table.cart td.product-name { inline-size: auto; text-align: start; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart td.product-name a, .pm-parcours table.shop_table.cart td.product-name a { display: inline-block; font-family: var(--pm-titre); font-size: 1.02rem; font-weight: 700; line-height: 1.3; color: var(--pm-noir); text-decoration: none; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart td.product-name a:hover, .pm-parcours table.shop_table.cart td.product-name a:hover { color: var(--pm-rose); } /* Taille et couleur de la variante. */ .pm-parcours .variation, .pm-parcours dl.variation { display: flex; flex-wrap: wrap; gap: 0.15rem 0.75rem; margin: 0.4rem 0 0; font-size: 0.85rem; line-height: 1.4; color: var(--pm-texte-doux); } .pm-parcours dl.variation dt, .pm-parcours dl.variation dd { margin: 0; padding: 0; font-weight: 400; } .pm-parcours dl.variation dt { font-weight: 600; } .pm-parcours dl.variation p { margin: 0; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart td.product-price, .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart td.product-subtotal, .pm-parcours table.shop_table.cart td.product-price, .pm-parcours table.shop_table.cart td.product-subtotal { font-family: var(--pm-texte); font-size: 0.98rem; text-align: start; white-space: nowrap; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart td.product-subtotal, .pm-parcours table.shop_table.cart td.product-subtotal { font-family: var(--pm-titre); font-weight: 700; } /* --- Selecteur de quantite ------------------------------------- */ .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart td.product-quantity, .pm-parcours table.shop_table.cart td.product-quantity { inline-size: 8rem; text-align: start; } .pm-parcours .quantity { display: inline-flex; align-items: center; border: 1px solid var(--pm-bordure); background: var(--pm-blanc); } .pm-parcours .quantity input[type="number"] { inline-size: 4rem; min-block-size: 2.75rem; padding: 0.5rem 0.25rem; border: 0; background: transparent; font-family: var(--pm-texte); font-size: 1rem; text-align: center; -moz-appearance: textfield; appearance: textfield; } .pm-parcours .quantity input[type="number"]:focus { box-shadow: none; outline: 2px solid var(--pm-rose); outline-offset: -2px; } /* --- Moins et plus ------------------------------------------------ Le champ seul obligeait à cliquer dedans, effacer, saisir, puis trouver « Mettre à jour ». Ces deux boutons font le même travail d'un doigt. Ils ne servent à rien sans le script qui les anime : ils restent donc masqués tant que celui-ci n'a pas signalé sa présence. Le champ, lui, ne bouge pas — une saisie directe reste possible. Les signes sont dessinés en fond plutôt qu'écrits : « − » (U+2212) n'existe pas dans Coco Sharp, et un tiret ordinaire n'aurait ni la même longueur ni la même hauteur que le plus. */ .pm-qte { display: inline-flex; align-items: center; border: 1px solid var(--pm-bordure); background: var(--pm-blanc); } /* Le cadre est porté par le groupe : le champ n'a plus le sien. */ .pm-qte .quantity { border: 0; background: transparent; } button.pm-qte__bouton { display: none; flex: none; inline-size: 2.5rem; block-size: 2.75rem; padding: 0; border: 0; border-radius: 0; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 0.7rem; color: var(--pm-noir); cursor: pointer; transition: background-color 0.15s ease; } .pm-qte-active button.pm-qte__bouton { display: block; } button.pm-qte__moins { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' stroke='%231e1f1c' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 6h8'/%3E%3C/svg%3E"); } button.pm-qte__plus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' stroke='%231e1f1c' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 2v8M2 6h8'/%3E%3C/svg%3E"); } button.pm-qte__bouton:hover { background-color: var(--pm-rose-clair); } button.pm-qte__bouton:focus-visible { outline: 2px solid var(--pm-rose-action); outline-offset: -2px; } /* « Mettre à jour » reste en place pour qui n'a pas de JavaScript, mais devient inutile dès que le script fonctionne : la mise à jour part d'elle-même une demi-seconde après le dernier clic. */ .pm-qte-active .pm-parcours .actions > .button[name="update_cart"] { display: none; } .pm-parcours .quantity input::-webkit-outer-spin-button, .pm-parcours .quantity input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; appearance: none; } /* --- Code promo ------------------------------------------------- */ .pm-parcours .coupon { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-block-start: 1.5rem; padding: 1.25rem; border: 1px dashed var(--pm-bordure); background: var(--pm-fond); } .pm-parcours .coupon label { inline-size: 100%; margin: 0 0 0.15rem; font-size: 0.78rem; } .pm-parcours .coupon input[type="text"] { flex: 1 1 11rem; min-inline-size: 0; } .pm-parcours .coupon .button { flex: none; } /* --- Actions sous le tableau ------------------------------------ */ .pm-parcours .actions > .button[name="update_cart"] { background: transparent; color: var(--pm-noir); } .pm-parcours .actions > .button[name="update_cart"]:disabled { border-color: var(--pm-bordure); color: var(--pm-texte-doux); opacity: 1; cursor: default; } /* ================================================================== 5 bis. PANIER SUR MOBILE ================================================================== Un tableau a six colonnes ne tient pas sur 360 px. Chaque ligne devient une carte : visuel a gauche, informations a droite. ================================================================== */ @media (max-width: 47.99rem) { .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart thead, .pm-parcours table.shop_table.cart thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart, .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart tbody, .pm-parcours table.shop_table.cart, .pm-parcours table.shop_table.cart tbody { display: block; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart tr.cart_item, .pm-parcours table.shop_table.cart tr.cart_item { position: relative; display: grid; grid-template-columns: 5.5rem 1fr; grid-template-areas: "image nom" "image prix" "image quantite" "image total"; gap: 0.35rem 1rem; padding: 1.25rem 2.25rem 1.25rem 0; border-block-end: 1px solid var(--pm-bordure); } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart tr.cart_item td, .pm-parcours table.shop_table.cart tr.cart_item td { display: block; padding: 0; border: 0; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart td.product-thumbnail, .pm-parcours table.shop_table.cart td.product-thumbnail { grid-area: image; inline-size: auto; padding: 0; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart td.product-thumbnail img, .pm-parcours table.shop_table.cart td.product-thumbnail img { inline-size: 100%; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart td.product-name, .pm-parcours table.shop_table.cart td.product-name { grid-area: nom; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart td.product-price, .pm-parcours table.shop_table.cart td.product-price { grid-area: prix; font-size: 0.9rem; color: var(--pm-texte-doux); } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart td.product-quantity, .pm-parcours table.shop_table.cart td.product-quantity { grid-area: quantite; inline-size: auto; margin-block-start: 0.35rem; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart td.product-subtotal, .pm-parcours table.shop_table.cart td.product-subtotal { grid-area: total; margin-block-start: 0.35rem; font-size: 1.05rem; } /* La croix se cale en haut a droite de la carte. */ .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart td.product-remove, .pm-parcours table.shop_table.cart td.product-remove { position: absolute; inset-block-start: 1rem; inset-inline-end: 0; inline-size: auto; } /* Les intitules de colonnes reviennent devant les valeurs. */ .pm-parcours table.shop_table.cart tr.cart_item td.product-price::before, .pm-parcours table.shop_table.cart tr.cart_item td.product-subtotal::before { margin-inline-end: 0.4rem; font-family: var(--pm-titre); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pm-texte-doux); content: attr(data-title); } .pm-parcours table.shop_table.cart tr.cart_item td.product-thumbnail::before, .pm-parcours table.shop_table.cart tr.cart_item td.product-remove::before, .pm-parcours table.shop_table.cart tr.cart_item td.product-name::before, .pm-parcours table.shop_table.cart tr.cart_item td.product-quantity::before { content: none; } /* Mettre a jour et code promo : pleine largeur, empiles. */ .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart tr:not(.cart_item), .pm-parcours table.shop_table.cart tr:not(.cart_item) { display: block; padding-block-start: 1.25rem; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce table.cart tr:not(.cart_item) td, .pm-parcours table.shop_table.cart tr:not(.cart_item) td { display: block; padding: 0; border: 0; } .pm-parcours .coupon { flex-direction: column; align-items: stretch; } .pm-parcours .coupon .button, .pm-parcours .actions > .button { inline-size: 100%; } } /* Conserve pour d'eventuels gabarits construits a la main. */ .pm-panier-grille { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; grid-template-columns: 1fr; } @media (min-width: 62rem) { .pm-panier-grille { grid-template-columns: minmax(0, 1fr) 23rem; } } .woocommerce .pm-parcours table.shop_table { inline-size: 100%; border: 0; border-collapse: collapse; background: transparent; } .woocommerce .pm-parcours table.shop_table thead th { padding: 0 0 1rem; border-block-end: 1px solid var(--pm-noir); background: transparent; font-family: var(--pm-titre); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: start; color: var(--pm-noir); } .woocommerce .pm-parcours table.shop_table td { padding: 1.5rem 0; border-block-end: 1px solid var(--pm-bordure); background: transparent; vertical-align: middle; } .woocommerce .pm-parcours .cart_item .product-thumbnail img { inline-size: 5.5rem; block-size: auto; aspect-ratio: 3 / 4; object-fit: cover; } .woocommerce .pm-parcours .product-name a { font-family: var(--pm-titre); font-size: 1.05rem; font-weight: 700; color: var(--pm-noir); text-decoration: none; } .woocommerce .pm-parcours .product-name a:hover { color: var(--pm-rose); } .woocommerce .pm-parcours .variation { margin-block-start: 0.35rem; font-size: 0.85rem; color: var(--pm-texte-doux); } /* Quantité : boutons tactiles confortables */ .pm-parcours .quantity { display: inline-flex; align-items: center; border: 1px solid var(--pm-bordure); } .pm-parcours .quantity input[type="number"] { inline-size: 3.25rem; min-block-size: 2.75rem; padding: 0.5rem; border: 0; text-align: center; -moz-appearance: textfield; appearance: textfield; } .pm-parcours .quantity input::-webkit-outer-spin-button, .pm-parcours .quantity input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; appearance: none; } .woocommerce .pm-parcours a.remove { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: transparent; color: var(--pm-texte-doux) !important; font-size: 1.35rem; line-height: 1; text-decoration: none; } .woocommerce .pm-parcours a.remove:hover { background: var(--pm-rose-clair); color: var(--pm-rose-action) !important; } /* Panier en cartes sur mobile : un tableau ne tient pas sur 360 px */ @media (max-width: 47.99rem) { .woocommerce .pm-parcours table.shop_table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } .woocommerce .pm-parcours table.shop_table tr { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; padding: 1.25rem 0; border-block-end: 1px solid var(--pm-bordure); } .woocommerce .pm-parcours table.shop_table td { padding: 0; border: 0; } .woocommerce .pm-parcours .cart_item .product-thumbnail { grid-row: 1 / span 4; } .woocommerce .pm-parcours .cart_item td::before { display: block; margin-block-end: 0.15rem; font-family: var(--pm-titre); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pm-texte-doux); content: attr(data-title); } .woocommerce .pm-parcours .cart_item .product-thumbnail::before, .woocommerce .pm-parcours .cart_item .product-remove::before { content: none; } } /* ================================================================== 6. RECAPITULATIF (panier et commande) ================================================================== */ .pm-recap, .pm-parcours .cart_totals, .pm-parcours .e-cart-totals, .woocommerce .pm-parcours #order_review { padding: clamp(1.25rem, 3vw, 1.75rem); border: 1px solid var(--pm-bordure); background: var(--pm-fond); } /* La colonne de droite est deja collante cote Elementor : on se contente d'ajuster le decalage sous le header fixe. */ .pm-parcours .e-sticky-right-column { inset-block-start: calc(var(--pm-hauteur-header, 100px) + 1.5rem); } .pm-parcours .cart_totals h2, .pm-parcours .e-cart-totals h2, .woocommerce .pm-parcours #order_review_heading { margin: 0 0 1.1rem; padding-block-end: 0.85rem; border-block-end: 1px solid var(--pm-noir); font-family: var(--pm-titre); font-size: 1rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .pm-parcours .cart_totals table, .pm-parcours .e-cart-totals table { inline-size: 100%; margin: 0; border: 0; border-collapse: collapse; background: transparent; } .pm-parcours .cart_totals table th, .pm-parcours .cart_totals table td, .pm-parcours .e-cart-totals table th, .pm-parcours .e-cart-totals table td { padding: 0.8rem 0; border: 0; border-block-end: 1px solid var(--pm-bordure); background: transparent; font-size: 0.94rem; vertical-align: top; } .pm-parcours .cart_totals table th, .pm-parcours .e-cart-totals table th { inline-size: 45%; font-family: var(--pm-texte); font-weight: 400; text-align: start; color: var(--pm-texte-doux); } .pm-parcours .cart_totals table td, .pm-parcours .e-cart-totals table td { text-align: end; } /* Le total se detache nettement du reste. */ .pm-parcours .cart_totals .order-total th, .pm-parcours .cart_totals .order-total td, .pm-parcours .e-cart-totals .order-total th, .pm-parcours .e-cart-totals .order-total td { padding-block: 1.1rem 0.5rem; border-block-end: 0; font-family: var(--pm-titre); font-size: 1.25rem; font-weight: 700; color: var(--pm-noir); } /* --- La ligne « Expédition » passe sur deux niveaux ---------------- Le tableau des totaux met l'intitulé à gauche et la valeur à droite. Ça convient à un montant, pas à une liste d'options : dans la moitié droite d'une colonne étroite, « Click & Collect — Showroom de Warluis » se replie sur trois lignes. Cette ligne-là est donc dépliée : l'intitulé au-dessus, les options dessous, sur toute la largeur. Les autres lignes du tableau — sous- total, total — gardent leur disposition en deux colonnes. */ .pm-parcours table tr.woocommerce-shipping-totals, .pm-parcours table tr.shipping, .woocommerce .pm-parcours tr.shipping { display: block; padding-block: 0.8rem; border-block-end: 1px solid var(--pm-bordure); } .pm-parcours table tr.shipping > th, .pm-parcours table tr.shipping > td, .woocommerce .pm-parcours tr.shipping > th, .woocommerce .pm-parcours tr.shipping > td { display: block; inline-size: auto; max-inline-size: none; padding: 0; border: 0; text-align: start; } .pm-parcours table tr.shipping > th, .woocommerce .pm-parcours tr.shipping > th { margin-block-end: 0.65rem; } /* Choix du mode de livraison : des options cliquables, pas une liste. */ .pm-parcours ul#shipping_method, .pm-parcours .woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; text-align: start; } /* C'est la ligne de liste qui porte le cadre, pas le libellé. J'avais fait l'inverse, en supposant que le bouton radio se trouvait à l'intérieur du libellé. WooCommerce le rend en frère : le cadre n'entourait donc que le texte, le bouton restait dehors, et le libellé passé en « flex » prenait toute la largeur — d'où les rectangles roses d'où le texte débordait. */ .pm-parcours ul#shipping_method li, .pm-parcours .woocommerce-shipping-methods li { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0 0 0.5rem; padding: 0.7rem 0.85rem; border: 1px solid var(--pm-bordure); background: var(--pm-blanc); cursor: pointer; transition: border-color 0.18s ease, background-color 0.18s ease; } .pm-parcours ul#shipping_method li:last-child, .pm-parcours .woocommerce-shipping-methods li:last-child { margin-block-end: 0; } .pm-parcours ul#shipping_method li:hover, .pm-parcours .woocommerce-shipping-methods li:hover { border-color: var(--pm-noir); } .pm-parcours ul#shipping_method li:has(input:checked), .pm-parcours .woocommerce-shipping-methods li:has(input:checked) { border-color: var(--pm-rose-action); background: var(--pm-rose-clair); } /* Ce libellé n'est pas un intitulé de champ : il ne prend donc ni la casse ni la graisse des autres, qui le rendraient illisible sur deux lignes. */ .pm-parcours ul#shipping_method label, .pm-parcours .woocommerce-shipping-methods label { display: block; flex: 1 1 auto; margin: 0; padding: 0; border: 0; background: transparent; font-family: var(--pm-texte); font-size: 0.95rem; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--pm-noir); cursor: pointer; } /* Le prix de l'option se détache du libellé. */ .pm-parcours ul#shipping_method label .woocommerce-Price-amount { font-family: var(--pm-titre); font-weight: 700; white-space: nowrap; } .pm-parcours ul#shipping_method input[type="radio"], .pm-parcours .woocommerce-shipping-methods input[type="radio"] { flex: none; margin: 0.2rem 0 0; inline-size: 1.05rem; block-size: 1.05rem; min-block-size: 0; accent-color: var(--pm-rose-action); } .pm-parcours .woocommerce-shipping-destination { margin-block-start: 0.6rem; font-size: 0.82rem; line-height: 1.4; color: var(--pm-texte-doux); } .pm-parcours .shipping-calculator-button { font-size: 0.85rem; color: var(--pm-rose); } /* Le bouton de paiement doit etre impossible a manquer. Elementor le peint en #5bc0de, un bleu ciel sans rapport avec la charte : on reprend la main avec une specificite superieure. */ .pm-parcours .wc-proceed-to-checkout { margin-block-start: 1.5rem; padding: 0; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button, .woocommerce .pm-parcours .wc-proceed-to-checkout a.checkout-button { display: flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: 3.25rem; margin: 0; padding: 0.9rem 1.5rem; border: 1px solid var(--pm-rose-action); border-radius: var(--pm-rayon); background: var(--pm-rose-action); color: var(--pm-blanc); font-family: var(--pm-titre); font-size: 1rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; } .pm-parcours .elementor-widget-woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce .pm-parcours .wc-proceed-to-checkout a.checkout-button:hover { background: var(--pm-rose-action-survol); border-color: var(--pm-rose-action-survol); } /* Sur mobile, le paiement reste atteignable en bas d'ecran. */ @media (max-width: 47.99rem) { .pm-parcours .e-cart-totals, .pm-parcours .cart_totals { padding-block-end: 1.25rem; } .pm-parcours .wc-proceed-to-checkout { position: sticky; inset-block-end: 0; z-index: 20; margin-inline: calc(clamp(1.25rem, 3vw, 1.75rem) * -1); margin-block-end: calc(clamp(1.25rem, 3vw, 1.75rem) * -1); padding: 0.9rem clamp(1.25rem, 3vw, 1.75rem); background: var(--pm-fond); box-shadow: 0 -4px 16px rgb(30 31 28 / 8%); } } /* ------------------------------------------------------------------ 7. Jauge « livraison offerte » / « sac PM offert » ------------------------------------------------------------------ */ .pm-jauge { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--pm-rose-clair); background: var(--pm-rose-clair); } .pm-jauge__texte { margin: 0 0 0.6rem; font-size: 0.92rem; line-height: 1.45; } .pm-jauge__montant { font-family: var(--pm-titre); font-weight: 700; color: var(--pm-rose); } .pm-jauge__barre { block-size: 0.4rem; background: rgb(255 255 255 / 70%); overflow: hidden; } .pm-jauge__progression { display: block; block-size: 100%; background: var(--pm-rose); transition: inline-size 0.4s ease; } .pm-jauge[data-atteint="oui"] { border-color: var(--pm-rose); } /* ------------------------------------------------------------------ 8. Tunnel de commande ------------------------------------------------------------------ */ .woocommerce .pm-parcours form.checkout { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 62rem) { .woocommerce .pm-parcours form.checkout { grid-template-columns: minmax(0, 1fr) 24rem; } .woocommerce .pm-parcours #customer_details { grid-column: 1; } .woocommerce .pm-parcours .pm-colonne-recap { position: sticky; inset-block-start: 6rem; grid-column: 2; grid-row: 1 / span 2; } } .woocommerce .pm-parcours #customer_details .col-1, .woocommerce .pm-parcours #customer_details .col-2 { inline-size: 100%; float: none; } .woocommerce .pm-parcours .woocommerce-billing-fields, .woocommerce .pm-parcours .woocommerce-shipping-fields, .woocommerce .pm-parcours .woocommerce-additional-fields { margin-block-end: 2rem; padding-block-end: 2rem; border-block-end: 1px solid var(--pm-bordure); } /* Moyens de paiement : cartes cliquables plutôt qu'une liste serrée */ .woocommerce .pm-parcours #payment ul.payment_methods { margin: 0 0 1.5rem; padding: 0; border: 0; background: transparent; list-style: none; } .woocommerce .pm-parcours #payment li.wc_payment_method { margin: 0 0 0.6rem; padding: 1rem 1.15rem; border: 1px solid var(--pm-bordure); background: var(--pm-blanc); transition: border-color 0.18s ease; } .woocommerce .pm-parcours #payment li.wc_payment_method:has(input:checked) { border-color: var(--pm-rose); background: var(--pm-rose-clair); } .woocommerce .pm-parcours #payment li.wc_payment_method label { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 0.95rem; text-transform: none; letter-spacing: 0; cursor: pointer; } .woocommerce .pm-parcours #payment div.payment_box { margin: 0.85rem 0 0; padding: 0.9rem 1rem; border-radius: var(--pm-rayon); background: var(--pm-gris); font-size: 0.9rem; } .woocommerce .pm-parcours #payment div.payment_box::before { display: none; } /* Rassurance sous le bouton de paiement */ .pm-rassurance { display: grid; gap: 0.65rem; margin-block-start: 1.25rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--pm-bordure); font-size: 0.85rem; line-height: 1.4; color: var(--pm-texte-doux); list-style: none; padding-inline-start: 0; } .pm-rassurance li { display: flex; align-items: flex-start; gap: 0.55rem; } .pm-rassurance li::before { flex: none; color: var(--pm-rose); content: "✓"; font-weight: 700; } /* ------------------------------------------------------------------ 9. Compte client ------------------------------------------------------------------ */ .woocommerce .pm-parcours .woocommerce-MyAccount-navigation { inline-size: 100%; float: none; margin-block-end: 2rem; } .woocommerce .pm-parcours .woocommerce-MyAccount-content { inline-size: 100%; float: none; } @media (min-width: 62rem) { .pm-compte-grille { display: grid; gap: 3rem; grid-template-columns: 16rem minmax(0, 1fr); align-items: start; } .woocommerce .pm-parcours .woocommerce-MyAccount-navigation { position: sticky; inset-block-start: 6rem; margin-block-end: 0; } } .woocommerce .pm-parcours .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--pm-bordure); } .woocommerce .pm-parcours .woocommerce-MyAccount-navigation li { border-block-end: 1px solid var(--pm-bordure); } .woocommerce .pm-parcours .woocommerce-MyAccount-navigation a { display: block; padding: 0.95rem 0.25rem; font-family: var(--pm-titre); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pm-noir); text-decoration: none; transition: color 0.18s ease, padding-inline-start 0.18s ease; } .woocommerce .pm-parcours .woocommerce-MyAccount-navigation a:hover { padding-inline-start: 0.6rem; color: var(--pm-rose); } .woocommerce .pm-parcours .woocommerce-MyAccount-navigation .is-active a { color: var(--pm-rose); } .woocommerce .pm-parcours .woocommerce-MyAccount-navigation .is-active { border-inline-start: 3px solid var(--pm-rose); } .woocommerce .pm-parcours .woocommerce-MyAccount-navigation .is-active a { padding-inline-start: 0.75rem; } /* Connexion / création de compte côte à côte */ .woocommerce .pm-parcours .u-columns.col2-set { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; } @media (min-width: 48rem) { .woocommerce .pm-parcours .u-columns.col2-set { grid-template-columns: 1fr 1fr; } } .woocommerce .pm-parcours .u-columns .col-1, .woocommerce .pm-parcours .u-columns .col-2 { inline-size: 100%; float: none; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--pm-bordure); background: var(--pm-blanc); } .woocommerce .pm-parcours form.login, .woocommerce .pm-parcours form.register { margin: 0; padding: 0; border: 0; } /* ------------------------------------------------------------------ 10. Messages système ------------------------------------------------------------------ */ .woocommerce .pm-parcours .woocommerce-message, .woocommerce .pm-parcours .woocommerce-info, .woocommerce .pm-parcours .woocommerce-error { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 0 0 1.75rem; padding: 1rem 1.25rem; border: 0; border-inline-start: 3px solid var(--pm-noir); border-radius: var(--pm-rayon); background: var(--pm-gris); font-size: 0.95rem; line-height: 1.45; color: var(--pm-noir); list-style: none; } .woocommerce .pm-parcours .woocommerce-message::before, .woocommerce .pm-parcours .woocommerce-info::before, .woocommerce .pm-parcours .woocommerce-error::before { display: none; } .woocommerce .pm-parcours .woocommerce-message { border-inline-start-color: var(--pm-rose); background: var(--pm-rose-clair); } .woocommerce .pm-parcours .woocommerce-error { border-inline-start-color: var(--pm-erreur); background: var(--pm-erreur-fond); } .woocommerce .pm-parcours .woocommerce-message .button, .woocommerce .pm-parcours .woocommerce-info .button { min-block-size: 2.5rem; margin-inline-start: auto; padding: 0.5rem 1.25rem; font-size: 0.8rem; } /* ------------------------------------------------------------------ 11. Panier vide ------------------------------------------------------------------ */ .pm-panier-vide { max-inline-size: 34rem; margin-inline: auto; padding: clamp(2rem, 6vw, 4rem) 1rem; text-align: center; } .pm-panier-vide p { margin: 0 0 1.75rem; font-size: 1.05rem; line-height: 1.5; color: var(--pm-texte-doux); } /* ------------------------------------------------------------------ 12. Fiche produit ------------------------------------------------------------------ */ /* --- Ajouter au panier ------------------------------------------- Les boutons du tunnel (§3) sont cadrés sous « .pm-parcours ». La fiche produit n'a pas ce cadre : son bouton restait donc à la couleur d'usine de WooCommerce, un violet qui n'appartient pas à la charte. On lui donne le même traitement qu'aux autres actions principales. La règle de WooCommerce vaut trois classes ; ses enveloppes « :where() » ne comptent pas dans le calcul. On passe donc au-dessus sans recourir à « !important ». */ .woocommerce div.product button.single_add_to_cart_button.button.alt, .woocommerce div.product button.single_add_to_cart_button.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-block-size: 3rem; padding: 0.85rem 2.25rem; border: 1px solid var(--pm-rose-action); border-radius: var(--pm-rayon); background: var(--pm-rose-action); color: var(--pm-blanc); font-family: var(--pm-titre); font-size: 1rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .woocommerce div.product button.single_add_to_cart_button.button.alt:hover, .woocommerce div.product button.single_add_to_cart_button.button:hover { background: var(--pm-rose-action-survol); border-color: var(--pm-rose-action-survol); color: var(--pm-blanc); } /* Un produit indisponible garde la forme du bouton mais pas son appel. */ .woocommerce div.product button.single_add_to_cart_button.button.alt:disabled, .woocommerce div.product button.single_add_to_cart_button.button:disabled { border-color: var(--pm-bordure); background: var(--pm-bordure); color: var(--pm-noir); cursor: not-allowed; } .woocommerce div.product button.single_add_to_cart_button:focus-visible { outline: 2px solid var(--pm-noir); outline-offset: 3px; } /* Le lien « Voir le panier » qui apparaît après l'ajout : action secondaire, il ne doit pas concurrencer le bouton principal. */ .woocommerce div.product a.added_to_cart { display: inline-flex; align-items: center; min-block-size: 3rem; margin-inline-start: 0.75rem; font-family: var(--pm-titre); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pm-noir); } /* Disponibilité : factuel, jamais alarmiste. Pas de rouge, pas de compte à rebours. */ .pm-disponibilite { display: inline-block; margin: 0.75rem 0 0; padding: 0.35rem 0.75rem; background: var(--pm-rose-clair); font-family: var(--pm-titre); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pm-rose-action); } /* Le mot de Carole : une voix, pas un encart publicitaire. */ .pm-conseil-carole { margin: 1.5rem 0; padding: 1.25rem 1.5rem; border-inline-start: 3px solid var(--pm-rose); background: var(--pm-fond); } .pm-conseil-carole__titre { margin: 0 0 0.5rem; font-family: var(--pm-titre); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; color: var(--pm-noir); } .pm-conseil-carole__texte p { margin: 0 0 0.6rem; font-size: 0.98rem; line-height: 1.55; } .pm-conseil-carole__texte p:last-child { margin-bottom: 0; } .pm-video-produit { margin-block-start: 1rem; } .pm-video-produit iframe, .pm-video-produit video { inline-size: 100%; aspect-ratio: 16 / 9; block-size: auto; border: 0; } .pm-conseil-taille { font-family: var(--pm-titre); font-size: 1rem; } .pm-infos-livraison { margin: 0; padding-inline-start: 0; list-style: none; } .pm-infos-livraison li { display: flex; align-items: flex-start; gap: 0.6rem; margin-block-end: 0.6rem; line-height: 1.5; } .pm-infos-livraison li::before { flex: none; color: var(--pm-rose); content: "✓"; font-weight: 700; } /* Badges de disponibilité sur les vignettes de la boutique. */ .pm-badge-stock { display: inline-block; padding: 0.25rem 0.6rem; font-family: var(--pm-titre); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .pm-badge-stock--derniere, .pm-badge-stock--faible { background: var(--pm-rose-clair); color: var(--pm-rose-action); } .pm-badge-stock--epuise { background: var(--pm-gris); color: var(--pm-texte-doux); } /* Suivi de colis et retrait, dans l'espace compte. */ .pm-suivi, .pm-retrait, .pm-retour { margin-block-start: 2rem; padding: 1.25rem 1.5rem; border: 1px solid var(--pm-bordure); background: var(--pm-blanc); } .pm-suivi h2, .pm-retrait h2, .pm-retour h2 { margin: 0 0 0.5rem; font-size: 1.05rem; } .pm-retour__formulaire { margin-block-start: 1rem; } /* ------------------------------------------------------------------ Favoris ------------------------------------------------------------------ */ /* Le kit Elementor habille tous les boutons du site : « .elementor-kit-8 button » leur impose une couleur de texte blanche, un padding de 15 px et des angles droits. Ce sélecteur compte deux niveaux, le nôtre un seul : il gagnait. Le cœur, tracé dans la couleur du texte, était donc blanc sur fond blanc — 1:1, littéralement invisible. Le cercle, lui, était un carré. D'où le « button » ajouté devant : à égalité de poids, c'est notre feuille qui tranche puisqu'elle est chargée après celle du kit. Le contour reprend le gris de texte, 5,41:1 — au-dessus des 3:1 exigés pour le tracé d'une commande, sans la lourdeur d'un cercle noir. */ button.pm-favori { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 1px solid var(--pm-texte-doux); border-radius: 50%; background: var(--pm-blanc); color: var(--pm-noir); font-size: 1.15rem; line-height: 1; cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, transform 0.12s ease; } /* Le kit pose aussi un survol — fond rose clair, angles droits — avec un poids supérieur. Même méthode pour le reprendre. */ button.pm-favori:hover { border-color: var(--pm-rose-action); background: var(--pm-rose-clair); border-radius: 50%; color: var(--pm-rose-action); } button.pm-favori:active { transform: scale(0.92); } /* Produit retenu : le cœur se remplit, et le cercle prend le rose des commandes — 5,80:1, lisible sans dépendre de la seule couleur puisque le remplissage du tracé change aussi. */ button.pm-favori--actif { border-color: var(--pm-rose-action); color: var(--pm-rose-action); } /* Le cœur est un tracé, plus un caractère : « ♡ » n'existe ni dans Coco Sharp ni dans Montserrat, et le navigateur allait le chercher dans une police de repli — d'où un dessin illisible, voire un rectangle vide. Contour seul au repos, plein une fois le produit retenu. C'est cette feuille qui tranche, à partir de la classe : le script n'a rien à redessiner au clic. */ .pm-favori__coeur { display: grid; place-items: center; line-height: 0; } .pm-favori__dessin { inline-size: 1.25rem; block-size: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; transition: fill 0.18s ease; } .pm-favori--actif .pm-favori__dessin { fill: currentColor; } /* ================================================================== LA GRILLE DE LA BOUTIQUE ================================================================== WooCommerce dispose ses vignettes en flottant, avec une largeur en pourcentage et une marge à droite. Tant que tous les blocs ont la même hauteur, cela tient. Dès que deux blocs diffèrent — une catégorie n'a ni prix ni bouton, un produit oui — les lignes se décalent et la grille part de travers. On passe la liste en grille : colonnes égales, écarts identiques, et chaque bloc occupe toute la hauteur de sa case. Le nombre de colonnes s'ajuste à la largeur disponible, sans point de rupture à maintenir. ================================================================== */ .woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem); margin: 0 0 3rem; padding: 0; list-style: none; } /* WooCommerce ajoute des pseudo-éléments pour nettoyer ses flottants. En grille, ils compteraient comme deux cases vides. */ .woocommerce ul.products::before, .woocommerce ul.products::after { content: none; } /* Le sélecteur reprend « [class*=columns-] » parce que WooCommerce fixe la largeur des vignettes avec cette forme — « ul.products.columns-3 » — et qu'elle pèse plus lourd qu'un simple « ul.products ». À poids égal, c'est notre feuille qui tranche, puisqu'elle est chargée après la sienne. La même forme couvre toutes les tailles de grille, sans les énumérer. */ .woocommerce ul.products li.product, .woocommerce ul.products[class*="columns-"] li.product { display: flex; flex-direction: column; inline-size: auto; margin: 0; padding: 0; float: none; clear: none; text-align: start; } /* Le lien qui enveloppe visuel, titre et prix occupe toute la carte : sans cela, le bouton du bas ne peut pas s'aligner d'une carte à l'autre. */ .woocommerce ul.products li.product > a.woocommerce-loop-product__link { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.6rem; text-decoration: none; color: inherit; } .woocommerce ul.products li.product h2.woocommerce-loop-product__title { margin: 0; padding: 0; font-family: var(--pm-titre); font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.01em; color: var(--pm-noir); } .woocommerce ul.products li.product .price { margin: 0; font-family: var(--pm-titre); font-size: 1rem; font-weight: 700; color: var(--pm-noir); } .woocommerce ul.products li.product .price del { margin-inline-end: 0.4rem; font-weight: 400; color: var(--pm-texte-doux); } .woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--pm-rose-action); } /* La marge automatique colle le bouton au bas de la carte : ils s'alignent alors tous, quelle que soit la longueur des noms. */ .woocommerce ul.products li.product a.pm-voir-produit { display: flex; align-items: center; justify-content: center; margin-block-start: auto; padding: 0.7rem 1rem; border: 1px solid var(--pm-noir); border-radius: var(--pm-rayon); background: transparent; font-family: var(--pm-titre); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--pm-noir); transition: background-color 0.18s ease, color 0.18s ease; } .woocommerce ul.products li.product a.pm-voir-produit:hover { background: var(--pm-noir); color: var(--pm-blanc); } /* --- Les catégories ------------------------------------------------ Elles partagent la liste des produits mais ne disent pas la même chose : une catégorie est une porte, un produit est un article. On les distingue par le traitement du titre — un filet et des capitales — plutôt que par une couleur, qui ne se voit pas sur tous les écrans. */ .woocommerce ul.products li.product-category > a { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0; text-decoration: none; color: inherit; } .woocommerce ul.products li.product-category h2.woocommerce-loop-category__title { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0; padding: 0.85rem 0 0; border-block-start: 2px solid var(--pm-noir); font-family: var(--pm-titre); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.07em; line-height: 1.25; text-transform: uppercase; color: var(--pm-noir); transition: color 0.18s ease, border-color 0.18s ease; } /* Le nombre d'articles accompagne le nom sans lui disputer la place. */ .woocommerce ul.products li.product-category mark.count { flex: none; background: transparent; font-family: var(--pm-texte); font-size: 0.8rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--pm-texte-doux); } .woocommerce ul.products li.product-category:hover h2.woocommerce-loop-category__title { border-block-start-color: var(--pm-rose-action); color: var(--pm-rose-action); } /* Toutes les vignettes sont carrées aujourd'hui. On l'inscrit dans la feuille plutôt que de s'y fier : le jour où une photo sera versée dans un autre format, elle sera recadrée au lieu de décaler sa colonne. Le « a » du sélecteur n'est pas décoratif : WooCommerce écrit « li.product a img { margin: 0 0 1em } » et cette forme pèse plus lourd qu'un simple « li.product img ». Sans lui, un blanc d'un cadratin restait sous chaque visuel, en plus de l'écart de la carte. */ .woocommerce ul.products li.product a img { display: block; inline-size: 100%; block-size: auto; margin: 0; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.35s ease; } /* Le visuel se rapproche légèrement au survol. Le débordement est retenu par la carte : le cœur et la pastille sont posés à 0,6 rem des bords, donc à l'intérieur, et restent visibles. */ .woocommerce ul.products li.product { overflow: hidden; } .woocommerce ul.products li.product:hover img { transform: scale(1.03); } @media (prefers-reduced-motion: reduce) { .woocommerce ul.products li.product:hover img { transform: none; } } /* Sur les écrans étroits, deux colonnes valent mieux qu'une : la cliente compare plus vite, et les visuels restent lisibles. */ @media (max-width: 30rem) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0.85rem; } .woocommerce ul.products li.product h2.woocommerce-loop-product__title, .woocommerce ul.products li.product .price { font-size: 0.9rem; } .woocommerce ul.products li.product a.pm-voir-produit { padding: 0.6rem 0.5rem; font-size: 0.72rem; letter-spacing: 0.04em; } } /* Sur la vignette, le cœur se pose en haut à droite de l'image. Le sélecteur ne peut pas être direct : WooCommerce place le cœur et la pastille à l'intérieur du lien, pas à côté. Tant qu'ils restaient dans le flux, ils s'intercalaient entre le visuel et le nom — et comme seuls certains articles portent une pastille, une carte sur deux descendait d'une ligne. C'était la cause du désalignement. La carte porte « position: relative » : c'est donc elle qui sert de repère, le lien n'étant pas positionné. */ .woocommerce ul.products li.product { position: relative; } .woocommerce ul.products li.product .pm-favori { position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.6rem; z-index: 2; } .pm-favori-fiche { margin-block-start: 1rem; } .pm-favoris-vide { padding: 2rem 0; text-align: center; } .pm-favoris-liste .price { display: block; margin-block: 0.35rem; font-family: var(--pm-titre); font-weight: 700; } .pm-favoris-compteur[hidden] { display: none; } /* Le badge de disponibilité se pose en haut à gauche, face au cœur. */ .woocommerce ul.products li.product .pm-badge-stock { position: absolute; inset-block-start: 0.6rem; inset-inline-start: 0.6rem; z-index: 2; } /* ------------------------------------------------------------------ Alerte réassort ------------------------------------------------------------------ */ .pm-reassort { margin-block-start: 1.5rem; padding: 1.25rem 1.5rem; border: 1px solid var(--pm-bordure); background: var(--pm-fond); } .pm-reassort__titre { margin: 0 0 0.4rem; font-family: var(--pm-titre); font-size: 1rem; font-weight: 700; } .pm-reassort__intro { margin: 0 0 1rem; font-size: 0.92rem; line-height: 1.45; color: var(--pm-texte-doux); } .pm-reassort__formulaire .form-row { margin-block-end: 0.9rem; } .pm-reassort__accord label { display: flex; align-items: flex-start; gap: 0.5rem; font-family: var(--pm-texte); font-size: 0.88rem; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--pm-texte-doux); cursor: pointer; } .pm-reassort__accord input[type="checkbox"] { flex: none; inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: 0.15rem; min-block-size: 0; accent-color: var(--pm-rose); } /* ------------------------------------------------------------------ Filtres du catalogue ------------------------------------------------------------------ */ .pm-filtres { margin-block-end: 2rem; } /* « button » en tête de sélecteur, et couleur déclarée explicitement : le kit Elementor impose du texte blanc à tous les boutons avec un poids supérieur. Sans cela, ce libellé était blanc sur fond transparent. */ button.pm-filtres__bascule { display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 2.75rem; padding: 0.6rem 1.4rem; border: 1px solid var(--pm-noir); background: transparent; color: var(--pm-noir); font-family: var(--pm-titre); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; } button.pm-filtres__bascule:hover { background: var(--pm-noir); color: var(--pm-blanc); } .pm-filtres__pastille { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--pm-rose); } .pm-filtres__entete, .pm-filtres__fermer { display: none; } /* Sur grand écran le panneau est déjà ouvert : le bouton « Filtrer » qui le déplie n'a plus d'objet. Il restait affiché et invitait au clic sans rien faire. Il ne sert que dans le tiroir mobile, plus bas. Le « button » est indispensable : la règle d'origine, juste au-dessus, s'écrit « button.pm-filtres__bascule » et pèse un cran de plus. Une requête média n'ajoute aucun poids — sans ce préfixe, le masquage était ignoré et le bouton restait là. */ @media (min-width: 48rem) { button.pm-filtres__bascule { display: none; } } /* Une barre, pas un encadré : deux filets fins suffisent à la détacher de la grille, sans la boîte blanche qui l'alourdissait. */ .pm-filtres__panneau { margin: 0; padding-block: 0.9rem; border-block: 1px solid var(--pm-bordure); background: transparent; } .pm-filtres__corps { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.9rem 1.5rem; } .pm-filtres__groupe { margin: 0; padding: 0; border: 0; } .pm-filtres__groupe legend { margin-block-end: 0.7rem; padding: 0; font-family: var(--pm-titre); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } /* --- Un filtre = un intitulé et sa liste déroulante ------------------ Le catalogue compte treize articles pour vingt et un choix de taille et de couleur. Étalés en cases à cocher, les filtres occupaient plus de place que les produits. Repliés en listes, ils tiennent sur une ligne et se lisent d'un coup d'œil. */ .pm-filtres__champ { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; } .pm-filtres__intitule { font-family: var(--pm-titre); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--pm-texte-doux); } /* Le chevron est dessiné dans l'image de fond : les navigateurs ne permettent pas d'habiller celui qu'ils fournissent, et « appearance: none » l'efface. Le tracé reprend le noir du texte. */ .pm-filtres__liste { appearance: none; min-inline-size: 10rem; min-block-size: 2.75rem; padding: 0.5rem 2.4rem 0.5rem 0.85rem; border: 1px solid var(--pm-bordure); border-radius: var(--pm-rayon); background-color: var(--pm-blanc); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231e1f1c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 0.7rem auto; font-family: var(--pm-texte); font-size: 0.92rem; color: var(--pm-noir); cursor: pointer; transition: border-color 0.15s ease; } .pm-filtres__liste:hover { border-color: var(--pm-noir); } .pm-filtres__liste:focus-visible { outline: 2px solid var(--pm-rose); outline-offset: 2px; } /* Les trois cases se cumulent : elles restent des cases, alignées sur la même ligne de base que les listes. */ .pm-filtres__groupe--affiner { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; min-block-size: 2.75rem; align-items: center; } .pm-filtres__choix { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; } /* La case et son texte sont alignés sur le milieu de la première ligne. Le thème parent impose « label { display: inline-block; line-height: 1 } » à toutes les étiquettes : la case, haute de 1,05 rem, se retrouvait alors posée sur une ligne de texte plus courte qu'elle, donc décalée vers le bas. On reprend la main sur les deux : « label » devant le sélecteur pour passer devant celui du thème, et une interligne déclarée pour que la hauteur du texte cesse de dépendre de lui. */ label.pm-filtres__case { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--pm-texte); font-size: 0.92rem; font-weight: 400; line-height: 1.3; letter-spacing: 0; text-transform: none; vertical-align: baseline; cursor: pointer; } .pm-filtres__case input[type="checkbox"] { flex: none; align-self: center; inline-size: 1.05rem; block-size: 1.05rem; min-block-size: 0; margin: 0; accent-color: var(--pm-rose); } /* Le texte ne doit ni s'étirer ni retomber sous la case. */ .pm-filtres__case span { display: block; line-height: 1.3; } /* Les deux bornes de prix, côte à côte. Les mots « de » et « à » sont passés en texte indicatif dans les champs : ils disaient déjà ce que le champ demande, et prenaient une place que la barre n'a plus. */ .pm-filtres__prix { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 0.4rem; } .pm-filtres__prix label { display: inline-flex; align-items: center; margin: 0; font-family: var(--pm-texte); font-size: 0.9rem; font-weight: 400; letter-spacing: 0; text-transform: none; } .pm-filtres__prix input { inline-size: 4.5rem; min-block-size: 2.75rem; padding: 0.5rem 0.6rem; border: 1px solid var(--pm-bordure); border-radius: var(--pm-rayon); font-size: 0.92rem; } .pm-filtres__devise { font-size: 0.92rem; color: var(--pm-texte-doux); } /* Le bouton se range au bout de la même ligne que les filtres : sans son filet ni sa marge, la barre tient sur une seule hauteur. */ .pm-filtres__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block-start: 0.9rem; } .pm-filtres__reinitialiser { font-size: 0.9rem; color: var(--pm-texte-doux); text-decoration: underline; } .pm-filtres__reinitialiser:hover { color: var(--pm-rose); } /* Filtres actifs, retirables d'un clic. */ .pm-filtres-actifs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; } .pm-filtres-actifs__etiquette { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.8rem; background: var(--pm-rose-clair); font-size: 0.85rem; color: var(--pm-rose-action); text-decoration: none; } .pm-filtres-actifs__etiquette:hover { background: var(--pm-rose-action); color: var(--pm-blanc); } /* ------------------------------------------------------------------ Filtres en tiroir sur mobile ------------------------------------------------------------------ */ @media (max-width: 47.99rem) { .pm-filtres__bascule { inline-size: 100%; justify-content: center; } /* En tiroir, le panneau redevient une surface pleine : le fond blanc et le retrait de 1,5 rem sont ceux que les marges négatives du bouton collant, plus bas, viennent annuler pour toucher les bords. */ .pm-filtres__panneau { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; margin: 0; padding: 1.5rem; border: 0; background: var(--pm-blanc); overflow-y: auto; transform: translateY(100%); transition: transform 0.25s ease; visibility: hidden; } .pm-filtres--ouvert .pm-filtres__panneau { transform: translateY(0); visibility: visible; } .pm-filtres__entete { display: flex; align-items: center; justify-content: space-between; margin-block-end: 1.25rem; padding-block-end: 1rem; border-block-end: 1px solid var(--pm-bordure); } .pm-filtres__titre { font-family: var(--pm-titre); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } button.pm-filtres__fermer { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 0; background: transparent; color: var(--pm-noir); font-size: 1.75rem; line-height: 1; cursor: pointer; } /* Dans le tiroir, chaque filtre prend toute la largeur : on les parcourt du pouce, l'un sous l'autre. */ .pm-filtres__corps { flex: 1; flex-direction: column; align-items: stretch; gap: 1.25rem; } .pm-filtres__liste, .pm-filtres__prix input { inline-size: 100%; min-inline-size: 0; } .pm-filtres__prix { display: flex; } /* Le bouton de validation reste toujours atteignable. */ .pm-filtres__actions { position: sticky; inset-block-end: 0; margin-inline: -1.5rem; margin-block-end: -1.5rem; padding: 1rem 1.5rem; background: var(--pm-blanc); box-shadow: 0 -4px 16px rgb(30 31 28 / 6%); } .pm-filtres__actions .button { flex: 1; } body.pm-filtres-ouverts { overflow: hidden; } } /* ------------------------------------------------------------------ 13. Confort mobile ------------------------------------------------------------------ */ @media (max-width: 47.99rem) { /* Bouton d'action toujours atteignable en bas d'écran */ .pm-action-collante { position: sticky; inset-block-end: 0; z-index: 20; margin-inline: calc(clamp(1rem, 4vw, 2rem) * -1); padding: 0.9rem clamp(1rem, 4vw, 2rem); border-block-start: 1px solid var(--pm-bordure); background: var(--pm-blanc); box-shadow: 0 -4px 16px rgb(30 31 28 / 6%); } .woocommerce .pm-parcours .coupon { display: grid; gap: 0.6rem; grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .pm-parcours *, .pm-parcours *::before, .pm-parcours *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }