@charset "UTF-8"; /* ========================================================================== Maison Argile — Panier & Commande (blocs WooCommerce) Fichier : assets/css/woocommerce-blocks.css -------------------------------------------------------------------------- Les pages Panier (#7) et Commande (#8) sont construites avec les blocs `woocommerce/cart` et `woocommerce/checkout` : l'interface est rendue par React dans le navigateur. Les surcharges de templates PHP (cart/cart.php, checkout/form-checkout.php…) n'ont donc AUCUN effet sur ces deux pages — tout passe par ce fichier. (Mon compte, en shortcode, reste en PHP.) ORDRE DE CHARGEMENT & SPÉCIFICITÉ — pourquoi le préfixe `:root` partout ---------------------------------------------------------------------- La feuille `wc-blocks-style` du plugin est mise en file au moment du rendu du bloc, donc APRÈS les styles du thème dans la plupart des configurations. À spécificité égale, c'est le plugin qui l'emporte. Pour éviter le !important, chaque règle est préfixée par `:root`. `:root` désigne toujours : il ne restreint donc rien du tout, mais il ajoute une classe de spécificité (0,1,0). Concrètement : .wc-block-components-button (plugin) → (0,1,0) :root .wc-block-components-button (nous) → (0,2,0) ← gagne C'est l'idiome que WordPress utilise lui-même pour les styles générés depuis theme.json (`:root :where(…)`). ⇒ Résultat : AUCUN !important dans ce fichier. Là où le plugin monte plus haut en spécificité (règles en `.a.b .c`), on double la classe racine du bloc plutôt que de forcer — c'est signalé sur place. MISE EN FILE — déjà en place dans inc/enqueue.php, sous la poignée `maison-argile-woocommerce-blocks`, avec la dépendance `maison-argile-woocommerce`. Attention : la feuille n'est chargée que si is_cart() || is_checkout() || has_block( 'woocommerce/mini-cart' ). Les jetons --mab-* déclarés plus bas ne sont donc PAS disponibles ailleurs sur le site ; les teintes d'état partagées vivent dans main.css (--ma-error, --ma-success, --ma-warning). PAS DE FILETS DE SÉPARATION — révision demandée par le client ------------------------------------------------------------- Les traits de 1px qui découpaient le tunnel (en-tête de tableau, lignes de panier, options de livraison, groupes de totaux, colonne récapitulative, barre d'actions…) ont TOUS été retirés. La mise en page est désormais respirée par le blanc : là où il y avait un trait, il y a de l'espace, pris dans l'échelle --ma-space-*, et pour les tableaux la hiérarchie est portée par la typographie (en-têtes mono 13px capitales --ma-grey, cellules --ma-black). Ne subsistent que les traits qui PORTENT une information ou DESSINENT un objet, et eux seuls : soulignement des champs de saisie, chevron du select, carré des cases et radios, contour des boutons, séparateurs internes du sélecteur de quantité, marqueur d'option sélectionnée, filet gauche coloré des messages d'état (WCAG 1.4.1) et tout le bloc @media (forced-colors). ⇒ Avant d'ajouter un border dans ce fichier, vérifier qu'il tombe dans cette liste ; sinon, c'est un espacement qu'il faut. SOMMAIRE 1. Jetons locaux (filets, états) 2. Cadre général & typographie 3. Titres de bloc et d'étape 4. Boutons 5. Champs texte, select, zone de texte (label flottant) 6. Cases à cocher & boutons radio 7. Messages système (notice-banner) — 4 états 8. Panier : tableau des lignes 9. Panier : sélecteur de quantité 10. Totaux, coupon, livraison, panneaux dépliants 11. Colonne récapitulative (sidebar) 12. Commande : étapes, adresses, expéditions, retrait 13. Commande : paiement express, chip, force du mot de passe 14. États de chargement 15. Responsive 16. Accessibilité (focus, contrastes forcés) ========================================================================== */ /* -------------------------------------------------------------------------- 1. Jetons locaux -------------------------------------------------------------------------- */ :root { /* Filets. Ils ne servent PLUS à séparer deux zones : à la demande du client, les traits de séparation ont été retirés du tunnel et la respiration est désormais portée par le blanc (padding / margin en jetons --ma-space-*). Ces deux jetons ne subsistent que pour les traits qui DESSINENT un objet : contour du sélecteur de quantité, bouton désactivé, rail de la jauge de force du mot de passe. Ne pas les réintroduire comme séparateurs. */ --mab-rule: rgba(58, 58, 53, 0.15); --mab-rule-strong: rgba(58, 58, 53, 0.35); /* Couleurs d'état. Le design est volontairement monochrome, mais un tunnel d'achat doit signaler sans ambiguïté une erreur, une réussite ou une alerte : ce sont les seules teintes hors palette du fichier, choisies très désaturées. — erreur : var(--ma-error) est DÉJÀ utilisé par .ma-field__input:user-invalid dans main.css. On ne crée donc pas une couleur supplémentaire, on réutilise celle du thème pour que les formulaires du site et ceux du tunnel se comportent pareil. — info : bleu de marque + le bleu du badge produit (#c8ddff) éclairci en fond. — succès / alerte : deux ajouts assumés, sans équivalent dans la palette. Contrastes texte/fond vérifiés (WCAG AA, seuil 4,5:1) : erreur 6,0:1 · succès 6,0:1 · alerte 5,5:1 · info 5,8:1. Le corps des messages reste en --ma-black (≈10,5:1) : la couleur ne sert qu'au repère, jamais à porter le texte long. */ /* Les teintes d'état sont désormais globales (main.css, section 2) : cette feuille n'est chargée que sur panier/commande, or les mêmes états servent aussi sur la boutique et l'espace client. Ne restent ici que les fonds, propres au tunnel. */ --mab-error: var(--ma-error); --mab-error-bg: #fdf3f2; --mab-success: var(--ma-success); --mab-success-bg: #f1f7f3; --mab-warning: var(--ma-warning); --mab-warning-bg: #fbf5ea; --mab-info: var(--ma-blue); --mab-info-bg: #eef3ff; /* Hauteur des commandes carrées (boutons quantité). 36px = confortable au doigt sans casser la densité mono du reste. */ --mab-control: 36px; } /* -------------------------------------------------------------------------- 2. Cadre général & typographie -------------------------------------------------------------------------- */ /* Les blocs héritent de la police du body via theme.json, mais wc-blocks redéclare `font-family: inherit` à plusieurs endroits ET impose ses propres tailles en `em`. On repose donc la base explicitement. */ :root .wc-block-cart, :root .wc-block-checkout { font-family: var(--ma-font-mono); font-size: 14px; line-height: 1.55; letter-spacing: -0.01em; color: var(--ma-black); } /* Respiration verticale : le header du thème est en position fixe, les pages internes réservent 160px en haut (cf. woocommerce.css). */ :root .wc-block-cart, :root .wc-block-checkout { padding-top: var(--ma-space-64); padding-bottom: var(--ma-space-96); } /* wc-blocks pose des `p`, `ul`, `li` que le reset du thème a déjà remis à zéro : on ne rétablit que ce qui doit rester lisible. */ :root .wc-block-cart p, :root .wc-block-checkout p { margin: 0 0 var(--ma-space-8); } :root .wc-block-cart p:last-child, :root .wc-block-checkout p:last-child { margin-bottom: 0; } /* theme.json colore TOUS les liens en bleu (`:root :where(a…)`). Dans le tunnel, seuls les liens réellement actionnables doivent l'être ; le reste passe en noir souligné pour ne pas piqueter la page de bleu. */ :root .wc-block-cart a, :root .wc-block-checkout a { color: var(--ma-black); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 0.25s var(--ma-ease); } :root .wc-block-cart a:hover, :root .wc-block-checkout a:hover { color: var(--ma-blue); } /* Sur les deux pages la mise en page est une grille « contenu + colonne ». wc-blocks la gère en flex ; on ne fait que caler l'écart sur la gouttière. */ :root .wc-block-components-sidebar-layout { gap: 0; column-gap: var(--ma-space-64); } /* -------------------------------------------------------------------------- 3. Titres de bloc et d'étape -------------------------------------------------------------------------- */ /* Reprise stricte de .ma-title : Satoshi 700 / 24px / interligne 40px / bleu. Le motif « // » du thème n'est pas reproduit : il vit dans le balisage (.ma-title__slash) et on ne peut pas l'injecter ici sans le faire lire par les lecteurs d'écran. */ :root .wc-block-components-title, :root .wc-block-components-checkout-step__title, :root .wc-block-cart__totals-title, :root .wc-block-cart__empty-cart__title { font-family: var(--ma-font-display); font-weight: 700; font-size: 24px; line-height: 40px; letter-spacing: -0.01em; color: var(--ma-blue); text-transform: none; } /* Le numéro d'étape est généré par un compteur CSS côté plugin. On ne fait que l'habiller : s'il n'existe pas, la règle ne produit rien. */ :root .wc-block-components-checkout-step__title::before { font-family: var(--ma-font-mono); font-weight: 500; font-size: 14px; color: var(--ma-blue); } :root .wc-block-components-checkout-step { padding: 0 0 var(--ma-space-48); border: 0; margin: 0; } :root .wc-block-components-checkout-step:last-child { padding-bottom: var(--ma-space-24); } :root .wc-block-components-checkout-step__heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ma-space-14); margin: 0 0 var(--ma-space-8); } /* Lien « Modifier » à droite du titre d'étape : traité comme un libellé d'interface (mono 500, capitales), pas comme un lien de contenu. */ :root .wc-block-components-checkout-step__heading-content { font-family: var(--ma-font-mono); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: -0.01em; white-space: nowrap; } :root .wc-block-components-checkout-step__description { font-family: var(--ma-font-mono); font-size: 13px; line-height: 1.6; color: var(--ma-grey); margin: 0 0 var(--ma-space-24); } /* wc-blocks décale le contenu d'étape sous le numéro avec un padding-left en `em`. On le neutralise : la maquette est à fer à gauche. */ :root .wc-block-components-checkout-step__container, :root .wc-block-components-checkout-step__content { padding-left: 0; padding-right: 0; margin: 0; } /* -------------------------------------------------------------------------- 4. Boutons -------------------------------------------------------------------------- */ /* Reprise exacte du bouton défini dans woocommerce.css : fond --ma-black, texte --ma-white, angle vif, mono 500 14px capitales, inversion au survol. `:not(.is-link)` reprend la clause du plugin pour laisser les faux boutons-liens (« Retour au panier ») en dehors. */ :root .wc-block-components-button:not(.is-link) { display: inline-flex; align-items: center; justify-content: center; gap: var(--ma-space-8); font-family: var(--ma-font-mono); font-weight: 500; font-size: 14px; line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; text-decoration: none; background: var(--ma-black); color: var(--ma-white); border: 1px solid var(--ma-black); border-radius: 0; padding: 14px 26px; min-height: 0; box-shadow: none; cursor: pointer; transition: background 0.3s var(--ma-ease), color 0.3s var(--ma-ease); } :root .wc-block-components-button:not(.is-link):hover, :root .wc-block-components-button:not(.is-link):focus { background: transparent; color: var(--ma-black); border-color: var(--ma-black); } /* Variante secondaire du plugin : même géométrie, valeurs inversées au repos. */ :root .wc-block-components-button:not(.is-link).outlined { background: transparent; color: var(--ma-black); } :root .wc-block-components-button:not(.is-link).outlined:hover { background: var(--ma-black); color: var(--ma-white); } /* Désactivé : opacité seule ne suffit pas à AA, on garde donc un contraste réel (texte noir sur blanc) et on signale par le trait + le curseur. */ :root .wc-block-components-button:not(.is-link):disabled, :root .wc-block-components-button:not(.is-link)[aria-disabled="true"] { background: transparent; color: var(--ma-grey); border-color: var(--mab-rule-strong); cursor: not-allowed; } :root .wc-block-components-button__text { font: inherit; letter-spacing: inherit; } /* Boutons « texte » du plugin (Modifier, Retour au panier, Ajouter un code…) : traités comme .ma-arrow-link — mono 500, capitales, souligné discret. */ :root .wc-block-components-button.is-link, :root .wc-block-components-checkout-return-to-cart-button, :root .wc-block-components-address-card__edit, :root .wc-block-components-totals-coupon-link, :root .wc-block-components-totals-shipping__change-address-button, :root .wc-block-components-address-form__address_2-toggle { font-family: var(--ma-font-mono); font-weight: 500; font-size: 13px; letter-spacing: -0.01em; text-transform: uppercase; color: var(--ma-black); background: none; border: 0; border-radius: 0; padding: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; transition: color 0.25s var(--ma-ease); } :root .wc-block-components-button.is-link:hover, :root .wc-block-components-checkout-return-to-cart-button:hover, :root .wc-block-components-address-card__edit:hover, :root .wc-block-components-totals-coupon-link:hover, :root .wc-block-components-totals-shipping__change-address-button:hover, :root .wc-block-components-address-form__address_2-toggle:hover { color: var(--ma-blue); } /* Bouton principal du panier : pleine largeur de la colonne latérale. */ :root .wc-block-cart__submit, :root .wc-block-cart__submit-container { padding: 0; background: none; box-shadow: none; } /* * LARGEUR DU TUNNEL * Panier et Commande sont des pages : elles passent donc par .ma-entry, dont le * max-width de 720px est calibré pour de la prose. Un panier n'est pas un article, * et à 720px la mise en page latérale de wc-blocks bascule en une seule colonne. * On rend donc toute la largeur du conteneur sur ces deux pages uniquement. */ .woocommerce-cart .ma-entry, .woocommerce-checkout .ma-entry { max-width: none; } /* * BOUTONS PRINCIPAUX DU TUNNEL * « Valider la commande » et « Passer commande » ressortaient en gris sur fond * transparent : une règle du plugin l'emporte sur le style de bouton générique. * On les cible donc nommément, et on force aussi la couleur sur l'enfant __text, * que wc-blocks colore séparément — sans quoi le libellé reste gris sur noir. */ /* * !important assumé sur ces deux boutons, et seulement eux. * Constaté sur l'installation : le libellé sortait en --ma-grey sur fond * transparent malgré une règle plus spécifique et plus tardive que celles du * plugin. wc-blocks applique une partie de ses styles de bouton par le runtime * (@wordpress/components), hors de la cascade des feuilles. Ce sont les deux * appels à l'action principaux du tunnel : un bouton gris pâle qui a l'air * désactivé y coûte des commandes. On force donc, en le documentant. */ :root .wc-block-cart__submit-button, :root .wc-block-components-checkout-place-order-button { width: 100%; padding: 18px 26px; background: var(--ma-black) !important; color: var(--ma-white) !important; border: 1px solid var(--ma-black) !important; border-radius: 0; } :root .wc-block-cart__submit-button .wc-block-components-button__text, :root .wc-block-components-checkout-place-order-button .wc-block-components-button__text { color: var(--ma-white) !important; } :root .wc-block-cart__submit-button:hover, :root .wc-block-cart__submit-button:focus, :root .wc-block-components-checkout-place-order-button:hover, :root .wc-block-components-checkout-place-order-button:focus { background: transparent !important; color: var(--ma-black) !important; border-color: var(--ma-black) !important; } :root .wc-block-cart__submit-button:hover .wc-block-components-button__text, :root .wc-block-cart__submit-button:focus .wc-block-components-button__text, :root .wc-block-components-checkout-place-order-button:hover .wc-block-components-button__text, :root .wc-block-components-checkout-place-order-button:focus .wc-block-components-button__text { color: var(--ma-black) !important; } /* * CHAMPS ENCADRÉS RESTANTS * Deux composants échappaient aux règles précédentes : * — .wc-blocks-components-select (préfixe « wc-blockS- », différent de * « wc-block-components- » utilisé partout ailleurs par le plugin) ; * — le champ « complément d'adresse », rendu hors du gabarit de formulaire. * Tous deux sortaient en boîte encadrée alors que le site est au filet bas. */ :root .wc-blocks-components-select__select, :root .wc-block-components-address-form__address_2 input, :root .wc-block-components-address-form input[id$="address_2"] { padding: 6px 0 10px; border: 0; border-bottom: 1px solid var(--ma-black); border-radius: 0; background: transparent; color: var(--ma-black); font-family: var(--ma-font-mono); font-size: 14px; } :root .wc-blocks-components-select__select:focus, :root .wc-block-components-address-form__address_2 input:focus, :root .wc-block-components-address-form input[id$="address_2"]:focus { outline: none; border-bottom-width: 2px; border-bottom-color: var(--ma-blue); padding-bottom: 9px; } /* Conditions de vente : le vide sépare, pas le trait. */ :root .wc-block-checkout__terms { border: 0; margin-top: var(--ma-space-40); padding-top: 0; } /* * FILETS DES CONTENEURS DE BLOCS * Les règles précédentes visent les classes de composants (.wc-block-components-*). * WooCommerce pose aussi des filets sur les enveloppes de blocs elles-mêmes * (.wp-block-woocommerce-*), notamment autour du récapitulatif et au-dessus des * totaux — en color-mix(currentColor 20%), donc invisibles à la recherche d'un * rgba(). Même demande : la séparation passe par l'espacement. */ :root .wc-block-cart .wp-block-woocommerce-cart-order-summary-block, :root .wp-block-woocommerce-cart-order-summary-totals-block, :root .wp-block-woocommerce-checkout-order-summary-block, :root .wp-block-woocommerce-checkout-order-summary-totals-block, :root .wp-block-woocommerce-checkout-order-summary-cart-items-block, :root .wp-block-woocommerce-checkout-order-summary-subtotal-block, :root .wp-block-woocommerce-checkout-order-summary-shipping-block, :root .wp-block-woocommerce-checkout-order-summary-taxes-block, :root .wp-block-woocommerce-checkout-order-summary-discount-block, :root .wp-block-woocommerce-checkout-order-summary-fee-block, :root .wp-block-woocommerce-checkout-order-summary-coupon-form-block { border: 0; } /* Le vide remplace le trait qui séparait le récapitulatif de ses totaux. */ :root .wp-block-woocommerce-cart-order-summary-totals-block, :root .wp-block-woocommerce-checkout-order-summary-totals-block { padding-top: var(--ma-space-24); padding-bottom: var(--ma-space-24); } /* * MISE EN COLONNES DU TUNNEL * wc-blocks ne pilote pas sa bascule par media queries mais par des classes * .is-large / .is-medium / .is-small posées en JavaScript d'après la largeur * observée du conteneur. Sur cette installation elles ne sont jamais posées : * le panier restait donc empilé même à 1185 px de large. On prend la main en * CSS plutôt que d'attendre le JS du plugin. */ @media (min-width: 900px) { :root .wc-block-cart .wc-block-components-sidebar-layout, :root .wc-block-checkout .wc-block-components-sidebar-layout { flex-wrap: nowrap; align-items: flex-start; gap: var(--ma-space-64); } :root .wc-block-cart .wc-block-components-main, :root .wc-block-checkout .wc-block-components-main { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; padding-right: 0; } /* La colonne a perdu son filet gauche (cf. section 11) : c'est maintenant le vide qui la détache. On lui rend donc sa marge intérieure — 40px qui s'ajoutent aux 64px de gouttière, soit ~104px de blanc entre le contenu et le récapitulatif. La base passe de 360 à 400px pour que la colonne utile reste à 360px malgré le padding (box-sizing: border-box). */ :root .wc-block-cart .wc-block-components-sidebar, :root .wc-block-checkout .wc-block-components-sidebar { flex: 0 0 400px; width: 400px; max-width: 400px; min-width: 0; padding-left: var(--ma-space-40); } } /* Barre d'actions de la commande : retour à gauche, commande à droite. Filet haut supprimé (demande client) : la barre se détache par 48px de blanc au-dessus d'elle plutôt que par un trait. */ :root .wc-block-checkout__actions_row { display: flex; align-items: center; justify-content: space-between; gap: var(--ma-space-24); padding-top: var(--ma-space-48); } :root .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button { width: auto; flex: 0 1 auto; } /* -------------------------------------------------------------------------- 5. Champs texte, select, zone de texte -------------------------------------------------------------------------- Le composant .wc-block-components-text-input est un champ à label flottant :
La classe `is-active` est posée par React dès que le champ est focalisé OU rempli. On garde le principe du flottement (il évite un empilement label/champ trop haut sur un tunnel de 15 champs) mais on le recale sur le style « filet bas » de .ma-field__input : — vide + non focalisé : le label tient lieu de placeholder, mono 14px gris ; — focalisé ou rempli : il remonte en mono 11px capitales, noir (ou bleu au focus), donc toujours lisible et jamais superposé à la saisie. Deux garde-fous CSS doublent la classe JS : `input:focus + label` (si le JS tarde) et `input:-webkit-autofill + label` (remplissage automatique du navigateur, qui ne déclenche pas d'événement React). -------------------------------------------------------------------------- */ :root .wc-block-components-text-input, :root .wc-block-components-textarea, :root .wc-block-components-select, :root .wc-block-components-combobox { position: relative; margin: 0 0 var(--ma-space-24); padding-top: 16px; /* réserve la bande où le label remonte */ /* wc-blocks met `white-space: nowrap` sur le conteneur : en français les libellés sont longs (« Complément d'adresse »), on rétablit le retour. */ white-space: normal; } :root .wc-block-components-text-input input[type="text"], :root .wc-block-components-text-input input[type="email"], :root .wc-block-components-text-input input[type="tel"], :root .wc-block-components-text-input input[type="number"], :root .wc-block-components-text-input input[type="password"], :root .wc-block-components-text-input input[type="url"], :root .wc-block-components-text-input input[type="search"], :root .wc-block-components-textarea textarea, :root .wc-block-components-select .wc-block-components-select__select, :root .wc-block-components-combobox input { width: 100%; margin: 0; padding: 6px 0 10px; background: none; border: 0; border-bottom: 1px solid var(--ma-black); border-radius: 0; box-shadow: none; color: var(--ma-black); font-family: var(--ma-font-mono); font-size: 14px; line-height: 1.3; letter-spacing: -0.01em; transition: border-color 0.25s var(--ma-ease); } /* Focus : passage à 2px comme .ma-field__input, avec 1px repris sur le padding pour que la ligne de base du texte ne bouge pas. */ :root .wc-block-components-text-input input:focus, :root .wc-block-components-textarea textarea:focus, :root .wc-block-components-select .wc-block-components-select__select:focus, :root .wc-block-components-combobox input:focus { outline: none; border-bottom-width: 2px; border-bottom-color: var(--ma-blue); padding-bottom: 9px; } :root .wc-block-components-textarea textarea { min-height: 120px; resize: vertical; } /* Le select natif garde sa flèche système : on la remplace par un chevron dessiné en CSS pur (pas d'image, pas de dépendance). */ :root .wc-block-components-select .wc-block-components-select__select { appearance: none; -webkit-appearance: none; padding-right: 22px; cursor: pointer; } :root .wc-block-components-select .wc-block-components-select__container::after { content: ""; position: absolute; right: 4px; bottom: 16px; width: 7px; height: 7px; border-right: 1px solid var(--ma-black); border-bottom: 1px solid var(--ma-black); transform: rotate(45deg); pointer-events: none; } :root .wc-block-components-select .wc-block-components-select__container { position: relative; } /* --- Label flottant ------------------------------------------------------ */ :root .wc-block-components-text-input label, :root .wc-block-components-textarea label, :root .wc-block-components-select .wc-block-components-select__label, :root .wc-block-components-combobox label { position: absolute; left: 0; top: 16px; max-width: 100%; margin: 0; padding: 6px 0 0; /* aligne le label sur la 1re ligne de saisie */ transform: none; /* neutralise le translateY(0.75em) de wc-blocks */ transform-origin: left top; font-family: var(--ma-font-mono); font-weight: 400; font-size: 14px; line-height: 1.3; letter-spacing: -0.01em; text-transform: none; color: var(--ma-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: transform 0.22s var(--ma-ease), font-size 0.22s var(--ma-ease), color 0.22s var(--ma-ease); } /* État remonté. 22px = padding-top du conteneur (16) + padding-top du label (6). */ :root .wc-block-components-text-input.is-active label, :root .wc-block-components-textarea.is-active label, :root .wc-block-components-combobox.is-active label, :root .wc-block-components-text-input input:focus + label, :root .wc-block-components-textarea textarea:focus + label, :root .wc-block-components-text-input input:-webkit-autofill + label { transform: translateY(-22px); font-size: 11px; font-weight: 500; text-transform: uppercase; color: var(--ma-black); } /* Focalisé : le label passe en bleu, même signal que le filet. */ :root .wc-block-components-text-input input:focus + label, :root .wc-block-components-textarea textarea:focus + label { color: var(--ma-blue); } /* Le label du select n'est jamais flottant (un select n'est jamais « vide » visuellement) : il reste en haut en permanence. */ :root .wc-block-components-select .wc-block-components-select__label { transform: translateY(-22px); font-size: 11px; font-weight: 500; text-transform: uppercase; color: var(--ma-black); } /* Le remplissage automatique de Chrome force un fond jaune : on le repousse avec une ombre interne opaque (seule technique qui fonctionne sur :-webkit-autofill) — ce n'est pas une ombre portée décorative. */ :root .wc-block-components-text-input input:-webkit-autofill, :root .wc-block-components-text-input input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 100px var(--ma-white) inset; -webkit-text-fill-color: var(--ma-black); } /* --- État d'erreur ------------------------------------------------------- */ :root .wc-block-components-text-input.has-error input, :root .wc-block-components-textarea.has-error textarea, :root .wc-block-components-combobox.has-error input, :root .wc-block-components-text-input input[aria-invalid="true"] { border-bottom-color: var(--mab-error); border-bottom-width: 2px; padding-bottom: 9px; } :root .wc-block-components-text-input.has-error label, :root .wc-block-components-textarea.has-error label, :root .wc-block-components-combobox.has-error label { color: var(--mab-error); } /* Le focus reprend la main sur l'erreur : bleu = « vous êtes ici », le message sous le champ continue de porter l'erreur. */ :root .wc-block-components-text-input.has-error input:focus { border-bottom-color: var(--ma-blue); } :root .wc-block-components-validation-error { margin: 6px 0 0; font-family: var(--ma-font-mono); font-size: 12px; line-height: 1.45; color: var(--mab-error); } :root .wc-block-components-validation-error p { margin: 0; color: inherit; } /* Le message d'erreur est précédé d'un chevron plein : l'erreur reste identifiable même si l'utilisateur ne distingue pas le rouge (WCAG 1.4.1). */ :root .wc-block-components-validation-error p::before { content: "\2758\00a0"; font-weight: 700; } /* Grille du formulaire d'adresse : on cale l'écart sur l'échelle du thème. Le nombre de colonnes reste géré par le plugin, on ne le contrarie pas. */ :root .wc-block-components-address-form { column-gap: var(--ma-space-24); row-gap: 0; } /* Carte d'adresse enregistrée. Encadrement haut/bas retiré (demande client) : l'encart est isolé par l'espacement — les 24px de marge basse de la description d'étape le précèdent, 24px le suivent — et non plus par deux filets. L'étape elle-même ajoute déjà 48px avant la suivante. */ :root .wc-block-components-address-card { padding: var(--ma-space-8) 0 var(--ma-space-24); border: 0; border-radius: 0; background: none; font-size: 13px; line-height: 1.7; } /* -------------------------------------------------------------------------- 6. Cases à cocher & boutons radio -------------------------------------------------------------------------- Même principe que .ma-newsletter__consent : carré 1px, coche = carré plein. Taille portée de 12px (pied de page) à 14px : le tunnel se remplit souvent au doigt, et 12px est sous le seuil de confort tactile. -------------------------------------------------------------------------- */ :root .wc-block-components-checkbox, :root .wc-block-components-checkbox label { display: flex; align-items: flex-start; margin: 0; font-family: var(--ma-font-mono); cursor: pointer; } :root .wc-block-components-checkbox { padding: var(--ma-space-8) 0; } /* La coche SVG du plugin est remplacée par le carré plein du thème. */ :root .wc-block-components-checkbox__mark { display: none; } :root .wc-block-components-checkbox__input[type="checkbox"] { position: relative; flex: none; appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 3px 12px 0 0; border: 1px solid var(--ma-black); border-radius: 0; background: none; box-shadow: none; display: grid; place-content: center; cursor: pointer; transition: border-color 0.2s var(--ma-ease); } :root .wc-block-components-checkbox__input[type="checkbox"]::after { content: ""; width: 8px; height: 8px; background: var(--ma-black); transform: scale(0); transition: transform 0.15s var(--ma-ease); } :root .wc-block-components-checkbox__input[type="checkbox"]:checked::after { transform: scale(1); } :root .wc-block-components-checkbox__label { font-family: var(--ma-font-mono); font-size: 13px; line-height: 1.5; letter-spacing: -0.01em; /* Pas d'opacité réduite ici, contrairement au pied de page : ces cases engagent la commande, elles doivent se lire à pleine valeur. */ color: var(--ma-black); } /* --- Radios (modes de livraison, moyens de paiement) --------------------- */ /* Filets haut et inter-options supprimés (demande client) : les options ne sont plus détachées par des traits mais par 24px de blanc haut et bas, soit 48px entre deux libellés. La puce carrée reste le seul repère graphique de la ligne. */ :root .wc-block-components-radio-control { margin: 0; } :root .wc-block-components-radio-control__option, :root .wc-block-components-radio-control-accordion-option { position: relative; display: block; margin: 0; padding: var(--ma-space-24) 0 var(--ma-space-24) 34px; background: none; cursor: pointer; } :root .wc-block-components-radio-control__input { position: absolute; left: 0; /* 27px = padding haut de l'option (24) + 3px pour aligner la puce sur la première ligne du libellé. Suit l'augmentation du padding ci-dessus. */ top: 27px; appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; /* Carré et non rond : le design n'a pas d'arrondi au-delà de 2px. */ border: 1px solid var(--ma-black); border-radius: 0; background: none; box-shadow: none; display: grid; place-content: center; cursor: pointer; } /* wc-blocks dessine sa pastille en ::before selon les versions : on la coupe pour ne garder qu'un seul marqueur. */ :root .wc-block-components-radio-control__input::before { content: none; } :root .wc-block-components-radio-control__input::after { content: ""; width: 8px; height: 8px; border-radius: 0; background: var(--ma-black); transform: scale(0); transition: transform 0.15s var(--ma-ease); } :root .wc-block-components-radio-control__input:checked::after { transform: scale(1); } /* Option sélectionnée : filet gauche 2px. CONSERVÉ — ce trait n'est pas une séparation mais un marqueur d'état (l'option en cours), au même titre que le soulignement d'un onglet actif ; il double la puce et ne laisse pas la sélection reposer sur la seule couleur. Le padding est réduit d'autant pour que le texte ne se décale pas, et la puce recule de 2px pour compenser le déplacement du bord de padding. */ :root .wc-block-components-radio-control__option-checked { border-left: 2px solid var(--ma-black); padding-left: 32px; } :root .wc-block-components-radio-control__option-checked .wc-block-components-radio-control__input { left: -2px; } :root .wc-block-components-radio-control__label-group, :root .wc-block-components-radio-control__description-group { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ma-space-14); } :root .wc-block-components-radio-control__label { font-family: var(--ma-font-mono); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ma-black); } :root .wc-block-components-radio-control__secondary-label { font-family: var(--ma-font-mono); font-size: 13px; color: var(--ma-black); white-space: nowrap; } :root .wc-block-components-radio-control__description, :root .wc-block-components-radio-control__secondary-description { font-family: var(--ma-font-mono); font-size: 12px; line-height: 1.5; color: var(--ma-grey); margin-top: 4px; } /* Contenu déplié sous une option (formulaire de paiement, choix de point relais) : filet bas retiré, la fin du panneau est marquée par son padding. */ :root .wc-block-components-radio-control-accordion-content { padding: 0 0 var(--ma-space-24) 34px; } /* -------------------------------------------------------------------------- 7. Messages système (notice-banner) -------------------------------------------------------------------------- Quatre états déclinés sobrement : filet gauche 2px coloré + fond très pâle, texte en --ma-black. L'icône du plugin est CONSERVÉE mais mise à plat (16px, pas de pastille colorée, fill = couleur d'état) : elle est le seul marqueur non chromatique qui distingue une erreur d'un succès, la retirer ferait reposer l'information sur la couleur seule (WCAG 1.4.1). -------------------------------------------------------------------------- */ :root .wc-block-components-notice-banner { display: flex; align-items: flex-start; gap: var(--ma-space-13); margin: 0 0 var(--ma-space-24); padding: var(--ma-space-14) var(--ma-space-24); border: 0; border-left: 2px solid var(--ma-black); border-radius: 0; background: rgba(58, 58, 53, 0.04); box-shadow: none; font-family: var(--ma-font-mono); font-size: 13px; line-height: 1.55; letter-spacing: -0.01em; color: var(--ma-black); } :root .wc-block-components-notice-banner > svg { flex: none; width: 16px; height: 16px; margin: 2px 0 0; padding: 0; border-radius: 0; background: none; fill: currentColor; } :root .wc-block-components-notice-banner__content { flex: 1 1 auto; min-width: 0; /* sans cela un code promo long fait déborder le flex */ font-size: 13px; color: var(--ma-black); } :root .wc-block-components-notice-banner__content ul, :root .wc-block-components-notice-banner__content ol { margin: 0; padding: 0; list-style: none; } :root .wc-block-components-notice-banner__content li + li { margin-top: 4px; } :root .wc-block-components-notice-banner__summary { display: block; margin: 0 0 4px; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: -0.01em; } /* Bouton de fermeture : croix discrète, jamais le bouton plein du thème. */ :root .wc-block-components-notice-banner .wc-block-components-notice-banner__dismiss { flex: none; align-self: flex-start; padding: 0; min-height: 0; background: none; border: 0; color: var(--ma-black); opacity: 0.55; transition: opacity 0.2s var(--ma-ease); } :root .wc-block-components-notice-banner .wc-block-components-notice-banner__dismiss:hover { background: none; color: var(--ma-black); opacity: 1; } /* --- Les quatre états ---------------------------------------------------- */ :root .wc-block-components-notice-banner.is-info { border-left-color: var(--mab-info); background: var(--mab-info-bg); } :root .wc-block-components-notice-banner.is-info > svg { fill: var(--mab-info); } :root .wc-block-components-notice-banner.is-success { border-left-color: var(--mab-success); background: var(--mab-success-bg); } :root .wc-block-components-notice-banner.is-success > svg { fill: var(--mab-success); } :root .wc-block-components-notice-banner.is-warning { border-left-color: var(--mab-warning); background: var(--mab-warning-bg); } :root .wc-block-components-notice-banner.is-warning > svg { fill: var(--mab-warning); } /* Erreur : seul état où le filet monte à 3px et où le résumé prend la couleur. C'est le message qui bloque la commande, il doit se repérer d'un coup d'œil dans une page longue sans pour autant devenir un pavé rouge. */ :root .wc-block-components-notice-banner.is-error { border-left-width: 3px; border-left-color: var(--mab-error); background: var(--mab-error-bg); } :root .wc-block-components-notice-banner.is-error > svg { fill: var(--mab-error); } :root .wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__summary { color: var(--mab-error); } /* -------------------------------------------------------------------------- 8. Panier : tableau des lignes -------------------------------------------------------------------------- */ :root .wc-block-cart-items { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-family: var(--ma-font-mono); } /* En-tête du tableau. Le filet noir sous les intitulés a été supprimé (demande client) : la hiérarchie passe désormais par la typographie — mono 13px capitales en --ma-grey pour l'en-tête, --ma-black pour les cellules — et par 24px de blanc avant la première ligne. */ :root .wc-block-cart-items__header { border-bottom: 0; } :root .wc-block-cart-items__header th, :root .wc-block-cart-items__header-image, :root .wc-block-cart-items__header-product, :root .wc-block-cart-items__header-total { padding: 0 0 var(--ma-space-14); border: 0; background: none; font-family: var(--ma-font-mono); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ma-grey); } :root .wc-block-cart-items__header-total { text-align: right; } /* Aucune séparation dessinée : ni filet de ligne, ni filet vertical, ni fond alterné. Les lignes sont tenues par 24px de padding haut et bas (48px de blanc entre deux articles) et par la vignette qui ancre chaque ligne. */ :root .wc-block-cart-item, :root .wc-block-cart-items__row { border-bottom: 0; background: none; } :root .wc-block-cart-item td, :root .wc-block-cart-items__row td { padding: var(--ma-space-24) 0; border: 0; vertical-align: top; background: none; } :root .wc-block-cart-item__image, :root .wc-block-cart-items__row .wc-block-cart-item__image { width: 110px; padding-right: var(--ma-space-24); } :root .wc-block-cart-item__image img, :root .wc-block-components-product-image img { width: 100%; height: auto; border-radius: 0; /* Même rapport que les vignettes boutique (620 × 786). */ aspect-ratio: 620 / 786; object-fit: cover; } :root .wc-block-cart-item__total, :root .wc-block-cart-items__row .wc-block-cart-item__total { text-align: right; white-space: nowrap; } :root .wc-block-cart-item__wrap { display: flex; flex-direction: column; gap: var(--ma-space-8); } /* Nom de produit : mono 14px noir. Il reste un lien, mais souligné seulement au survol pour ne pas hachurer la colonne. */ :root .wc-block-components-product-name { font-family: var(--ma-font-mono); font-weight: 500; font-size: 14px; line-height: 1.4; letter-spacing: -0.01em; color: var(--ma-black); text-decoration: none; } :root a.wc-block-components-product-name:hover { color: var(--ma-blue); text-decoration: underline; text-underline-offset: 3px; } :root .wc-block-components-product-price { font-family: var(--ma-font-mono); font-size: 13px; color: var(--ma-grey); } /* Le total de ligne est la donnée qu'on vient chercher : il repasse en noir. */ :root .wc-block-cart-item__total .wc-block-components-product-price, :root .wc-block-cart-item__total .wc-block-components-product-price__value { font-size: 14px; color: var(--ma-black); } :root .wc-block-components-product-price__regular { color: var(--ma-grey); text-decoration: line-through; margin-right: 6px; } :root .wc-block-components-product-metadata { font-family: var(--ma-font-mono); font-size: 12px; line-height: 1.5; color: var(--ma-grey); } :root .wc-block-components-product-metadata__description p, :root .wc-block-components-product-details { margin: 0; font-size: 12px; color: var(--ma-grey); } /* Badges (promo, précommande…) : reprise de .ma-badge. */ :root .wc-block-components-product-badge, :root .wc-block-components-sale-badge { display: inline-block; padding: 5px 9px; border: 0; border-radius: var(--ma-radius); background: #c8ddff; color: var(--ma-blue); font-family: var(--ma-font-mono); font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; } :root .wc-block-cart-item__remove-link { align-self: flex-start; font-family: var(--ma-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ma-grey); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; transition: color 0.25s var(--ma-ease); } :root .wc-block-cart-item__remove-link:hover { color: var(--mab-error); } /* -------------------------------------------------------------------------- 9. Panier : sélecteur de quantité -------------------------------------------------------------------------- */ :root .wc-block-components-quantity-selector { display: inline-flex; align-items: stretch; width: auto; min-width: 0; max-width: 132px; margin: 0; border: 1px solid var(--mab-rule-strong); border-radius: 0; background: none; overflow: hidden; } /* wc-blocks dessine un séparateur en ::after sur le conteneur : inutile ici, ce sont les bordures des boutons qui font le travail. */ :root .wc-block-components-quantity-selector::after { content: none; } :root .wc-block-components-quantity-selector__input { order: 2; width: 44px; min-width: 0; height: var(--mab-control); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: center; font-family: var(--ma-font-mono); font-size: 14px; color: var(--ma-black); appearance: textfield; -moz-appearance: textfield; } :root .wc-block-components-quantity-selector__input::-webkit-outer-spin-button, :root .wc-block-components-quantity-selector__input::-webkit-inner-spin-button { appearance: none; -webkit-appearance: none; margin: 0; } :root .wc-block-components-quantity-selector__button { width: var(--mab-control); height: var(--mab-control); min-width: var(--mab-control); padding: 0; border: 0; border-radius: 0; background: none; color: var(--ma-black); font-family: var(--ma-font-mono); font-size: 15px; line-height: 1; opacity: 1; cursor: pointer; transition: background 0.2s var(--ma-ease), color 0.2s var(--ma-ease); } :root .wc-block-components-quantity-selector__button--minus { order: 1; border-right: 1px solid var(--mab-rule-strong); } :root .wc-block-components-quantity-selector__button--plus { order: 3; border-left: 1px solid var(--mab-rule-strong); } :root .wc-block-components-quantity-selector__button:hover { background: var(--ma-black); color: var(--ma-white); } :root .wc-block-components-quantity-selector__button:disabled, :root .wc-block-components-quantity-selector__button[aria-disabled="true"] { color: var(--ma-grey); background: none; cursor: not-allowed; } /* -------------------------------------------------------------------------- 10. Totaux, coupon, livraison, panneaux dépliants -------------------------------------------------------------------------- */ /* Chaque groupe de totaux est enveloppé par le plugin. Le filet haut entre les groupes est supprimé (demande client) : la séparation est portée par l'espacement, 24px de part et d'autre, soit 48px entre deux groupes. */ :root .wc-block-components-totals-wrapper { padding: var(--ma-space-24) 0; border-top: 0; } :root .wc-block-components-totals-wrapper:first-child { padding-top: 0; } :root .wc-block-components-totals-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ma-space-14); margin: 0; padding: 0; font-family: var(--ma-font-mono); font-size: 13px; line-height: 1.8; letter-spacing: -0.01em; color: var(--ma-black); } :root .wc-block-components-totals-item__label { font-weight: 400; text-transform: uppercase; color: var(--ma-black); } :root .wc-block-components-totals-item__value { white-space: nowrap; } :root .wc-block-components-totals-item__description { flex: 1 0 100%; font-size: 12px; line-height: 1.5; color: var(--ma-grey); } /* Total général : Satoshi 700 24px, la seule ligne composée en display de la colonne. C'est le chiffre qu'on cherche. */ :root .wc-block-components-totals-footer-item { padding-top: var(--ma-space-8); font-family: var(--ma-font-display); font-weight: 700; font-size: 24px; line-height: 40px; letter-spacing: -0.01em; color: var(--ma-black); } :root .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, :root .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--ma-font-display); font-weight: 700; font-size: 24px; line-height: 40px; text-transform: none; color: var(--ma-black); } /* La mention « dont TVA » redescend en mono : ce n'est pas un total. */ :root .wc-block-components-totals-footer-item-tax, :root .wc-block-components-totals-footer-item .wc-block-components-totals-item__description { font-family: var(--ma-font-mono); font-weight: 400; font-size: 12px; line-height: 1.5; color: var(--ma-grey); } /* --- Code promo ---------------------------------------------------------- */ :root .wc-block-components-totals-coupon { padding: 0; } :root .wc-block-components-totals-coupon__form { display: flex; align-items: flex-end; gap: var(--ma-space-13); margin: 0; padding-top: var(--ma-space-8); } :root .wc-block-components-totals-coupon__input { flex: 1 1 auto; min-width: 0; /* évite que le champ pousse le bouton hors de la colonne */ margin-bottom: 0; } :root .wc-block-components-totals-coupon__button { flex: none; padding: 12px 20px; } :root .wc-block-components-totals-coupon .wc-block-components-validation-error { flex: 1 0 100%; } /* --- Livraison ----------------------------------------------------------- */ :root .wc-block-components-totals-shipping .wc-block-components-totals-item { align-items: flex-start; } :root .wc-block-components-totals-shipping__via { display: block; font-size: 12px; color: var(--ma-grey); text-transform: none; } :root .wc-block-components-totals-shipping__change-address-button { margin-top: 4px; font-size: 12px; } :root .wc-block-components-totals-shipping__options { margin-top: var(--ma-space-8); } /* --- Panneaux dépliants (adresse estimée, packages multiples…) ------------ */ :root .wc-block-components-panel { border: 0; border-radius: 0; background: none; } :root .wc-block-components-panel__button { display: flex; align-items: center; justify-content: space-between; gap: var(--ma-space-8); width: 100%; padding: var(--ma-space-13) 0; border: 0; border-radius: 0; background: none; font-family: var(--ma-font-mono); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ma-black); text-align: left; cursor: pointer; } :root .wc-block-components-panel__button:hover { color: var(--ma-blue); } :root .wc-block-components-panel__marker { flex: none; fill: currentColor; transition: transform 0.25s var(--ma-ease); } :root .wc-block-components-panel__content { padding: 0 0 var(--ma-space-13); } /* -------------------------------------------------------------------------- 11. Colonne récapitulative (sidebar) -------------------------------------------------------------------------- Ni filet gauche, ni aplat gris, ni boîte : la colonne se distingue par le seul vide qui l'entoure (demande client). Ce vide doit donc être franc — 64px de gouttière de grille + 40px de marge intérieure ici, soit ~104px entre le contenu et le récapitulatif. Les largeurs correspondantes sont posées dans la media query ≥900px de la section 4. -------------------------------------------------------------------------- */ :root .wc-block-components-sidebar { padding: 0 0 0 var(--ma-space-40); border: 0; border-radius: 0; background: none; } /* wc-blocks encadre le contenu de la colonne : on enlève boîte, fond et arrondi pour ne laisser que le contenu posé sur le fond de page. */ :root .wc-block-components-sidebar .wc-block-components-panel, :root .wc-block-components-sidebar .wc-block-components-totals-wrapper, :root .wc-block-cart__totals-title, :root .wc-block-checkout__sidebar > * { background: none; border-radius: 0; } /* Titre « Total » de la colonne : le filet noir qui le soulignait est retiré (demande client). Il porte déjà la seule composition en Satoshi 24px de la colonne ; 24px de blanc en dessous suffisent à le détacher des lignes. */ :root .wc-block-cart__totals-title { padding: 0 0 var(--ma-space-24); margin: 0; border-bottom: 0; text-align: left; } /* --- Récapitulatif article par article ----------------------------------- */ :root .wc-block-components-order-summary { border: 0; background: none; } :root .wc-block-components-order-summary .wc-block-components-panel__button { padding-top: 0; } :root .wc-block-components-order-summary__content { padding: 0; } /* Lignes du récapitulatif : filet inter-article supprimé (demande client). Chaque ligne est tenue par 24px de padding — 48px de blanc entre deux articles — et par sa vignette. Le premier et le dernier article se calent sur les bords du bloc pour ne pas creuser deux fois le même espace. */ :root .wc-block-components-order-summary-item { display: flex; align-items: flex-start; gap: var(--ma-space-14); padding: var(--ma-space-24) 0; margin: 0; border: 0; background: none; } :root .wc-block-components-order-summary-item:first-child { padding-top: 0; } :root .wc-block-components-order-summary-item:last-child { padding-bottom: 0; } :root .wc-block-components-order-summary-item__image { flex: none; width: 56px; position: relative; } :root .wc-block-components-order-summary-item__image img { width: 100%; height: auto; border-radius: 0; aspect-ratio: 620 / 786; object-fit: cover; } /* Pastille de quantité : carrée, filet 1px, fond blanc — pas de rond ni d'ombre comme le propose le plugin. */ :root .wc-block-components-order-summary-item__quantity { min-width: 20px; height: 20px; padding: 0 4px; border: 1px solid var(--ma-black); border-radius: var(--ma-radius); background: var(--ma-white); box-shadow: none; color: var(--ma-black); font-family: var(--ma-font-mono); font-size: 11px; line-height: 18px; text-align: center; } :root .wc-block-components-order-summary-item__description { flex: 1 1 auto; min-width: 0; font-size: 13px; } :root .wc-block-components-order-summary-item__total-price, :root .wc-block-components-order-summary-item__individual-prices { font-family: var(--ma-font-mono); font-size: 13px; white-space: nowrap; } :root .wc-block-components-order-summary-item__individual-prices { color: var(--ma-grey); } /* -------------------------------------------------------------------------- 12. Commande : expéditions et retrait -------------------------------------------------------------------------- */ :root .wc-block-components-shipping-rates-control, :root .wc-block-components-local-pickup-rates-control { margin: 0; border: 0; background: none; } :root .wc-block-components-shipping-rates-control__package { margin: 0 0 var(--ma-space-24); padding: 0; border: 0; background: none; } :root .wc-block-components-shipping-rates-control__package-title, :root .wc-block-components-shipping-rates-control__package .wc-block-components-panel__button { font-family: var(--ma-font-mono); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ma-grey); } /* Absence d'option de livraison : c'est un blocage, on le traite comme une alerte plutôt que comme un texte gris noyé dans la page. */ :root .wc-block-components-shipping-rates-control__no-results-notice { margin: 0; padding: var(--ma-space-14) var(--ma-space-24); border: 0; border-left: 2px solid var(--mab-warning); border-radius: 0; background: var(--mab-warning-bg); font-family: var(--ma-font-mono); font-size: 13px; color: var(--ma-black); } :root .wc-block-components-form { margin: 0; } /* -------------------------------------------------------------------------- 13. Paiement express, chip, force du mot de passe -------------------------------------------------------------------------- */ /* On n'habille QUE l'entourage : les boutons Apple Pay / PayPal sont rendus dans des iframes tierces et leur apparence est imposée par le prestataire. */ :root .wc-block-components-express-payment { margin: 0 0 var(--ma-space-40); padding: 0; border: 0; border-radius: 0; background: none; } /* Les deux traits qui encadraient l'intitulé sont supprimés (demande client : même trait de 1px, seulement dessiné en pseudo-élément plutôt qu'en border). L'intitulé revient donc à fer à gauche, comme tous les autres libellés de section, et c'est la marge basse qui le détache des boutons. */ :root .wc-block-components-express-payment__title-container { display: flex; align-items: center; gap: var(--ma-space-14); margin: 0 0 var(--ma-space-24); } :root .wc-block-components-express-payment__title-container::before, :root .wc-block-components-express-payment__title-container::after { content: none; } :root .wc-block-components-express-payment__title { font-family: var(--ma-font-mono); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ma-grey); background: none; padding: 0; } :root .wc-block-components-express-payment__event-buttons > li { margin-bottom: var(--ma-space-8); } /* Séparateur « OU » entre paiement express et formulaire classique. Les deux traits qui le flanquaient sont supprimés (demande client) : reste le mot seul, centré, entouré de 40px de blanc — la coupure se lit tout aussi bien. */ :root .wc-block-components-express-payment-continue-rule { display: flex; align-items: center; justify-content: center; gap: var(--ma-space-14); margin: var(--ma-space-40) 0; font-family: var(--ma-font-mono); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ma-grey); } :root .wc-block-components-express-payment-continue-rule::before, :root .wc-block-components-express-payment-continue-rule::after { content: none; } /* Chip (code promo appliqué) : reprise du badge produit du thème. */ :root .wc-block-components-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0; padding: 5px 9px; border: 0; border-radius: var(--ma-radius); background: #c8ddff; color: var(--ma-blue); font-family: var(--ma-font-mono); font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; } :root .wc-block-components-chip__text { font: inherit; color: inherit; } :root .wc-block-components-chip.is-removable { padding-right: 5px; } :root .wc-block-components-chip__remove { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; cursor: pointer; transition: background 0.2s var(--ma-ease), color 0.2s var(--ma-ease); } :root .wc-block-components-chip__remove:hover { background: var(--ma-blue); color: var(--ma-white); } :root .wc-block-components-chip__remove-icon, :root .wc-block-components-chip__remove svg { width: 12px; height: 12px; fill: currentColor; } /* Force du mot de passe (création de compte à la commande). Le natif n'est stylable que par des pseudo-éléments propriétaires : on le réduit à un filet de 2px et on laisse le texte porter l'information — c'est lui qui est lu par les lecteurs d'écran. */ :root .wc-block-components-password-strength { margin-top: var(--ma-space-8); } :root .wc-block-components-password-strength__meter { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 2px; border: 0; border-radius: 0; background: var(--mab-rule); } :root .wc-block-components-password-strength__meter::-webkit-meter-bar { height: 2px; border: 0; border-radius: 0; background: var(--mab-rule); } :root .wc-block-components-password-strength__meter::-webkit-meter-optimum-value { background: var(--mab-success); } :root .wc-block-components-password-strength__meter::-webkit-meter-suboptimum-value { background: var(--mab-warning); } :root .wc-block-components-password-strength__meter::-webkit-meter-even-less-good-value { background: var(--mab-error); } /* Firefox n'expose qu'une seule barre, sans distinction de niveau. */ :root .wc-block-components-password-strength__meter::-moz-meter-bar { border-radius: 0; background: var(--ma-black); } :root .wc-block-components-password-strength__result { display: block; margin-top: 6px; font-family: var(--ma-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ma-grey); } :root .wc-block-components-password-strength__result.is-weak, :root .wc-block-components-password-strength__result.is-very-weak { color: var(--mab-error); } :root .wc-block-components-password-strength__result.is-strong { color: var(--mab-success); } /* -------------------------------------------------------------------------- 14. États de chargement -------------------------------------------------------------------------- */ /* Le voile de chargement du plugin est blanc semi-opaque : on le cale sur le blanc argile du thème pour éviter le voile grisâtre. */ :root .wc-block-components-loading-mask::after { background: rgba(250, 250, 245, 0.75); } :root .wc-block-components-spinner::before { border-color: var(--ma-black); border-top-color: transparent; } /* Squelettes de chargement : filet plutôt qu'aplat gris. */ :root .wc-block-components-skeleton, :root .wc-block-components-skeleton__element { border-radius: 0; background: rgba(58, 58, 53, 0.07); } /* -------------------------------------------------------------------------- 15. Responsive -------------------------------------------------------------------------- Attention : wc-blocks ne pilote PAS sa mise en page par media queries mais par des classes de largeur de conteneur (.is-mobile / .is-small / .is-medium / .is-large) posées en JavaScript sur .wc-block-cart et .wc-block-checkout. Ces règles-là sont écrites en `.a.b .c` (0,3,0) : le simple préfixe `:root` ne suffit plus. On ajoute donc la classe racine du bloc au sélecteur pour monter à (0,4,0). C'est la seule zone du fichier où l'on force la main, et toujours sans !important. -------------------------------------------------------------------------- */ @media (max-width: 768px) { :root .wc-block-cart, :root .wc-block-checkout { padding-top: var(--ma-space-40); padding-bottom: var(--ma-space-64); } /* Passage en une colonne. */ :root .wc-block-cart.wc-block-components-sidebar-layout, :root .wc-block-checkout.wc-block-components-sidebar-layout { display: block; } :root .wc-block-cart.wc-block-components-sidebar-layout > .wc-block-components-main, :root .wc-block-checkout.wc-block-components-sidebar-layout > .wc-block-components-main, :root .wc-block-cart.wc-block-components-sidebar-layout > .wc-block-components-sidebar, :root .wc-block-checkout.wc-block-components-sidebar-layout > .wc-block-components-sidebar { width: 100%; max-width: 100%; flex-basis: 100%; padding-right: 0; } /* En colonne unique, le récapitulatif passe sous le contenu. Plus de filet haut (demande client) : c'est un décrochement de 96px de blanc qui annonce le changement de bloc — il faut ici plus qu'en desktop, puisque la gouttière de 64px ne joue plus. */ :root .wc-block-cart.wc-block-components-sidebar-layout > .wc-block-components-sidebar, :root .wc-block-checkout.wc-block-components-sidebar-layout > .wc-block-components-sidebar { margin-top: var(--ma-space-96); padding-left: 0; padding-top: 0; border-left: 0; border-top: 0; } /* Formulaire d'adresse : une seule colonne, quel que soit le gabarit que le plugin a calculé. */ :root .wc-block-checkout .wc-block-components-address-form { display: block; } :root .wc-block-checkout .wc-block-components-address-form > * { grid-column: 1 / -1; width: 100%; } /* Tableau du panier : le plugin bascule les cellules en blocs. On garde l'image à gauche et on empile le reste, sans débordement horizontal. */ :root .wc-block-cart .wc-block-cart-items__header { display: none; /* les en-têtes de colonnes n'ont plus de colonnes */ } :root .wc-block-cart .wc-block-cart-item__image, :root .wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__image { width: 88px; padding-right: var(--ma-space-14); } /* Les lignes n'ont plus de filet : sur mobile, où chaque ligne empile vignette, titre et quantité, on remonte le padding à 24px pour que deux articles ne se touchent pas. */ :root .wc-block-cart .wc-block-cart-item td, :root .wc-block-cart .wc-block-cart-items__row td { padding: var(--ma-space-24) 0; } /* Le total de ligne repasse sous le produit plutôt qu'en 3e colonne. */ :root .wc-block-cart .wc-block-cart-item__total, :root .wc-block-cart .wc-block-cart-items__row .wc-block-cart-item__total { text-align: left; } :root .wc-block-checkout__actions_row { flex-direction: column-reverse; align-items: stretch; gap: var(--ma-space-14); } :root .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button { width: 100%; } :root .wc-block-components-checkout-return-to-cart-button { text-align: center; } /* Le champ de code promo et son bouton s'empilent : à 320px de large, les deux côte à côte laissent 6 caractères visibles. */ :root .wc-block-components-totals-coupon__form { flex-wrap: wrap; } :root .wc-block-components-totals-coupon__button { width: 100%; } /* Garde-fou : aucun descendant ne doit provoquer de scroll horizontal. */ :root .wc-block-cart img, :root .wc-block-checkout img, :root .wc-block-cart table, :root .wc-block-checkout table { max-width: 100%; } } /* Barre de validation collante en bas d'écran (comportement natif du plugin sur mobile) : fond blanc argile plein, ni filet haut ni ombre portée. C'est l'aplat opaque qui détache la barre du contenu qui défile dessous ; son padding passe à 24px pour qu'elle se lise comme une bande et non comme une ligne collée au bas de la page. */ @media (max-width: 768px) { :root .wc-block-cart__submit-container--sticky { padding: var(--ma-space-24) var(--ma-gutter); border-top: 0; background: var(--ma-white); box-shadow: none; } } @media (max-width: 480px) { /* Sous 480px, la ligne « libellé / valeur » des totaux se casse si le libellé est long (« Livraison estimée pour Île-de-France »). */ :root .wc-block-components-totals-item { flex-wrap: wrap; } :root .wc-block-components-totals-item__value { margin-left: auto; } :root .wc-block-components-totals-footer-item, :root .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, :root .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 20px; line-height: 32px; } } /* -------------------------------------------------------------------------- 16. Accessibilité -------------------------------------------------------------------------- */ /* Focus visible identique au reste du site (main.css) : le plugin pose ses propres `outline: none` sur plusieurs contrôles, on les rétablit. */ :root .wc-block-cart :focus-visible, :root .wc-block-checkout :focus-visible { outline: 2px solid var(--ma-blue); outline-offset: 3px; } /* Les champs à filet bas n'ont pas de boîte : un outline à 3px de décalage flotterait dans le vide. On garde le filet bleu épaissi (déjà posé plus haut) ET on colle l'outline au champ pour qu'il reste perceptible. */ :root .wc-block-components-text-input input:focus-visible, :root .wc-block-components-textarea textarea:focus-visible, :root .wc-block-components-select .wc-block-components-select__select:focus-visible { outline: 2px solid var(--ma-blue); outline-offset: 2px; } /* Cases et radios : l'outline doit entourer le carré, pas la ligne entière. */ :root .wc-block-components-checkbox__input:focus-visible, :root .wc-block-components-radio-control__input:focus-visible { outline: 2px solid var(--ma-blue); outline-offset: 2px; } /* Mode contrastes forcés (Windows) : les couleurs et les nuances de gris sont remplacées par la palette système, et l'espacement seul ne suffit plus à distinguer deux zones. Ce bloc est donc le SEUL endroit du fichier où des filets subsistent comme séparation — y compris celui de la colonne récapitulative, retiré partout ailleurs à la demande du client. Ne pas l'aligner sur le reste : c'est une exigence d'accessibilité, pas un choix graphique. */ @media (forced-colors: active) { :root .wc-block-components-notice-banner { border: 1px solid CanvasText; border-left-width: 3px; } :root .wc-block-components-checkbox__input[type="checkbox"], :root .wc-block-components-radio-control__input, :root .wc-block-components-quantity-selector { border: 1px solid CanvasText; } :root .wc-block-components-checkbox__input[type="checkbox"]::after, :root .wc-block-components-radio-control__input::after { background: CanvasText; } :root .wc-block-components-sidebar { border-left: 1px solid CanvasText; } }