/* ════════════════════════════════════════════════════════════════
Le Globe-Trotter — habillage WooCommerce
Boutique · catégories · fiche produit · panier · commande · compte.
Utilise les variables de marque définies dans style.css.
════════════════════════════════════════════════════════════════ */
.lgt-wc { padding-top: clamp(28px, 4vw, 44px); padding-bottom: clamp(56px, 8vw, 96px); }
/* ── En-tête boutique / catégorie ── */
.lgt-shop-hero { background: var(--lgt-cream); border-bottom: 1px solid var(--lgt-line); padding: clamp(28px, 5vw, 56px) 0 clamp(24px, 4vw, 44px); }
.lgt-shop-hero__title {
font-family: var(--lgt-font-head); font-weight: 900; text-transform: uppercase;
letter-spacing: -0.02em; color: var(--lgt-ink);
font-size: clamp(30px, 5vw, 52px); line-height: 1.05; margin: 8px 0 0;
}
.lgt-shop-hero__desc { color: var(--lgt-mute); font-size: 15px; line-height: 1.65; margin-top: 14px; max-width: 680px; }
/* ── Fil d'Ariane ── */
.lgt-breadcrumb, .woocommerce-breadcrumb {
font-family: var(--lgt-font-head); font-weight: 600; font-size: 11.5px;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--lgt-mute);
}
.woocommerce-breadcrumb a { color: var(--lgt-olive); text-decoration: none; }
.lgt-crumb-sep { color: var(--lgt-line); margin: 0 6px; }
/* ── Barre résultats + tri ── */
.woocommerce-result-count {
font-family: var(--lgt-font-body); font-size: 13.5px; color: var(--lgt-mute); margin: 0;
}
.woocommerce-ordering select,
.lgt-wc select.orderby {
border: 1px solid var(--lgt-line); background: #fff; padding: 10px 14px;
font-family: var(--lgt-font-head); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
}
.lgt-wc .woocommerce-notices-wrapper:empty { display: none; }
/* ═══════════ GRILLE PRODUITS ═══════════ */
.lgt-wc ul.products,
.woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2.4vw, 28px);
margin: 24px 0 0;
padding: 0;
list-style: none;
}
.lgt-wc ul.products::before,
.lgt-wc ul.products::after { content: none !important; }
@media (max-width: 900px) { .lgt-wc ul.products, .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lgt-wc ul.products, .woocommerce ul.products { grid-template-columns: 1fr; } }
/* Carte produit */
.lgt-wc ul.products li.product,
.woocommerce ul.products li.product {
width: auto !important; margin: 0 !important; float: none !important;
display: flex; flex-direction: column;
/* background: #fff; border: 1px solid var(--lgt-line); */
transition: box-shadow .25s, transform .25s, border-color .25s;
}
.lgt-wc ul.products li.product:hover {
box-shadow: 0 18px 44px rgba(17,17,17,0.12); transform: translateY(-4px); border-color: transparent;
}
.lgt-product-card__media { position: relative; overflow: hidden; }
.lgt-product-card__media img {
display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; margin: 0;
transition: transform .5s ease, opacity .4s ease;
}
.lgt-product-card:hover .lgt-product-card__media img { transform: scale(1.05); }
/* Seconde image révélée au survol */
.lgt-product-card__img2 {
position: absolute; inset: 0; z-index: 1;
width: 100%; height: 100%; object-fit: cover;
opacity: 0;
}
.lgt-product-card:hover .lgt-product-card__img2 { opacity: 1; }
.lgt-product-card__media .onsale { z-index: 3; }
.lgt-product-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.lgt-product-card__cat {
font-family: var(--lgt-font-head); font-weight: 600; font-size: 10px;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--lgt-olive);
}
.lgt-product-card__title { margin: 0; font-family: var(--lgt-font-head); font-weight: 700; font-size: 15.5px; line-height: 1.3; }
.lgt-product-card__title a { color: var(--lgt-ink); text-decoration: none; }
.lgt-product-card__title a:hover { color: var(--lgt-olive); }
.lgt-product-card__foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lgt-product-card .price { color: var(--lgt-ink); font-family: var(--lgt-font-head); font-weight: 800; font-size: 16px; margin: 0; }
.lgt-product-card .price del { color: var(--lgt-mute); font-weight: 500; opacity: .7; margin-right: 6px; }
.lgt-product-card .price ins { text-decoration: none; color: var(--lgt-gold-darker); }
.lgt-product-card .star-rating { font-size: 12px; color: var(--lgt-gold-dark); margin: 2px 0; }
/* Badge promo */
.woocommerce span.onsale, .lgt-product-card__media .onsale {
position: absolute; top: 12px; left: 12px; z-index: 2; margin: 0; min-height: 0; min-width: 0;
background: var(--lgt-gold); color: var(--lgt-ink);
font-family: var(--lgt-font-head); font-weight: 800; font-size: 10px;
letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 10px; border-radius: 0; line-height: 1;
}
/* ═══════════ BOUTONS WOOCOMMERCE ═══════════ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
background: var(--lgt-olive);
color: #fff;
font-family: var(--lgt-font-head); font-weight: 700; font-size: 12px;
letter-spacing: 0.1em; text-transform: uppercase;
border: 0; border-radius: 0; padding: 13px 22px; line-height: 1.1;
transition: background .2s, transform .2s, box-shadow .2s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
background: var(--lgt-olive-dark); color: #fff; transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(78,92,48,0.28);
}
/* Bouton « ajouté » / secondaire */
.woocommerce a.added_to_cart {
display: inline-block; margin-top: 8px; color: var(--lgt-olive);
font-family: var(--lgt-font-head); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
}
.lgt-product-card .lgt-product-card__foot .button { padding: 10px 16px; font-size: 11px; }
/* ═══════════ FICHE PRODUIT ═══════════ */
.lgt-wc--single div.product { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px,4vw,64px); align-items: start; }
@media (max-width: 860px) { .lgt-wc--single div.product { grid-template-columns: 1fr; } }
/* WooCommerce force width:48% + float:left sur les colonnes → on rétablit 100 %
pour que le contenu occupe toute la largeur de chaque colonne de la grille. */
.lgt-wc--single div.product > .woocommerce-product-gallery,
.lgt-wc--single div.product > .summary,
.lgt-wc--single div.product > .entry-summary {
width: 100% !important;
float: none !important;
margin: 0 !important;
clear: none !important;
}
.lgt-wc--single .woocommerce-product-gallery {
margin: 0 !important;
position: relative;
/* Élément de grille CSS : sans min-width:0, un élément de grille ne peut
jamais être plus étroit que le contenu qu'il contient (min-width:auto
par défaut). Le carrousel de miniatures ci-dessous, en non-retour à la
ligne, ferait alors déborder toute la grille (et donc la page) au lieu
de défiler dans sa propre largeur. */
min-width: 0;
max-width: 100%;
}
.lgt-wc--single .woocommerce-product-gallery__image img { border: 1px solid var(--lgt-line); }
/* NE PAS contraindre .woocommerce-product-gallery__wrapper : flexslider lui
donne volontairement une largeur inline énorme (ex. width:2800% pour 14
images) et la déplace via transform: translate3d() pour afficher la bonne
image. Un max-width ici écraserait ce calcul et casserait le changement
d'image au clic sur les miniatures (seule la 1re image resterait visible).
Le cadrage réel se fait via .flex-viewport (inséré par le script, déjà en
overflow:hidden) — c'est UNIQUEMENT .woocommerce-product-gallery (l'élément
de grille) et .flex-control-thumbs qui avaient besoin d'être contraints. */
/* Miniatures de galerie → carrousel horizontal défilable.
flexslider applique des styles INLINE (float:left + width) sur les ;
on les surcharge avec !important pour obtenir une bande scrollable. */
.woocommerce-product-gallery .flex-control-thumbs {
display: flex !important;
flex-wrap: nowrap !important;
gap: 10px;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 12px 0 0 !important;
padding: 2px 2px 8px;
list-style: none;
overflow-x: auto !important;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
cursor: grab;
box-sizing: border-box;
}
.woocommerce-product-gallery .flex-control-thumbs.is-grabbing { cursor: grabbing; }
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar { height: 6px; }
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-track { background: transparent; }
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb { background: var(--lgt-line); border-radius: 3px; }
.woocommerce-product-gallery .flex-control-thumbs li {
float: none !important;
flex: 0 0 auto !important;
width: 76px !important;
margin: 0 !important;
scroll-snap-align: start;
}
.woocommerce-product-gallery .flex-control-thumbs img {
width: 100% !important;
border: 1px solid var(--lgt-line);
opacity: 0.65;
cursor: pointer;
aspect-ratio: 1/1;
object-fit: cover;
transition: opacity 0.2s ease, border-color 0.2s ease;
}
.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
opacity: 1;
border-color: var(--lgt-olive);
}
/* Bouton loupe (zoom) */
.lgt-wc--single .woocommerce-product-gallery__trigger { top: 12px; right: 12px; z-index: 3; }
/* Contenu riche de l'onglet « Livraison & Paiement » */
.lgt-tab-richtext { font-size: 15px; line-height: 1.7; color: #333; }
.lgt-tab-richtext ul, .lgt-tab-richtext ol { padding-left: 1.3em; margin: 12px 0 0 10px; }
.lgt-tab-richtext li {
background-color: transparent !important;
display: list-item !important;
list-style: auto !important;
border: 0 !important;
border-radius: 0 !important;
position: initial !important;
padding: 0 !important;
margin: 6px 0;
}
.lgt-tab-richtext a { color: var(--lgt-olive); text-underline-offset: 3px; }
.lgt-tab-richtext a:hover { color: var(--lgt-gold-dark); }
/* Texte SEO sous la liste des produits (catégorie, 1re page) */
.lgt-cat-seo {
margin-top: clamp(40px, 6vw, 72px);
padding-top: clamp(28px, 4vw, 44px);
border-top: 1px solid var(--lgt-line);
}
.lgt-cat-seo .lgt-entry { max-width: none; }
.lgt-wc--single div.product .product_title {
font-family: var(--lgt-font-head); font-weight: 900; text-transform: uppercase;
letter-spacing: -0.02em; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.08; margin: 0 0 14px; color: var(--lgt-ink);
}
.lgt-wc--single div.product .price {
color: var(--lgt-ink); font-family: var(--lgt-font-head); font-weight: 800; font-size: 26px; margin: 0 0 18px;
}
.lgt-wc--single div.product .price del { color: var(--lgt-mute); font-weight: 500; opacity: .7; margin-right: 8px; }
.lgt-wc--single div.product .price ins { text-decoration: none; color: var(--lgt-gold-darker); }
.lgt-wc--single .woocommerce-product-details__short-description { color: var(--lgt-mute); font-size: 15px; line-height: 1.7; margin-bottom: 22px; }
.lgt-wc--single .single_add_to_cart_button { padding: 16px 30px !important; font-size: 12.5px !important; }
.lgt-wc--single .quantity input.qty {
border: 1px solid var(--lgt-line); padding: 10px 10px; width: 74px; text-align: center; font-family: var(--lgt-font-head); font-weight: 700;
}
.lgt-wc--single .product_meta { margin-top: 22px; font-size: 12.5px; color: var(--lgt-mute); }
.lgt-wc--single .product_meta > span { display: block; padding: 6px 0; border-top: 1px solid var(--lgt-line); }
.lgt-wc--single .product_meta a { color: var(--lgt-olive); text-decoration: none; }
/* Variations / nuanciers (compat woo-variation-swatches) */
.lgt-wc--single .variations td, .lgt-wc--single .variations th { padding: 8px 0; }
.lgt-wc--single .variations label { font-family: var(--lgt-font-head); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; }
/* Onglets */
.lgt-wc--single .woocommerce-tabs { grid-column: 1 / -1; margin-top: clamp(32px,5vw,56px); }
.lgt-wc--single .woocommerce-tabs > ul.tabs { border-bottom: 1px solid var(--lgt-line); padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.lgt-wc--single .woocommerce-tabs > ul.tabs::before { border: 0; }
.lgt-wc--single .woocommerce-tabs > ul.tabs > li {
border: 0; background: transparent; margin: 0; padding: 0; border-radius: 0;
}
.lgt-wc--single .woocommerce-tabs > ul.tabs > li::before, .lgt-wc--single .woocommerce-tabs > ul.tabs > li::after { display: none; }
.lgt-wc--single .woocommerce-tabs > ul.tabs > li a {
font-family: var(--lgt-font-head); font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.08em;
color: var(--lgt-mute); padding: 12px 4px; display: inline-block; border-bottom: 2px solid transparent;
}
.lgt-wc--single .woocommerce-tabs > ul.tabs > li.active a { color: var(--lgt-ink); }
.lgt-wc--single .woocommerce-Tabs-panel h2 { font-family: var(--lgt-font-head); font-weight: 800; text-transform: uppercase; font-size: 20px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
border-radius: 0;
}
/* Onglets → ACCORDÉON quand ils ne tiennent pas sur une seule ligne.
assets/js/main.js ajoute la classe .lgt-tabs--accordion et déplace chaque
panneau à l'intérieur de son (dès lors enfant direct), afin que le
contenu s'ouvre juste sous son propre intitulé, comme un accordéon FAQ.
L'état ouvert/fermé s'appuie sur .active, déjà géré par le script natif
de WooCommerce (aucune logique de clic à réécrire). */
.woocommerce-tabs.lgt-tabs--accordion { margin-top: clamp(28px,4vw,48px); }
/* Le plugin WooCommerce fournit son propre woocommerce.css avec un sélecteur
très spécifique (.woocommerce div.product .woocommerce-tabs ul.tabs li,
spécificité 0,4,3) qui dessine des « onglets dossier » avec coins arrondis
et pseudo-éléments en coin — plus spécifique que nos règles ci-dessous.
On neutralise volontairement avec !important plutôt que de chercher à
surenchérir en spécificité sur chaque sélecteur du plugin. */
.woocommerce-tabs.lgt-tabs--accordion > ul.tabs {
display: block !important;
background: transparent !important;
border: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
padding-left: 0 !important;
margin: 0 !important;
gap: 0 !important;
}
.woocommerce-tabs.lgt-tabs--accordion > ul.tabs > li {
display: block !important;
position: static !important;
z-index: auto !important;
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid var(--lgt-line) !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce-tabs.lgt-tabs--accordion > ul.tabs > li:first-child { border-top: 1px solid var(--lgt-line) !important; }
.woocommerce-tabs.lgt-tabs--accordion > ul.tabs > li::before,
.woocommerce-tabs.lgt-tabs--accordion > ul.tabs > li::after,
.woocommerce-tabs.lgt-tabs--accordion > ul.tabs > li a::before,
.woocommerce-tabs.lgt-tabs--accordion > ul.tabs > li a::after { display: none !important; content: none !important; box-shadow: none !important; }
.woocommerce-tabs.lgt-tabs--accordion > ul.tabs > li a {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
width: 100% !important;
padding: 18px 2px !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: var(--lgt-font-head) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
font-size: 13px !important;
letter-spacing: 0.06em !important;
color: var(--lgt-ink) !important;
text-shadow: none !important;
text-decoration: none !important;
}
.woocommerce-tabs.lgt-tabs--accordion > ul.tabs > li.active {
background: transparent !important;
border-bottom-color: var(--lgt-line) !important;
}
.woocommerce-tabs.lgt-tabs--accordion > ul.tabs > li.active a { color: var(--lgt-ink) !important; }
/* Icône +/− (deux barres ; la verticale disparaît quand ouvert = "−") */
.lgt-tab-icon { display: none; position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.woocommerce-tabs.lgt-tabs--accordion .lgt-tab-icon { display: block; }
.lgt-tab-icon::before, .lgt-tab-icon::after {
content: ""; position: absolute; background: var(--lgt-ink);
transition: opacity 0.2s ease, transform 0.25s ease;
}
.lgt-tab-icon::before { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); }
.lgt-tab-icon::after { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); }
.woocommerce-tabs.lgt-tabs--accordion li.active .lgt-tab-icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
/* Panneau déplacé dans le : animation d'ouverture en douceur.
Le display:none appliqué par WooCommerce est neutralisé (!important) ;
l'ouverture/fermeture visuelle passe entièrement par max-height/opacity. */
.woocommerce-tabs.lgt-tabs--accordion .woocommerce-Tabs-panel {
display: block !important;
max-height: 0;
opacity: 0;
overflow: hidden;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin: 0 !important;
transition: max-height 0.4s cubic-bezier(0.4,0.01,0.2,1), opacity 0.3s ease, padding 0.3s ease;
}
.woocommerce-tabs.lgt-tabs--accordion li.active .woocommerce-Tabs-panel {
max-height: 2400px;
opacity: 1;
padding-top: 4px !important;
padding-bottom: 26px !important;
}
/* Produits liés / ventes croisées */
.related.products, .up-sells.products { grid-column: 1 / -1; margin-top: clamp(40px,6vw,72px); }
.related.products > h2, .up-sells.products > h2, .cross-sells > h2 {
font-family: var(--lgt-font-head); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em;
font-size: clamp(22px,3vw,32px); margin: 0 0 24px;
}
/* ═══════════ PANIER ═══════════ */
.woocommerce table.shop_table {
border: 1px solid var(--lgt-line); border-radius: 0; border-collapse: collapse;
}
.woocommerce table.shop_table th {
font-family: var(--lgt-font-head); font-weight: 700; text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.08em;
background: var(--lgt-cream); color: var(--lgt-ink); padding: 16px;
}
.woocommerce table.shop_table td { padding: 16px; border-top: 1px solid var(--lgt-line); }
.woocommerce .cart_item .product-name a { color: var(--lgt-ink); text-decoration: none; font-weight: 600; }
.woocommerce .cart_item .product-name a:hover { color: var(--lgt-olive); }
.woocommerce a.remove {
color: var(--lgt-ink) !important; border: 1px solid var(--lgt-line); border-radius: 50%;
width: 22px; height: 22px; line-height: 20px; font-size: 15px;
}
.woocommerce a.remove:hover { background: var(--lgt-olive) !important; color: #fff !important; border-color: var(--lgt-olive); }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals { float: none; width: 100%; }
.woocommerce .cart_totals h2, .woocommerce-checkout #order_review_heading,
.woocommerce .cross-sells h2 {
font-family: var(--lgt-font-head); font-weight: 900; text-transform: uppercase; font-size: 20px; margin-bottom: 16px;
}
.woocommerce-cart-form .actions .coupon input#coupon_code { border: 1px solid var(--lgt-line); padding: 12px 14px; }
.woocommerce .cart-collaterals { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,48px); margin-top: 32px; }
@media (max-width: 760px) { .woocommerce .cart-collaterals { grid-template-columns: 1fr; } }
/* ═══════════ COMMANDE (CHECKOUT) ═══════════ */
.woocommerce-checkout .col2-set, .woocommerce-checkout #customer_details { }
.woocommerce form .form-row label { font-family: var(--lgt-font-head); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lgt-ink); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container--default .select2-selection--single {
border: 1px solid var(--lgt-line); border-radius: 0; padding: 13px 14px; font-size: 15px; min-height: 46px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--lgt-olive); outline: none; }
.woocommerce-checkout #payment { background: var(--lgt-cream); border-radius: 0; border: 1px solid var(--lgt-line); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--lgt-line); }
.woocommerce-checkout #payment div.payment_box { background: #fff; border: 1px solid var(--lgt-line); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #fff; }
.woocommerce #payment #place_order, .woocommerce-checkout #place_order { width: 100%; padding: 17px; font-size: 13px; }
.woocommerce .woocommerce-checkout-review-order table.shop_table { background: #fff; }
/* ═══════════ COMPTE ═══════════ */
.woocommerce-account .woocommerce-MyAccount-navigation { width: 26%; }
.woocommerce-account .woocommerce-MyAccount-content { width: 70%; }
@media (max-width: 760px) {
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--lgt-line); }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--lgt-line); }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation li a {
display: block; padding: 14px 18px; text-decoration: none;
font-family: var(--lgt-font-head); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--lgt-ink); transition: background .15s, color .15s, box-shadow .15s;
}
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a { background: var(--lgt-cream); color: var(--lgt-olive); box-shadow: inset 3px 0 0 var(--lgt-gold); }
/* .lgt-entry habille tout le contenu de base (titres, listes, liens, adresses…)
y compris sur les pages WooCommerce ; on retire juste sa contrainte de
largeur « colonne de lecture » (760px), inutile ici. */
.lgt-wc .lgt-entry,
.woocommerce-account .lgt-entry { max-width: none; }
/* Le menu du compte (Tableau de bord, Commandes…) est du - classique :
on neutralise la puce dorée générique de .lgt-entry, qui n'a de sens que
pour du contenu éditorial (articles/pages), pas pour une navigation. */
.lgt-entry .woocommerce-MyAccount-navigation ul { padding-left: 0; }
.lgt-entry .woocommerce-MyAccount-navigation li::before { content: none; }
/* Formulaires login/register */
.woocommerce form.login, .woocommerce form.register {
border: 1px solid var(--lgt-line); border-radius: 0; padding: 28px;
}
/* ── Mes adresses (Compte → Adresses) ── */
/* .woocommerce-Addresses porte aussi la classe .col2-set, pour laquelle le
plugin ajoute un clearfix ::before/::after { content:" "; display:table }
(pensé pour l'ancien layout en float). Avec display:grid, ce pseudo-élément
devient un authentique item de grille et occupe la 1re colonne, décalant
les deux vraies adresses en colonnes 2 et 3 : on le neutralise. */
.woocommerce-Addresses.col2-set::before,
.woocommerce-Addresses.col2-set::after { content: none !important; display: none !important; }
.woocommerce-Addresses.u-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: clamp(20px, 3vw, 32px);
margin-top: 24px;
}
/* Le plugin cible spécifiquement .col2-set .col-1/.col-2 (width:48%;float:left),
plus spécifique que nos classes seules : !important nécessaire pour que les
cartes remplissent réellement leur colonne de grille. */
.woocommerce-Addresses .u-column1,
.woocommerce-Addresses .u-column2,
.woocommerce-Addresses .col-1,
.woocommerce-Addresses .col-2 { width: auto !important; float: none !important; margin: 0 !important; }
.woocommerce-Address {
border: 1px solid var(--lgt-line);
padding: clamp(20px, 3vw, 28px);
overflow: hidden; /* contient tout débordement résiduel du float du plugin */
}
/* Le plugin WooCommerce style .title en clearfix + float (h3 à gauche,
.edit à droite) — mais le gabarit rend un
, que cette règle ne cible
pas (sélecteur "h3"), d'où un chevauchement. On repasse tout en flux
normal (colonne : titre, puis bouton « Modifier » en dessous) plutôt que
de chercher à recréer un alignement sur une seule ligne, peu fiable avec
un texte aussi long (« Modifier Adresse de facturation »). */
.woocommerce-Address-title,
.woocommerce-Address .woocommerce-Address-title.title {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin: 0 0 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--lgt-line);
}
.woocommerce-Address-title::before,
.woocommerce-Address-title::after { content: none !important; }
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
float: none !important;
margin: 0;
font-family: var(--lgt-font-head);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: 15px;
color: var(--lgt-ink);
}
.woocommerce-Address-title a.edit {
float: none !important;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--lgt-font-head);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--lgt-olive);
text-decoration: none;
border: 1px solid var(--lgt-olive);
padding: 7px 14px;
white-space: normal;
text-align: left;
transition: background 0.2s ease, color 0.2s ease;
}
.woocommerce-Address-title a.edit:hover { background: var(--lgt-olive); color: #fff; }
.woocommerce-Address address {
font-size: 14.5px;
line-height: 1.8;
color: var(--lgt-mute);
}
/* ═══════════ MESSAGES / NOTICES ═══════════ */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
border-top: 3px solid var(--lgt-olive); background: var(--lgt-cream); border-radius: 0;
font-size: 14px; padding: 16px 20px 16px 46px;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--lgt-olive); }
.woocommerce-error { border-top-color: #b3261e; }
.woocommerce-error::before { color: #b3261e; }
.woocommerce-message .button, .woocommerce-info .button { padding: 8px 14px; font-size: 11px; }
/* Widgets colonne boutique éventuels */
.lgt-wc .widget-area .widget { margin-bottom: 28px; }
.lgt-wc .widget-title { font-family: var(--lgt-font-head); font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: 0.06em; margin-bottom: 12px; }
/* ════════════════════════════════════════════════════════════════
WOOCOMMERCE BLOCKS — panier & commande « blocs » (Gutenberg)
Les pages Panier / Commande récentes utilisent les blocs WooCommerce
(classes .wc-block-*), qui ne réagissent pas aux styles .woocommerce
ci-dessus. On les rebrande ici.
════════════════════════════════════════════════════════════════ */
/* Boutons pleins (soumettre, passer commande, ajouter au panier) */
.wc-block-components-button:not(.wc-block-components-button--link):not(.is-link),
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-button__link.wc-block-components-button {
background: var(--lgt-olive) !important;
color: #fff !important;
border: 0 !important;
border-radius: 0 !important;
font-family: var(--lgt-font-head);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
font-size: 12.5px;
padding: 15px 26px;
transition: background .2s, transform .2s, box-shadow .2s;
}
.wc-block-components-button:not(.wc-block-components-button--link):not(.is-link):hover {
background: var(--lgt-olive-dark) !important;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(78,92,48,0.28);
}
/* Boutons « lien » et liens */
.wc-block-components-button.wc-block-components-button--link,
.wc-block-components-button.is-link,
.wc-block-cart a, .wp-block-woocommerce-checkout a { color: var(--lgt-olive); }
/* Titres de blocs */
.wp-block-woocommerce-cart h1, .wp-block-woocommerce-checkout h1,
.wc-block-components-title, .wc-block-cart__totals-title, .wc-block-components-checkout-step__title {
font-family: var(--lgt-font-head) !important;
font-weight: 800 !important;
text-transform: uppercase;
letter-spacing: -0.01em;
}
/* Champs de formulaire (blocs) */
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-select .wc-block-components-select__container,
.wc-block-components-quantity-selector {
border-radius: 0 !important;
border-color: var(--lgt-line) !important;
}
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus { box-shadow: 0 0 0 1px var(--lgt-olive) !important; }
/* Récapitulatif de commande */
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount { font-weight: 600; }
.wc-block-components-order-summary,
.wc-block-cart__totals-title,
.wp-block-woocommerce-checkout-order-summary-block {
background: var(--lgt-cream);
}
.wc-block-cart-items__row, .wc-block-components-order-summary-item { border-color: var(--lgt-line) !important; }
/* Badge/prix accent */
.wc-block-components-product-price__value.is-discounted,
.wc-block-components-sale-badge { color: var(--lgt-gold-darker); }
.wc-block-components-sale-badge { background: var(--lgt-gold); color: var(--lgt-ink); border-radius: 0; }
/* Cross-sells sur le panier vide (grille de produits en blocs) */
.wc-block-grid__products, .wp-block-woocommerce-cart-cross-sells-block .wc-block-grid__products {
gap: clamp(16px, 2.4vw, 28px);
}
.wc-block-grid__product-title { font-family: var(--lgt-font-head); font-weight: 700; }
.wc-block-grid__product-price .amount { font-family: var(--lgt-font-head); font-weight: 800; }
/* Boutons « ajouter au panier » des grilles de blocs (wp-block-button) */
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wp-block-button.wc-block-grid__product-add-to-cart > .wp-block-button__link,
.wc-block-grid__product .wp-block-button__link,
.wp-block-woocommerce-cart .wp-block-button__link {
background: var(--lgt-olive) !important;
color: #fff !important;
border-radius: 0 !important;
border: 0 !important;
font-family: var(--lgt-font-head);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 11px;
padding: 12px 18px;
transition: background .2s, transform .2s;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid__product .wp-block-button__link:hover {
background: var(--lgt-olive-dark) !important;
transform: translateY(-2px);
}
.woocommerce div.product form.cart .variations select {
border: 1px solid var(--lgt-line);
padding: 0.5em 2.5em 0.5em 0.5em;
max-width: 300px;
transition: 0.3s;
}
.woocommerce div.product form.cart .variations select:hover {
border: 1px solid var(--lgt-olive);
}
.woocommerce ul.products li.product .price {
font-weight: 600;
margin-bottom: 0;
}
.woocommerce ul.products li.product .button {
margin-top: 0;
}