/* GOLDMARKET — boutique : archive /acheter/ et tunnel (panier, commande, compte). * * PERIMETRE : ce fichier n'est charge QUE si porte la classe .gm-bq, * posee par gm-boutique.php sur l'archive boutique, le panier, la commande et * le compte. Elle n'est JAMAIS posee sur is_product() : la fiche produit * releve d'un autre gabarit. Toute regle ci-dessous est prefixee body.gm-bq : * aucune ne peut atteindre la fiche produit. * * Jetons et contrastes mesures (WCAG 2.1, formule de luminance relative) : * #1A1814 / #FAFAF8 = 16,96:1 encre sur fond de page * #1A1814 / #F5F0E8 = 15,63:1 encre sur creme * #7A5A22 / #FAFAF8 = 6,07:1 or texte sur fond clair * #7A5A22 / #F5F0E8 = 5,59:1 or texte sur creme * #1A1814 / #C4913A = 6,30:1 texte de bouton sur or * #1A1814 / #A97B2E = 4,69:1 texte de bouton sur or survol * #6E695F / #FAFAF8 = 5,22:1 texte secondaire * #A33A2A / #FAFAF8 = 6,29:1 erreur * #2F5D3A / #F5F0E8 = 6,74:1 succes * #8A5A08 / #F5F0E8 = 5,22:1 alerte * #6E695F / #E5DFD4 = 4,11:1 bouton desactive uniquement (composant * inactif, hors champ de WCAG 1.4.3) * #C4913A ne porte jamais de texte sur fond clair (2,69:1) : il ne sert ici * que de fond de bouton, sous du texte #1A1814. * * Chiffres : DM Sans + font-variant-numeric:tabular-nums. DM Mono n'est pas * chargee sur le site (point ouvert n.1 du brandbook) : on ne l'appelle pas, * pour ne pas ajouter une famille au chemin critique. */ body.gm-bq { --gmbq-w: #FAFAF8; --gmbq-cr: #F5F0E8; --gmbq-k: #1A1814; --gmbq-ink: #2A2620; --gmbq-mut: #6E695F; --gmbq-gold: #C4913A; --gmbq-goldt: #7A5A22; --gmbq-goldh: #A97B2E; --gmbq-line: #E5DFD4; --gmbq-ok: #2F5D3A; --gmbq-warn: #8A5A08; --gmbq-err: #A33A2A; --gmbq-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --gmbq-disp: "Playfair Display", Georgia, serif; --gmbq-ease: cubic-bezier(0.4, 0, 0.2, 1); --gmbq-shadow: 0 1px 2px rgba(26, 24, 20, 0.06); } /* ------------------------------------------------------------ fil d'Ariane */ body.gm-bq .wc-block-breadcrumbs, body.gm-bq .woocommerce-breadcrumb { font-family: var(--gmbq-sans); font-size: 15px; line-height: 1.55; color: var(--gmbq-mut); margin: 0 0 8px; } body.gm-bq .woocommerce-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--gmbq-goldt); text-decoration: none; border-bottom: 1px solid rgba(122, 90, 34, 0.35); } body.gm-bq .woocommerce-breadcrumb a:hover { color: var(--gmbq-k); border-bottom-color: var(--gmbq-k); } body.gm-bq .woocommerce-breadcrumb a:focus-visible { outline: 2px solid var(--gmbq-k); outline-offset: 2px; } /* --------------------------------------------------------- titres de page */ body.gm-bq h1.wp-block-query-title, body.gm-bq h1.wp-block-post-title { font-family: var(--gmbq-disp); font-weight: 500; font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--gmbq-k); } body.gm-bq h2:not(.wp-block-post-title):not(.gmf-sr) { font-family: var(--gmbq-disp); font-weight: 400; line-height: 1.2; color: var(--gmbq-k); } /* --------------------------------------- barre d'outils : total et tri */ body.gm-bq .woocommerce-result-count { margin: 0; font-family: var(--gmbq-sans); font-size: 15px; line-height: 1.55; color: var(--gmbq-mut); font-variant-numeric: tabular-nums; } body.gm-bq .woocommerce-ordering { margin: 0; } body.gm-bq .woocommerce-ordering select, body.gm-bq .wc-block-catalog-sorting select { min-height: 44px; max-width: 100%; padding: 10px 14px; border: 1px solid var(--gmbq-line); border-radius: 2px; background: var(--gmbq-w); color: var(--gmbq-k); font-family: var(--gmbq-sans); font-size: 15px; font-weight: 500; line-height: 1.3; box-shadow: none; } body.gm-bq .woocommerce-ordering select:focus-visible, body.gm-bq .wc-block-catalog-sorting select:focus-visible { outline: 2px solid var(--gmbq-k); outline-offset: 2px; border-color: var(--gmbq-goldt); } /* --------------------------------------------------- grille de l'archive * 2 colonnes sous 768, 3 de 768 a 1279, 4 a partir de 1280. * minmax(0,1fr) : aucune colonne ne peut deborder horizontalement. * width:auto sur les

neutralise les largeurs en calc() du bloc * WooCommerce, qui gagneraient sinon en specificite (4 classes). */ body.gm-bq ul.wc-block-product-template { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } body.gm-bq ul.wc-block-product-template > li { width: auto !important; max-width: none; margin: 0; float: none; } @media (min-width: 768px) { body.gm-bq ul.wc-block-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } } @media (min-width: 1280px) { body.gm-bq ul.wc-block-product-template { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ------------------------------------------------------- carte produit */ body.gm-bq li.wc-block-product { display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 16px; background: var(--gmbq-w); border: 1px solid var(--gmbq-line); border-radius: 4px; box-shadow: none; transition: border-color 200ms var(--gmbq-ease), box-shadow 200ms var(--gmbq-ease); } body.gm-bq li.wc-block-product:hover { border-color: #D8CDBA; box-shadow: var(--gmbq-shadow); } @media (min-width: 768px) { body.gm-bq li.wc-block-product { gap: 14px; padding: 16px 16px 20px; } } body.gm-bq li.wc-block-product > * { margin: 0; } body.gm-bq li.wc-block-product .wc-block-components-product-image { margin: 0; background: var(--gmbq-cr); border-radius: 2px; overflow: hidden; } body.gm-bq li.wc-block-product .wc-block-components-product-image img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } body.gm-bq li.wc-block-product h2.wp-block-post-title { font-family: var(--gmbq-sans); font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: 0; color: var(--gmbq-k); } @media (min-width: 768px) { body.gm-bq li.wc-block-product h2.wp-block-post-title { font-size: 17px; } } body.gm-bq li.wc-block-product h2.wp-block-post-title a { display: flex; align-items: center; justify-content: center; min-height: 44px; color: inherit; text-decoration: none; } body.gm-bq li.wc-block-product h2.wp-block-post-title a:hover { color: var(--gmbq-goldt); } body.gm-bq li.wc-block-product h2.wp-block-post-title a:focus-visible { outline: 2px solid var(--gmbq-k); outline-offset: 2px; } /* prix : DM Sans, chiffres tabulaires, format francais laisse au PHP */ body.gm-bq .wc-block-components-product-price, body.gm-bq .woocommerce-Price-amount { font-family: var(--gmbq-sans); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--gmbq-k); } body.gm-bq li.wc-block-product .wc-block-components-product-price { font-size: 20px; line-height: 1.2; } @media (min-width: 768px) { body.gm-bq li.wc-block-product .wc-block-components-product-price { font-size: 22px; } } body.gm-bq .woocommerce-Price-currencySymbol { font-weight: 500; } /* ------------------------------------- boutons (archive et tunnel classique) * Fond or #C4913A, texte encre #1A1814 = 6,30:1. Jamais de texte blanc sur or. * Angle 2 px, aucune ombre, hauteur 48 px (cible tactile > 44 px). */ body.gm-bq li.wc-block-product .wc-block-components-product-button .wp-block-button__link, body.gm-bq .woocommerce a.button, body.gm-bq .woocommerce button.button, body.gm-bq .woocommerce input.button, body.gm-bq .woocommerce-button, body.gm-bq .woocommerce-form-login__submit, body.gm-bq .wc-block-cart__submit-button, body.gm-bq .wc-block-components-checkout-place-order-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 12px 24px; border: 1px solid var(--gmbq-gold); border-radius: 2px; background: var(--gmbq-gold); background-image: none; color: var(--gmbq-k); font-family: var(--gmbq-sans); font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-align: center; text-decoration: none; text-transform: none; box-shadow: none; cursor: pointer; transition: background-color 120ms var(--gmbq-ease), border-color 120ms var(--gmbq-ease); } body.gm-bq .woocommerce a.button, body.gm-bq .woocommerce button.button, body.gm-bq .woocommerce input.button, body.gm-bq .woocommerce-button { width: auto; } body.gm-bq li.wc-block-product .wc-block-components-product-button .wp-block-button__link:hover, body.gm-bq .woocommerce a.button:hover, body.gm-bq .woocommerce button.button:hover, body.gm-bq .woocommerce input.button:hover, body.gm-bq .woocommerce-button:hover, body.gm-bq .woocommerce-form-login__submit:hover, body.gm-bq .wc-block-cart__submit-button:hover, body.gm-bq .wc-block-components-checkout-place-order-button:hover { background: var(--gmbq-goldh); border-color: var(--gmbq-goldh); color: var(--gmbq-k); } body.gm-bq li.wc-block-product .wc-block-components-product-button .wp-block-button__link:focus-visible, body.gm-bq .woocommerce a.button:focus-visible, body.gm-bq .woocommerce button.button:focus-visible, body.gm-bq .woocommerce input.button:focus-visible, body.gm-bq .woocommerce-button:focus-visible, body.gm-bq .woocommerce-form-login__submit:focus-visible, body.gm-bq .wc-block-cart__submit-button:focus-visible, body.gm-bq .wc-block-components-checkout-place-order-button:focus-visible { outline: 2px solid var(--gmbq-k); outline-offset: 2px; } body.gm-bq li.wc-block-product .wc-block-components-product-button .wp-block-button__link:active, body.gm-bq .woocommerce button.button:active, body.gm-bq .woocommerce-form-login__submit:active { transform: translateY(1px); } /* etats conditionnels : absents du DOM au premier rendu. Ce fichier est exclu de Remove Unused CSS, ils survivent donc tels quels. */ body.gm-bq li.wc-block-product .wc-block-components-product-button .wp-block-button__link[disabled], body.gm-bq li.wc-block-product .wc-block-components-product-button .wp-block-button__link.disabled, body.gm-bq li.wc-block-product .wc-block-components-product-button .wp-block-button__link.loading, body.gm-bq .woocommerce button.button[disabled], body.gm-bq .woocommerce button.button:disabled { background: var(--gmbq-line); border-color: var(--gmbq-line); color: var(--gmbq-mut); cursor: default; transform: none; } body.gm-bq li.wc-block-product a.added_to_cart { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; color: var(--gmbq-goldt); font-family: var(--gmbq-sans); font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } body.gm-bq li.wc-block-product a.added_to_cart:hover { color: var(--gmbq-k); } /* bouton secondaire : contour, jamais un second bouton or par ecran */ body.gm-bq .woocommerce a.button.wc-backward, body.gm-bq .wc-block-components-button.outlined { background: transparent; border: 1px solid var(--gmbq-k); color: var(--gmbq-k); } body.gm-bq .woocommerce a.button.wc-backward:hover, body.gm-bq .wc-block-components-button.outlined:hover { background: var(--gmbq-cr); border-color: var(--gmbq-k); color: var(--gmbq-k); } /* -------------------------------------------- messages WooCommerce * L'information n'est jamais portee par la seule couleur : chaque etat * porte un symbole en plus du filet colore. */ body.gm-bq .woocommerce-message, body.gm-bq .woocommerce-info, body.gm-bq .woocommerce-error { display: block; margin: 0 0 24px; padding: 14px 18px; border: 1px solid var(--gmbq-line); border-left: 3px solid var(--gmbq-mut); border-radius: 2px; background: var(--gmbq-cr); color: var(--gmbq-k); font-family: var(--gmbq-sans); font-size: 15px; line-height: 1.55; list-style: none; } body.gm-bq .woocommerce-message::before, body.gm-bq .woocommerce-info::before, body.gm-bq .woocommerce-error::before { content: none; } body.gm-bq .woocommerce-message { border-left-color: var(--gmbq-ok); } body.gm-bq .woocommerce-message > li::marker, body.gm-bq .woocommerce-error > li::marker { content: none; } body.gm-bq .woocommerce-info { border-left-color: var(--gmbq-warn); } body.gm-bq .woocommerce-error { border-left-color: var(--gmbq-err); color: var(--gmbq-k); } body.gm-bq .woocommerce-error li, body.gm-bq .woocommerce-message li { margin: 0; list-style: none; } body.gm-bq .woocommerce-message .button, body.gm-bq .woocommerce-info .button, body.gm-bq .woocommerce-error .button { min-height: 44px; margin-top: 10px; } /* bandeaux de notice des blocs WooCommerce */ body.gm-bq .wc-block-components-notice-banner { border: 1px solid var(--gmbq-line); border-left: 3px solid var(--gmbq-mut); border-radius: 2px; background: var(--gmbq-cr); color: var(--gmbq-k); font-family: var(--gmbq-sans); font-size: 15px; line-height: 1.55; } body.gm-bq .wc-block-components-notice-banner.is-error { border-left-color: var(--gmbq-err); } body.gm-bq .wc-block-components-notice-banner.is-success { border-left-color: var(--gmbq-ok); } body.gm-bq .wc-block-components-notice-banner.is-info, body.gm-bq .wc-block-components-notice-banner.is-warning { border-left-color: var(--gmbq-warn); } body.gm-bq .wc-block-components-notice-banner__dismiss { min-width: 44px; min-height: 44px; width: auto; background: transparent; border: 0; color: var(--gmbq-k); } body.gm-bq .wc-block-components-notice-banner__dismiss:focus-visible { outline: 2px solid var(--gmbq-k); outline-offset: 2px; } /* --------------------------------------------- formulaires du tunnel */ body.gm-bq .woocommerce form .form-row, body.gm-bq .woocommerce-form-row { margin: 0 0 20px; padding: 0; } body.gm-bq .woocommerce form .form-row label, body.gm-bq .woocommerce-form-row > label { display: block; margin: 0 0 6px; font-family: var(--gmbq-sans); font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gmbq-k); } body.gm-bq .woocommerce .input-text, body.gm-bq .woocommerce input[type="text"], body.gm-bq .woocommerce input[type="email"], body.gm-bq .woocommerce input[type="tel"], body.gm-bq .woocommerce input[type="password"], body.gm-bq .woocommerce textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--gmbq-line); border-radius: 2px; background: var(--gmbq-w); color: var(--gmbq-k); font-family: var(--gmbq-sans); font-size: 17px; line-height: 1.4; box-shadow: none; } body.gm-bq .woocommerce .input-text:focus, body.gm-bq .woocommerce input[type="text"]:focus, body.gm-bq .woocommerce input[type="email"]:focus, body.gm-bq .woocommerce input[type="tel"]:focus, body.gm-bq .woocommerce input[type="password"]:focus, body.gm-bq .woocommerce textarea:focus { border-color: var(--gmbq-goldt); outline: 2px solid var(--gmbq-goldt); outline-offset: 2px; } body.gm-bq .woocommerce .required { color: var(--gmbq-err); text-decoration: none; } body.gm-bq .woocommerce input[type="checkbox"], body.gm-bq .woocommerce input[type="radio"] { width: 20px; height: 20px; accent-color: var(--gmbq-goldt); } body.gm-bq .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--gmbq-sans); font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--gmbq-ink); } body.gm-bq .woocommerce-LostPassword a, body.gm-bq .woocommerce-privacy-policy-link, body.gm-bq .wc-block-components-checkout-step__description a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gmbq-goldt); text-underline-offset: 3px; } body.gm-bq .woocommerce-LostPassword a:hover { color: var(--gmbq-k); } /* ============================================================================ * FORMULAIRE DE CONNEXION /mon-compte/ (body.gm-bq-login) * * Cause du defaut corrigee a la racine : WooCommerce place la case * « Se souvenir de moi » ET le bouton d'envoi dans un meme

. * Le bouton se retrouve donc dans le flux du texte, colle a gauche. Ce * paragraphe devient un conteneur flex en colonne : case au-dessus, bouton * dessous, 20 px entre les deux. Aucun float, aucun text-align sur le parent. * * Le paragraphe se designe sans :has() : c'est le seul .form-row du formulaire * qui ne porte pas .form-row-wide. * * novalidate reste en place sur le

: WooCommerce s'appuie sur sa * validation serveur et sur ses propres messages. On ne le retire pas. * * Contrastes de ce bloc : * bouton #1A1814 sur #C4913A = 6,30:1 ; survol #1A1814 sur #A97B2E = 4,69:1 * « Mot de passe perdu ? » #7A5A22 sur #FAFAF8 = 6,07:1 * corps #2A2620 sur #FAFAF8 = 14,74:1 ; etiquettes #1A1814 = 16,96:1 * ==========================================================================*/ body.gm-bq-login .woocommerce { max-width: 480px; margin-inline: auto; } /* Colonne unique : WooCommerce sort deux colonnes flottantes des que * l'inscription est active. On annule le flottement et on empile. * La colonne inactive est deja masquee cote serveur par un attribut * style="display:none" — ces regles ne font que la mise en page. */ body.gm-bq-login #customer_login { display: block; width: 100%; max-width: 480px; margin-inline: auto; } body.gm-bq-login #customer_login .gmbq-pane, body.gm-bq-login #customer_login .u-column1, body.gm-bq-login #customer_login .u-column2 { float: none; clear: both; width: 100%; max-width: 100%; margin: 0; padding: 0; } /* Second filet, independant de l'attribut style pose cote serveur : si un jour * WooCommerce change le markup des colonnes et que le remplacement echoue, la * bascule tient encore par la classe de body, elle aussi posee cote serveur. */ body.gm-bq-signin #customer_login .u-column2 { display: none; } body.gm-bq-register #customer_login .u-column1 { display: none; } body.gm-bq-login .woocommerce > h2, body.gm-bq-login #customer_login .gmbq-pane > h2 { margin: 0 0 20px; font-family: var(--gmbq-disp); font-weight: 500; font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.125rem); line-height: 1.2; text-align: center; color: var(--gmbq-k); } body.gm-bq form.woocommerce-form-login, body.gm-bq form.woocommerce-form-register { box-sizing: border-box; width: 100%; max-width: 480px; margin: 0 auto; padding: 28px 24px; background: var(--gmbq-w); border: 1px solid var(--gmbq-line); border-radius: 4px; box-shadow: 0 1px 2px rgba(26, 24, 20, 0.06); } @media (max-width: 480px) { body.gm-bq form.woocommerce-form-login, body.gm-bq form.woocommerce-form-register { padding: 22px 18px; } } body.gm-bq form.woocommerce-form-login *, body.gm-bq form.woocommerce-form-register * { box-sizing: border-box; } body.gm-bq form.woocommerce-form-login .form-row-wide, body.gm-bq form.woocommerce-form-register .form-row-wide { margin: 0 0 20px; } /* LA correction : la rangee qui porte la case et le bouton devient une colonne. */ body.gm-bq form.woocommerce-form-login > p.form-row:not(.form-row-wide) { display: flex; flex-direction: column; align-items: stretch; gap: 20px; margin: 4px 0 16px; padding: 0; text-align: left; } body.gm-bq .woocommerce form .form-row label.woocommerce-form__label-for-checkbox, body.gm-bq form.woocommerce-form-login .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; padding: 0; font-family: var(--gmbq-sans); font-size: 15px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--gmbq-ink); cursor: pointer; } body.gm-bq form.woocommerce-form-login .woocommerce-form-login__rememberme input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--gmbq-goldt); } body.gm-bq form.woocommerce-form-login .woocommerce-form-login__rememberme:focus-within { outline: 2px solid var(--gmbq-k); outline-offset: 2px; } /* Bouton : pleine largeur de la carte, 60 px, or #C4913A, texte encre #1A1814. */ body.gm-bq form.woocommerce-form-login .woocommerce-form-login__submit { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 60px; margin: 0; padding: 14px 24px; border: 1px solid var(--gmbq-gold); border-radius: 2px; background: var(--gmbq-gold); background-image: none; color: var(--gmbq-k); font-family: var(--gmbq-sans); font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-align: center; text-transform: none; box-shadow: none; cursor: pointer; } body.gm-bq form.woocommerce-form-login .woocommerce-form-login__submit:hover { background: var(--gmbq-goldh); border-color: var(--gmbq-goldh); color: var(--gmbq-k); } body.gm-bq form.woocommerce-form-login .woocommerce-form-login__submit:focus-visible { outline: 2px solid var(--gmbq-k); outline-offset: 2px; } body.gm-bq form.woocommerce-form-login .woocommerce-LostPassword { margin: 0; text-align: center; } body.gm-bq form.woocommerce-form-login .woocommerce-LostPassword a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 4px; color: var(--gmbq-goldt); font-family: var(--gmbq-sans); font-size: 15px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; } body.gm-bq form.woocommerce-form-login .woocommerce-LostPassword a:hover { color: var(--gmbq-k); } /* ---------------------------------- creation de compte et bascule sans JS */ /* Bouton « Créer mon compte » : meme gabarit que « Se connecter ». */ body.gm-bq form.woocommerce-form-register .woocommerce-form-register__submit { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 60px; margin: 0; padding: 14px 24px; border: 1px solid var(--gmbq-gold); border-radius: 2px; background: var(--gmbq-gold); background-image: none; color: var(--gmbq-k); font-family: var(--gmbq-sans); font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-align: center; text-transform: none; box-shadow: none; cursor: pointer; } body.gm-bq form.woocommerce-form-register .woocommerce-form-register__submit:hover { background: var(--gmbq-goldh); border-color: var(--gmbq-goldh); color: var(--gmbq-k); } body.gm-bq form.woocommerce-form-register .woocommerce-form-register__submit:focus-visible { outline: 2px solid var(--gmbq-k); outline-offset: 2px; } body.gm-bq form.woocommerce-form-register > p.woocommerce-form-row:not(.form-row-wide) { display: flex; flex-direction: column; gap: 20px; margin: 4px 0 16px; padding: 0; } /* Mention de confidentialite, accrochee par WooCommerce au formulaire. */ body.gm-bq .woocommerce-privacy-policy-text { margin: 0 0 20px; font-family: var(--gmbq-sans); font-size: 13px; line-height: 1.5; color: var(--gmbq-mut); } body.gm-bq .woocommerce-privacy-policy-text p { margin: 0; } body.gm-bq .woocommerce-privacy-policy-text a { color: var(--gmbq-goldt); text-underline-offset: 3px; } /* Le lien de bascule : une seule action doree par ecran, celle du bouton. * Le lien reste un lien, en or texte #7A5A22 (6,07:1 sur fond clair). */ body.gm-bq .gmbq-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--gmbq-line); font-family: var(--gmbq-sans); font-size: 15px; line-height: 1.5; text-align: center; } body.gm-bq .gmbq-switch__q { color: var(--gmbq-mut); } body.gm-bq .gmbq-switch__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; color: var(--gmbq-goldt); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } body.gm-bq .gmbq-switch__link:hover { color: var(--gmbq-k); } body.gm-bq .gmbq-switch__link:focus-visible { outline: 2px solid var(--gmbq-k); outline-offset: 2px; } /* --------------------------------------------------------- pagination */ body.gm-bq .woocommerce-pagination a, body.gm-bq .woocommerce-pagination span, body.gm-bq .wc-block-pagination-page { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0 4px 8px 0; padding: 0 10px; border: 1px solid var(--gmbq-line); border-radius: 2px; background: var(--gmbq-w); color: var(--gmbq-k); font-family: var(--gmbq-sans); font-size: 15px; font-weight: 500; text-decoration: none; } body.gm-bq .woocommerce-pagination .current, body.gm-bq .wc-block-pagination-page--active { background: var(--gmbq-cr); border-color: var(--gmbq-goldt); color: var(--gmbq-k); } /* ============================================================================ * REGLE D — bouton principal sur mobile, regle permanente du projet. * Centre, grand, pleine largeur du conteneur sous 768 px, 56 a 60 px de haut, * libelle centre, jamais colle a gauche, jamais sous 44 px. * Un seul bouton dore par ecran : tout le reste passe en secondaire. * * Ces selecteurs sont volontairement redondants avec ceux ecrits plus haut et * places EN FIN DE FICHIER : a specificite egale, c'est le dernier qui gagne. * Ainsi aucune regle anterieure de ce meme fichier ne peut les neutraliser. * ==========================================================================*/ body.gm-bq .gmbq-cta, body.gm-bq .woocommerce-form-login__submit, body.gm-bq .woocommerce-form-register__submit, body.gm-bq .wc-block-cart__submit-button, body.gm-bq .wc-block-components-checkout-place-order-button, body.gm-bq #verify-email-submit { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; min-height: 60px; margin: 0; padding: 14px 24px; border: 1px solid var(--gmbq-gold); border-radius: 2px; background: var(--gmbq-gold); background-image: none; color: var(--gmbq-k); font-family: var(--gmbq-sans); font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-align: center; text-decoration: none; text-transform: none; box-shadow: none; cursor: pointer; -webkit-appearance: none; appearance: none; } body.gm-bq .gmbq-cta:hover, body.gm-bq .woocommerce-form-login__submit:hover, body.gm-bq .woocommerce-form-register__submit:hover, body.gm-bq .wc-block-cart__submit-button:hover, body.gm-bq .wc-block-components-checkout-place-order-button:hover, body.gm-bq #verify-email-submit:hover { background: var(--gmbq-goldh); border-color: var(--gmbq-goldh); color: var(--gmbq-k); } body.gm-bq .gmbq-cta:focus-visible, body.gm-bq .woocommerce-form-login__submit:focus-visible, body.gm-bq .woocommerce-form-register__submit:focus-visible, body.gm-bq .wc-block-cart__submit-button:focus-visible, body.gm-bq .wc-block-components-checkout-place-order-button:focus-visible, body.gm-bq #verify-email-submit:focus-visible { outline: 2px solid var(--gmbq-k); outline-offset: 2px; } /* Au-dela de 768 px le bouton se recentre sans occuper toute la largeur, sauf dans une carte etroite ou la pleine largeur reste la bonne reponse. */ @media (min-width: 768px) { body.gm-bq .gmbq-cta { width: auto; min-width: 260px; margin-inline: auto; } } /* ============================================================================ * TUNNEL DE COMMANDE /commander/ (bloc Checkout, hydrate cote client) * Le DOM initial ne contient que les enveloppes .wp-block-woocommerce-*-block ; * tout le reste apparait apres hydratation. C'est precisement pourquoi cette * feuille est servie en fichier exclu de RUCSS : aucune de ces classes n'est * dans le DOM au premier rendu, elles seraient toutes supprimees autrement. * ==========================================================================*/ body.gm-bq .wc-block-checkout, body.gm-bq .wc-block-cart { font-family: var(--gmbq-sans); font-size: 17px; line-height: 1.6; color: var(--gmbq-ink); } body.gm-bq .wc-block-components-title, body.gm-bq .wc-block-components-checkout-step__title { font-family: var(--gmbq-disp); font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; color: var(--gmbq-k); } body.gm-bq .wc-block-components-checkout-step__description { font-family: var(--gmbq-sans); font-size: 15px; line-height: 1.55; color: var(--gmbq-mut); } /* Champs : 48 px, angle 2 px, focus en contour, aucun decalage de mise en page */ body.gm-bq .wc-block-components-text-input input[type="text"], body.gm-bq .wc-block-components-text-input input[type="email"], body.gm-bq .wc-block-components-text-input input[type="tel"], body.gm-bq .wc-block-components-text-input input[type="number"], body.gm-bq .wc-block-components-textarea, body.gm-bq .wc-block-components-combobox-control input { min-height: 48px; border: 1px solid var(--gmbq-line); border-radius: 2px; background: var(--gmbq-w); color: var(--gmbq-k); font-family: var(--gmbq-sans); font-size: 17px; box-shadow: none; } body.gm-bq .wc-block-components-text-input input:focus, body.gm-bq .wc-block-components-textarea:focus, body.gm-bq .wc-block-components-combobox-control input:focus { border-color: var(--gmbq-goldt); outline: 2px solid var(--gmbq-goldt); outline-offset: 2px; box-shadow: none; } body.gm-bq .wc-block-components-checkbox__input, body.gm-bq .wc-block-components-radio-control__input { accent-color: var(--gmbq-goldt); } body.gm-bq .wc-block-components-radio-control__option, body.gm-bq .wc-block-components-checkbox__label { min-height: 44px; font-family: var(--gmbq-sans); font-size: 16px; line-height: 1.5; color: var(--gmbq-ink); } body.gm-bq .wc-block-components-radio-control-accordion-option, body.gm-bq .wc-block-components-radio-control__option { border-color: var(--gmbq-line); border-radius: 2px; } /* Recapitulatif : carte creme, filet, une seule elevation */ body.gm-bq .wc-block-components-sidebar .wc-block-components-totals-wrapper, body.gm-bq .wp-block-woocommerce-checkout-order-summary-block, body.gm-bq .wp-block-woocommerce-cart-order-summary-block { background: var(--gmbq-cr); border: 1px solid var(--gmbq-line); border-radius: 4px; box-shadow: 0 1px 2px rgba(26, 24, 20, 0.06); } body.gm-bq .wc-block-components-totals-item__label, body.gm-bq .wc-block-components-totals-item__value { font-family: var(--gmbq-sans); font-variant-numeric: tabular-nums; color: var(--gmbq-k); } body.gm-bq .wc-block-components-totals-footer-item { font-weight: 500; } body.gm-bq .wc-block-components-product-name { font-family: var(--gmbq-sans); font-weight: 500; color: var(--gmbq-k); text-decoration: none; } /* Sortie de secours : elle reste, mais elle cesse d'etre un bouton. */ body.gm-bq .wc-block-components-checkout-return-to-cart-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--gmbq-goldt); font-family: var(--gmbq-sans); font-size: 15px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; box-shadow: none; } body.gm-bq .wc-block-components-checkout-return-to-cart-button:hover { color: var(--gmbq-k); } body.gm-bq .wc-block-checkout__actions, body.gm-bq .wc-block-checkout__actions_row { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 16px; border-top: 1px solid var(--gmbq-line); padding-top: 20px; } @media (min-width: 768px) { body.gm-bq .wc-block-checkout__actions_row { flex-direction: row; align-items: center; justify-content: space-between; } body.gm-bq .wc-block-components-checkout-place-order-button { width: auto; min-width: 280px; } } /* ============================================================================ * PAGE DE CONFIRMATION /commander/order-received/ * ==========================================================================*/ body.gm-bq.woocommerce-order-received .gmbq-confirm-head { margin: 0 0 28px; padding: 0 0 24px; border-bottom: 2px solid var(--gmbq-gold); } body.gm-bq.woocommerce-order-received .gmbq-confirm-head h1, body.gm-bq.woocommerce-order-received .wc-block-order-confirmation-status h1 { margin: 0 0 12px; font-family: var(--gmbq-disp); font-weight: 500; font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--gmbq-k); } body.gm-bq.woocommerce-order-received .gmbq-confirm-head p { margin: 0 0 10px; font-family: var(--gmbq-sans); font-size: 19px; line-height: 1.6; color: var(--gmbq-ink); } body.gm-bq .gmbq-inline-link { color: var(--gmbq-goldt); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; } body.gm-bq .gmbq-inline-link:hover { color: var(--gmbq-k); } /* Recapitulatif : la carte creme, l'element le plus lisible apres le titre */ body.gm-bq .wc-block-order-confirmation-summary-list { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 32px; padding: 4px 20px; list-style: none; background: var(--gmbq-cr); border: 1px solid var(--gmbq-line); border-radius: 4px; box-shadow: 0 1px 2px rgba(26, 24, 20, 0.06); } body.gm-bq .wc-block-order-confirmation-summary-list-item { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--gmbq-line); list-style: none; } body.gm-bq .wc-block-order-confirmation-summary-list-item:last-child { border-bottom: 0; } body.gm-bq .wc-block-order-confirmation-summary-list-item__key { font-family: var(--gmbq-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gmbq-mut); } body.gm-bq .wc-block-order-confirmation-summary-list-item__value { font-family: var(--gmbq-sans); font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--gmbq-k); text-align: right; } @media (min-width: 768px) { body.gm-bq .wc-block-order-confirmation-summary-list { padding: 4px 28px; } } /* Articles et adresses : secondaires */ body.gm-bq .wc-block-order-confirmation-totals__table { width: 100%; margin: 0 0 28px; border-collapse: collapse; font-family: var(--gmbq-sans); font-size: 16px; } body.gm-bq .wc-block-order-confirmation-totals__table th { padding: 10px 0; border-bottom: 1px solid var(--gmbq-line); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; color: var(--gmbq-mut); } body.gm-bq .wc-block-order-confirmation-totals__table td { padding: 14px 0; border-bottom: 1px solid var(--gmbq-line); vertical-align: top; color: var(--gmbq-ink); } body.gm-bq .wc-block-order-confirmation-totals__total { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--gmbq-k); } body.gm-bq .wc-block-order-confirmation-totals__table tfoot th, body.gm-bq .wc-block-order-confirmation-totals__label { text-transform: none; font-size: 16px; color: var(--gmbq-k); } body.gm-bq .wc-block-order-confirmation-totals__table tfoot tr:last-child th, body.gm-bq .wc-block-order-confirmation-totals__table tfoot tr:last-child td { font-weight: 700; font-size: 18px; border-bottom: 0; } body.gm-bq .wc-block-order-confirmation-totals__product a { color: var(--gmbq-k); text-decoration: none; font-weight: 500; } body.gm-bq .wc-item-meta { margin: 6px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--gmbq-mut); } body.gm-bq .wc-item-meta p { display: inline; margin: 0; } body.gm-bq .wc-block-order-confirmation-order-note { margin: 0 0 28px; padding: 14px 18px; border: 1px solid var(--gmbq-line); border-left: 3px solid var(--gmbq-mut); border-radius: 2px; background: var(--gmbq-w); font-size: 15px; } body.gm-bq .wc-block-order-confirmation-order-note__label { margin: 0 0 4px; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gmbq-mut); } body.gm-bq .wc-block-order-confirmation-billing-address, body.gm-bq .wc-block-order-confirmation-shipping-address { font-family: var(--gmbq-sans); font-size: 16px; line-height: 1.6; color: var(--gmbq-ink); } body.gm-bq .wc-block-order-confirmation-billing-address address, body.gm-bq .wc-block-order-confirmation-shipping-address address { font-style: normal; } /* LE bloc de la page : ce que l'acheteur doit faire maintenant. */ body.gm-bq .gmbq-next-step { margin: 0 0 24px; padding: 24px 20px; background: var(--gmbq-cr); border: 1px solid var(--gmbq-line); border-left: 3px solid var(--gmbq-gold); border-radius: 4px; box-shadow: 0 1px 2px rgba(26, 24, 20, 0.06); } @media (min-width: 768px) { body.gm-bq .gmbq-next-step { padding: 28px 32px; } } body.gm-bq .gmbq-next-step__title { margin: 0 0 12px; font-family: var(--gmbq-disp); font-weight: 500; font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); line-height: 1.2; color: var(--gmbq-k); } body.gm-bq .gmbq-next-step p { margin: 0 0 10px; font-family: var(--gmbq-sans); font-size: 17px; line-height: 1.6; color: var(--gmbq-ink); } body.gm-bq .gmbq-next-step p:last-child { margin-bottom: 0; } body.gm-bq .gmbq-next-step__ref { margin: 14px 0 0; padding: 12px 14px; background: var(--gmbq-w); border: 1px solid var(--gmbq-line); border-radius: 2px; font-family: var(--gmbq-sans); font-size: 16px; font-variant-numeric: tabular-nums; color: var(--gmbq-k); } body.gm-bq .gmbq-next-step__ref strong { font-weight: 700; font-size: 18px; } body.gm-bq .gmbq-confirm-actions { display: flex; justify-content: center; margin: 0 0 32px; } /* Verification d'e-mail (acheteur invite non reconnu) */ body.gm-bq .woocommerce-verify-email { max-width: 480px; margin: 20px 0 0; padding: 20px; background: var(--gmbq-w); border: 1px solid var(--gmbq-line); border-radius: 4px; } body.gm-bq .woocommerce-verify-email .form-row { margin: 0 0 16px; } body.gm-bq .woocommerce-verify-email label { display: block; margin: 0 0 6px; font-family: var(--gmbq-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gmbq-k); } body.gm-bq .woocommerce-verify-email .input-text { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--gmbq-line); border-radius: 2px; background: var(--gmbq-w); font-family: var(--gmbq-sans); font-size: 17px; color: var(--gmbq-k); } body.gm-bq .woocommerce-verify-email .login-submit { margin: 0; } /* -------------------------------- pas de seconde barre d'action collante * gm-nav-cta pose deja .gm-sticky-cta (56 px, fixe, sous 1150 px) avec * body{padding-bottom:56px}. On n'en ajoute aucune ; on garantit seulement * que la derniere rangee de la grille et le bouton principal du tunnel ne * passent pas dessous. */ @media (max-width: 1150px) { body.gm-bq .wp-block-woocommerce-product-collection, body.gm-bq .wp-block-woocommerce-cart, body.gm-bq .wp-block-woocommerce-checkout { padding-bottom: 16px; } } /* -------------------------------------------------------- mouvement */ @media (prefers-reduced-motion: reduce) { body.gm-bq *, body.gm-bq *::before, body.gm-bq *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Contraste des bordures de champs (audit a11y #111, WCAG 1.4.11) : 3,67:1 sur fond clair au lieu de 1,3:1. Champs de saisie seulement. */ body.gm-bq .woocommerce input.input-text, body.gm-bq .woocommerce select, body.gm-bq .woocommerce textarea { border-color: #8A8174; }