/* Boutique, fiches produit, panier, commande et espace client. */ /* ============ WooCommerce (overrides légers via CSS) ============ */ .woocommerce .button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button, .woocommerce #respond input#submit,.woocommerce .button.alt{ background:var(--accent-texte)!important;color:var(--blanc)!important;border-radius:0!important; font-family:var(--serif)!important;letter-spacing:.05em;padding:12px 26px!important } /* L'or se ferme sur l'encre au survol, comme les boutons de l'espace compte. */ .woocommerce .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--texte-titre)!important} /* ---------- fiche produit ---------- Présentation seulement : rien ici ne touche à l'ajout au panier. */ .ml-fil--fiche{max-width:var(--maxw);margin:0 auto clamp(20px,3vw,32px);padding:0 var(--marge)} .ml-fiche__ref{display:block;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--gold-texte);margin-bottom:10px} /* Le titre passait à 46 px et se cassait en deux sur les noms longs, qui sont la règle dans ce catalogue. */ .woocommerce div.product .product_title{font-size:clamp(26px,3vw,38px);line-height:1.15;margin:0 0 14px} .woocommerce div.product p.price{font-size:clamp(21px,2vw,26px);color:var(--ink);margin:0 0 20px} .woocommerce div.product .woocommerce-product-details__short-description{color:var(--muted); margin-bottom:24px;max-width:52ch} .woocommerce div.product form.cart{margin-top:4px} /* Fil d'Ariane, dans le bandeau de titre */ .ml-fil{font-size:14.5px;letter-spacing:.06em;color:var(--muted);margin-bottom:12px} .ml-fil a{color:var(--muted)} .ml-fil a:hover{color:var(--navy)} .ml-fil__sep{display:inline-block;margin:0 9px;color:var(--gold-texte);opacity:.7} /* ---------- mobilier d'archive ---------- Compteur et tri sur une même ligne, alignés sur la grille et séparés d'elle par un filet — la même règle que les chapeaux de section de l'accueil. */ .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering{margin:0} .woocommerce-page .woocommerce-notices-wrapper:empty{display:none} .ml-barre-archive{display:flex;align-items:center;justify-content:space-between; gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--line); padding-bottom:16px;margin-bottom:clamp(28px,4vw,44px)} .ml-barre-archive .woocommerce-result-count{color:var(--muted);font-size:16.5px} .ml-barre-archive select{font-family:var(--serif);font-size:16.5px;color:var(--ink); background:#fff;border:1px solid var(--line);border-radius:3px;padding:9px 34px 9px 14px; max-width:100%;appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318130f' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 10px center;background-size:16px} .ml-barre-archive select:focus-visible{outline:2px solid var(--navy);outline-offset:2px} /* Pagination : des numéros posés, sans boutons ni pastilles. */ .woocommerce nav.woocommerce-pagination{margin:clamp(38px,5vw,60px) 0 0;text-align:center} .woocommerce nav.woocommerce-pagination ul{display:inline-flex;gap:6px;border:0!important; margin:0;padding:0;list-style:none} .woocommerce nav.woocommerce-pagination ul li{border:0!important;margin:0;overflow:visible} .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{display:flex;align-items:center; justify-content:center;min-width:42px;height:42px;padding:0 12px;font-size:17px; color:var(--muted);background:transparent!important;border:1px solid transparent;transition:.2s} .woocommerce nav.woocommerce-pagination ul li a:hover{color:var(--navy);border-color:var(--line)} .woocommerce nav.woocommerce-pagination ul li span.current{color:var(--navy); border-color:var(--navy);font-weight:500} /* ---------- grille de boucle ---------- Les cartes viennent de woocommerce/content-product.php, qui appelle le même composant que l'accueil. Il ne reste ici qu'à défaire la mise en page que WooCommerce impose par défaut — flottants, largeurs en pourcentage — et à poser la grille. */ .woocommerce ul.products{display:grid!important;grid-template-columns:repeat(4,1fr); gap:clamp(26px,3vw,38px) clamp(14px,2vw,26px);margin:0!important;padding:0!important;list-style:none} .woocommerce ul.products::before,.woocommerce ul.products::after{content:none!important;display:none!important} .woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important; text-align:left;display:block!important} /* La carte gouverne son propre dessin : on neutralise ce que WooCommerce voudrait lui appliquer par-dessus. */ .woocommerce ul.products li.product .onsale{display:none} .woocommerce ul.products li.product .button{display:none} .woocommerce div.product .product_title{font-family:var(--display);color:var(--navy)} .woocommerce span.price,.woocommerce div.product p.price{color:var(--muted)} .woocommerce .star-rating span{color:var(--gold)} /* L'erreur garde le rouge : c'est la seule des trois qui en est une. */ .woocommerce-message,.woocommerce-info{border-top-color:var(--accent-texte)} .woocommerce-error{border-top-color:var(--alerte)} /* L'espace compte a sa propre feuille : assets/css/compte.css. */ /* Boutons d'action des commandes : Voir (principal) + Facture/BDC (contour) */ .woocommerce-orders-table__cell-order-actions{text-align:right;white-space:normal} .woocommerce-orders-table__cell-order-actions a.button{display:inline-block;min-width:162px;margin:3px 0 3px 10px;padding:9px 14px!important;font-size:14px;letter-spacing:.03em;text-align:center;white-space:nowrap} .woocommerce-orders-table__cell-order-actions a.button.view{background:var(--accent-texte)!important;color:var(--blanc)!important;border:1px solid var(--accent-texte)!important} .woocommerce-orders-table__cell-order-actions a.button:not(.view){background:transparent!important;color:var(--navy)!important;border:1px solid var(--navy)!important} .woocommerce-orders-table__cell-order-actions a.button:not(.view):hover{background:var(--navy)!important;color:#fff!important} /* Champs de formulaire (compte, adresses, checkout) — typo plus grande */ .woocommerce form .form-row label, .woocommerce-EditAccountForm label, .woocommerce-address-fields label, .woocommerce-checkout label{font-size:20px} .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-account input.input-text, .woocommerce-account select, .woocommerce-account textarea, .woocommerce input.input-text, .woocommerce textarea, .woocommerce select{ font-size:20px!important;padding:13px 15px;line-height:1.5;font-family:var(--serif) } .woocommerce .form-row .description{font-size:16px} .woocommerce .select2-container--default .select2-selection--single{min-height:56px;padding:11px 8px;border-color:var(--line)} .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{font-size:20px;line-height:1.7;font-family:var(--serif)} .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{top:15px} .woocommerce .select2-results__option{font-size:18px} /* Le bandeau de titre vit dans la feuille de socle : il est de toutes les pages, pas des seules vues WooCommerce. */ /* single product layout */ .woocommerce div.product{display:grid;grid-template-columns:5fr 6fr;gap:48px} .woocommerce div.product .woocommerce-product-gallery{margin:0!important;width:auto!important;float:none!important;position:relative} /* Galerie : image principale */ .woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img{border:1px solid var(--line)} .woocommerce div.product .woocommerce-product-gallery__trigger{top:14px;right:14px;background:#fff;border:1px solid var(--line)} /* Galerie : vignettes uniformes */ .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs{display:grid!important;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0 0!important;padding:0;list-style:none} .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li{margin:0!important;width:auto!important;float:none!important} .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;opacity:.6;border:1px solid var(--line);transition:.2s;cursor:pointer} .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img:hover, .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--navy)} .woocommerce div.product .summary{margin:0!important;width:auto!important;float:none!important} .woocommerce div.product .woocommerce-tabs, .woocommerce div.product .related, .woocommerce div.product .up-sells, .woocommerce div.product .ml-accolade{grid-column:1/-1} /* Fiche : variations (Coloris) + quantité */ .woocommerce div.product form.cart{margin-top:10px} .woocommerce div.product form.cart .variations{margin:0 0 18px;border:0;width:100%} .woocommerce div.product form.cart .variations tr{display:block} .woocommerce div.product form.cart .variations th, .woocommerce div.product form.cart .variations td{display:block;padding:4px 0;text-align:left} .woocommerce div.product form.cart .variations label{font-family:var(--serif);color:var(--navy);font-size:18px;font-weight:400} .woocommerce div.product form.cart .variations select, .woocommerce div.product .summary select{ width:100%;max-width:380px;padding:12px 14px;border:1px solid var(--navy);background:#fff; font-family:var(--serif);font-size:17px;color:var(--ink);border-radius:0;line-height:1.3 } .woocommerce a.reset_variations{display:inline-block;margin-top:8px;color:var(--accent-texte);font-size:15px} .woocommerce .quantity .qty{ width:58px;height:52px;padding:0 4px;border:1px solid var(--navy);border-left:0;border-right:0;background:#fff; font-family:var(--serif);font-size:18px;text-align:center;border-radius:0 } /* Sélecteur quantité -/+ toujours visible */ .quantity{display:inline-flex;align-items:stretch;height:52px} .ml-qtybtn{width:46px;border:1px solid var(--navy);background:#fff;color:var(--navy);font-family:var(--serif);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:.15s} .ml-qtybtn:hover{background:var(--navy);color:#fff} .woocommerce .quantity input[type=number]{-moz-appearance:textfield;appearance:textfield} .woocommerce .quantity input.qty::-webkit-outer-spin-button, .woocommerce .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .woocommerce div.product form.cart.cart:not(.variations_form), .woocommerce div.product .woocommerce-variation-add-to-cart{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap} .woocommerce div.product form.cart div.quantity{float:none;order:1;margin:0} .woocommerce div.product form.cart .single_add_to_cart_button{order:2;min-height:52px;line-height:1.4;margin:0} .woocommerce div.product form.cart .quantity .qty{height:52px} /* "En stock" : pas de surbrillance jaune */ .woocommerce div.product .stock,.woocommerce div.product p.stock{background:none!important;color:var(--gold);padding:0;margin:.4em 0 1em;font-size:15px;font-weight:400} /* Fiche : onglets + description */ .woocommerce div.product .woocommerce-tabs{margin-top:24px} .woocommerce div.product .woocommerce-tabs ul.tabs{border:0;padding:0 0 0 0;margin:0 0 18px;display:flex;gap:28px} .woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none} .woocommerce div.product .woocommerce-tabs ul.tabs li{background:transparent!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;margin:0;padding:0 0 8px} .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none!important} .woocommerce div.product .woocommerce-tabs ul.tabs li a{font-family:var(--serif);color:var(--navy);font-size:18px;padding:0} .woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:transparent!important;border:0!important;border-bottom:2px solid var(--accent-texte)!important} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--accent-texte)} .woocommerce div.product .woocommerce-tabs .panel{max-width:840px;margin-top:6px} .woocommerce div.product .woocommerce-tabs .panel h2{font-size:24px} /* ============ Blocs ajoutés au compte client ============ Les plugins maison posent des sections sur « Mon compte » (identité fiscale, informations douane, langue) et sur la page d'une commande (factures d'un achat en salon). Chacun les stylait à sa façon, en dur, avec des gris et des bordures qui n'étaient pas ceux du site — d'où trois encadrés dépareillés sur un même écran. La présentation revient donc ici, où vivent déjà les couleurs et la typographie. Les plugins n'émettent plus qu'une structure et une classe. */ .ml-account-block{ margin:0 0 2rem;padding:1.5rem 1.75rem; border:1px solid var(--line);background:var(--cream); } .ml-account-block > legend{ padding:0 .5rem;font-family:var(--serif);font-size:22px;color:var(--navy); } .ml-account-block > p:first-of-type{ margin-top:0;font-size:16px;color:var(--muted); } .ml-account-block .form-row{margin-bottom:1.2rem} .ml-account-block .form-row:last-child{margin-bottom:0} /* Tableau des factures, sur la page d'une commande salon */ .wso-documents{margin:2.5rem 0} .wso-documents h2{font-family:var(--serif);color:var(--navy);margin-bottom:.3em} .wso-documents > p{margin-top:0;font-size:16px;color:var(--muted)} .wso-documents-table td,.wso-documents-table th{vertical-align:top} .wso-documents-solde{margin-top:1rem;font-size:18px} .wso-documents-reste{margin-top:1rem;font-size:16px;color:var(--muted)} /* Mention « livraison en plusieurs fois » sous le statut, dans la liste */ .wso-echelonne{display:block;margin-top:.3em;font-size:15px;color:var(--muted);line-height:1.35} /* Boutons de document sur la page d'une commande */ .wddp-documents-boutons{margin:1.5rem 0 2.5rem} .wddp-documents-boutons a.button{margin:0 .6em .6em 0} /* ---------- résultats de recherche ---------- * * La grille des produits est celle du catalogue, plus haut. Ne restent ici que * la liste des résultats qui n'en sont pas — pages, articles — et la * pagination de WordPress, qui ne porte pas les classes de celle de * WooCommerce. */ .ml-resultats{list-style:none;margin:clamp(30px,4vw,44px) 0 0;padding:0; display:grid;gap:0;max-width:70ch} .ml-resultats__item{border-top:1px solid var(--filet);padding:18px 0} .ml-resultats__item a{font-family:var(--display);font-size:clamp(19px,1.8vw,22px); color:var(--texte-titre)} .ml-resultats__item a:hover{color:var(--accent-texte)} .ml-resultats__item p{margin:6px 0 0;font-size:17px;line-height:1.55;color:var(--texte-doux)} .ml-recherche-vide{text-align:center;padding:var(--air) 0} .ml-recherche-vide__aide{color:var(--texte-doux);margin-bottom:clamp(24px,3vw,32px)} .ml-pagination{margin:clamp(38px,5vw,60px) 0 0;text-align:center} .ml-pagination .nav-links{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:center} .ml-pagination .page-numbers{display:flex;align-items:center;justify-content:center; min-width:42px;height:42px;padding:0 12px;border:1px solid transparent; font-size:17px;color:var(--texte-doux)} .ml-pagination a.page-numbers:hover{color:var(--texte-titre);border-color:var(--filet)} .ml-pagination .page-numbers.current{color:var(--texte-titre);border-color:var(--accent)}