/** * Tunnel d'achat — panier, validation de commande, compte client. * * Ces trois pages sont des pages à shortcode : leur contenu tient en une * vingtaine de caractères, tout le rendu vient de WooCommerce et d'Astra. * Aucune ligne du thème ne les touchait — elles n'avaient donc ni la palette, * ni la typographie, ni les boutons du site, au moment précis où l'acheteur * sort sa carte. * * ⚠ Toute règle est enfermée dans `#content` : l'en-tête et le pied de page * sont des modèles Elementor, et une règle qui vise un bouton ou un titre * sans cette précaution va les repeindre. * * Spécificités à battre, relevées sur le rendu : * `.woocommerce a.button.alt` (0,3,1) — le rouge #e2401c * `.woocommerce #respond input#submit` (0,2,2) via l'identifiant * `.woocommerce a.button` (Astra) (0,2,1) — d'où le `a.` conservé */ /* ======================================================================== 1. Les boutons du tunnel ======================================================================== */ /* « Valider la commande » sortait en ROUGE VIF (#e2401c, la couleur « alt » par défaut de WooCommerce) : le bouton le plus important du site était le seul à ignorer la charte, et sa couleur disait « attention » là où elle devait dire « continuez ». */ #content .woocommerce a.button, #content .woocommerce button.button, #content .woocommerce input.button, #content .woocommerce a.button.alt, #content .woocommerce button.button.alt, #content .woocommerce input.button.alt, #content .woocommerce #respond input#submit { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--e-3); border: 2px solid var(--accent); border-radius: var(--rayon-s); background-color: var(--accent); color: var(--accent-texte); font-size: var(--t-corps); font-weight: 700; line-height: var(--lh-ui); text-decoration: none; text-transform: none; } #content .woocommerce a.button:hover, #content .woocommerce button.button:hover, #content .woocommerce input.button:hover, #content .woocommerce a.button.alt:hover, #content .woocommerce button.button.alt:hover, #content .woocommerce input.button.alt:hover, #content .woocommerce a.button:focus-visible, #content .woocommerce button.button:focus-visible, #content .woocommerce input.button:focus-visible { /* Inversion, et non assombrissement : un `brightness()` sur ce rose fait tomber le contraste sous AA. */ background-color: var(--fond); color: var(--accent); } #content .woocommerce a.button:focus-visible, #content .woocommerce button.button:focus-visible, #content .woocommerce input.button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } /* L'état désactivé est déclaré en fin de fichier, § 10 : il doit passer APRÈS le dessin des boutons secondaires. */ /* « Valider la commande » et « Commander » portent la décision : pleine largeur de leur bloc, on ne les cherche pas. */ #content .wc-proceed-to-checkout a.checkout-button, #content .woocommerce #place_order { width: 100%; } /* ======================================================================== 2. Les champs ======================================================================== */ /* Même dessin que les formulaires du site (cf. page.css § 5) : c'est le même visiteur, il ne doit pas croire avoir changé de site en arrivant ici. */ #content .woocommerce form .form-row input.input-text, #content .woocommerce form .form-row textarea, #content .woocommerce form .form-row select, #content .woocommerce .select2-container .select2-selection--single, #content .woocommerce-account form input.input-text { min-height: 48px; padding: var(--e-1); border: 1px solid var(--bordure); border-radius: var(--rayon-s); background-color: var(--fond); color: var(--encre); font-size: var(--t-corps); line-height: var(--lh-corps); } #content .woocommerce form .form-row textarea { min-height: 120px; } #content .woocommerce form .form-row input.input-text:focus-visible, #content .woocommerce form .form-row textarea:focus-visible, #content .woocommerce form .form-row select:focus-visible, #content .woocommerce-account form input.input-text:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } #content .woocommerce form .form-row label { display: block; margin-bottom: var(--e-1); color: var(--encre); font-size: var(--t-petit); font-weight: 700; } /* L'astérisque des champs requis sortait au rouge d'alerte de WooCommerce. Il signale une obligation, pas une erreur. */ #content .woocommerce .required, #content .woocommerce abbr.required { border: 0; color: var(--accent); text-decoration: none; } #content .woocommerce .optional { color: var(--encre-douce); } /* ======================================================================== 3. Les cartes : totaux, récapitulatif, encadrés ======================================================================== */ #content .woocommerce .cart_totals, #content .woocommerce .checkout .col-2 #order_review, #content .woocommerce-checkout #order_review, #content .woocommerce-account .woocommerce-form-login, #content .woocommerce-account .woocommerce-form-register { padding: var(--e-3); border: 1px solid var(--bordure); border-radius: var(--rayon); background-color: var(--fond); } /* Le titre de la carte des totaux occupait 98 px de haut pour deux mots, et il était rendu à l'échelle d'un titre de section de page. */ #content .woocommerce .cart_totals > h2, #content .woocommerce-checkout #order_review_heading, #content .woocommerce-account .woocommerce-form-login > h2 { margin: 0 0 var(--e-2); padding: 0; background: none; font-size: var(--t-h4); line-height: var(--lh-h4); } /* ======================================================================== 4. Les tableaux ======================================================================== */ #content .woocommerce table.shop_table { width: 100%; border: 1px solid var(--bordure); border-radius: var(--rayon); border-collapse: separate; border-spacing: 0; } #content .woocommerce table.shop_table th { padding: var(--e-2); border-bottom: 1px solid var(--bordure); background-color: var(--surface); color: var(--encre); font-size: var(--t-petit); font-weight: 700; text-align: left; } #content .woocommerce table.shop_table td { padding: var(--e-2); border-top: 1px solid var(--bordure); color: var(--encre); vertical-align: middle; } /* Les montants s'alignent au chiffre près, comme dans la boutique. */ #content .woocommerce table.shop_table .product-price, #content .woocommerce table.shop_table .product-subtotal, #content .woocommerce table.shop_table .amount { font-variant-numeric: tabular-nums; } #content .woocommerce table.shop_table td.product-name a { color: var(--encre); font-weight: 700; } #content .woocommerce table.shop_table img { width: 72px; height: auto; border-radius: var(--rayon-s); } /* La croix de suppression est une action destructrice : lisible, mais jamais la première chose que l'œil rencontre. */ #content .woocommerce table.shop_table a.remove { color: var(--encre-douce); font-size: 1.25rem; line-height: 1; } #content .woocommerce table.shop_table a.remove:hover, #content .woocommerce table.shop_table a.remove:focus-visible { background-color: transparent; color: var(--accent); } /* ======================================================================== 5. Les messages ======================================================================== */ #content .woocommerce-message, #content .woocommerce-info, #content .woocommerce-error { margin-bottom: var(--e-4); padding: var(--e-2) var(--e-3); border: 1px solid var(--bordure); border-top: 3px solid var(--accent); border-radius: var(--rayon-s); background-color: var(--surface); color: var(--encre); list-style: none; } #content .woocommerce-message::before, #content .woocommerce-info::before, #content .woocommerce-error::before { content: none; } /* ======================================================================== 6. Panier : la carte des totaux à côté du tableau, pas sous un vide ======================================================================== */ /* Le tableau prenait toute la largeur, puis les totaux flottaient à droite sous lui : 517 px de vide à gauche sur 400 px de haut. Les deux blocs sont mis côte à côte — c'est aussi la disposition attendue d'un panier. */ /* Le flottement part dans tous les cas, y compris hors de la grille : c'est lui qui posait les totaux à 46 % sous le tableau, avec 470 px de vide à gauche — ce que faisait encore la page entre 769 et 992 px. */ body.woocommerce-cart #content .cart-collaterals, body.woocommerce-cart #content .cart_totals, body.woocommerce-cart #content .cross-sells { width: 100%; float: none; margin: 0; } /* `:has(.cart_totals)` n'est pas une coquetterie : SANS LUI, LA GRILLE S'APPLIQUE AU PANIER VIDE, qui ne contient que deux éléments — le message « votre panier est vide » et le bouton de retour à la boutique. Ils se rangeaient alors côte à côte, le bouton occupant la place des totaux, comme si le panier affichait un récapitulatif. C'est exactement ce que voit quelqu'un qui ouvre /panier/ sans rien avoir ajouté. Le seuil est à 1100 px, mesuré et non choisi : le tableau du panier a six colonnes, et il lui faut environ 600 px pour que le nom du produit ne tombe pas à un mot par ligne et que la colonne « sous-total » ne sorte pas du cadre. À 900 px de fenêtre, la colonne de gauche n'en fait que 523 et le tableau débordait. En dessous du seuil, tout s'empile sur la pleine largeur — sans jamais laisser un bloc à moitié de largeur posé sur un vide, le flottement étant supprimé plus haut. */ @media (min-width: 1100px) { body.woocommerce-cart #content .woocommerce:has(.cart_totals) { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: var(--e-4); align-items: start; } /* `.cart-collaterals` EMBALLE DEUX BLOCS QUI N'ONT RIEN À FAIRE ENSEMBLE : les totaux, qui veulent la colonne étroite, et les ventes croisées, qui sont une grille de produits et veulent toute la largeur. Mettre le conteneur en colonne de droite écrasait les cartes produit à 186 px — titre coupé à un mot par ligne — sous un titre lui aussi à un mot par ligne, avec un vide de 660 px à gauche. `display: contents` fait disparaître le conteneur de la mise en page : ses deux enfants deviennent des éléments de la grille, et chacun va où il doit. */ body.woocommerce-cart #content .cart-collaterals { display: contents; } /* L'ordre de placement, et non des lignes fixées : une ligne épinglée laisserait un intervalle vide quand le bloc de messages est absent. */ body.woocommerce-cart #content .woocommerce > .woocommerce-notices-wrapper { order: 0; grid-column: 1 / -1; } body.woocommerce-cart #content form.woocommerce-cart-form { order: 1; } body.woocommerce-cart #content .cart_totals { order: 2; } body.woocommerce-cart #content .cross-sells { order: 3; grid-column: 1 / -1; width: 100%; margin-top: var(--e-4); } } /* Les ventes croisées reprennent la grille de la boutique, à laquelle leurs cartes appartiennent. Astra les enferme dans un cadre à filet gris et coiffe leur titre d'un bandeau `#fbfbfb` : une carte autour de cartes, et un bandeau qui ne ressemble à rien d'autre sur le site. */ body.woocommerce-cart #content .cross-sells { padding: 0; border: 0; background: none; } body.woocommerce-cart #content .cross-sells > h2 { margin-bottom: var(--e-3); padding: 0; background: none; font-size: var(--t-h3); line-height: var(--lh-h3); } /* « Mettre à jour le panier » tombait SOUS la ligne du code promo, seul et collé à droite : WooCommerce le fait flotter, et le flottement le sortait de la ligne dès que la place manquait. La cellule reste une CELLULE — lui donner `display: flex` la sort de la table, et la rangée se réduit alors à la largeur de son contenu (mesuré : 252 px au lieu de 658). Ce sont ses enfants qu'on remet en ligne. */ /* La cellule est alignée à droite par WooCommerce : le bouton, une fois replié sur la ligne suivante, partait seul à l'opposé du champ qu'il accompagne. */ #content .woocommerce table.shop_table td.actions { text-align: left; } /* Deux lignes franches, et non un bouton qui suit le texte : posé en ligne après le bloc du code promo, « Mettre à jour le panier » se repliait sur la ligne suivante EN GARDANT sa marge de gauche — il s'y retrouvait décalé de 30 px, aligné sur rien. Où il tombe ne devait pas dépendre de la place restante. */ #content .woocommerce table.shop_table td.actions .coupon { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1); /* WooCommerce fait flotter le bloc du code promo à gauche : sans cette ligne, le bouton se range À CÔTÉ de lui quoi qu'on demande, et se retrouve comprimé à 104 px dans ce qui reste. Le `display: flex` seul n'y change rien — un élément flottant reste flottant. */ float: none; margin: 0 0 var(--e-2); } /* Le champ prend la place disponible ; `min-width: 0` l'autorise à se rétrécir sous sa largeur intrinsèque, sans quoi il déborde. */ #content .woocommerce table.shop_table td.actions .coupon input.input-text { flex: 1 1 12rem; min-width: 0; } /* WooCommerce ajoute 5 px à gauche du bouton du code promo : dans une boîte flexible, c'est `gap` qui espace, et cette marge décalait le bouton de 5 px sous le champ quand les deux passaient en colonne. */ #content .woocommerce table.shop_table td.actions .coupon input.input-text, #content .woocommerce table.shop_table td.actions .coupon button.button { margin: 0; } #content .woocommerce table.shop_table td.actions button[name="update_cart"] { display: block; float: none; margin: 0; } /* Panier vide : le message prend la largeur, le bouton se pose dessous et garde la sienne. */ body.woocommerce-cart #content .wc-empty-cart-message, body.woocommerce-cart #content .cart-empty { margin-bottom: var(--e-3); } body.woocommerce-cart #content p.return-to-shop { margin: 0; } body.woocommerce-cart #content p.return-to-shop a.button { width: auto; } /* Le code promo et la mise à jour du panier sont des actions secondaires : elles ne doivent pas peser autant que « Valider la commande ». */ #content .woocommerce .coupon button.button, #content .woocommerce button[name="update_cart"] { border-color: var(--accent); background-color: var(--fond); color: var(--accent); } #content .woocommerce .coupon button.button:hover, #content .woocommerce button[name="update_cart"]:hover { background-color: var(--accent); color: var(--accent-texte); } /* ======================================================================== 7. Mon compte ======================================================================== */ /* La boutique est en paiement invité et la création de compte est fermée : cette page ne sert qu'au propriétaire. Un formulaire de connexion étiré sur 1078 px n'avait aucune raison d'être. */ #content .woocommerce-account .woocommerce-form-login { max-width: 32rem; } /* Le bouton « afficher le mot de passe » sortait en PAVÉ ROUGE de 42 × 22 px posé sous le champ : WooCommerce le rend en `