/* ===== Glassora · WooCommerce — habillage à la charte ===== */ /* S'appuie sur les tokens définis dans base.css (var(--navy), --gold, etc.). */ /* Fond studio des photos produit : aligné sur le ton clair des vraies photos (verres détourés + photos sur fond studio lisent le même fond, sans couture). */ :root{--photo-bg:#f2f1f5} .woo{padding:clamp(152px,17vh,200px) 0 clamp(80px,12vh,130px)} .woocommerce .wrap,.woo .wrap{max-width:1280px} /* Titres de page boutique / catégorie */ .woocommerce-products-header{margin-bottom:40px} .woocommerce-products-header__title, .woocommerce .page-title, .woo h1.entry-title{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5vw,64px);line-height:1.02;letter-spacing:-.015em;color:var(--navy)} .term-description{color:var(--tgray);max-width:640px;margin-top:14px} .woocommerce-result-count{font-family:var(--head);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tgray);float:left;margin:10px 0 54px} .woocommerce-ordering{float:right;margin:0 0 54px} .woocommerce-ordering select{appearance:none;-webkit-appearance:none;font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:8px 28px 8px 0;color:var(--navy);background:transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center no-repeat;cursor:pointer;transition:border-color .3s} .woocommerce-ordering select:hover, .woocommerce-ordering select:focus-visible{border-bottom-color:var(--gold);outline:none} /* ===== Grille produits ===== */ /* Les pseudo-éléments clearfix de WooCommerce deviennent des cellules fantômes en display:grid : on les neutralise. */ .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after{display:none !important} .woocommerce ul.products, .woocommerce-page ul.products{display:grid !important;grid-template-columns:repeat(3,1fr);gap:44px 30px;margin:0;list-style:none;clear:both} .woocommerce ul.products li.product, .woocommerce-page ul.products li.product{width:auto !important;min-width:0;margin:0 !important;float:none !important;text-align:center;position:relative;display:flex;flex-direction:column;align-items:center} .woocommerce ul.products li.product a.woocommerce-LoopProduct-link, .woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link{display:block;min-width:0;width:100%} /* Tuile produit : verre vide qui se remplit au survol (comme la home). */ .gl-tile{position:relative;display:block;width:100%;aspect-ratio:1/1;border-radius:var(--r-card);overflow:hidden;background:var(--photo-bg);border:1px solid var(--line);margin-bottom:22px;transition:border-color .35s var(--ease),box-shadow .35s var(--ease)} .woocommerce ul.products li.product:hover .gl-tile{border-color:#e4e1d8;box-shadow:0 18px 40px rgba(17,24,39,.07)} .gl-tile img, .woocommerce ul.products li.product a .gl-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;margin:0;padding:34px;border-radius:0;background:none;filter:drop-shadow(0 18px 22px rgba(17,24,39,.1));transition:opacity 1s var(--ease)} .gl-tile__plein{opacity:0} .gl-tile__hint{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-family:var(--head);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tgray);opacity:.7;transition:opacity .4s} @media (hover:hover) and (min-width:901px){ .woocommerce ul.products li.product:hover .gl-tile__vide{opacity:0} .woocommerce ul.products li.product:hover .gl-tile__plein{opacity:1} .woocommerce ul.products li.product:hover .gl-tile__hint{opacity:0} } /* Vignette par défaut (produit hors mapping). */ .woocommerce ul.products li.product a>img{margin:0 0 22px;width:100%;aspect-ratio:1/1;height:auto;object-fit:contain;border-radius:var(--r-card);background:var(--photo-bg);border:1px solid var(--line);padding:34px;filter:drop-shadow(0 18px 22px rgba(17,24,39,.08))} .woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--serif) !important;font-weight:500;font-size:clamp(20px,1.7vw,23px);line-height:1.18;padding:0 0 6px;color:var(--navy);transition:color .35s} .woocommerce ul.products li.product:hover .woocommerce-loop-product__title{color:#7a6224} .gl-tile-meta{display:block;font-family:var(--head);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tgray);margin-bottom:10px} .woocommerce ul.products li.product .price{color:var(--navy);font-family:var(--head);font-size:16px;font-weight:600} /* « À partir de » d'une tuile de famille : la mention accompagne le prix sans lui voler la vedette, elle reste donc en gris et en graisse normale. */ .gl-price-from{font-weight:500;color:var(--tgray)} .woocommerce ul.products li.product .price del{opacity:.5;margin-right:8px} .woocommerce ul.products li.product .price ins{text-decoration:none;color:var(--navy)} .gl-tile-custom{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--head);font-size:13px;font-weight:600;letter-spacing:.04em;color:#7a6224;transition:gap .35s var(--ease)} .gl-tile-custom:hover{gap:14px} /* Actions produit : Ajouter au panier + Personnaliser, puis Joindre au devis. */ .gl-tile-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;width:100%;margin-top:16px} .woocommerce ul.products li.product .gl-tile-actions .button, .gl-tile-actions .gl-btn{flex:1 1 0;min-width:120px;margin:0;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.03em;line-height:1.2;padding:12px 12px;border-radius:var(--r-btn);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)} .woocommerce ul.products li.product .gl-tile-actions .button{background:var(--navy);color:#fff;border:1px solid var(--navy)} .woocommerce ul.products li.product .gl-tile-actions .button:hover{background:#0b1220;color:#fff} .woocommerce ul.products li.product .gl-tile-actions .button.loading{opacity:.7} .gl-tile-actions .gl-btn--ghost{background:transparent;color:var(--navy);border:1px solid var(--line)} .gl-tile-actions .gl-btn--ghost:hover{border-color:var(--gold);color:var(--gold)} .woocommerce ul.products li.product .gl-tile-actions .added_to_cart{flex:1 0 100%;text-align:center;font-family:var(--head);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-top:2px} .gl-tile-devis{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:2px;padding:9px 4px;font-family:var(--head);font-size:12px;font-weight:500;letter-spacing:.03em;color:var(--tgray);transition:color .3s var(--ease)} .gl-tile-devis:hover{color:var(--navy)} .gl-tile-devis i{color:var(--gold);font-size:15px} .woocommerce span.onsale{background:var(--gold);color:var(--lux);font-family:var(--head);font-weight:600;font-size:11px;letter-spacing:.08em;min-height:0;min-width:0;padding:6px 14px;border-radius:30px;top:14px;left:14px;line-height:1;z-index:2} /* ===== Boutique : layout rail de filtres + grille ===== */ .gl-shop{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start;clear:both} .gl-shop__main{min-width:0} .gl-shop__empty{font-family:var(--serif);font-size:22px;color:var(--tgray);padding:46px 0} .gl-filters{position:sticky;top:118px;align-self:start} .gl-filters__head{display:flex;align-items:center;gap:12px;margin-bottom:20px} .gl-filters__label{font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)} .gl-filters__reset{margin-left:auto;border:0;background:none;cursor:pointer;font-family:var(--head);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);padding:0;transition:color .25s} .gl-filters__reset:hover{color:var(--navy)} .gl-filters__close{display:none} .gl-filter{padding:20px 0;border-top:1px solid var(--line)} .gl-filter:first-of-type{border-top:0;padding-top:0} .gl-filter__title{font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin:0 0 14px} .gl-filter__opts{display:flex;flex-direction:column;gap:11px} .gl-filter__opt{position:relative;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:var(--body);font-size:14px;color:var(--tgray);transition:color .25s} .gl-filter__opt:hover{color:var(--navy)} .gl-filter__opt input{position:absolute;opacity:0;width:16px;height:16px;margin:0;cursor:pointer} .gl-filter__box{flex:0 0 16px;width:16px;height:16px;border:1px solid var(--line);border-radius:3px;position:relative;transition:border-color .25s,background .25s} .gl-filter__opt:hover .gl-filter__box{border-color:var(--gold)} .gl-filter__opt input:focus-visible+.gl-filter__box{outline:2px solid var(--gold);outline-offset:2px} .gl-filter__opt input:checked+.gl-filter__box{background:var(--navy);border-color:var(--navy)} .gl-filter__opt input:checked+.gl-filter__box::after{content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)} .gl-filter__label{flex:1} .gl-filter__opt input:checked~.gl-filter__label{color:var(--navy)} .gl-filter__count{font-family:var(--head);font-size:11px;color:var(--tgray);opacity:.55} .gl-filters-toggle{display:none} /* Pagination numérotée */ .woocommerce nav.woocommerce-pagination{margin-top:66px;text-align:center;border:0} .woocommerce nav.woocommerce-pagination ul{border:0;display:inline-flex;gap:6px} .woocommerce nav.woocommerce-pagination ul li{border:0;margin:0;overflow:visible} .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{min-width:40px;height:40px;line-height:40px;padding:0;border-radius:999px;font-family:var(--head);font-size:13px;font-weight:600;color:var(--navy);background:transparent;transition:background .3s,color .3s} .woocommerce nav.woocommerce-pagination ul li a:hover{background:rgba(200,169,106,.14);color:var(--gold)} .woocommerce nav.woocommerce-pagination ul li span.current{background:var(--navy);color:#fff} /* ===== Responsive boutique ===== */ @media(max-width:900px){ .gl-shop{grid-template-columns:1fr} .gl-filters-toggle{display:inline-flex;align-items:center;gap:8px;margin:0 0 26px;padding:11px 20px;border:1px solid var(--line);border-radius:999px;background:#fff;font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);cursor:pointer} .gl-filters{position:fixed;top:0;left:0;bottom:0;width:min(84vw,340px);z-index:120;background:var(--bg);padding:26px 24px;overflow-y:auto;transform:translateX(-100%);transition:transform .4s var(--ease);box-shadow:0 0 60px rgba(17,24,39,.18)} body.gl-filters-open .gl-filters{transform:none} body.gl-filters-open::after{content:'';position:fixed;inset:0;background:rgba(11,18,32,.42);z-index:110} body.gl-filters-open{overflow:hidden} .gl-filters__close{display:flex;align-items:center;justify-content:center;margin-left:auto;width:44px;height:44px;border:0;background:none;font-size:26px;line-height:1;color:var(--navy);cursor:pointer;padding:0} /* Zone tactile du bouton "Tout effacer" : sans padding, le texte de 11px etait le seul repere cliquable malgre son alignement sur toute la hauteur de la ligne d'en-tete. */ .gl-filters__reset{padding:14px 4px} } @media(max-width:640px){ .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,1fr) !important;gap:28px 16px} .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:18px} .gl-tile{margin-bottom:16px} .gl-tile img,.woocommerce ul.products li.product a .gl-tile img{padding:22px} } /* ===== Boutons ===== */ .woocommerce a.button,.woocommerce button.button,.woocommerce input.button, .woocommerce a.button.alt,.woocommerce button.button.alt, .woocommerce #respond input#submit{ font-family:var(--head);font-weight:600;font-size:14px;letter-spacing:.01em; background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:14px; padding:14px 28px;line-height:1;cursor:pointer;text-shadow:none; transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)} .woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover, .woocommerce #respond input#submit:hover{background:#0b1220;color:#fff} .woocommerce a.button.alt,.woocommerce button.button.alt{background:var(--gold);color:var(--lux);border-color:var(--gold)} .woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:#b9975a;border-color:#b9975a;color:var(--lux)} .woocommerce ul.products li.product .button{margin-top:14px;display:inline-flex} /* ===== Fiche produit ===== */ .single-product div.product{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(36px,5vw,76px);align-items:start} /* Onglets, produits liés et notices s'étendent en pleine largeur sous la grille. */ .single-product div.product>.woocommerce-tabs, .single-product div.product>.related, .single-product div.product>.upsells, .single-product div.product>.woocommerce-product-rating{grid-column:1 / -1} /* Média verre : cadre studio carré, survol vide -> plein (comme la boutique). */ .gl-single-media__frame{position:relative;aspect-ratio:1/1;max-width:560px;background:var(--photo-bg);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden} .single-product div.product .gl-single-media__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;padding:clamp(26px,4.5vw,60px);filter:drop-shadow(0 24px 30px rgba(17,24,39,.1));transition:opacity .7s var(--ease)} .gl-single-media__plein{opacity:0} /* Survol et choix ne doivent pas se disputer la vue. Les deux vignettes vivent DANS le conteneur : les survoler declenchait le survol du media, qui forcait le verre SERVI — meme en pointant la vignette du verre vide. Et un choix fait au clic ne resistait pas au survol suivant. Resultat : une bascule qui paraissait aleatoire. Le survol n'est donc qu'un APERCU, et il cesse de decider des que le client a choisi (`is-choisi`). `is-survol-vignette` le neutralise aussi tant que le pointeur est sur une vignette : ce qu'on survole n'est pas le verre. */ .gl-single-media--dual:not(.is-choisi):not(.is-survol-vignette):hover .gl-single-media__plein, .gl-single-media--dual.is-plein .gl-single-media__plein{opacity:1} .gl-single-media--dual:not(.is-choisi):not(.is-survol-vignette):hover .gl-single-media__vide, .gl-single-media--dual.is-plein .gl-single-media__vide{opacity:0} /* Un CHOIX repond tout de suite ; un survol peut fondre. La bascule durait 0,7 s dans les deux cas : au clic, rien ne semblait se passer pendant un temps, puis l'image changeait — ce qui participait a l'impression d'aleatoire. Le survol garde sa douceur, le choix devient net. */ .gl-single-media--dual.is-choisi .gl-single-media__plein, .gl-single-media--dual.is-choisi .gl-single-media__vide{transition-duration:.22s} @media (prefers-reduced-motion: reduce){ .gl-single-media__plein, .gl-single-media__vide{transition:none} } .gl-single-media__thumbs{display:flex;gap:12px;margin-top:16px} .gl-thumb{width:72px;height:72px;padding:7px;background:var(--photo-bg);border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:border-color .3s} .single-product div.product .gl-thumb img{width:100%;height:100%;max-width:none;object-fit:contain} .gl-thumb:hover{border-color:var(--gold)} .gl-thumb.is-active{border-color:var(--navy)} .single-product div.product .product_title{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.7vw,36px);line-height:1.08;letter-spacing:-.01em;color:var(--navy)} .single-product div.product .price{display:block;color:var(--navy);font-family:var(--head);font-weight:600;font-size:22px;margin:14px 0 4px} .gl-single-meta{font-family:var(--head);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tgray);margin:0 0 22px} /* Sélecteur de contenance (familles à plusieurs tailles). Reprend la pastille déjà employée par le bouton « Filtrer » et la pagination : rayon 999px, filet clair, typo de titraille. L'actif reprend le plein navy du bouton d'achat, pour que « on est ici » se lise d'un coup d'œil. */ .gl-sizes{margin:0 0 24px} .gl-sizes__title{display:block;font-family:var(--head);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tgray);margin:0 0 9px} .gl-sizes__opts{display:flex;flex-wrap:wrap;gap:9px} .gl-size{display:inline-flex;align-items:center;justify-content:center;min-width:78px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;font-family:var(--head);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--navy);text-decoration:none;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)} .single-product div.product a.gl-size:hover{border-color:var(--gold);color:var(--gold-ink)} .gl-size:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .gl-size.is-active{background:var(--navy);border-color:var(--navy);color:#fff;cursor:default} .single-product div.product .woocommerce-product-details__short-description{color:var(--tgray);font-size:16px;line-height:1.75;margin:0 0 26px;padding-top:22px;border-top:1px solid var(--line)} .single-product .quantity input.qty{border:1px solid var(--line);border-radius:var(--r-field);padding:13px;width:78px;font-family:var(--head);font-size:16px;text-align:center} .single-product div.product form.cart{margin-top:6px;display:flex;gap:12px;align-items:stretch} .single-product div.product form.cart .single_add_to_cart_button{border-radius:var(--r-btn)} /* Réassurance : structure et remplit la colonne droite. */ .gl-assur{list-style:none;margin:32px 0 0;padding:26px 0 0;border-top:1px solid var(--line);display:grid;gap:17px} .gl-assur li{display:flex;gap:13px;align-items:flex-start;font-family:var(--body);font-size:13.5px;color:var(--tgray);line-height:1.5} .gl-assur i{color:var(--gold);font-size:20px;line-height:1.2;flex:0 0 auto} .gl-assur strong{display:block;font-family:var(--head);font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);margin-bottom:2px} /* Pont vers l'atelier de gravure. */ .gl-single-custom{margin-top:14px} .gl-single-custom__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:420px;font-family:var(--head);font-weight:600;font-size:14px;letter-spacing:.02em;background:var(--navy);color:#fff;padding:16px 30px;border-radius:var(--r-btn);transition:background .35s var(--ease),gap .35s var(--ease)} .gl-single-custom__btn:hover{background:#0b1220;gap:16px} .gl-single-custom__note{font-size:13px;color:var(--tgray);margin:10px 0 0} /* Gravure de jauge : une ligne, pas un encart. Elle doit se lire sans disputer l'attention au bouton « Personnaliser » qui la précède — d'où le filet discret plutôt qu'un fond, et la taille de la note et non du corps. */ .gl-jauge-note{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);border-left:2px solid var(--gold-ink);border-radius:4px;font-size:13px;line-height:1.55;color:var(--tgray)} .gl-jauge-note i{flex:0 0 auto;margin-top:2px;font-size:16px;color:var(--gold-ink)} .gl-jauge-note strong{color:var(--navy);font-weight:600} .gl-jauge-note a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:2px} .woocommerce-tabs{margin-top:70px} .woocommerce-tabs ul.tabs{border:0;padding:0;display:flex;gap:26px} .woocommerce-tabs ul.tabs::before{border-color:var(--line)} .woocommerce-tabs ul.tabs li{background:none;border:0;border-radius:0;border-bottom:2px solid transparent;padding:0 0 10px;margin:0} .woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--gold)} .woocommerce-tabs ul.tabs li a{font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);padding:0} .woocommerce-tabs .panel h2{font-family:var(--serif);font-weight:500} .related.products,.upsells.products{margin-top:80px;border-top:1px solid var(--line);padding-top:50px} .related.products>h2,.upsells.products>h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,40px);margin-bottom:30px} /* ===== Notices ===== */ /* Les notices WooCommerce parlent la langue de la maison. Signale : « message tres gros ». Mesure a 375 px : 16 px de corps, 27 px d interligne, 109 px de haut pour une phrase de confirmation — et le liseré bleu vif etait l anneau de focus du navigateur, WooCommerce donnant le focus a la notice apres un ajout. Le site a deja une grammaire pour ce genre d encart, posee ailleurs : filet colore a gauche, fond teinte, 13 px en police de titrage. Une confirmation est une information SECONDAIRE — elle accompagne, elle ne titre pas. On aligne donc WooCommerce dessus, et les TROIS types a la fois : corriger le seul message de succes aurait laisse l info et l erreur en dehors. */ .woocommerce-message,.woocommerce-info,.woocommerce-error{ display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px; border-top:0;border-radius:var(--r-field,12px); font-family:var(--head);font-size:13px;line-height:1.55;text-wrap:pretty; padding:14px 16px;box-shadow:none; background:#fff;border:1px solid var(--line);border-left:3px solid var(--line)} /* Succes : l or de la maison. Info : l encre, neutre. Erreur : le rouge, reserve a ce qui empeche — meme partage que les encarts du bon a graver. */ .woocommerce-message{background:#FCF7EC;border-color:#E4D2AE;border-left-color:#C9A227;color:#7A6224} .woocommerce-info{background:#FAFAF8;border-color:var(--line);border-left-color:var(--navy,#111827);color:var(--ink,#111827)} .woocommerce-error{background:#FBF1F1;border-color:#D9BFBF;border-left-color:#8A2B2B;color:#7A2424} /* Le texte d abord, l action ensuite — WooCommerce sort le bouton en premier dans le balisage et le fait flotter. On lit une phrase avant d agir. */ .woocommerce-message>*:not(.button),.woocommerce-info>*:not(.button),.woocommerce-error>*:not(.button){order:1} /* /! Selecteurs QUALIFIES par l element. La regle generale des boutons s ecrit `.woocommerce a.button` (0,2,1) et battait un `.woocommerce-message .button` (0,2,0) : le bouton restait a 44 px et rayon 14 dans une notice ramenee a 13 px. Mesure faite avant de conclure. */ .woocommerce-message a.button,.woocommerce-message button.button, .woocommerce-info a.button,.woocommerce-info button.button, .woocommerce-error a.button,.woocommerce-error button.button{ order:2;float:none;margin:0 0 0 auto; min-height:36px;padding:0 16px;display:inline-flex;align-items:center; font-size:12.5px;font-weight:700;border-radius:10px} /* WooCommerce donne le focus a la notice pour la faire annoncer : elle n est pas tabulable, l anneau bleu du navigateur n y sert personne et jure. On le remplace, on ne le supprime pas. */ .woocommerce-message:focus,.woocommerce-info:focus,.woocommerce-error:focus{ outline:none;box-shadow:0 0 0 3px rgba(201,162,39,.28)} /* L'ICONE DE WOOCOMMERCE EST RETIREE, PAS RECOLOREE. WooCommerce pose son icone en position ABSOLUE (left:1.5em) et compte sur son propre padding-left de ~3.5em pour lui faire de la place. La regle ci-dessus rend ces encarts sous forme de carte et ramene le padding a 22px : l'icone ne se posait donc plus a cote du texte mais PAR-DESSUS — releve sur « Aucun telechargement actuellement disponible », ou elle chevauchait le A. Les recolorer ne corrigeait rien, cela rendait le chevauchement plus net. Ces encarts n'ont besoin d'aucune icone : le theme porte son sens par la carte et le texte, et ce meme masquage etait deja pose plus bas pour le panier vide — il ne l'etait simplement pas partout. */ .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{display:none} /* ===== Panier & commande ===== */ .woocommerce table.shop_table{border:1px solid var(--line);border-radius:var(--r-card);border-collapse:separate;overflow:hidden} .woocommerce table.shop_table th{font-family:var(--head);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)} .woocommerce .cart_totals h2,.woocommerce-checkout h3,.woocommerce-checkout #order_review_heading{font-family:var(--serif);font-weight:500} .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select, .woocommerce-checkout input[type="text"],.woocommerce-checkout input[type="email"],.woocommerce-checkout input[type="tel"]{ border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-family:var(--body);font-size:16px} .woocommerce #payment,.woocommerce-checkout #order_review{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:28px} .woocommerce-cart .wc-proceed-to-checkout a.checkout-button{font-size:15px;padding:16px 30px} /* Commande fermee tant qu'un bon a graver attend (glassora-bat.js). Le bouton garde son libelle et s'eteint : il dit « pas encore », pas autre chose. Il reste CLIQUABLE a dessein — le clic conduit a la ligne qui attend — d'ou le curseur normal plutot qu'un `not-allowed` qui promettrait une impasse. `filter` en plus de l'opacite : sur un aplat dore, l'opacite seule laisse un bouton encore trop present pour se lire comme eteint. */ .woocommerce-cart .wc-proceed-to-checkout a.checkout-button.is-bat-attente{ opacity:.45;filter:grayscale(1);box-shadow:none} .woocommerce-cart .wc-proceed-to-checkout a.checkout-button.is-bat-attente:hover, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button.is-bat-attente:focus{ opacity:.55;filter:grayscale(1)} /* ===== Mon compte ===== */ /* Menu "Tableau de bord / Commandes / Adresses..." nu par defaut (liste sans le moindre padding, ~19px de haut) : zone tactile bien trop petite sur mobile. On l'habille en carte avec des lignes pleine largeur. */ .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:#fff} .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line)} .woocommerce-MyAccount-navigation li:last-child{border-bottom:0} .woocommerce-MyAccount-navigation a{display:block;padding:14px 20px;font-family:var(--head);font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--ink);text-decoration:none;transition:background .2s var(--ease),color .2s var(--ease)} .woocommerce-MyAccount-navigation a:hover{background:var(--off)} .woocommerce-MyAccount-navigation li.is-active a{color:var(--gold-ink);background:var(--off)} .woocommerce-MyAccount-content{margin-top:28px} /* ----------------------------------------------------------------------- LE CONTENU DU COMPTE ----------------------------------------------------------------------- Le menu etait habille, le CONTENU ne l'etait pas : tout ce que WooCommerce pose a droite sortait tel quel. Releve sur la page Adresses — un titre nu, un lien « Modifier Adresse de facturation » pose au milieu de rien, et l'adresse en ITALIQUE, qui est le style par defaut du navigateur pour
et que personne n'avait remplace. Sur les Commandes, un tableau a 4px de padding. Ce bloc rend au contenu la meme grammaire qu'au menu : des cartes, la typographie de titre du site, et de l'air. */ /* Deux colonnes cote a cote, en grille plutot qu'en flottants : les flottants de WooCommerce laissent la colonne courte definir la hauteur, et le pied de page vient s'y coller. */ /* `body.logged-in` N'EST PAS UN DETAIL. La classe `woocommerce-account` est posee sur la page « Mon compte » CONNECTE COMME DECONNECTE, mais le menu n'existe que connecte. Sans cette garde, la grille s'appliquait aussi a la page de CONNEXION : le bloc « Se connecter / S'inscrire » tombait dans la colonne de 270px prevue pour le menu, et le formulaire de connexion de la boutique se retrouvait ecrase a 130px de large. */ .woocommerce-account.logged-in .woocommerce{display:grid;grid-template-columns:minmax(220px,270px) 1fr;gap:32px;align-items:start} /* LES COLONNES DE WOOCOMMERCE, NEUTRALISEES POUR DE BON. `.woocommerce .col2-set .col-1{float:left;width:48%}` pese 0,3,0 : ni une classe seule ni deux ne le battent. C'est le meme piege que `.form-row-first{width:47%}` rencontre sur les formulaires — il fallait le generaliser d'emblee. Mesure du defaut : des cartes d'adresse de 122px de large, ou le nom de la rue passait a la ligne tous les deux mots. */ .woocommerce-account .woocommerce .col2-set .col-1, .woocommerce-account .woocommerce .col2-set .col-2, .woocommerce-account .woocommerce .woocommerce-Addresses .woocommerce-Address{float:none;width:auto;margin:0} /* LE CLEARFIX DE WOOCOMMERCE DEVIENT UNE CASE DE GRILLE. * * `.col2-set::before` et `::after` existent pour contenir des flottants * (`content:""; display:table`). Dans un conteneur en GRILLE, un pseudo-element * genere n'est plus un artifice invisible : c'est un ITEM a part entiere, et il * prend une case. * * Mesure du defaut, sur la page de connexion en production : le `::before` * occupait la case (1,1), « Se connecter » etait donc repousse en (1,2) et * « S'inscrire » en (2,1) — deux blocs en diagonale, avec un grand vide en * haut a gauche et un autre en bas a droite. Meme chose pour les deux cartes * d'adresse. Les largeurs, elles, etaient JUSTES (447 et 447) : c'est ce qui * m'a fait croire deux fois que c'etait bon. Mesurer la largeur d'un element * ne dit rien de l'endroit ou il se trouve. * * On ne supprime pas le clearfix ailleurs : la ou WooCommerce fait encore * flotter ses colonnes (caisse, panier), il sert toujours a quelque chose. */ .woocommerce-account .woocommerce .col2-set::before, .woocommerce-account .woocommerce .col2-set::after, .woocommerce-account:not(.logged-in) #customer_login::before, .woocommerce-account:not(.logged-in) #customer_login::after{content:none;display:none} /* PLACEMENT EXPLICITE, ET CE N'EST PAS UN LUXE. WooCommerce glisse un `.woocommerce-notices-wrapper` AVANT le menu : laisse a lui-meme, il prend la premiere case, decale le menu dans la seconde et renvoie le contenu a la ligne suivante — dans la colonne etroite. Mesure : un formulaire de compte large de 270px au lieu de 802. Nommer les cases rend l'ensemble insensible a un enfant de plus. */ .woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper{grid-column:1 / -1} .woocommerce-account.logged-in .woocommerce-MyAccount-navigation{grid-column:1;width:auto;float:none;margin:0} .woocommerce-account.logged-in .woocommerce-MyAccount-content{grid-column:2;width:auto;float:none;margin:0} /* ----- La page de connexion (visiteur non identifie) ----- Deux colonnes de meme rang : se connecter, ou s'inscrire. Chacune dans sa carte, comme le reste du compte. */ .woocommerce-account:not(.logged-in) #customer_login{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;max-width:920px} .woocommerce-account:not(.logged-in) #customer_login > div{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:24px 26px} .woocommerce-account:not(.logged-in) #customer_login h2{font-family:var(--head);font-size:1.15rem;font-weight:600;margin:0 0 14px;color:var(--ink)} .woocommerce-account:not(.logged-in) #customer_login form{margin:0;border:0;padding:0} .woocommerce-account:not(.logged-in) #customer_login .form-row{float:none;width:auto;padding:0;margin:0 0 14px} .woocommerce-account:not(.logged-in) #customer_login label{display:block;margin-bottom:6px;font-family:var(--head);font-size:.82rem;font-weight:600;color:var(--ink)} .woocommerce-account:not(.logged-in) #customer_login .input-text{width:100%} .woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-login__rememberme{font-weight:400;font-size:.85rem;color:var(--muted)} .woocommerce-account:not(.logged-in) #customer_login .button{background:var(--gold);border:1px solid var(--gold);color:var(--navy);border-radius:var(--r-btn);font-family:var(--head);font-weight:600;padding:11px 22px;width:auto} /* UNE SEULE VOIX POUR LES TEXTES D'AIDE. Trois phrases de meme rang s'affichaient a trois tailles differentes : « Un lien permettant de definir un nouveau mot de passe... » sortait en taille de texte courant — plus GROS que la mention de confidentialite juste en dessous, et presque aussi gros que le titre du bloc. Ce sont pourtant toutes des notes de bas de champ : petites, grises, sous ce qu'elles expliquent. `p:not([class])` vise juste : WooCommerce classe ses rangees de formulaire (`form-row`) et laisse ses phrases d'aide en paragraphes nus. */ .woocommerce-account:not(.logged-in) #customer_login form > p:not([class]), .woocommerce-account:not(.logged-in) #customer_login .woocommerce-privacy-policy-text p, .woocommerce-account:not(.logged-in) #customer_login .woocommerce-LostPassword{font-size:.84rem;line-height:1.55;color:var(--muted);margin:0 0 14px} .woocommerce-account:not(.logged-in) #customer_login .woocommerce-LostPassword{margin-bottom:0} .woocommerce-account:not(.logged-in) #customer_login .woocommerce-LostPassword a, .woocommerce-account:not(.logged-in) #customer_login .woocommerce-privacy-policy-text a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:2px} @media(max-width:760px){ .woocommerce-account:not(.logged-in) #customer_login{grid-template-columns:1fr} } /* Les titres du contenu parlent la meme langue que le reste du site. */ .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3, .woocommerce-MyAccount-content legend{font-family:var(--head);font-weight:600;color:var(--ink);letter-spacing:.01em} .woocommerce-MyAccount-content h2{font-size:1.15rem;margin:0 0 .35rem} .woocommerce-MyAccount-content h3{font-size:1rem;margin:0 0 .3rem} .woocommerce-MyAccount-content > p{color:var(--muted);line-height:1.6} /* ----- Tableau de bord ----- */ /* Une salutation, une phrase, une action. Le menu de gauche enumere deja tout le reste : le repeter ici ne ferait que rallonger la page. */ .glassora-compte-accueil{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:26px 28px} .glassora-compte-bonjour{font-family:var(--serif);font-size:1.6rem;line-height:1.25;color:var(--ink);margin:0 0 .4rem} .glassora-compte-bonjour strong{font-weight:600} .woocommerce-MyAccount-content .glassora-compte-intro{color:var(--muted);line-height:1.6;margin:0;max-width:52ch} /* Le theme peint les liens `.button` en bleu nuit ; l'action principale du compte est doree, comme « Recommander » et comme les envois de formulaire. Deux apparences pour un meme rang d'action, c'est une de trop — d'ou la specificite juste suffisante pour reprendre la main. */ .woocommerce-MyAccount-content a.button.glassora-compte-cta{display:inline-block;margin-top:1.1rem;background:var(--gold);border-color:var(--gold);color:var(--navy)} .woocommerce-MyAccount-content .glassora-compte-sortie{margin:1.4rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.84rem;color:var(--muted)} .glassora-compte-sortie a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:2px} /* ----- Adresses ----- */ /* DEUX colonnes, dites explicitement. `repeat(auto-fit, minmax(240px,1fr))` taillait TROIS pistes dans les 802px disponibles et laissait la troisieme vide a cote des deux adresses : un blanc de 254px que rien ne venait occuper. Il n'y a jamais que deux adresses ici — la facturation et la livraison — autant l'ecrire. */ .woocommerce-Addresses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px} /* Les classes de colonne de WooCommerce (u-column1/col-1) portent des largeurs et des flottants que la grille ci-dessus rend faux. */ .woocommerce-Addresses .woocommerce-Address{width:auto;float:none;margin:0} .woocommerce-Address{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:20px 22px} /* Le titre et son action sur la meme ligne : l'action se lit comme une action, pas comme une phrase perdue sous le titre. */ .woocommerce-Address-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px} .woocommerce-Address-title h2, .woocommerce-Address-title h3{margin:0} .woocommerce-Address-title .edit{flex:0 0 auto;color:var(--gold-ink);font-family:var(--head);font-size:.82rem;font-weight:600;text-decoration:underline;text-underline-offset:2px} /* L'ITALIQUE EN MOINS : c'est le defaut du navigateur pour
, pas un choix. Une adresse postale se lit droite. */ .woocommerce-Address address{font-style:normal;color:var(--ink);line-height:1.65;font-size:.95rem} /* ----- Tableaux (commandes, telechargements) ----- */ .woocommerce-MyAccount-content table.shop_table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin:20px 0 0} .woocommerce-MyAccount-content table.shop_table th, .woocommerce-MyAccount-content table.shop_table td{padding:14px 18px;text-align:left;border:0;border-bottom:1px solid var(--line);vertical-align:middle} .woocommerce-MyAccount-content table.shop_table thead th{background:var(--off);font-family:var(--head);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)} .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td{border-bottom:0} .woocommerce-MyAccount-content table.shop_table td.woocommerce-orders-table__cell-order-actions{text-align:right;white-space:nowrap} /* ----- Formulaires (adresse, details du compte) ----- */ .woocommerce-MyAccount-content form{margin-top:18px} .woocommerce-MyAccount-content fieldset{border:1px solid var(--line);border-radius:var(--r-card);padding:18px 22px;margin:24px 0 0;background:#fff} .woocommerce-MyAccount-content legend{padding:0 8px;font-size:.95rem} /* Une grille de deux colonnes : WooCommerce prevoit `form-row-first` et `form-row-last` pour cela, mais sans feuille pour les poser elles se suivent en pleine largeur et le formulaire s'etire sur un ecran d'ordinateur. */ /* LA GRILLE VA SUR LE CONTENEUR, PAS SUR LES RANGEES. Posee sur les rangees, elle mettait le libelle et le champ cote a cote dans chaque rangee : des champs de 46px de large. C'est le formulaire qui porte les colonnes ; les rangees en sont les cases. Le `fieldset` du mot de passe reste en bloc a dessein : toutes ses rangees sont `form-row-wide`, il n'a donc aucune colonne a distribuer — et un `` dans un conteneur en grille se place mal selon les navigateurs. */ .woocommerce-MyAccount-content .woocommerce-EditAccountForm, .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start} /* `.woocommerce form .form-row-first/-last` impose `width:47%` et un flottant, avec une specificite de 0,3,0 qu'une classe seule ne peut pas battre : les rangees n'occupaient donc que la moitie de leur case de grille (mesure : 184px dans une colonne de 392). La grille distribue deja les colonnes — les largeurs et flottants de WooCommerce n'ont plus lieu d'etre. */ /* Meme famille de piege que le clearfix : WooCommerce seme des `
` entre ses rangees pour contenir des flottants. Dans une grille, chacun devient une CASE. Ils sont sans hauteur, donc invisibles ici, mais ils decalent le comptage des cases — et c'est exactement ce genre de case fantome qui a mis les adresses en diagonale. On les retire de la grille plutot que de compter sur leur discretion. */ .woocommerce-MyAccount-content .woocommerce-EditAccountForm > .clear, .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .clear{display:none} .woocommerce-account .woocommerce form .form-row{margin:0 0 16px;padding:0;float:none;width:auto} /* Ce qui prend toute la largeur : les rangees « wide », le bloc mot de passe, et la ligne du bouton (un

sans classe, chez WooCommerce). */ .woocommerce-MyAccount-content .form-row-wide, .woocommerce-MyAccount-content .form-row.notes, .woocommerce-MyAccount-content .woocommerce-EditAccountForm > fieldset, .woocommerce-MyAccount-content .woocommerce-EditAccountForm > p:not(.form-row), .woocommerce-MyAccount-content .woocommerce-address-fields > p{grid-column:1 / -1} .woocommerce-MyAccount-content .form-row label{display:block;margin-bottom:6px;font-family:var(--head);font-size:.82rem;font-weight:600;color:var(--ink)} .woocommerce-MyAccount-content .form-row .input-text, .woocommerce-MyAccount-content .form-row select{width:100%} .woocommerce-MyAccount-content .form-row em, .woocommerce-MyAccount-content fieldset span em{display:block;margin-top:5px;color:var(--muted);font-size:.78rem;font-style:normal} /* Le selecteur de pays est remplace par select2, qui arrive avec sa propre apparence (coins a 4px, gris de bibliotheque). Sans cela, un champ du formulaire d'adresse ne ressemble pas aux autres, juste au-dessus de lui. */ .woocommerce-MyAccount-content .select2-container--default .select2-selection--single{height:auto;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-field);background:#fff} .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__rendered{padding:0;line-height:1.35;color:var(--ink)} .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__arrow{top:50%;right:10px;transform:translateY(-50%)} .woocommerce-MyAccount-content .select2-container--default.select2-container--open .select2-selection--single{border-color:var(--gold)} /* ----- Boutons ----- */ .woocommerce-MyAccount-content .button, .woocommerce-MyAccount-content button[type="submit"]{background:var(--gold);border:1px solid var(--gold);color:var(--navy);border-radius:var(--r-btn);font-family:var(--head);font-weight:600;padding:11px 22px;cursor:pointer} .woocommerce-MyAccount-content .button:hover, .woocommerce-MyAccount-content button[type="submit"]:hover{filter:brightness(.96)} /* Les actions d'une ligne de tableau restent SECONDAIRES : une rangee de pastilles dorees ferait de chaque commande un appel a l'action. */ .woocommerce-MyAccount-content table.shop_table .button{background:transparent;border-color:var(--line);color:var(--ink);font-size:.82rem;padding:7px 14px} .woocommerce-MyAccount-content table.shop_table .button:hover{border-color:var(--gold);color:var(--gold-ink)} /* Le bouton « afficher le mot de passe » n'est pas une action de formulaire : il vit DANS le champ et ne doit pas en prendre l'apparence. */ .woocommerce-MyAccount-content button.show-password-input{background:transparent;border:0;padding:0} @media(max-width:900px){ /* Le menu passe AU-DESSUS du contenu, et non a cote : a cette largeur, une colonne de 220px laisserait au contenu de quoi afficher un tableau de commandes illisible. */ .woocommerce-account.logged-in .woocommerce{grid-template-columns:1fr;gap:24px} /* Une seule colonne : le placement explicite du bureau forcerait sinon une deuxieme colonne qui n'existe plus. */ .woocommerce-account.logged-in .woocommerce-MyAccount-navigation, .woocommerce-account.logged-in .woocommerce-MyAccount-content{grid-column:1} .woocommerce-MyAccount-content{margin-top:0} /* Un formulaire en deux colonnes sur un telephone, ce sont deux champs de 140px : on repasse a une colonne. */ .woocommerce-MyAccount-content .woocommerce-EditAccountForm, .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper{grid-template-columns:1fr} .woocommerce-MyAccount-content table.shop_table th, .woocommerce-MyAccount-content table.shop_table td{padding:12px 14px} /* Deux adresses cote a cote sur un telephone, ce sont deux colonnes de 150px ou la rue passe a la ligne tous les deux mots. */ .woocommerce-Addresses{grid-template-columns:1fr} } @media(max-width:900px){ .single-product div.product{grid-template-columns:1fr;gap:30px} .gl-single-media{position:static} .gl-single-media__frame{max-width:460px;margin-inline:auto} .gl-single-media__thumbs{justify-content:center} .gl-tile__hint{display:none} } @media(max-width:560px){ .woocommerce-result-count{float:none;display:block;margin:6px 0 18px} .woocommerce-ordering{float:none;margin:0 0 34px} } /* ===== Panier vide : état accueillant plutôt qu'une simple notice ===== */ .woocommerce .cart-empty.woocommerce-info, .woocommerce .wc-empty-cart-message .woocommerce-info{ background:none;border:0;box-shadow:none;padding:26px 0 6px;margin:0; font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.4vw,40px);line-height:1.15;color:var(--navy);text-align:center} .woocommerce .cart-empty.woocommerce-info::before, .woocommerce .wc-empty-cart-message .woocommerce-info::before{display:none} .woocommerce .return-to-shop{text-align:center;margin:26px 0 40px} .woocommerce .return-to-shop a.button{background:var(--gold);border-color:var(--gold);color:var(--lux);font-size:15px;padding:16px 30px} .woocommerce .return-to-shop a.button:hover{background:#b9975a;border-color:#b9975a;color:var(--lux)} /* ===== Checkout & panier « Blocks » — habillage à la charte ===== WooCommerce Blocks impose sa propre structure React : on aligne typographies, rayons et couleurs sur les tokens du thème. */ .wp-block-woocommerce-checkout,.wp-block-woocommerce-cart{font-family:var(--body)} .wc-block-components-title.wc-block-components-title, .wc-block-components-checkout-step__title, .wp-block-woocommerce-checkout h2,.wp-block-woocommerce-cart h2{ font-family:var(--serif);font-weight:500;letter-spacing:-.01em;color:var(--navy)} .wc-block-components-checkout-step__description{color:var(--tgray)} .wc-block-components-form .wc-block-components-text-input input[type="text"], .wc-block-components-form .wc-block-components-text-input input[type="email"], .wc-block-components-form .wc-block-components-text-input input[type="tel"], .wc-block-components-form .wc-block-components-text-input input[type="number"], .wc-block-components-form .wc-block-components-text-input input[type="url"], .wc-block-components-text-input input[type="text"], .wc-block-components-text-input input[type="email"], .wc-block-components-text-input input[type="tel"], .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input, .wc-block-components-select .components-custom-select-control__button, .wc-block-components-form .wc-block-components-textarea, .wc-block-components-textarea{ border:1px solid var(--line) !important;border-radius:var(--r-field) !important;font-family:var(--body)} .wc-block-components-form .wc-block-components-text-input input[type="text"]:focus, .wc-block-components-form .wc-block-components-text-input input[type="email"]:focus, .wc-block-components-form .wc-block-components-text-input input[type="tel"]:focus, .wc-block-components-text-input input:focus, .wc-block-components-textarea:focus{border-color:var(--gold) !important;box-shadow:0 0 0 1px var(--gold) !important} .wc-block-components-checkout-place-order-button, .wp-block-woocommerce-checkout .wc-block-components-button:not(.is-link), .wp-block-woocommerce-cart .wc-block-components-button:not(.is-link){ background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:var(--r-btn); font-family:var(--head);font-weight:600;letter-spacing:.01em;transition:background .35s var(--ease)} .wc-block-components-checkout-place-order-button:hover, .wp-block-woocommerce-checkout .wc-block-components-button:not(.is-link):hover, .wp-block-woocommerce-cart .wc-block-components-button:not(.is-link):hover{background:#0b1220;color:#fff} .wc-block-components-radio-control__option, .wc-block-components-checkbox{font-family:var(--body)} .wc-block-components-radio-control__input:checked{border-color:var(--navy);background:var(--navy)} .wc-block-components-checkbox__input[type="checkbox"]:checked{background:var(--navy);border-color:var(--navy)} .wc-block-components-checkbox__input[type="checkbox"]:focus, .wc-block-components-radio-control__input:focus{outline:2px solid var(--gold);outline-offset:2px} .wc-block-components-product-name,.wc-block-components-order-summary-item__description{font-family:var(--body)} .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-family:var(--head);font-weight:700;color:var(--navy)} .wc-block-components-panel__button, .wp-block-woocommerce-checkout a,.wp-block-woocommerce-cart a{color:var(--gold-ink)} .wc-block-components-sidebar .wc-block-components-panel{border-radius:var(--r-field)} .wc-block-checkout__sidebar .wc-block-components-totals-wrapper, .wc-block-checkout__sidebar{font-family:var(--body)} /* ----------------------------------------------------------------------------- VOS BONS À GRAVER, SUR LA PAGE DE COMMANDE (Glassora_Fichiers::bloc_commande) Ce bloc n'était qu'une liste de liens ouvrant une IMAGE NUE dans un onglet, à une adresse `wp-admin` : le client y lisait une adresse d'administration et n'en sortait qu'en fermant l'onglet. Le bon à graver se lit désormais ICI, en entier — les deux faces, les cotes, le sceau. -------------------------------------------------------------------------------- */ .glassora-preuve{ margin:var(--sp-6,40px) 0 0; padding:var(--sp-5,28px); border:1px solid var(--line,#ECEBE7); border-radius:var(--r-card,20px); background:var(--surface,#fff); } .glassora-preuve__titre{ margin:0; font-family:var(--head,inherit); font-size:1.05rem; font-weight:800; color:var(--ink,#111827); } .glassora-preuve__intro{ margin:6px 0 0; color:var(--muted,#5F6470); font-size:.9rem; } .glassora-preuve__piece{ margin-top:var(--sp-4,22px); padding-top:var(--sp-4,22px); border-top:1px solid var(--line,#ECEBE7); } .glassora-preuve__piece:first-of-type{border-top:0;padding-top:0} .glassora-preuve__nom{ margin:0 0 12px; font-family:var(--head,inherit); font-size:.95rem; font-weight:700; color:var(--ink,#111827); } .glassora-preuve__faces{display:flex;gap:12px;align-items:flex-start} .glassora-preuve__face{margin:0;flex:0 1 auto;min-width:0} .glassora-preuve__faces--duo .glassora-preuve__face{flex:1 1 0} /* SPÉCIFICITÉ : `.woocommerce img{height:auto}` (une classe + un élément) bat une classe seule. Deux classes reprennent la main — la hauteur doit être FIXE, sinon la boîte s'écrase avant chargement et la page saute. */ .glassora-preuve .glassora-preuve__apercu{ display:block; width:100%; max-width:180px; margin-inline:auto; height:240px; object-fit:contain; border:1px solid var(--line,#ECEBE7); border-radius:var(--r-field,12px); background:#fff; } .glassora-preuve__face figcaption{ margin-top:5px; color:var(--muted,#5F6470); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; text-align:center; } .glassora-preuve__specs{ margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--line,#ECEBE7); display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; } .glassora-preuve__spec{display:flex;align-items:baseline;gap:8px;margin:0} .glassora-preuve__spec dt{ margin:0; color:var(--muted,#5F6470); font-family:var(--head,inherit); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; } .glassora-preuve__spec dd{margin:0;color:var(--ink,#111827);font-size:.88rem} .glassora-preuve__spec--fort dd{font-weight:700} .glassora-preuve__sceau{ margin:12px 0 0; color:var(--gold-ink,#7A6224); font-family:var(--head,inherit); font-size:.82rem; font-weight:700; } /* Le sceau et son document, sur la même ligne : la date atteste, le bouton la range. Le client qui n'a pas téléchargé son bon à graver depuis le panier n'avait plus aucun moyen de le récupérer une fois la commande passée. */ .glassora-preuve__sceau{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px} .glassora-preuve__pdf{ font-family:var(--head,inherit); font-size:.8rem;font-weight:700; color:var(--gold-ink,#7A6224); text-decoration:underline;text-underline-offset:3px; } .glassora-preuve__pdf:hover{color:var(--ink,#111827)} .glassora-preuve__fichier{margin:8px 0 0;font-size:.85rem} .glassora-preuve__fichier a{color:var(--gold-ink,#7A6224);text-underline-offset:3px} @media (max-width:600px){ .glassora-preuve{padding:var(--sp-4,20px)} .glassora-preuve .glassora-preuve__apercu{height:200px} .glassora-preuve__specs{grid-template-columns:1fr} } /* ----------------------------------------------------------------------------- RÉCAPITULATIF DE COMMANDE (woocommerce/order/order-details.php + notre order-details-item.php) WooCommerce rend deux cellules : un nom, un prix. C'est la dernière page que le client regarde après avoir payé, et elle ne montrait ni le verre, ni ce qui sera gravé, ni à quelle taille. Les lignes deviennent des fiches — photo, nom, nombre de verres, caractéristiques, et le bon à graver contre sa ligne. -------------------------------------------------------------------------------- */ .woocommerce-order-details{ margin-top:var(--sp-6,40px); } .woocommerce-order-details__title{ margin:0 0 var(--sp-4,22px); font-family:var(--head,inherit); font-size:clamp(20px,2.2vw,26px); font-weight:800; letter-spacing:-.01em; color:var(--navy,#111827); } .woocommerce-table--order-details{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line,#ECEBE7); border-radius:var(--r-card,20px); overflow:hidden; background:var(--surface,#fff); } /* L'en-tête « Produit / Total » ne dit rien de plus que les fiches, et sa rangée grise fait « tableur ». */ .woocommerce-table--order-details thead{display:none} .woocommerce-table--order-details td, .woocommerce-table--order-details th{border:0;vertical-align:top} .gc-recap__ligne > td{padding:var(--sp-5,26px)} .gc-recap__ligne + .gc-recap__ligne > td{border-top:1px solid var(--line,#ECEBE7)} .gc-recap__tete{display:flex;align-items:flex-start;gap:var(--sp-4,20px)} .gc-recap__vignette{flex:0 0 88px} .gc-recap__vignette img, .woocommerce-table--order-details .gc-recap__photo{ display:block;width:88px;height:110px;object-fit:contain; border:1px solid var(--line,#ECEBE7); border-radius:var(--r-field,12px); background:#fff; } .gc-recap__corps{flex:1 1 auto;min-width:0} .gc-recap__nom{ margin:0; font-family:var(--head,inherit); font-size:1.02rem;font-weight:800;line-height:1.25; color:var(--navy,#111827); } .gc-recap__nom a{color:inherit;text-decoration:none} .gc-recap__nom a:hover{text-decoration:underline;text-underline-offset:3px} .gc-recap__qte{ margin:4px 0 0; color:var(--muted,#5F6470); font-family:var(--head,inherit); font-size:.8rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase; } .gc-recap__prix{ flex:0 0 auto;margin:0; font-family:var(--head,inherit); font-size:1.02rem;font-weight:800; color:var(--navy,#111827); white-space:nowrap; } /* Les caractéristiques WooCommerce (« Personnalisation », « BAT validé le ») */ .gc-recap__corps .wc-item-meta{margin:10px 0 0;padding:0;list-style:none} .gc-recap__corps .wc-item-meta li{margin:0 0 3px;display:flex;gap:6px;flex-wrap:wrap} .gc-recap__corps .wc-item-meta strong{ font-family:var(--head,inherit);font-size:.72rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5F6470); } .gc-recap__corps .wc-item-meta p{margin:0;font-size:.88rem;color:var(--ink,#111827)} /* Le pied : totaux, note, actions. */ .woocommerce-table--order-details tfoot tr th, .woocommerce-table--order-details tfoot tr td{ padding:10px var(--sp-5,26px); font-size:.92rem; } .woocommerce-table--order-details tfoot tr:first-child th, .woocommerce-table--order-details tfoot tr:first-child td{ border-top:1px solid var(--line,#ECEBE7); padding-top:var(--sp-4,18px); } .woocommerce-table--order-details tfoot th{ text-align:left;font-family:var(--head,inherit);font-weight:700; color:var(--muted,#5F6470); } .woocommerce-table--order-details tfoot td{text-align:right;color:var(--ink,#111827)} .woocommerce-table--order-details tfoot tr:last-child th, .woocommerce-table--order-details tfoot tr:last-child td{padding-bottom:var(--sp-5,24px)} /* Le bon à graver, contre sa ligne : plus de titre ni de cadre, il est DANS la fiche. */ .gc-recap__ligne .glassora-preuve__piece{ margin-top:var(--sp-4,18px); padding-top:var(--sp-4,18px); border-top:1px dashed var(--line,#ECEBE7); } @media (max-width:600px){ .gc-recap__ligne > td{padding:var(--sp-4,18px)} .gc-recap__tete{flex-wrap:wrap;gap:14px} .gc-recap__vignette{flex:0 0 64px} .gc-recap__vignette img, .woocommerce-table--order-details .gc-recap__photo{width:64px;height:80px} .gc-recap__corps{flex:1 1 60%} .gc-recap__prix{flex:1 1 100%;text-align:right} .woocommerce-table--order-details tfoot tr th, .woocommerce-table--order-details tfoot tr td{padding-left:var(--sp-4,18px);padding-right:var(--sp-4,18px)} } /* ----------------------------------------------------------------------------- RÉSUMÉ DE LA COMMANDE, PAGE DE PAIEMENT (blocs WooCommerce) Ce récapitulatif est la dernière chose que le client lit avant de payer. Il y avait un pavé : la prose du catalogue, puis quatre lignes de caractéristiques rendues bout à bout, séparées par des barres obliques. Personne ne lit ça — et le verso, lui, n'apparaissait pas du tout. L'image porte désormais LES DEUX FACES (une seule image composée, cf. Glassora_Cart::composer_duo — le bloc n'offre qu'un emplacement). Restent trois lignes courtes, et elles se lisent enfin comme une liste. -------------------------------------------------------------------------------- */ /* La description du catalogue s'en va. Elle vend un verre à quelqu'un qui vient de l'acheter. En CSS et non en PHP : les blocs préchargent le panier depuis la page, hors de toute route d'API — un filtre serveur n'y voyait rien (vérifié). */ .wc-block-checkout__sidebar .wc-block-components-product-metadata__description, .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-metadata__description{ display:none; } /* L'image : plus grande, et à la bonne proportion pour DEUX verres côte à côte. La vignette de 48 px de WooCommerce les réduisait à deux timbres. Classe doublée : la règle du bloc gagne autrement la cascade (mesuré). */ .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image.wc-block-components-order-summary-item__image{ /* `flex:0 0 auto` : sans lui la colonne se fait comprimer par le flex et l'image retombe à 65 px, quelle que soit la largeur demandée (mesuré). */ flex:0 0 auto; width:104px; } .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image.wc-block-components-order-summary-item__image img{ /* `max-width` AUSSI : WooCommerce plafonne l'image à 48 px, et une largeur seule ne peut rien contre un plafond. C'est ce qui manquait au premier essai — l'image restait à 48 px alors que la règle s'appliquait. */ width:104px;max-width:104px; height:auto;max-height:132px;object-fit:contain; border:1px solid var(--line,#ECEBE7); border-radius:var(--r-field,12px); background:#fff; } /* Les caractéristiques : une VRAIE liste, une par ligne, au lieu d'un paragraphe coupé de barres obliques. Le bloc les rend en `span` — pas en `li` : première version corrigée après lecture du balisage réel. */ .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-details{ margin:8px 0 0;padding:0;display:grid;gap:3px; } .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-details > span{ display:block;font-size:.82rem;line-height:1.4;color:var(--ink,#111827); } .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-details__name{ display:block; font-family:var(--head,inherit); font-size:.66rem;font-weight:700; letter-spacing:.07em;text-transform:uppercase; color:var(--muted,#5F6470); } /* La barre oblique que le bloc glisse entre deux entrées : elle n'a de sens que dans un paragraphe. */ .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-details [aria-hidden="true"]{ display:none; } .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name{ font-family:var(--head,inherit);font-weight:700;color:var(--navy,#111827); } /* ===== Caisse : la porte de retour, une seule et discrete ===== Remontee d'une beta : « arrive a ce point, plus moyen de rien modifier ». La sortie existait (l'icone panier de l'en-tete), elle ne s'annoncait pas. Un lien en TEXTE, dans le recapitulatif, sous les lignes qu'il faudrait changer — pas un bouton, qui entrerait en concurrence avec le paiement. Voir assets/js/glassora-checkout.js pour le pourquoi de l'exception. */ .woocommerce-checkout .glassora-retour-panier{ margin:0;padding:12px 16px 16px;display:flex;flex-direction:column;gap:4px; border-bottom:1px solid var(--line)} .woocommerce-checkout .glassora-retour-panier a{ font-family:var(--head);font-size:14px;color:var(--gold-ink,#7A6224); text-decoration:underline;text-underline-offset:3px} .woocommerce-checkout .glassora-retour-panier a:hover, .woocommerce-checkout .glassora-retour-panier a:focus{color:var(--ink)} .woocommerce-checkout .glassora-retour-panier__note{ font-family:var(--head);font-size:12px;line-height:1.5;color:var(--muted);text-wrap:pretty} /* Le compte de verres, sous le nom de la piece. La pastille posee sur la vignette n'affiche qu'un chiffre : « 6 » ne dit pas si l'on paie six verres ou six boites. La ligne se lit dans la foulee du nom, en retrait — elle informe, elle ne concurrence pas le prix. */ .woocommerce-checkout .glassora-recap-verres{ margin:2px 0 0;font-family:var(--head);font-size:12px;line-height:1.4; color:var(--muted);font-variant-numeric:tabular-nums}