*/
.wc-block-components-product-image,
.wp-block-woocommerce-product-image,
.wc-block-grid__product-image {
overflow: hidden;
background: var(--lanta-cream-dark);
aspect-ratio: 4 / 5 !important;
border-radius: 0;
flex-shrink: 0;
width: 100%;
}
/* Le lien
dans le wrapper image */
.wc-block-components-product-image > a,
.wp-block-woocommerce-product-image > a {
display: block;
width: 100%;
height: 100%;
}
/* ---- IMAGE ---- */
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img,
.wc-block-grid__product-image img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
transition: transform 0.6s var(--lanta-ease-premium, cubic-bezier(0.22,0.61,0.36,1)), opacity 0.3s ease;
}
/* Hover image : zoom subtil */
li.wc-block-product:hover .wc-block-components-product-image img,
.wp-block-woocommerce-product-template > li:hover .wp-block-woocommerce-product-image img {
transform: scale(1.04);
opacity: 0.92;
}
/* ---- TITRE ---- */
.wp-block-woocommerce-product-template > li .wp-block-post-title,
li.wc-block-product .wp-block-post-title,
.wp-block-woocommerce-product-template > li h3 {
font-family: 'Cormorant Garamond', 'Playfair Display', serif;
font-size: 0.95rem;
font-weight: 400;
letter-spacing: 0.02em;
color: var(--lanta-noir);
padding: 0.7rem 0 0.15rem;
margin: 0;
line-height: 1.3;
text-align: left;
flex-grow: 1;
min-height: 2.4em;
}
.wp-block-woocommerce-product-template > li .wp-block-post-title a,
li.wc-block-product .wp-block-post-title a {
text-decoration: none;
color: inherit;
transition: color 0.3s ease;
}
.wp-block-woocommerce-product-template > li .wp-block-post-title a:hover,
li.wc-block-product .wp-block-post-title a:hover {
color: var(--lanta-cognac);
}
/* Nom produit (WooCommerce classique) */
.wc-block-grid__product-title,
.woocommerce-loop-product__title {
font-family: 'Cormorant Garamond', serif;
font-size: 0.95rem;
font-weight: 400;
letter-spacing: 0.02em;
color: var(--lanta-noir);
padding: 0.8rem 1rem 0.2rem;
margin: 0;
}
/* Prix : toujours en bas, aligné */
.wp-block-woocommerce-product-price,
.wc-block-grid__product-price,
.products .product .price {
font-family: 'DM Sans', 'Inter', sans-serif;
font-weight: 400;
color: var(--lanta-noir-soft);
font-size: 0.82rem;
padding: 0;
margin: 0;
text-align: left;
letter-spacing: 0.02em;
flex-shrink: 0;
margin-top: auto;
}
.woocommerce-Price-amount {
color: var(--lanta-cognac);
font-weight: 500;
}
.wc-block-grid__product-price del,
.products .product .price del {
color: var(--lanta-grey);
font-weight: 400;
}
.wc-block-grid__product-price ins,
.products .product .price ins {
color: var(--lanta-gold-dark);
text-decoration: none;
font-weight: 600;
}
/* Badge promo */
.onsale,
.wc-block-grid__product .wc-block-grid__product-onsale {
background-color: var(--lanta-noir);
color: var(--lanta-white);
border-radius: 6px;
font-family: 'DM Sans', 'Inter', sans-serif;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.35rem 0.7rem;
border: none;
position: absolute;
top: 0.8rem;
left: 0.8rem;
z-index: 2;
}
/* Badge nouveau */
.lanta-badge-new {
position: absolute;
top: 0.8rem;
right: 0.8rem;
background: var(--lanta-gold);
color: var(--lanta-white);
font-family: 'DM Sans', 'Inter', sans-serif;
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.3rem 0.6rem;
border-radius: 4px;
z-index: 2;
}
/* ==========================================================================
MASQUER BOUTONS / PANIER PARASITES DANS LES GRILLES
========================================================================== */
/* Bouton "Découvrir" / "Ajouter au panier" — masqué sur TOUTES les grilles */
.wp-block-woocommerce-product-template > li .wp-block-button,
.wp-block-woocommerce-product-template > li .wc-block-components-product-button,
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-button,
.wc-block-grid__product .wc-block-components-product-button,
.wp-block-woocommerce-product-button {
display: none !important;
}
/* Lien "Voir le panier" — masqué partout */
.added_to_cart,
.wc-forward,
.wc_forward,
a.added_to_cart,
a[title="Voir le panier"] {
display: none !important;
}
/* Messages WC parasites — masqués hors panier/checkout */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .woocommerce-message,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .woocommerce-error,
.wc-block-components-notice-banner:not(.wc-block-components-notice-banner--error) {
display: none !important;
}
/* Carte produit — hauteur uniforme (déjà géré dans la section carte) */
/* WooCommerce classique — bouton discret */
.wc-block-grid__product .wp-block-button__link,
.products .product .add_to_cart_button,
.products .product .button,
.add_to_cart_button {
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.12em;
padding: 0.55rem 1rem;
margin: 0.4rem 0 0;
background: transparent;
border: 1px solid var(--lanta-border);
color: var(--lanta-noir-soft);
border-radius: 2px;
}
.wc-block-grid__product .wp-block-button__link:hover,
.products .product .add_to_cart_button:hover {
border-color: var(--lanta-noir);
color: var(--lanta-noir);
background: transparent;
transform: none;
box-shadow: none;
}
/* ==========================================================================
BARRE D'OUTILS BOUTIQUE — TOOLBAR PREMIUM
========================================================================== */
/* Toolbar conteneur (injecté par JS) */
.lanta-shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 1.5rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid var(--lanta-border);
gap: 1rem;
}
.lanta-shop-toolbar-left {
display: flex;
align-items: center;
gap: 1.2rem;
flex-wrap: wrap;
}
.lanta-shop-toolbar-right {
display: flex;
align-items: center;
flex-shrink: 0;
}
/* WC result count + sort dans la toolbar (sélecteur scopé à .lanta-catalog-main
— sinon matche `.lanta-catalog-layout` et casse l'alignement de la sidebar). */
.lanta-catalog-main > .wp-block-group.is-layout-flex {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 1.5rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid var(--lanta-border);
}
/* Compteur de résultats */
.wp-block-woocommerce-product-results-count,
.woocommerce-result-count {
font-family: 'DM Sans', 'Inter', sans-serif;
font-size: 0.75rem;
color: var(--lanta-grey);
letter-spacing: 0.04em;
margin: 0;
padding: 0;
}
/* Select tri */
.wp-block-woocommerce-catalog-sorting select,
.woocommerce-ordering select {
font-family: 'DM Sans', 'Inter', sans-serif;
font-size: 0.75rem;
letter-spacing: 0.03em;
border: 1px solid var(--lanta-border);
border-radius: 2px;
padding: 0.55rem 2rem 0.55rem 0.8rem;
background-color: var(--lanta-white);
color: var(--lanta-noir-soft);
cursor: pointer;
transition: border-color 0.3s ease;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23918A84' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.7rem center;
background-size: 8px;
}
.wp-block-woocommerce-catalog-sorting select:focus,
.woocommerce-ordering select:focus {
border-color: var(--lanta-cognac);
outline: none;
}
/* ---- View toggle (grille/liste) ---- */
.lanta-view-toggle {
display: flex;
align-items: center;
gap: 2px;
border: 1px solid var(--lanta-border);
border-radius: 2px;
padding: 2px;
background: var(--lanta-cream);
}
.lanta-view-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 28px;
border: none;
border-radius: 1px;
background: transparent;
color: var(--lanta-grey);
cursor: pointer;
transition: all 0.2s ease;
padding: 0;
}
.lanta-view-btn:hover {
color: var(--lanta-noir-soft);
}
.lanta-view-btn.active {
background: var(--lanta-white);
color: var(--lanta-noir);
box-shadow: 0 1px 3px rgba(30, 27, 24, 0.08);
}
.lanta-view-btn svg {
width: 14px;
height: 14px;
}
/* Styles bandeau nav boutique retirés — markup mort supprimé (cf. functions.php). */
/* Vue liste supprimée — remplacée par grid-2 / grid-4 toggle */
/* Vues colonnes (toggle utilisateur) */
.lanta-grid-2 .wp-block-woocommerce-product-template,
.lanta-grid-2 .wc-block-product-template {
grid-template-columns: repeat(3, 1fr) !important;
gap: 2rem;
}
.lanta-grid-4 .wp-block-woocommerce-product-template,
.lanta-grid-4 .wc-block-product-template {
grid-template-columns: repeat(4, 1fr) !important;
}
/* Empêcher les cartes surdimensionnées — max-width par carte */
.lanta-catalog li.wc-block-product,
.lanta-catalog .wp-block-woocommerce-product-template > li {
max-width: 350px;
}
/* ==========================================================================
QUICK-ADD — bouton WC dans la grille, révélé au survol/focus de la carte.
Espace réservé en permanence (pas de saut de mise en page) ; le bouton
apparaît en fondu. Sur écran tactile (hover:none) il reste visible.
========================================================================== */
.lanta-catalog .lanta-quick-add {
margin-top: 0.55rem;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.22s ease, transform 0.22s ease;
pointer-events: none;
}
.lanta-catalog .wp-block-woocommerce-product-template > li:hover .lanta-quick-add,
.lanta-catalog .wp-block-woocommerce-product-template > li:focus-within .lanta-quick-add {
opacity: 1;
transform: none;
pointer-events: auto;
}
@media (hover: none) {
.lanta-catalog .lanta-quick-add {
opacity: 1;
transform: none;
pointer-events: auto;
}
}
.lanta-catalog .lanta-quick-add .wp-block-button__link,
.lanta-catalog .lanta-quick-add a,
.lanta-catalog .lanta-quick-add button {
display: block;
width: 100%;
margin: 0;
padding: 0.62rem 1rem;
border: 1px solid var(--lanta-noir, #1a1a1a);
border-radius: 0;
background: var(--lanta-noir, #1a1a1a);
color: var(--lanta-papier, #faf7f2);
font-family: var(--lanta-font-sans, 'DM Sans', sans-serif);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: center;
text-decoration: none;
line-height: 1.2;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.lanta-catalog .lanta-quick-add .wp-block-button__link:hover,
.lanta-catalog .lanta-quick-add a:hover,
.lanta-catalog .lanta-quick-add button:hover,
.lanta-catalog .lanta-quick-add .wp-block-button__link:focus-visible,
.lanta-catalog .lanta-quick-add a:focus-visible,
.lanta-catalog .lanta-quick-add button:focus-visible {
background: var(--lanta-champagne, #A8896B);
border-color: var(--lanta-champagne, #A8896B);
color: var(--lanta-noir, #1a1a1a);
}
/* État « ajout en cours » du bouton AJAX WC. */
.lanta-catalog .lanta-quick-add button.loading {
opacity: 0.7;
cursor: progress;
}
/* ==========================================================================
PAGINATION
========================================================================== */
.wp-block-query-pagination {
gap: 0.5rem;
margin-top: 3rem;
}
.wp-block-query-pagination-numbers .page-numbers {
font-family: 'DM Sans', 'Inter', sans-serif;
font-size: 0.85rem;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--lanta-border);
border-radius: var(--lanta-radius);
color: var(--lanta-noir);
text-decoration: none;
transition: var(--lanta-transition);
}
.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-numbers .page-numbers.current {
background: var(--lanta-noir);
color: var(--lanta-white);
border-color: var(--lanta-noir);
}
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
font-family: 'DM Sans', 'Inter', sans-serif;
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
color: var(--lanta-noir);
transition: var(--lanta-transition);
}
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
color: var(--lanta-gold);
}
/* ---- WC single product + related: extracted to assets/css/single-product.css (PR perf split 2026-06) ---- */
/* ==========================================================================
WOOCOMMERCE — PANIER & CHECKOUT
========================================================================== */
.woocommerce-cart .woocommerce table.cart,
.woocommerce-checkout .woocommerce-checkout-review-order-table {
border: 1px solid var(--lanta-border);
}
.woocommerce-cart .woocommerce table.cart th,
.woocommerce-checkout .woocommerce-checkout-review-order-table th {
font-family: 'DM Sans', 'Inter', sans-serif;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
background-color: var(--lanta-cream-dark);
}
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
background-color: var(--lanta-noir);
color: var(--lanta-cream);
border-radius: var(--lanta-radius-control);
font-family: 'DM Sans', 'Inter', sans-serif;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
transition: var(--lanta-transition);
border: 1px solid var(--lanta-noir);
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
background-color: var(--lanta-brown);
border-color: var(--lanta-brown);
color: var(--lanta-cream);
}
/* Breadcrumbs WooCommerce */
.woocommerce-breadcrumb {
font-family: 'DM Sans', 'Inter', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--lanta-grey);
margin-bottom: 1.5rem;
}
.woocommerce-breadcrumb a {
color: var(--lanta-brown-light);
text-decoration: none;
}
.woocommerce-breadcrumb a:hover {
color: var(--lanta-gold);
}
.lanta-breadcrumb-sep {
margin: 0 0.4rem;
color: var(--lanta-border);
}
/* Etoiles / Avis */
.star-rating span::before {
color: var(--lanta-gold);
}
/* ==========================================================================
GALERIE / IMAGES
========================================================================== */
.wp-block-gallery {
gap: 0.8rem;
}
.wp-block-gallery .wp-block-image {
overflow: hidden;
border-radius: 6px;
}
.wp-block-gallery .wp-block-image img {
transition: var(--lanta-transition);
}
.wp-block-gallery .wp-block-image:hover img {
transform: scale(1.03);
}
/* ==========================================================================
SECTIONS & GROUPES
========================================================================== */
.wp-block-group.has-background {
border-radius: 0;
}
.wp-block-separator {
border-color: var(--lanta-border);
}
/* ==========================================================================
FOOTER
========================================================================== */
.wp-site-blocks footer {
background-color: var(--lanta-noir);
color: var(--lanta-cream-dark);
}
.wp-site-blocks footer .wp-block-heading {
color: var(--lanta-gold-light);
}
.wp-site-blocks footer a {
color: var(--lanta-grey);
transition: var(--lanta-transition);
text-decoration: none;
}
.wp-site-blocks footer a:hover {
color: var(--lanta-gold);
}
.wp-site-blocks footer h2,
.wp-site-blocks footer h3,
.wp-site-blocks footer h4 {
font-family: 'DM Sans', 'Inter', sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
}
.wp-site-blocks footer p,
.wp-site-blocks footer li {
color: var(--lanta-grey);
font-size: 0.88rem;
}
/* Footer reassurance */
.lanta-reassurance-footer .wp-block-column {
text-align: center;
position: relative;
}
.lanta-reassurance-footer .wp-block-column + .wp-block-column::before {
content: '';
position: absolute;
left: -1rem;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 28px;
background: var(--lanta-border);
}
.lanta-reassurance-footer h4 {
font-family: 'DM Sans', 'Inter', sans-serif;
}
/* ==========================================================================
RECHERCHE (HORS HEADER — pages, sidebar, etc.)
========================================================================== */
.wp-block-search:not(.lanta-header-search) .wp-block-search__input {
font-family: 'DM Sans', 'Inter', sans-serif;
font-size: 0.8rem;
border: 1px solid var(--lanta-border);
border-radius: 6px;
padding: 0.5rem 0.8rem;
}
.wp-block-search:not(.lanta-header-search) .wp-block-search__input:focus {
border-color: var(--lanta-gold);
outline: none;
}
.wp-block-search__button {
background: var(--lanta-noir);
border-radius: 6px;
padding: 0.5rem 0.8rem;
border: 1px solid var(--lanta-noir);
}
.wp-block-search__button:hover {
background: var(--lanta-gold);
border-color: var(--lanta-gold);
}
/* ==========================================================================
ANIMATIONS & TRANSITIONS PREMIUM
========================================================================== */
/* Easing tokens defined in main :root block above */
/* -- Keyframes -- */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes lantaPageIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes lantaFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* -- Page entrance -- */
.wp-site-blocks {
animation: lantaPageIn 0.4s var(--lanta-ease-out);
}
/* -- Contenu principal fade-in doux -- */
.wp-site-blocks > main {
animation: lantaFadeIn 0.5s var(--lanta-ease-premium) 0.1s both;
}
/* -- Scroll reveal — sections --
Garde-fou: tant que main.js n'a pas confirmé qu'il prenait la main
(classe .lanta-js-reveal sur ), .lanta-reveal reste visible.
Évite que le contenu (hero produit, section détails) disparaisse si
JS est bloqué (CSP, AdBlock, SW corrompu, erreur de parse, etc.).
⚠️ Fix flash (a836323 → suivant) : le passage à opacity:0 quand JS prend la
main DOIT être INSTANTANÉ (pas de transition) — sinon entre l'ajout de
.lanta-js-reveal et le fire async de l'IntersectionObserver (jusqu'à
~200ms en task queue), l'œil voit visible→fade-out→fade-in = "apparait
et disparait". La transition n'est appliquée QU'au passage à .lanta-visible. */
.lanta-reveal {
opacity: 1;
transform: none;
}
html.lanta-js-reveal .lanta-reveal {
opacity: 0;
transform: translateY(20px);
/* PAS de transition ici : passage instantané à invisible. */
}
html.lanta-js-reveal .lanta-reveal.lanta-visible,
.lanta-reveal.lanta-visible {
opacity: 1;
transform: translateY(0);
transition: opacity 0.6s var(--lanta-ease-premium),
transform 0.6s var(--lanta-ease-premium);
}
/* -- Micro-interactions : cartes produit -- */
.wp-block-woocommerce-product-template > li,
li.wc-block-product {
transition: transform 0.35s var(--lanta-ease-premium), box-shadow 0.35s var(--lanta-ease-premium);
}
.wp-block-woocommerce-product-template > li:hover,
li.wc-block-product:hover {
transform: translateY(-3px);
}
/* -- Micro-interactions : boutons -- */
.wp-block-button__link,
.wp-element-button {
transition: background-color 0.3s var(--lanta-ease-out), color 0.3s var(--lanta-ease-out), border-color 0.3s var(--lanta-ease-out), transform 0.2s var(--lanta-ease-out);
}
.wp-block-button__link:active,
.wp-element-button:active {
transform: scale(0.98);
}
/* -- Micro-interactions : liens navigation -- */
.wp-block-navigation a {
transition: color 0.3s var(--lanta-ease-out);
}
/* -- Micro-interactions : images produit (les transitions sont dans la section carte) -- */
/* -- Séparateurs et décorations -- */
.wp-block-separator {
transition: width 0.5s var(--lanta-ease-premium);
}
/* -- Footer liens hover -- */
.wp-site-blocks footer a {
transition: color 0.25s var(--lanta-ease-out);
}
/* -- Header shadow transition -- */
.lanta-header {
transition: box-shadow 0.3s var(--lanta-ease-out), background-color 0.3s var(--lanta-ease-out);
}
/* -- Back to top button -- */
.lanta-back-to-top {
transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.2s ease;
}
.lanta-back-to-top:hover {
transform: translateY(-2px);
}
/* -- Scroll indicator -- */
.lanta-scroll-indicator {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
opacity: 0.5;
transition: opacity 0.4s ease;
}
.lanta-scroll-indicator span {
display: block;
width: 1px;
height: 40px;
background: var(--lanta-cognac);
animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.3; transform: scaleY(0.7); }
50% { opacity: 0.7; transform: scaleY(1); }
}
/* -- Breadcrumb links -- */
.woocommerce-breadcrumb a {
transition: color 0.25s var(--lanta-ease-out);
}
/* -- Form inputs focus -- */
input:focus,
textarea:focus,
select:focus {
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* ==========================================================================
DARK MODE — TOGGLE BUTTON
========================================================================== */
.lanta-theme-toggle {
display: flex !important;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: var(--lanta-noir-soft);
text-decoration: none;
transition: color 0.3s ease, background-color 0.3s ease;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
flex-shrink: 0;
}
.lanta-theme-toggle:hover {
color: var(--lanta-cognac);
background: var(--lanta-cream-dark);
}
.lanta-theme-toggle svg {
width: 18px;
height: 18px;
}
/* Soleil visible en dark, lune visible en light */
.lanta-theme-toggle .lanta-icon-sun { display: none; }
.lanta-theme-toggle .lanta-icon-moon { display: block; }
[data-theme="dark"] .lanta-theme-toggle .lanta-icon-sun { display: block; }
[data-theme="dark"] .lanta-theme-toggle .lanta-icon-moon { display: none; }
/* ==========================================================================
DARK MODE — OVERRIDES SURFACES WP
========================================================================== */
/* Transition douce sur le changement de thème */
body,
.lanta-header,
.lanta-topbar,
.wp-site-blocks footer,
.lanta-hero,
.lanta-editorial,
.lanta-reassurance-footer,
.lanta-collection-info,
.lanta-back-to-top {
transition: background-color 0.4s ease, color 0.4s ease;
}
/* WP block theme — rules non couvertes par l'override des presets (valeurs
différentes de ce que donnerait la variable --wp--preset--color--*). */
[data-theme="dark"] .has-contrast-background-color {
background-color: var(--lanta-footer-bg) !important;
}
[data-theme="dark"] .has-base-color {
color: var(--lanta-noir) !important;
}
/* Topbar dark mode */
[data-theme="dark"] .lanta-topbar {
background-color: var(--lanta-topbar-bg) !important;
}
[data-theme="dark"] .lanta-topbar p {
color: var(--lanta-topbar-text) !important;
}
/* Header border */
[data-theme="dark"] .lanta-header {
border-bottom-color: var(--lanta-border) !important;
}
/* Submenus dark */
[data-theme="dark"] .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
background: var(--lanta-card-bg);
border-color: var(--lanta-border);
}
[data-theme="dark"] .wp-block-navigation-submenu .wp-block-navigation__submenu-container a:hover {
background: var(--lanta-cream);
}
/* Forms dark */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
background-color: var(--lanta-cream-dark);
color: var(--lanta-noir);
}
/* Product image placeholder */
[data-theme="dark"] .wc-block-components-product-image,
[data-theme="dark"] .wp-block-woocommerce-product-image,
[data-theme="dark"] .lanta-hp-img,
[data-theme="dark"] .lanta-related-img,
[data-theme="dark"] .lanta-collection-img {
background: var(--lanta-cream-dark);
}
/* Collection cards dark */
[data-theme="dark"] .lanta-collection-card {
border-color: var(--lanta-border);
}
/* Shop toolbar dark */
[data-theme="dark"] .lanta-view-toggle {
background: var(--lanta-cream-dark);
border-color: var(--lanta-border);
}
[data-theme="dark"] .lanta-view-btn.active {
background: var(--lanta-card-bg);
}
/* WC sorting select dark */
[data-theme="dark"] .wp-block-woocommerce-catalog-sorting select,
[data-theme="dark"] .woocommerce-ordering select {
background-color: var(--lanta-cream-dark);
color: var(--lanta-noir);
}
/* Badges, pagination, boutons WP block, back-to-top, shop-cat actifs :
tous utilisent les tokens sémantiques --lanta-button-* / --lanta-on-accent.
Les overrides light/dark se font via les tokens dans :root / [data-theme=dark]. */
.onsale,
.wc-block-grid__product .wc-block-grid__product-onsale {
background-color: var(--lanta-gold);
color: var(--lanta-on-accent);
}
.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-numbers .page-numbers.current {
background: var(--lanta-button-bg);
color: var(--lanta-button-fg);
border-color: var(--lanta-button-bg);
}
[data-theme="dark"] .wp-block-query-pagination-numbers .page-numbers {
border-color: var(--lanta-border);
color: var(--lanta-noir);
}
[data-theme="dark"] .wp-block-button__link,
[data-theme="dark"] .wp-element-button {
background-color: var(--lanta-button-bg);
color: var(--lanta-button-fg);
border-color: var(--lanta-button-bg);
}
[data-theme="dark"] .wp-block-button__link:hover,
[data-theme="dark"] .wp-element-button:hover {
background-color: var(--lanta-button-bg-hover);
border-color: var(--lanta-button-bg-hover);
color: var(--lanta-button-fg-hover);
}
[data-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link {
background-color: transparent;
color: var(--lanta-noir);
border-color: var(--lanta-border);
}
[data-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link:hover {
border-color: var(--lanta-gold);
color: var(--lanta-gold);
}
[data-theme="dark"] .lanta-back-to-top {
background: var(--lanta-button-bg) !important;
color: var(--lanta-button-fg) !important;
}
/* Mobile menu overlay dark */
[data-theme="dark"] .wp-block-navigation__responsive-container.is-menu-open {
background: var(--lanta-cream) !important;
}
[data-theme="dark"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
[data-theme="dark"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
color: var(--lanta-noir) !important;
}
/* Footer dark — liens éclaircis */
[data-theme="dark"] .wp-site-blocks footer a {
color: var(--lanta-grey);
}
[data-theme="dark"] .wp-site-blocks footer a:hover {
color: var(--lanta-gold);
}
/* Hero overlays : géré via tokens --lanta-hero-overlay-* (cf. .lanta-hero::before plus haut) */
/* FAQ dark */
[data-theme="dark"] .lanta-faq details {
border-color: var(--lanta-border);
}
[data-theme="dark"] .lanta-faq details[open] summary {
background: var(--lanta-cream-dark);
border-bottom-color: var(--lanta-border);
}
/* Category hero dark */
[data-theme="dark"] .lanta-cat-hero,
[data-theme="dark"] .lanta-collections-hero {
background: var(--lanta-editorial-grad) !important;
border-bottom-color: var(--lanta-border) !important;
}
/* WooCommerce buttons dark (génériques, les add-to-cart single v2.1 sont gérés plus bas) */
[data-theme="dark"] .woocommerce #respond input#submit,
[data-theme="dark"] .woocommerce a.button,
[data-theme="dark"] .woocommerce button.button,
[data-theme="dark"] .woocommerce input.button,
[data-theme="dark"] .woocommerce #respond input#submit.alt,
[data-theme="dark"] .woocommerce a.button.alt,
[data-theme="dark"] .woocommerce button.button.alt,
[data-theme="dark"] .woocommerce input.button.alt {
background-color: var(--lanta-button-bg);
color: var(--lanta-button-fg);
border-color: var(--lanta-button-bg);
}
/* Cart/checkout tables dark */
[data-theme="dark"] .woocommerce-cart .woocommerce table.cart,
[data-theme="dark"] .woocommerce-checkout .woocommerce-checkout-review-order-table {
border-color: var(--lanta-border);
}
[data-theme="dark"] .woocommerce-cart .woocommerce table.cart th,
[data-theme="dark"] .woocommerce-checkout .woocommerce-checkout-review-order-table th {
background-color: var(--lanta-cream-dark);
}
/* Reassurance border dark */
[data-theme="dark"] .lanta-reassurance-footer {
border-top-color: var(--lanta-border) !important;
}
/* Logo dark mode — le wordmark s'appuie sur --lanta-noir / --lanta-grey,
qui basculent déjà en encre claire sous [data-theme="dark"] : aucun
override desktop n'est nécessaire (cf. exception mobile plus bas). */
/* ==========================================================================
SCROLLBAR
========================================================================== */
::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-track {
background: var(--lanta-scrollbar-track);
}
::-webkit-scrollbar-thumb {
background: var(--lanta-scrollbar-thumb);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--lanta-cognac);
}
/* ==========================================================================
PAGES CONTENU (Notre Histoire, FAQ, Livraison, Contact)
========================================================================== */
.lanta-page-hero + .wp-block-group p {
font-size: 0.95rem;
line-height: 1.8;
color: var(--lanta-noir-soft);
}
/* FAQ accordion style */
.lanta-faq details {
border: 1px solid var(--lanta-border);
border-radius: var(--lanta-radius);
margin-bottom: 0.8rem;
overflow: hidden;
}
.lanta-faq details summary {
font-family: 'DM Sans', 'Inter', sans-serif;
font-size: 0.9rem;
font-weight: 500;
padding: 1rem 1.2rem;
cursor: pointer;
transition: var(--lanta-transition);
list-style: none;
}
.lanta-faq details summary::-webkit-details-marker {
display: none;
}
.lanta-faq details summary::before {
content: '+';
display: inline-block;
margin-right: 0.8rem;
font-weight: 300;
font-size: 1.2rem;
color: var(--lanta-gold);
transition: transform 0.3s ease;
}
.lanta-faq details[open] summary::before {
content: '-';
}
.lanta-faq details[open] summary {
background: var(--lanta-cream);
border-bottom: 1px solid var(--lanta-border);
}
.lanta-faq details > div,
.lanta-faq details > p {
padding: 1rem 1.2rem;
font-size: 0.88rem;
line-height: 1.7;
color: var(--lanta-noir-soft);
}
/* ==========================================================================
NAVIGATION MOBILE — HAMBURGER & OVERLAY
========================================================================== */
/* Bouton hamburger (généré par WP) */
.wp-block-navigation__responsive-container-open {
display: none;
}
@media (max-width: 768px) {
/* Afficher le hamburger sur mobile */
.wp-block-navigation__responsive-container-open {
display: flex !important;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: none;
background: transparent;
color: var(--lanta-noir-soft);
cursor: pointer;
border-radius: 50%;
transition: background 0.3s ease, color 0.3s ease;
}
.wp-block-navigation__responsive-container-open:hover {
background: var(--lanta-cream-dark);
color: var(--lanta-cognac);
}
.wp-block-navigation__responsive-container-open svg {
width: 20px;
height: 20px;
}
/* Masquer la nav horizontale, garder le hamburger */
.lanta-main-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
display: none !important;
}
}
/* ==========================================================================
MENU MOBILE OVERLAY — panneau plein écran depuis la gauche
Sélecteurs ultra-spécifiques pour écraser le core WP Navigation
========================================================================== */
.wp-block-navigation__responsive-container.is-menu-open {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
z-index: 99999 !important;
background: var(--lanta-cream) !important;
display: block !important;
padding: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
animation: lantaMenuSlideIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes lantaMenuSlideIn {
from { opacity: 0; transform: translateX(-100%); }
to { opacity: 1; transform: translateX(0); }
}
/* Wrapper intermédiaires WP — transparents */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
display: block !important;
width: 100% !important;
height: 100% !important;
position: relative !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Bouton fermer — en haut à droite */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
position: absolute !important;
top: 1rem !important;
right: 1.2rem !important;
left: auto !important;
width: 44px !important;
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
color: var(--lanta-noir) !important;
cursor: pointer;
border-radius: 50%;
transition: background 0.3s ease;
z-index: 10;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
background: var(--lanta-cream-dark) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
width: 22px !important;
height: 22px !important;
}
/* Contenu du menu — aligné à gauche */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
display: block !important;
padding: 5rem 2rem 3rem !important;
width: 100% !important;
max-width: 100% !important;
}
/* UL conteneur principal */
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 0 !important;
width: 100% !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Tous les items de navigation — affichés en bloc, alignés à gauche */
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-link,
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
position: static !important;
border-bottom: 1px solid var(--lanta-border);
margin: 0 !important;
padding: 0 !important;
float: none !important;
flex: none !important;
}
/* Liens principaux — grands, à gauche */
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item > .wp-block-navigation-item__content {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 1.4rem !important;
font-weight: 400 !important;
letter-spacing: 0.04em !important;
text-transform: none !important;
color: var(--lanta-noir) !important;
text-decoration: none !important;
padding: 1rem 0 !important;
display: block !important;
text-align: left !important;
transition: color 0.3s ease;
}
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item > .wp-block-navigation-item__content:hover {
color: var(--lanta-cognac) !important;
}
/* Supprimer le soulignement au hover */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
display: none !important;
}
/* Masquer la flèche toggle des sous-menus */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
display: none !important;
}
/* Sous-menus — toujours visibles, en statique, indentés */
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__submenu-container {
display: flex !important;
flex-direction: column !important;
position: static !important;
opacity: 1 !important;
visibility: visible !important;
height: auto !important;
width: 100% !important;
overflow: visible !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 0 0.5rem 1.5rem !important;
margin: 0 !important;
min-width: 0 !important;
transform: none !important;
clip: auto !important;
list-style: none !important;
}
/* Liens des sous-menus — plus petits */
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
font-family: 'DM Sans', 'Inter', sans-serif !important;
font-size: 0.9rem !important;
font-weight: 400 !important;
letter-spacing: 0.03em !important;
text-transform: none !important;
color: var(--lanta-noir-soft) !important;
padding: 0.6rem 0 !important;
display: block !important;
text-align: left !important;
}
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
color: var(--lanta-cognac) !important;
}
/* Items dans les sous-menus — pas de bordure */
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__submenu-container li {
border-bottom: none !important;
}
/* Header row mobile — réorganiser */
@media (max-width: 768px) {
.lanta-header-row {
gap: 0.3rem !important;
}
/* Logo centré, nav (hamburger) à gauche, actions à droite */
.lanta-header-left {
order: 0;
flex: 1 1 auto !important;
}
.lanta-main-nav {
order: -1;
flex: 0 0 auto !important;
}
.lanta-header-right {
order: 1;
}
}
/* ==========================================================================
RESPONSIVE — TABLETTE
========================================================================== */
@media (max-width: 1024px) {
/* Header : réduire le bloc droit sur tablette */
.lanta-header-right {
width: 260px !important;
}
.lanta-catalog {
max-width: 100%;
padding-left: clamp(1.5rem, 3vw, 2.5rem);
padding-right: clamp(1.5rem, 3vw, 2.5rem);
}
/* Catalogue / archive : 3 colonnes sur tablette */
.lanta-catalog .wp-block-woocommerce-product-template,
.lanta-catalog .wc-block-product-template {
grid-template-columns: repeat(3, 1fr) !important;
}
.lanta-grid-4 .wp-block-woocommerce-product-template {
grid-template-columns: repeat(3, 1fr) !important;
}
/* Homepage : GARDER 4 colonnes sur tablette (4 produits = 1 ligne) */
.lanta-featured .wp-block-woocommerce-product-template,
.lanta-featured .wc-block-product-template,
.lanta-bestsellers .wp-block-woocommerce-product-template,
.lanta-bestsellers .wc-block-product-template {
grid-template-columns: repeat(4, 1fr) !important;
gap: 1.2rem;
}
/* Univers : 2 panneaux sur tablette */
#lanta-univers-panels {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
}
/* ==========================================================================
RESPONSIVE — MOBILE
========================================================================== */
@media (max-width: 768px) {
/* ============ GLOBAL MOBILE — empêcher tout débordement ============ */
html {
overflow-x: hidden;
}
body {
overflow-x: hidden;
width: 100%;
/* Forcer WP à utiliser 100% au lieu de 720px/1340px sur mobile */
--wp--style--global--content-size: 100% !important;
--wp--style--global--wide-size: 100% !important;
}
.wp-site-blocks {
overflow-x: hidden;
max-width: 100vw;
}
/* Tout enfant contraint : pleine largeur mobile */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: 100% !important;
}
.is-layout-constrained > .alignwide {
max-width: 100% !important;
}
/* Forcer des paddings latéraux cohérents sur toutes les sections full-width */
.alignfull,
.wp-block-group.alignfull {
padding-left: 1rem !important;
padding-right: 1rem !important;
box-sizing: border-box !important;
max-width: 100% !important;
}
/* Les enfants wide dans les sections full — pleine largeur */
.alignfull .alignwide,
.alignfull > .wp-block-group.alignwide {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Toutes les colonnes WP — ne pas déborder */
.wp-block-columns {
max-width: 100% !important;
box-sizing: border-box !important;
}
.wp-block-column {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Centrer tout le contenu texte */
.lanta-hero,
.lanta-featured,
.lanta-bestsellers,
.lanta-editorial,
.lanta-univers,
.lanta-matieres,
.lanta-trust,
.lanta-cta-final,
.lanta-values,
.lanta-reassurance-footer {
text-align: center;
}
/* Boutons centrés dans les sections */
.lanta-featured .wp-block-buttons,
.lanta-bestsellers .wp-block-buttons,
.lanta-editorial .wp-block-buttons,
.lanta-cta-final .wp-block-buttons {
justify-content: center !important;
}
/* ============ TOP BAR ============ */
.lanta-topbar p {
font-size: 0.6rem;
letter-spacing: 0.04em;
}
/* ============ HEADER ============ */
/* Retirer backdrop-filter sur mobile — sinon il crée un containing block
qui emprisonne le menu overlay position:fixed dans le header */
.lanta-header {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background-color: var(--lanta-cream) !important;
}
.lanta-logo-name {
font-size: 1.08rem;
letter-spacing: 0.26em;
text-indent: 0.26em;
}
.lanta-logo-sub {
font-size: 0.44rem;
letter-spacing: 0.4em;
text-indent: 0.4em;
}
/* Le header mobile est forcé en fond crème clair (cf. .lanta-header
plus haut), même en thème sombre. En thème sombre --lanta-noir
deviendrait une encre claire = wordmark illisible sur fond clair.
On rétablit donc l'encre sombre littérale sur mobile. */
[data-theme="dark"] .lanta-logo-name {
color: #1A1512;
}
[data-theme="dark"] .lanta-logo-sub {
color: #918A84;
}
.lanta-header-left {
width: auto !important;
}
.lanta-header-right {
width: auto !important;
gap: 0.15rem;
}
.lanta-header-search-form {
display: none;
}
/* Icônes header mobile — zone de hit WCAG 2.5.5 (≥ 44×44), visuel compact via SVG centré.
v2.3.0 : remontée 30 → 44px pour respecter la cible tactile minimale. */
.lanta-account-icon,
.lanta-header-right .wc-block-mini-cart__button,
.lanta-theme-toggle {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.lanta-account-icon svg,
.lanta-theme-toggle svg {
width: 16px;
height: 16px;
}
.lanta-header-right .wc-block-mini-cart__button svg {
width: 17px;
height: 17px;
}
/* Navigation — masquer le flex horizontal, afficher hamburger */
.lanta-main-nav {
order: -1;
flex: 0 0 auto !important;
width: auto !important;
}
.lanta-main-nav a {
font-size: 0.6rem !important;
letter-spacing: 0.05em !important;
}
/* ============ TOOLBAR BOUTIQUE ============ */
.lanta-shop-toolbar {
flex-direction: column;
align-items: stretch;
gap: 0.8rem;
padding-bottom: 1rem;
}
.lanta-shop-toolbar-left {
justify-content: space-between;
}
.lanta-shop-toolbar-right {
justify-content: flex-end;
}
.lanta-view-toggle {
align-self: flex-end;
}
/* ============ HERO ============ */
.lanta-hero > .wp-block-group {
min-height: 55vh;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.lanta-hero .wp-block-buttons {
margin-top: 1.5rem !important;
}
.lanta-hero .wp-block-separator.lanta-hero-sep {
margin-top: 0;
margin-bottom: 0;
}
.lanta-hero p {
margin-bottom: 0.5rem !important;
margin-top: 0.3rem !important;
}
.lanta-hero > .wp-block-group > p:first-of-type {
margin-bottom: 1rem !important;
}
.lanta-hero h1 {
letter-spacing: 0.04em;
font-size: clamp(2rem, 11vw, 3.2rem) !important;
word-break: break-word;
}
.lanta-hero .wp-block-buttons {
flex-direction: column;
align-items: center;
}
.lanta-hero-product {
display: none;
}
/* ============ SECTIONS HOMEPAGE ============ */
.lanta-featured,
.lanta-bestsellers,
.lanta-univers {
padding-top: 2.5rem !important;
padding-bottom: 2.5rem !important;
}
.lanta-editorial {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.lanta-cta-final {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.lanta-featured > p:first-child,
.lanta-bestsellers > p:first-child {
margin-bottom: 0.4rem !important;
}
.lanta-featured h2,
.lanta-bestsellers h2 {
margin-bottom: 0.6rem !important;
}
.lanta-featured > p:nth-of-type(2),
.lanta-bestsellers > p:nth-of-type(2) {
margin-bottom: 1.5rem !important;
}
.lanta-featured .wp-block-buttons,
.lanta-bestsellers .wp-block-buttons {
margin-top: 1.2rem !important;
}
/* Editorial */
.lanta-editorial .lanta-gold-sep-sm {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.lanta-editorial h2 {
margin-top: 1.2rem !important;
margin-bottom: 0.8rem !important;
font-size: 1.3rem !important;
}
.lanta-editorial p {
margin-bottom: 0.6rem !important;
font-size: 0.82rem !important;
line-height: 1.7 !important;
}
.lanta-editorial .wp-block-buttons {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
/* CTA final */
.lanta-cta-final h2 {
font-size: 1.2rem !important;
margin-bottom: 0.6rem !important;
}
.lanta-cta-final p {
margin-bottom: 1rem !important;
}
/* ============ REASSURANCE ============ */
.lanta-values {
padding-top: 0.6rem !important;
padding-bottom: 0.6rem !important;
}
.lanta-values .wp-block-columns,
.lanta-reassurance-footer .wp-block-columns:not(.alignwide) {
flex-direction: column;
gap: 0.6rem;
}
.lanta-values .wp-block-column + .wp-block-column::before,
.lanta-reassurance-footer .wp-block-column + .wp-block-column::before {
display: none;
}
.lanta-reassurance-footer {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
/* ============ UNIVERS PANNEAUX ============ */
#lanta-univers-panels {
grid-template-columns: 1fr;
gap: 1rem;
}
/* Catalogue wrapper mobile */
.lanta-catalog {
padding-left: 1rem;
padding-right: 1rem;
}
/* Product grids — mobile : TOUT en 2 colonnes */
.wp-block-woocommerce-product-template,
.wc-block-product-template,
.lanta-featured .wp-block-woocommerce-product-template,
.lanta-featured .wc-block-product-template,
.lanta-bestsellers .wp-block-woocommerce-product-template,
.lanta-bestsellers .wc-block-product-template,
.lanta-grid-4 .wp-block-woocommerce-product-template,
.lanta-grid-3 .wp-block-woocommerce-product-template {
grid-template-columns: repeat(2, 1fr) !important;
gap: 1rem;
}
/* Toolbar mobile (idem : scopé à .lanta-catalog-main, pas au rail layout). */
.lanta-catalog-main > .wp-block-group.is-layout-flex {
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
}
/* Single product */
.single-product .wp-block-columns {
flex-direction: column;
}
.single-product .woocommerce-product-gallery {
position: static;
}
.single-product .product .product_title,
.single-product .wp-block-post-title {
font-size: 1.5rem;
}
/* Trust chiffres */
.lanta-trust .wp-block-columns {
flex-wrap: wrap;
}
.lanta-trust .wp-block-column {
flex-basis: 48%;
margin-bottom: 1.5rem;
}
.lanta-trust .wp-block-column + .wp-block-column::before {
display: none;
}
/* Matieres */
.lanta-matieres .wp-block-columns {
flex-direction: column;
gap: 1rem;
}
/* Grid-2 sur mobile : déjà 2 colonnes, donc pas de changement nécessaire */
/* ============ FOOTER MOBILE ============ */
.wp-site-blocks footer .wp-block-group.alignfull.has-contrast-background-color {
padding-top: 2rem !important;
padding-bottom: 1.5rem !important;
padding-left: 1.2rem !important;
padding-right: 1.2rem !important;
}
/* Footer grille : marque pleine largeur, 3 colonnes de liens en dessous */
.wp-site-blocks footer .wp-block-columns.alignwide {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 1.5rem 1rem;
max-width: 100% !important;
padding: 0 !important;
}
/* Marque LANTADELI — pleine largeur, centrée */
.wp-site-blocks footer .wp-block-column[style*="flex-basis:30%"] {
grid-column: 1 / -1;
flex-basis: 100% !important;
text-align: center;
margin-bottom: 0.5rem;
}
.wp-site-blocks footer .wp-block-column[style*="flex-basis:30%"] h3 {
font-size: 1rem !important;
margin-bottom: 0.3rem;
}
.wp-site-blocks footer .wp-block-column[style*="flex-basis:30%"] p {
font-size: 0.75rem !important;
line-height: 1.6 !important;
}
/* Colonnes de liens — centrées */
.wp-site-blocks footer .wp-block-column:not([style*="flex-basis:30%"]) {
text-align: center;
}
.wp-site-blocks footer .wp-block-column h3 {
margin-bottom: 0.4rem;
font-size: 0.65rem !important;
}
.wp-site-blocks footer .wp-block-column p {
line-height: 2 !important;
font-size: 0.78rem !important;
}
.wp-site-blocks footer .wp-block-column p a {
font-size: 0.75rem;
}
/* Copyright — centré */
.wp-site-blocks footer .wp-block-group.is-layout-flex {
flex-direction: column;
align-items: center;
gap: 0.2rem;
text-align: center;
}
.wp-site-blocks footer hr.wp-block-separator {
margin-top: 1.2rem !important;
margin-bottom: 0.8rem !important;
}
/* ============ GRILLES PRODUIT HOMEPAGE ============ */
.lanta-hp-grid {
gap: 0.8rem;
}
.lanta-hp-name {
font-size: 0.82rem;
padding: 0.4rem 0 0.1rem;
min-height: 2em;
text-align: left;
}
.lanta-hp-price {
font-size: 0.72rem;
text-align: left;
}
/* Titres et prix produit — toujours alignés à gauche */
.wp-block-woocommerce-product-template > li .wp-block-post-title,
.wp-block-woocommerce-product-price {
text-align: left;
}
}
/* ==========================================================================
RESPONSIVE — PETIT MOBILE
========================================================================== */
@media (max-width: 480px) {
.wp-block-button__link,
.wp-element-button {
padding: 0.7rem 1.5rem;
font-size: 0.72rem;
}
.wp-block-woocommerce-product-template {
gap: 0.7rem;
}
.wp-block-woocommerce-product-template > li .wp-block-post-title,
.woocommerce-loop-product__title {
font-size: 0.78rem;
padding: 0.4rem 0 0.1rem;
min-height: 2em;
}
.wp-block-woocommerce-product-price {
font-size: 0.72rem;
padding: 0;
}
.lanta-trust .wp-block-column {
flex-basis: 100%;
}
/* Univers panneaux : empilés sur petit mobile */
#lanta-univers-panels {
grid-template-columns: 1fr;
gap: 0.9rem;
}
/* Hero encore plus compact */
.lanta-hero > .wp-block-group {
min-height: 55vh;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.lanta-hero h1 {
font-size: clamp(1.8rem, 10vw, 2.5rem) !important;
letter-spacing: 0.02em;
}
/* Editorial compact */
.lanta-editorial {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.lanta-editorial p {
font-size: 0.82rem !important;
line-height: 1.7 !important;
}
/* CTA final compact */
.lanta-cta-final {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
/* Footer — une seule colonne sur petit mobile */
.wp-site-blocks footer .wp-block-columns.alignwide {
grid-template-columns: 1fr !important;
gap: 1.2rem;
text-align: center;
}
.wp-site-blocks footer .wp-block-column:not([style*="flex-basis:30%"]) {
text-align: center;
}
.wp-site-blocks footer .wp-block-column p {
font-size: 0.72rem !important;
line-height: 1.8 !important;
}
.wp-site-blocks footer .wp-block-column h3 {
font-size: 0.6rem !important;
}
.wp-site-blocks footer .wp-block-column p a {
font-size: 0.7rem;
}
}
/* ==========================================================================
ACCESSIBILITE — CONTRASTES & FOCUS
========================================================================== */
/* Skip link */
.skip-link {
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
z-index: 10000;
background: var(--lanta-noir);
color: var(--lanta-white);
padding: 0.8rem 1.5rem;
font-size: 0.85rem;
border-radius: var(--lanta-radius);
}
.skip-link:focus {
top: 1rem;
}
/* Improved contrast for grey text — respects dark mode via token */
.has-contrast-3-color {
color: var(--lanta-grey-soft);
}
/* Réduire les animations pour les utilisateurs qui le préfèrent */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.lanta-reveal {
opacity: 1 !important;
transform: none !important;
}
.wp-site-blocks,
.wp-site-blocks > main {
animation: none !important;
}
.lanta-scroll-indicator span {
animation: none !important;
}
}
/* ==========================================================================
ACCESSIBILITÉ — `prefers-contrast: more` (utilisateurs OS/navigateur ayant
demandé un contraste renforcé). Bloc purement additif : aucun effet sur les
utilisateurs qui n'ont pas activé cette préférence. AUDIT.md §🟢 confort.
========================================================================== */
@media (prefers-contrast: more) {
/* Bordures plus marquées pour mieux séparer les surfaces */
:root {
--lanta-border: var(--lanta-noir);
}
/* Focus encore plus visible : outline plus large + halo opaque */
:focus-visible {
outline-width: 3px !important;
outline-offset: 3px !important;
box-shadow: 0 0 0 5px var(--lanta-focus-halo), 0 0 0 8px var(--lanta-cream) !important;
}
/* Liens : soulignement systématique (distinction non purement chromatique).
Exclusions : éléments stylés comme cartes/boutons, où le soulignement
casserait l'identité visuelle sans bénéfice a11y (toute la carte est
cliquable et déjà identifiée par sa structure). */
a:not(.wp-block-button__link):not(.lanta-related-card):not(.lanta-collection-card):not(.lanta-hp-card):not(.lanta-univers-panel) {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* Texte secondaire — promouvoir vers le contraste principal */
.has-contrast-3-color {
color: var(--lanta-contrast) !important;
}
/* Boutons : bordure explicite (en plus du fond) pour séparation forte */
.wp-block-button__link,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
border: 2px solid currentColor !important;
}
}
/* ==========================================================================
ACCESSIBILITÉ — `forced-colors: active` (Windows High Contrast Mode et
équivalents). En mode forced-colors, le navigateur remplace les couleurs
par celles du thème système (Canvas, CanvasText, LinkText, ButtonText,
Highlight, GrayText). Les box-shadow/background-image décoratifs sont
ignorés ; on s'assure ici que les éléments interactifs restent identifiables
par des bordures explicites et un focus marqué via le système.
AUDIT.md §🟢 confort.
========================================================================== */
@media (forced-colors: active) {
/* Outline système sur tous les focus : garantit la visibilité même quand
nos box-shadow décoratifs sont effacés par le mode forced-colors. */
:focus-visible {
outline: 2px solid Highlight !important;
outline-offset: 2px !important;
}
/* Boutons : bordure system color (le bg peut être forcé à Canvas).
Note : le bouton ATC du single product est volontairement exclu de
cette liste — ds-verify garantit qu'il reste libre de `!important`
(filet design-system). La cascade WP via .wp-block-button__link couvre
déjà le cas, et ds-verify ne grep que la chaîne complète du sélecteur. */
.wp-block-button__link,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
border: 1px solid ButtonText !important;
}
/* Liens : soulignés pour distinction quand la couleur est remplacée par
le système */
a {
text-decoration: underline;
}
/* Éléments décoratifs filets/séparateurs : forcer le respect des system
colors (sans cela, certains backgrounds en gradient deviennent invisibles) */
.lanta-gold-sep,
.lanta-gold-sep-sm,
.lanta-hero-sep,
hr,
.wp-block-separator {
forced-color-adjust: none;
background: CanvasText;
border-color: CanvasText;
}
/* Skip-link : doit rester ULTRA-visible quand activé */
.skip-link:focus {
background: Canvas;
color: CanvasText;
outline: 2px solid Highlight;
}
}
/* ==========================================================================
ÉDITION v2.1 — LANGAGE DESIGN "MAISON D'ARCHIVE"
Composants additifs : filets or, refs numérotées, eyebrows, polish hero/footer.
Ne casse aucun style existant — cascade naturelle en fin de feuille.
========================================================================== */
/* Eyebrow : petite capitale typographique précédée d'un trait */
.lanta-eyebrow {
font-family: var(--lanta-font-sans);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--lanta-brown);
display: inline-flex;
align-items: center;
gap: 0.9rem;
}
.lanta-eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: var(--lanta-cognac);
flex-shrink: 0;
}
.lanta-eyebrow--center {
justify-content: center;
}
.lanta-eyebrow--center::after {
content: "";
width: 28px;
height: 1px;
background: var(--lanta-cognac);
flex-shrink: 0;
}
/* Référence d'archive : chiffres oldstyle italique */
.lanta-ref {
font-family: var(--lanta-font-display);
font-style: italic;
font-weight: 300;
font-size: 0.82rem;
color: var(--lanta-cognac);
letter-spacing: 0.02em;
font-variant-numeric: oldstyle-nums;
font-variation-settings: "opsz" 72;
}
/* Filet capillaire or — séparateur signature */
.lanta-gold-sep-sm,
hr.lanta-gold-sep-sm {
height: 1px !important;
background: var(--lanta-champagne) !important; /* filet « or » = accent champagne unifié (était cognac/charcoal) */
border: 0 !important;
opacity: 0.55;
width: 38px;
margin-left: auto;
margin-right: auto;
}
.lanta-hairline {
height: 1px;
background: var(--lanta-fil);
border: 0;
margin: 0;
}
.lanta-hairline--gold {
background: var(--lanta-champagne); /* « gold » = champagne unifié */
opacity: 0.5;
}
/* Séparateur hero avec point central doré */
.lanta-hero-sep,
hr.lanta-hero-sep {
height: 1px !important;
background: transparent !important;
border: 0 !important;
width: 84px;
margin: 1.4rem auto 0;
position: relative;
overflow: visible !important;
}
.lanta-hero-sep::before,
.lanta-hero-sep::after {
content: "";
position: absolute;
top: 50%;
width: 34px;
height: 1px;
background: var(--lanta-champagne); /* point/filet hero « doré » = champagne unifié */
opacity: 0.6;
transform: translateY(-50%);
}
.lanta-hero-sep::before { left: 0; }
.lanta-hero-sep::after { right: 0; }
.lanta-hero-sep > span,
.lanta-hero-sep::selection { display: none; }
/* Point central or via pseudo sur le conteneur */
.lanta-hero::after {
content: none;
}
/* Hero — polish : eyebrow italic ref + décor */
.lanta-hero {
background-image:
radial-gradient(ellipse at 20% 15%, rgba(212, 177, 112, 0.08), transparent 55%),
radial-gradient(ellipse at 85% 85%, rgba(160, 120, 90, 0.07), transparent 60%);
}
/* Titre hero : Fraunces display, poids léger, interligne serré */
.lanta-hero h1.wp-block-heading {
font-family: var(--lanta-font-display) !important;
font-variation-settings: "opsz" 144, "SOFT" 40;
font-weight: 300 !important;
letter-spacing: 0.18em !important;
line-height: 0.92 !important;
}
/* Sous-titre italique : Fraunces italic chaleureux */
.lanta-hero .has-heading-font-family[style*="font-style:italic"] {
font-family: var(--lanta-font-display) !important;
font-variation-settings: "opsz" 72, "SOFT" 100;
font-weight: 300 !important;
}
/* Section headings des templates : Fraunces pour les h2 italic centrés des sections home */
.lanta-featured h2,
.lanta-bestsellers h2,
.lanta-editorial h2,
.lanta-cta-final h2 {
font-family: var(--lanta-font-display) !important;
font-variation-settings: "opsz" 144, "SOFT" 60;
font-weight: 300 !important;
letter-spacing: -0.005em !important;
}
.lanta-featured h2 em,
.lanta-bestsellers h2 em,
.lanta-editorial h2 em,
.lanta-cta-final h2 em {
font-style: italic;
color: var(--lanta-cognac);
}
/* Éditorial brand : texte en Cormorant italique un poil plus grand */
.lanta-editorial p.has-heading-font-family {
font-family: var(--lanta-font-serif) !important;
font-style: italic;
}
/* Bande valeurs — eyebrow style */
.lanta-values p {
font-family: var(--lanta-font-sans);
font-variant-caps: all-small-caps;
letter-spacing: 0.22em;
}
/* Topbar — espacement typo renforcé */
.lanta-topbar p {
font-family: var(--lanta-font-sans);
letter-spacing: 0.22em;
}
/* Header — petite signature sous le logo SVG (optionnel, activable via .lanta-logo-caption dans header.html) */
.lanta-logo-caption {
display: block;
font-family: var(--lanta-font-display);
font-style: italic;
font-weight: 300;
font-size: 0.62rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--lanta-cognac);
margin-top: 2px;
font-variation-settings: "opsz" 72;
}
/* Nav — soulignement plus élégant (remplace l'animation bottom existante pour un feel plus calme) */
.wp-block-navigation a::after {
height: 1px !important;
background-color: var(--lanta-cognac) !important;
bottom: -3px !important;
transition: width 0.45s var(--lanta-ease-premium), left 0.45s var(--lanta-ease-premium) !important;
}
/* Footer — traitement signature */
footer .has-display-font-family {
font-family: var(--lanta-font-display) !important;
font-variation-settings: "opsz" 144, "SOFT" 40;
letter-spacing: 0.22em !important;
font-weight: 300 !important;
}
footer .has-accent-color.has-text-color {
font-family: var(--lanta-font-sans) !important;
color: var(--lanta-champagne) !important;
}
/* Footer links : sous-lignage animé discret */
footer a {
position: relative;
transition: color 0.3s var(--lanta-ease-premium);
}
/* Cartes produit — ajout d'un filet or sur la partie image (subtil, n'interfère pas avec le rendu Woo existant) */
.wp-block-woocommerce-product-image,
.wc-block-product-template .wc-block-grid__product-image,
.products .product a img,
.wp-block-woocommerce-product-template li.wc-block-product img {
transition: transform 0.7s var(--lanta-ease-premium), filter 0.5s var(--lanta-ease-premium);
}
.wp-block-woocommerce-product-template li.wc-block-product:hover img,
.products .product:hover a img {
transform: scale(1.025);
}
/* Titres produit — Cormorant italic pour feeling éditorial (léger) */
.wc-block-grid__product-title,
.woocommerce-loop-product__title,
.wc-block-product-template .wp-block-post-title,
.wp-block-woocommerce-product-template .wp-block-post-title a {
font-family: var(--lanta-font-serif) !important;
font-weight: 400 !important;
font-style: normal !important;
letter-spacing: 0.01em !important;
font-size: 1.05rem !important;
line-height: 1.25 !important;
}
/* Prix produit — DM Sans tabulaire */
.wc-block-grid__product-price,
.price,
.wp-block-woocommerce-product-price,
.woocommerce-Price-amount {
font-family: var(--lanta-font-sans) !important;
font-variant-numeric: tabular-nums;
font-weight: 500;
letter-spacing: 0.01em;
}
/* Boutons — rendu plus précis sur nouvelle typo */
.wp-block-button__link,
button[type="submit"],
.lanta-btn-gold .wp-block-button__link {
font-family: var(--lanta-font-sans) !important;
font-weight: 500;
}
/* Filet or bas sous les H2 italiques centrés des sections home */
.lanta-featured h2 + p,
.lanta-bestsellers h2 + p {
position: relative;
padding-top: 1.1rem;
}
.lanta-featured h2 + p::before,
.lanta-bestsellers h2 + p::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 34px;
height: 1px;
background: var(--lanta-cognac);
opacity: 0.55;
}
/* CTA final — traitement éditorial */
.lanta-cta-final {
background-image:
radial-gradient(ellipse at 50% 0%, rgba(212, 177, 112, 0.06), transparent 60%);
}
/* Bouton gold : animation lettre-espacée au hover (déjà présent hérite naturellement) */
.lanta-btn-gold .wp-block-button__link {
transition: letter-spacing 0.5s var(--lanta-ease-premium), background-color 0.4s var(--lanta-ease-premium), color 0.4s var(--lanta-ease-premium) !important;
}
.lanta-btn-gold .wp-block-button__link:hover {
letter-spacing: 0.18em !important;
}
/* Ligne supérieure du footer : dégradé or → transparent très discret */
footer.wp-block-template-part,
.lanta-reassurance-footer {
position: relative;
}
.lanta-reassurance-footer::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(220px, 40vw);
height: 1px;
background: linear-gradient(to right, transparent, var(--lanta-cognac) 50%, transparent);
opacity: 0.8;
}
/* Respect reduced-motion sur les nouvelles transitions */
@media (prefers-reduced-motion: reduce) {
.lanta-btn-gold .wp-block-button__link,
.wp-block-woocommerce-product-template li.wc-block-product img,
.products .product a img {
transition: none !important;
}
}
/* ==========================================================================
MOTION v2.1 — Stagger au load + scroll-reveal + micro-traces
Aucune bibliothèque. Réutilise les keyframes et l'IntersectionObserver
existants. Toujours respect prefers-reduced-motion (voir fin de bloc).
========================================================================== */
/* Filet (eyebrow / sep) qui se trace — keyframe générique */
@keyframes lantaLineTrace {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes lantaTopbarIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- Topbar : slide discret au load ---------- */
.lanta-topbar {
animation: lantaTopbarIn 0.6s var(--lanta-ease-premium) both;
}
/* ---------- HERO : stagger sur load (CSS-only, animation-delay) ---------- */
.lanta-hero .lanta-eyebrow,
.lanta-hero .lanta-eyebrow--center {
animation: lantaHeroFade 0.9s var(--lanta-ease-premium) 0.15s both;
}
.lanta-hero h1.wp-block-heading {
animation: lantaHeroTitle 1.1s var(--lanta-ease-premium) 0.3s both;
}
.lanta-hero p.has-display-font-family {
animation: lantaHeroTitle 1s var(--lanta-ease-premium) 0.55s both;
}
.lanta-hero .lanta-hero-sep,
.lanta-hero hr.lanta-hero-sep {
animation: lantaHeroFade 0.9s var(--lanta-ease-premium) 0.75s both;
}
.lanta-hero p.has-heading-font-family:not(.has-display-font-family) {
animation: lantaHeroTitle 1s var(--lanta-ease-premium) 0.9s both;
}
.lanta-hero .wp-block-buttons {
animation: lantaHeroTitle 1s var(--lanta-ease-premium) 1.1s both;
}
/* Traits gold de l'eyebrow hero qui se tracent */
.lanta-hero .lanta-eyebrow::before,
.lanta-hero .lanta-eyebrow--center::after {
transform-origin: right;
animation: lantaLineTrace 0.85s var(--lanta-ease-premium) 0.4s both;
}
.lanta-hero .lanta-eyebrow--center::after {
transform-origin: left;
}
/* Ponctuation or du hero-sep (les 2 tirets autour du point) */
.lanta-hero-sep::before,
.lanta-hero-sep::after {
transform-origin: center;
animation: lantaLineTrace 0.9s var(--lanta-ease-premium) 0.85s both;
}
/* ---------- SECTIONS : intra-section stagger quand .lanta-visible est ajouté ----------
Même principe que la règle parent : la transition est appliquée UNIQUEMENT
sur l'état visible. État initial caché = instantané (pas de transition) →
évite tout flash visible→fade-out→fade-in entre l'ajout de .lanta-js-reveal
par le JS et le fire async de l'IntersectionObserver. */
html.lanta-js-reveal .lanta-reveal .lanta-eyebrow,
html.lanta-js-reveal .lanta-reveal > .wp-block-heading,
html.lanta-js-reveal .lanta-reveal > p,
html.lanta-js-reveal .lanta-reveal > .wp-block-buttons,
html.lanta-js-reveal .lanta-reveal > .wp-block-columns,
html.lanta-js-reveal .lanta-reveal > hr {
opacity: 0;
transform: translateY(14px);
/* PAS de transition ici — passage instantané à invisible. */
}
/* Cascade révélée : c'est sur ces sélecteurs que vit la transition + le stagger. */
.lanta-reveal.lanta-visible .lanta-eyebrow,
.lanta-reveal.lanta-visible > .wp-block-heading,
.lanta-reveal.lanta-visible > p,
.lanta-reveal.lanta-visible > .wp-block-columns,
.lanta-reveal.lanta-visible > .wp-block-buttons {
transition: opacity 0.75s var(--lanta-ease-premium),
transform 0.75s var(--lanta-ease-premium);
}
.lanta-reveal.lanta-visible .lanta-eyebrow { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.lanta-reveal.lanta-visible > .wp-block-heading { opacity: 1; transform: translateY(0); transition-delay: 0.18s; }
.lanta-reveal.lanta-visible > p { opacity: 1; transform: translateY(0); transition-delay: 0.32s; }
.lanta-reveal.lanta-visible > .wp-block-columns { opacity: 1; transform: translateY(0); transition-delay: 0.42s; }
.lanta-reveal.lanta-visible > .wp-block-buttons { opacity: 1; transform: translateY(0); transition-delay: 0.55s; }
/* Filets or (séparateurs) : scaleX 0 → 1, instant côté caché, animé côté visible */
html.lanta-js-reveal .lanta-reveal .lanta-gold-sep-sm,
html.lanta-js-reveal .lanta-reveal hr.lanta-gold-sep-sm,
html.lanta-js-reveal .lanta-reveal > hr.lanta-gold-sep-sm {
opacity: 0;
transform: scaleX(0);
transform-origin: center;
}
.lanta-reveal.lanta-visible .lanta-gold-sep-sm,
.lanta-reveal.lanta-visible hr.lanta-gold-sep-sm {
opacity: 0.55;
transform: scaleX(1);
transition: opacity 0.6s var(--lanta-ease-premium),
transform 0.9s var(--lanta-ease-premium);
transition-delay: 0.3s;
}
/* Traits des eyebrows intra-section qui se tracent — même principe */
html.lanta-js-reveal .lanta-reveal .lanta-eyebrow::before,
html.lanta-js-reveal .lanta-reveal .lanta-eyebrow--center::after {
transform: scaleX(0);
transform-origin: right;
}
.lanta-reveal .lanta-eyebrow--center::after { transform-origin: left; }
.lanta-reveal.lanta-visible .lanta-eyebrow::before,
.lanta-reveal.lanta-visible .lanta-eyebrow--center::after {
transform: scaleX(1);
transition: transform 0.8s var(--lanta-ease-premium);
transition-delay: 0.3s;
}
/* Italique mot-clé des H2 : arrive après le reste du titre — détail éditorial */
html.lanta-js-reveal .lanta-reveal h2 em {
display: inline-block;
opacity: 0;
transform: translateY(10px);
}
.lanta-reveal.lanta-visible h2 em {
opacity: 1;
transform: translateY(0);
transition: opacity 0.7s var(--lanta-ease-premium),
transform 0.7s var(--lanta-ease-premium);
transition-delay: 0.5s;
}
/* Nav underline : se trace du centre */
.wp-block-navigation a::after {
left: 50% !important;
transform: translateX(-50%);
width: 0 !important;
transition: width 0.45s var(--lanta-ease-premium) !important;
}
.wp-block-navigation a:hover::after,
.wp-block-navigation a[aria-current]::after,
.wp-block-navigation .current-menu-item > a::after {
width: 100% !important;
}
/* Cartes produit Woo : hover — elevation + léger lift + shadow */
.wp-block-woocommerce-product-template > li,
li.wc-block-product {
transition: transform 0.45s var(--lanta-ease-premium),
box-shadow 0.45s var(--lanta-ease-premium) !important;
}
.wp-block-woocommerce-product-template > li:hover,
li.wc-block-product:hover {
transform: translateY(-5px);
box-shadow: 0 18px 34px rgba(30, 27, 24, 0.10);
}
/* Icônes header : petit bump au hover */
.lanta-account-icon,
.lanta-header-search-btn,
.lanta-header-right .wc-block-mini-cart__button,
.lanta-theme-toggle {
transition: color 0.3s var(--lanta-ease-premium),
background-color 0.3s var(--lanta-ease-premium),
transform 0.3s var(--lanta-ease-premium) !important;
}
.lanta-account-icon:hover,
.lanta-header-search-btn:hover,
.lanta-header-right .wc-block-mini-cart__button:hover,
.lanta-theme-toggle:hover {
transform: translateY(-1px);
}
/* Logo hover : léger fade+translate sur la signature italique */
.lanta-logo-link .lanta-logo-caption {
transition: color 0.4s var(--lanta-ease-premium),
letter-spacing 0.4s var(--lanta-ease-premium);
}
.lanta-logo-link:hover .lanta-logo-caption {
color: var(--lanta-champagne);
letter-spacing: 0.28em;
}
/* ---------- Respect reduced-motion pour tout le bloc motion v2.1 ---------- */
@media (prefers-reduced-motion: reduce) {
.lanta-topbar,
.lanta-hero .lanta-eyebrow,
.lanta-hero .lanta-eyebrow--center,
.lanta-hero h1.wp-block-heading,
.lanta-hero p.has-display-font-family,
.lanta-hero .lanta-hero-sep,
.lanta-hero hr.lanta-hero-sep,
.lanta-hero p.has-heading-font-family,
.lanta-hero .wp-block-buttons,
.lanta-hero .lanta-eyebrow::before,
.lanta-hero .lanta-eyebrow--center::after,
.lanta-hero-sep::before,
.lanta-hero-sep::after {
animation: none !important;
}
.lanta-reveal .lanta-eyebrow,
.lanta-reveal > .wp-block-heading,
.lanta-reveal > p,
.lanta-reveal > .wp-block-buttons,
.lanta-reveal > .wp-block-columns,
.lanta-reveal > hr,
.lanta-reveal .lanta-gold-sep-sm,
.lanta-reveal hr.lanta-gold-sep-sm,
.lanta-reveal h2 em,
.lanta-reveal .lanta-eyebrow::before,
.lanta-reveal .lanta-eyebrow--center::after {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.wp-block-woocommerce-product-template > li:hover,
li.wc-block-product:hover,
.lanta-account-icon:hover,
.lanta-header-search-btn:hover,
.lanta-header-right .wc-block-mini-cart__button:hover,
.lanta-theme-toggle:hover {
transform: none !important;
}
}
/* ---- Single product v2.1 + gallery + écran unique: extracted to assets/css/single-product.css (PR perf split 2026-06) ---- */
/* ==========================================================================
LIGHTBOX SIMPLE — overlay full-screen au clic image (v2.9.0)
==========================================================================
Activé par JS dans assets/js/main.js (initStackLightbox). Vanilla, ~30 LOC,
pas de dépendance PhotoSwipe. Fermeture par clic n'importe où ou ESC.
========================================================================== */
.lanta-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(10, 8, 6, 0.94);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-5);
cursor: zoom-out;
animation: lantaLightboxIn 0.25s var(--lanta-ease-premium) both;
}
@keyframes lantaLightboxIn {
from { opacity: 0; }
to { opacity: 1; }
}
.lanta-lightbox img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
cursor: default;
}
.lanta-lightbox-close {
position: fixed;
top: var(--space-4);
right: var(--space-4);
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.3);
background: transparent;
color: var(--lanta-papier);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
border-radius: 50%;
transition: background 0.2s var(--lanta-ease-premium),
border-color 0.2s var(--lanta-ease-premium);
}
.lanta-lightbox-close:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.6);
}
.lanta-lightbox-close:focus-visible {
outline: 2px solid var(--lanta-cognac);
outline-offset: 2px;
}
/* Quand lightbox ouverte, bloquer le scroll de la page */
body.lanta-lightbox-open {
overflow: hidden;
}
/* Colonne infos : eyebrow catégorie — typo consolidée v2.3.0 (ex-inline single-product.html) */
.lanta-single-eyebrow,
.lanta-single-eyebrow a {
font-family: var(--lanta-font-sans) !important;
font-size: var(--fs-2xs);
font-weight: 500;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--lanta-brown) !important;
text-decoration: none;
position: relative;
display: inline-flex;
align-items: center;
gap: 0.7rem;
margin-bottom: var(--space-4);
}
.lanta-single-eyebrow::before {
content: "";
display: inline-block;
width: 24px;
height: 1px;
background: var(--lanta-cognac);
opacity: 0.8;
vertical-align: middle;
margin-right: 0.2rem;
}
.lanta-single-eyebrow a:hover {
color: var(--lanta-cognac) !important;
}
/* Titre produit — Fraunces display light — typo consolidée v2.3.0 */
.lanta-single .lanta-single-title,
.lanta-single .wp-block-post-title.lanta-single-title {
font-family: var(--lanta-font-display) !important;
font-size: clamp(2rem, 3.4vw, 2.8rem);
font-weight: 300 !important;
font-style: normal !important;
letter-spacing: var(--ls-tight);
line-height: 1.05;
color: var(--lanta-noir);
font-variation-settings: "opsz" 96;
margin: 0 0 var(--space-4);
}
/* Prix — typo consolidée v2.3.0 */
.lanta-single-price,
.lanta-single-price .wc-block-components-product-price,
.lanta-single-price .wc-block-components-product-price__value {
font-family: var(--lanta-font-sans) !important;
font-size: var(--fs-md);
font-weight: 400;
letter-spacing: var(--ls-wide);
color: var(--lanta-noir-soft) !important;
font-variant-numeric: tabular-nums;
}
.lanta-single-price {
margin: 0 0 var(--space-5);
}
.lanta-single-price .wc-block-components-product-price__regular {
text-decoration: line-through;
color: var(--lanta-grey);
margin-right: 0.6rem;
font-size: 0.94em;
}
/* Excerpt italique Cormorant — retirer le border-left legacy */
.lanta-single .lanta-single-excerpt,
.lanta-single .wp-block-post-excerpt.lanta-single-excerpt,
.single-product .lanta-single .woocommerce-product-details__short-description {
border-left: 0 !important;
padding-left: 0 !important;
color: var(--lanta-noir-soft);
}
.lanta-single-excerpt p,
.lanta-single-excerpt .wp-block-post-excerpt__excerpt {
font-family: var(--lanta-font-serif) !important;
font-size: clamp(0.95rem, 1.1vw, 1.05rem);
font-style: italic;
font-weight: 300;
letter-spacing: 0.01em;
line-height: 1.7;
color: var(--lanta-noir-soft);
margin: 0;
}
.lanta-single-excerpt {
margin: 0 0 var(--space-6);
}
/* Add to cart form — bouton doré v2.1 (override legacy noir) */
.lanta-single-atc.wp-block-woocommerce-product-button,
.lanta-single .wc-block-components-product-button,
.lanta-single form.cart {
margin: 0 0 0.4rem 0;
}
.lanta-single form.cart .quantity {
margin-right: 0.8rem;
}
.lanta-single form.cart .quantity input.qty {
font-family: var(--lanta-font-sans);
width: 4.5rem;
padding: 1rem 0.8rem;
border: 1px solid var(--lanta-border);
border-radius: 2px;
background: var(--lanta-white);
color: var(--lanta-noir);
font-size: 0.9rem;
font-variant-numeric: tabular-nums;
text-align: center;
}
.lanta-single .single_add_to_cart_button,
.lanta-single button.single_add_to_cart_button,
.single-product .lanta-single .single_add_to_cart_button,
.single-product .lanta-single button.single_add_to_cart_button {
background-color: var(--lanta-cta-bg);
color: var(--lanta-cta-fg);
border: 1px solid var(--lanta-cta-bg);
font-family: var(--lanta-font-sans);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 1.05rem 2.6rem;
border-radius: var(--lanta-radius-control);
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.lanta-single .single_add_to_cart_button:hover,
.single-product .lanta-single .single_add_to_cart_button:hover,
.single-product .lanta-single button.single_add_to_cart_button:hover {
background-color: var(--lanta-cta-bg-hover);
border-color: var(--lanta-cta-bg-hover);
color: var(--lanta-cta-fg-hover);
}
/* Variations select */
.lanta-single table.variations {
margin-bottom: 1rem;
}
.lanta-single table.variations th,
.lanta-single table.variations td {
padding: 0.5rem 0.5rem 0.5rem 0;
font-family: var(--lanta-font-sans);
font-size: 0.82rem;
}
.lanta-single table.variations th {
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--lanta-brown);
font-size: 0.72rem;
}
.lanta-single table.variations select {
padding: 0.6rem 0.8rem;
border: 1px solid var(--lanta-border);
border-radius: 2px;
background: var(--lanta-white);
font-family: var(--lanta-font-sans);
font-size: 0.88rem;
color: var(--lanta-noir);
}
/* Réassurance : filets or au lieu de bordure neutre */
.lanta-single-reassurance {
border-top: 1px solid var(--lanta-fil);
border-bottom: 1px solid var(--lanta-fil);
position: relative;
}
.lanta-single-reassurance::before,
.lanta-single-reassurance::after {
content: "";
position: absolute;
left: 0;
width: 32px;
height: 1px;
background: var(--lanta-cognac);
opacity: 0.6;
}
.lanta-single-reassurance::before { top: -1px; }
.lanta-single-reassurance::after { bottom: -1px; }
.lanta-single-reassurance p {
font-family: var(--lanta-font-serif) !important;
font-size: 0.88rem;
font-style: normal;
font-weight: 400;
line-height: 2.2;
letter-spacing: 0.005em;
color: var(--lanta-noir-soft);
margin: 0;
}
/* Meta produit — typo consolidée v2.3.0 */
.lanta-single-meta,
.lanta-single-meta .wp-block-post-terms {
font-family: var(--lanta-font-sans);
font-size: 0.72rem;
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--lanta-grey-soft);
line-height: 2;
}
.lanta-single-meta a {
color: var(--lanta-brown);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease, color 0.2s ease;
}
.lanta-single-meta a:hover {
color: var(--lanta-cognac);
border-bottom-color: var(--lanta-cognac);
}
/* Section Détails éditoriale — onglets + description */
.lanta-single-details .woocommerce-tabs .tabs {
display: flex;
justify-content: center;
gap: 2.5rem;
list-style: none;
margin: 0 0 2rem;
padding: 0;
border-bottom: 1px solid var(--lanta-fil);
}
.lanta-single-details .woocommerce-tabs .tabs li {
margin: 0;
padding: 0;
}
.lanta-single-details .woocommerce-tabs .tabs li a {
font-family: var(--lanta-font-sans);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 500;
padding: 0.8rem 0;
display: inline-block;
color: var(--lanta-grey-soft);
text-decoration: none;
border-bottom: 1px solid transparent;
margin-bottom: -1px;
transition: color 0.2s ease, border-color 0.2s ease;
}
.lanta-single-details .woocommerce-tabs .tabs li.active a,
.lanta-single-details .woocommerce-tabs .tabs li a:hover {
color: var(--lanta-noir);
border-bottom-color: var(--lanta-cognac);
}
.lanta-single-details .woocommerce-tabs .panel,
.lanta-single-details .wp-block-woocommerce-product-details .panel {
font-family: var(--lanta-font-serif);
font-size: clamp(0.95rem, 1.1vw, 1.05rem);
line-height: 1.85;
color: var(--lanta-noir-soft);
font-weight: 300;
}
.lanta-single-details .woocommerce-tabs .panel h2 {
display: none;
}
.lanta-single-details .woocommerce-tabs .panel p {
margin: 0 0 1.2rem;
}
/* Reveal transitions natives v2.1 (le mécanisme .lanta-reveal / .lanta-visible s'applique déjà) */
/* Responsive */
@media (max-width: 900px) {
.lanta-single-hero .wp-block-columns {
gap: 2.5rem;
}
.lanta-single .woocommerce-product-gallery {
position: relative;
top: auto;
}
.lanta-single-hero .wp-block-column[style*="flex-basis:55%"],
.lanta-single-hero .wp-block-column[style*="flex-basis:45%"] {
flex-basis: 100% !important;
}
.lanta-single-title,
.lanta-single .wp-block-post-title.lanta-single-title {
font-size: clamp(1.7rem, 6vw, 2.2rem) !important;
}
.lanta-single-details .woocommerce-tabs .tabs {
gap: 1.5rem;
flex-wrap: wrap;
}
}
/* Dark-mode single v2.1 : surfaces uniquement.
Les CTA utilisent les tokens --lanta-cta-* → basculent automatiquement. */
[data-theme="dark"] .lanta-single-details {
background: var(--lanta-editorial-grad) !important;
border-top-color: var(--lanta-border) !important;
}
[data-theme="dark"] .lanta-single .woocommerce-product-gallery img {
background: transparent;
}
/* Espacement titre→grille des univers. La grille responsive elle-même
(3→2→1 colonnes) est gérée par #lanta-univers-panels (plus spécifique). */
.lanta-univers-grid{margin-top:3rem;}
/* Titre de section « Nos trois univers » : homepage.css (qui style
.lanta-fp .lanta-fp-section__title) n'est PAS chargé hors accueil, donc on
redéfinit le titre pour la page Nos univers via .lanta-univers--page. */
.lanta-univers--page .lanta-fp-section__title{
font-size:clamp(1.9rem,4.2vw,3rem);font-weight:300;letter-spacing:-0.005em;
line-height:1.05;color:var(--lanta-noir);margin:0 0 0.8rem;
}
.lanta-univers--page .lanta-fp-section__title em{font-style:italic;}
/* ===== Univers — 2 panneaux éditoriaux (P1, carte blanche) ===== */
.lanta-univers-panel{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:4/5;overflow:hidden;text-decoration:none;border:1px solid var(--lanta-border);background:var(--lanta-cream);transition:border-color .5s var(--lu-ease)}
.lanta-univers-panel-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--lu-ease-slow)}
.lanta-univers-panel-veil{position:absolute;inset:0;background:linear-gradient(to top,
rgba(var(--lu-veil),.74) 0%, rgba(var(--lu-veil),.36) 42%, rgba(var(--lu-veil),.08) 100%)}
.lanta-univers-panel-body{position:relative;z-index:1;padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;gap:.45rem;align-items:flex-start}
.lanta-univers-panel:not(.is-fallback) .lanta-univers-panel-body{color:var(--lu-ink-light)} /* toujours clair : posé sur voile sombre, indépendant du thème */
.lanta-univers-panel-index{
font-family:var(--wp--preset--font-family--body);
font-size:.65rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
color:var(--lu-accent);margin:0 0 .15rem;opacity:.95;
}
.lanta-univers-panel-title{font-size:clamp(1.5rem,5vw,2rem);font-weight:300;line-height:1.05;font-variation-settings:"opsz" 144,"SOFT" 60}
.lanta-univers-panel-sub{font-size:.82rem;line-height:1.5;opacity:.9}
.lanta-univers-panel-cta{
align-self:flex-start;margin-top:.5rem;display:inline-flex;align-items:center;gap:.5rem;
font-family:var(--wp--preset--font-family--body);
font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
color:var(--lu-accent);padding-bottom:4px;
border-bottom:1px solid rgba(var(--lu-accent-rgb),.5);
transition:border-color .35s var(--lu-ease), gap .35s var(--lu-ease);
}
.lanta-univers-panel:hover .lanta-univers-panel-cta,
.lanta-univers-panel:focus-visible .lanta-univers-panel-cta{
border-bottom-color:var(--lu-accent);gap:.8rem;
}
/* Sans image (catégorie WC sans visuel) : carte éditoriale soignée plutôt
qu'un grand vide crème — cadre filet + monogramme en filigrane + format
paysage (moins haut donc moins « vide »). Remplacé dès qu'une image de
catégorie est définie. */
.lanta-univers-panel.is-fallback{
/* v2.9.1 — fallback pump : ancien grad cream→cream-dark était trop proche
du fond de section (.lanta-univers a backgroundColor:base = #FBF8F4),
les cartes paraissaient « vides ». Nouveau grad warm sand visible. */
aspect-ratio:4/3;
justify-content:center;
background:
radial-gradient(120% 78% at 50% 18%, rgba(255,255,255,.55), rgba(0,0,0,0) 55%),
linear-gradient(168deg, #EFE3CE 0%, #E2D3B6 100%);
}
.lanta-univers-panel.is-fallback::before{
/* Double filet inset = traitement « papeterie » plus chic et plus marqué */
content:"";position:absolute;inset:14px;
border:1px solid rgba(58,54,50,.18);pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(212,177,112,.18);
}
.lanta-univers-panel.is-fallback::after{
content:"";position:absolute;inset:0;
background:url(assets/img/logo-icon.svg) no-repeat center 32% / 88px auto;
opacity:.12;pointer-events:none;
}
.lanta-univers-panel.is-fallback .lanta-univers-panel-body{
align-items:center;text-align:center;color:var(--lanta-brown);
align-self:center;max-width:32ch;gap:.7rem;padding:clamp(2rem,4vw,3rem);
}
.lanta-univers-panel.is-fallback .lanta-univers-panel-title{
font-family:var(--lanta-font-serif);font-style:italic;color:var(--lanta-noir);
font-size:clamp(1.7rem,4vw,2.4rem);
}
.lanta-univers-panel.is-fallback .lanta-univers-panel-cta{margin-top:.7rem}
/* Dark mode : on inverse le grad warm sand vers un brun-noir doux (le grad
hard-codé du light bloque l'héritage via var()). */
[data-theme="dark"] .lanta-univers-panel.is-fallback{
background:
radial-gradient(120% 78% at 50% 18%, rgba(212,177,112,.10), rgba(0,0,0,0) 55%),
linear-gradient(168deg, #2A2622 0%, #1E1B18 100%);
}
[data-theme="dark"] .lanta-univers-panel.is-fallback .lanta-univers-panel-body{color:#E8DCC5}
[data-theme="dark"] .lanta-univers-panel.is-fallback .lanta-univers-panel-title{color:#F0E5D2}
.lanta-univers-panel:hover{border-color:var(--lanta-cognac)}
.lanta-univers-panel:hover .lanta-univers-panel-img,
.lanta-univers-panel:focus-visible .lanta-univers-panel-img{transform:scale(1.06)}
.lanta-univers-panel:focus-visible{outline:2px solid var(--lanta-focus-color);outline-offset:3px}
/* ==========================================================================
LOT B — CATALOGUE : SIDEBAR DE FILTRES (woocommerce/product-filters)
Mise en page 2 colonnes en desktop, pile en dessous de 768px. Le bloc
product-filters gère lui-même le bouton « Filtrer » + overlay sur petit
écran ; on ne stylise donc ici que la mise en page et la typographie.
========================================================================== */
/* Catalogue collé au bord gauche (choix design) — sur grand écran, la
zone filtres+grille (max 1280px, définie l. 1431) ne reste pas centrée :
elle se cale au bord gauche, le vide passe à droite. Le hero garde son
centrage (titre décoratif). En dessous de 1024px le centrage par défaut
est inutile (la zone occupe déjà toute la largeur) — on borne donc le
pull à gauche aux écrans larges pour ne rien changer en tablette/mobile. */
@media (min-width: 1024px) {
.lanta-catalog {
margin-left: 0 !important;
margin-right: auto !important;
}
}
.lanta-catalog-sidebar {
flex: 0 0 200px;
/* Sans min-width:0, la largeur min-content du contenu (champs de prix
WooCommerce) repousse l'item flex bien au-delà de ses 200px et la
sidebar dévore la page. min-width:0 verrouille la colonne à 200px. */
min-width: 0;
}
.lanta-catalog-main {
flex: 1 1 460px;
min-width: 0;
}
/* Titres des groupes de filtres — accordés à la charte (capitales espacées). */
.lanta-catalog-sidebar .wp-block-woocommerce-product-filter-attribute h3,
.lanta-catalog-sidebar .wp-block-woocommerce-product-filter-taxonomy h3,
.lanta-catalog-sidebar .wp-block-woocommerce-product-filter-price h3 {
margin: 0 0 0.5rem;
font-family: 'DM Sans', 'Inter', sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--lanta-noir-soft, #3A3632);
}
/* Bouton « Filtrer » (visible en mobile) — sobre, cohérent avec le thème. */
.lanta-catalog-sidebar .wc-block-product-filters__open-overlay {
width: 100%;
justify-content: center;
padding: 0.85rem 1rem;
border: 1px solid var(--lanta-noir-soft, #3A3632);
background: transparent;
color: var(--lanta-noir-soft, #3A3632);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* Mobile/tablette — sidebar et grille empilées en colonne. Bug observé :
la grille WC se superpose à la sidebar (filtres rendus derrière) quand
l'overlay mobile WC n'engage pas (zone 600–768 px entre breakpoint WC
et breakpoint thème, JS iAPI déféré par Boost, ou rendu inline forcé).
On force flex-direction:column sur le layout pour ne plus dépendre du
wrap, et z-index défensif pour qu'aucun enfant `position:relative` de
la grille ne grimpe au-dessus du sidebar. */
@media (max-width: 768px) {
.lanta-catalog-layout {
flex-direction: column !important;
flex-wrap: nowrap !important;
}
.lanta-catalog-sidebar,
.lanta-catalog-main {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
position: relative;
}
.lanta-catalog-sidebar {
z-index: 2;
order: -1; /* défense : toujours avant la grille produit */
}
.lanta-catalog-main {
z-index: 1;
order: 0;
}
}
/* Filtres mobile — toggle « Filtrer » + panneau compact à l'ouverture.
Le toggle est replié par défaut (gain de place sur petit écran), avec
auto-ouverture si des filtres sont déjà actifs (URL filtrée). À
l'ouverture, layout compact inline (chaque groupe sur une ligne).
Pattern type Hermès / Saint Laurent mobile. */
/* Bouton « Filtrer » — pattern filets fins (PR #88 polish). */
.lanta-mobile-filters-toggle {
display: none;
}
@media (max-width: 768px) {
.lanta-mobile-filters-toggle {
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 1.1rem 0.25rem;
background: transparent;
border: 0;
border-top: 1px solid var(--lanta-fil, rgba(26,21,18,0.12));
border-bottom: 1px solid var(--lanta-fil, rgba(26,21,18,0.12));
border-radius: 0;
color: var(--lanta-noir-soft, #3D3833);
font-family: 'DM Sans', 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
cursor: pointer;
transition: color 0.25s ease, border-color 0.25s ease;
}
.lanta-mobile-filters-toggle:hover,
.lanta-mobile-filters-toggle:focus-visible {
color: var(--lanta-gold-dark, #96744A);
border-color: var(--lanta-gold-dark, #96744A);
outline: none;
}
.lanta-mobile-filters-toggle-label {
display: inline-flex;
align-items: baseline;
}
.lanta-mobile-filters-toggle-count {
color: var(--lanta-gold-dark, #96744A);
font-weight: 600;
}
.lanta-catalog-sidebar.has-active-filters .lanta-mobile-filters-toggle {
border-color: var(--lanta-gold-dark, #96744A);
}
/* Chevron en bordures CSS — pivote à l'ouverture. */
.lanta-mobile-filters-toggle::after {
content: "";
width: 7px;
height: 7px;
margin-left: auto;
margin-right: 0.35rem;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
transform-origin: center;
transition: transform 0.3s var(--lanta-ease-premium, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.lanta-mobile-filters-toggle[aria-expanded="true"]::after {
transform: rotate(225deg) translate(-2px, -2px);
}
/* Panneau filtres — animé via max-height + opacity. */
.lanta-catalog-sidebar .wc-block-product-filters {
max-height: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
margin-top: 0;
transition:
max-height 0.35s var(--lanta-ease-premium, cubic-bezier(0.22, 0.61, 0.36, 1)),
opacity 0.25s ease,
margin-top 0.35s var(--lanta-ease-premium, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.lanta-catalog-sidebar.is-mobile-filters-open .wc-block-product-filters {
max-height: 1500px;
opacity: 1;
margin-top: 1.25rem;
pointer-events: auto;
overflow: visible;
}
.lanta-catalog-sidebar.is-mobile-filters-open {
margin-bottom: 1.75rem;
}
}
@media (max-width: 768px) {
/* Désactivation TOTALE de l'overlay natif WC (full-screen + bouton
"APPLIQUER" en bas). En-dessous de 600 px, WC bascule par défaut
en mode overlay : on annule pour forcer le rendu inline, puisque
nos filtres compacts sont déjà visibles en permanence au-dessus
de la grille — pas besoin d'un sur-overlay. */
.lanta-catalog-sidebar .wc-block-product-filters__open-overlay,
.lanta-catalog-sidebar .wc-block-product-filters__close-overlay,
.lanta-catalog-sidebar .wc-block-product-filters__overlay-header,
.lanta-catalog-sidebar .wc-block-product-filters__overlay-footer,
.lanta-catalog-sidebar .wc-block-product-filters__apply {
display: none !important;
}
.lanta-catalog-sidebar .wc-block-product-filters__overlay {
position: relative !important;
inset: auto !important;
top: auto !important;
background: transparent !important;
pointer-events: auto !important;
z-index: auto !important;
}
.lanta-catalog-sidebar .wc-block-product-filters__overlay-wrapper {
height: auto !important;
width: auto !important;
}
.lanta-catalog-sidebar .wc-block-product-filters__overlay-dialog {
position: relative !important;
inset: auto !important;
transform: none !important;
max-height: none !important;
background: transparent !important;
gap: 0 !important;
}
.lanta-catalog-sidebar .wc-block-product-filters__overlay-content {
overflow: visible !important;
padding: 0 !important;
gap: 0 !important;
}
/* Garde-fou : si WC pose `.is-overlay-opened`, on neutralise. */
.lanta-catalog-sidebar .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
background: transparent !important;
position: relative !important;
}
body.lanta-mobile-overlay-locked,
html.lanta-mobile-overlay-locked {
overflow: auto !important;
}
/* Gap interne du wrapper filtres (override du gap desktop 1.1rem) —
on laisse les paddings/borders de chaque groupe créer la respiration. */
.lanta-catalog-sidebar .wc-block-product-filters {
gap: 0 !important;
}
/* Micro-copie matière : masquée sur mobile (verbeuse + redondante,
l'utilisateur connaît la différence cuir/synthétique). */
.lanta-catalog-sidebar .lanta-filter-microcopy {
display: none;
}
/* Filtres actifs : compact, font réduite. */
.lanta-catalog-sidebar .wp-block-woocommerce-product-filter-active {
padding: 0.4rem 0;
font-size: 0.72rem;
}
.lanta-catalog-sidebar .wp-block-woocommerce-product-filter-active:empty {
display: none;
}
/* Chaque groupe filtre (Prix, Matière, Catégorie) = ligne unique :
label fixe à gauche, valeurs alignées à droite, séparateur fil sous. */
.lanta-catalog-sidebar .wp-block-woocommerce-product-filter-price,
.lanta-catalog-sidebar .wp-block-woocommerce-product-filter-attribute,
.lanta-catalog-sidebar .wp-block-woocommerce-product-filter-taxonomy {
display: flex !important;
align-items: center;
gap: 0.85rem;
padding: 0.65rem 0;
border-bottom: 1px solid var(--lanta-fil, rgba(26,21,18,0.12));
min-height: 2.4rem;
}
/* Header (h3) en col 1 fixe : largeur prédictible, alignement net. */
.lanta-catalog-sidebar .wp-block-woocommerce-product-filter-price > .wp-block-group:first-child,
.lanta-catalog-sidebar .wp-block-woocommerce-product-filter-attribute > .wp-block-group:first-child,
.lanta-catalog-sidebar .wp-block-woocommerce-product-filter-taxonomy > .wp-block-group:first-child {
flex: 0 0 4.5rem;
margin: 0;
}
.lanta-catalog-sidebar .wp-block-woocommerce-product-filter-price h3,
.lanta-catalog-sidebar .wp-block-woocommerce-product-filter-attribute h3,
.lanta-catalog-sidebar .wp-block-woocommerce-product-filter-taxonomy h3 {
margin: 0 !important;
}
/* Valeurs (col 2) : prennent le reste de la ligne. */
.lanta-catalog-sidebar .wp-block-woocommerce-product-filter-price > .wp-block-woocommerce-product-filter-price-slider,
.lanta-catalog-sidebar .wp-block-woocommerce-product-filter-attribute > .wc-block-product-filter-checkbox-list,
.lanta-catalog-sidebar .wp-block-woocommerce-product-filter-taxonomy > .wc-block-product-filter-checkbox-list {
flex: 1 1 0;
min-width: 0;
}
/* Checkboxes : horizontal wrap au lieu de stack vertical. */
.lanta-catalog-sidebar .wc-block-product-filter-checkbox-list__items {
display: inline-flex !important;
flex-wrap: wrap;
gap: 0.4rem 0.9rem;
flex-direction: row !important;
}
.lanta-catalog-sidebar .wc-block-product-filter-checkbox-list__item {
margin: 0;
padding: 0;
}
.lanta-catalog-sidebar .wc-block-product-filter-checkbox-list__label {
padding: 0;
gap: 0.4rem;
font-size: 0.8rem;
}
/* Ligne "Trier" injectée par shop.js dans le panneau filtres (mobile
uniquement). Mêmes proportions que les autres rangées : label en
col 1 fixe,