/* ============================================================
Cbdconnection — Feuille de styles principale
Design dark luxury B2B — Bebas Neue + JetBrains Mono + Inter
Source : design/CBD.zip (app.jsx)
============================================================ */
/* ----- Variables ------------------------------------------- */
:root {
/* Warm dark palette — décalage léger vers anthracite chaud
(sans virer marron) ; cards bumpés en luminosité pour pop */
--bg-0: #100d0a;
--bg-1: #181614;
--bg-2: #14120f;
--bg-3: #1c1a16;
--card: #1c1a16;
--line: #2f2922;
--line-2: #3f3830;
--text: #f5f1ea;
--text-dim: #d6d0c4;
--text-mute: #aaa496;
--gold: #d4a84b;
--gold-2: #b8862c;
--gold-soft: #f0d28a;
/* Dégradé doré utilisé partout où `color: var(--gold)` est appliqué à un texte ou une icône.
La déclaration garde `color: var(--gold)` en fallback (couleur unie pour les SVG `currentColor`,
et pour les contextes où background-clip:text n'est pas supporté). */
--gold-gradient: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 50%, var(--gold-2) 100%);
--green: #4a7a3e;
--danger: #c4523f;
--font-display: 'Inter', system-ui, -apple-system, sans-serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'Inter', system-ui, -apple-system, sans-serif;
--container: 1500px;
--container-narrow: 880px;
/* Padding latéral standard du container (utilisé par .container,
.container-narrow et toute section qui veut s'aligner sur la grille).
Sub-480px on passe à 12px pour récupérer de la place sur très petits
mobiles. Note : les media queries ne lisent PAS les variables CSS
(limite native), donc on applique aussi la règle litéralement plus bas. */
--container-px: 24px;
/* === Breakpoints canoniques (référence pour le code futur) ===
Les media queries ne supportent pas var(--bp-*) — ces variables
servent UNIQUEMENT de documentation et de source de vérité.
Toute nouvelle media query doit utiliser exactement ces valeurs ;
les valeurs historiques (1023, 767, 599, 540, 720, 800, 900...)
restent en place pour ne pas casser le rendu existant, mais sont
considérées comme "legacy" et à consolider au fil de l'eau. */
--bp-sm: 480px; /* mobile compact (< 480 = très petit mobile) */
--bp-md: 768px; /* tablette portrait */
--bp-lg: 1024px; /* tablette paysage / petit desktop */
--bp-xl: 1280px; /* desktop confortable */
--btn-bg: linear-gradient(135deg, #e2cb97 4%, #a88659 100%);
--btn-bg-hover: linear-gradient(135deg, #ecd5a0 4%, #b8945f 100%);
--btn-fg: #1a1208;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 80px;
--space-10: 100px;
}
/* ----- Reset & base ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg-0);
color: var(--text);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.5;
font-size: 15px;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration: none; transition: color .2s ease; }
a:hover, a:focus { color: var(--gold-soft); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }
/* ----- Typographie ----------------------------------------- */
.display, h1, h2, h3 {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.1;
margin: 0;
color: var(--text);
}
.mono { font-family: var(--font-mono); }
h1 { font-size: clamp(32px, 4.5vw, 56px); font-weight: 600; }
h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 600; }
h3 { font-size: clamp(18px, 2vw, 24px); font-weight: 600; }
h4 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--gold); margin: 0 0 var(--space-3); letter-spacing: 0; }
p { margin: 0 0 var(--space-4); }
.section-eyebrow,
.eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.25em;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
text-transform: uppercase;
}
.text-center { text-align: center; }
.text-gold {
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
}
.text-dim { color: var(--text-dim); }
.text-mute { color: var(--text-mute); }
.is-uppercase { text-transform: uppercase; letter-spacing: 0.12em; }
/* ============================================================
TEXTE OR EN DÉGRADÉ — appliqué aux éléments TEXTE
où l'or principal est utilisé. On exclut les éléments qui
portent un background propre (ronds, badges, boutons remplis).
============================================================ */
:is(
.text-gold,
.hero__title em,
.hero__eyebrow,
.site-footer__brand .display,
.range-card__cta,
.search-result__price,
.cart-drawer__shipping-msg b,
.filter-pill em,
.product-card .price,
.product-card .price .amount,
.product-card .price ins,
.product-card .price ins .amount,
.blog-teasers__head a,
.woocommerce-breadcrumb a:hover,
.page-hero .breadcrumb a:hover,
.sp-eta-modal__head h3,
.sp-eta-modal__card-eta strong,
.main-nav__list > li > a:hover,
.main-nav__list > .current-menu-item > a,
.main-nav__list .sub-menu a:hover .menu-item__title,
.main-nav__list .sub-menu .current-menu-item > a .menu-item__title,
.filter-group__title,
.shop-sidebar .widget-title,
.shop-sidebar h3,
.single-product__cat,
h1.gold-grad, h2.gold-grad, h3.gold-grad,
.gold-grad
) {
background: var(--btn-bg);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent !important;
}
/* Les enfants directs (amount, bdi, span, em) doivent hériter du fill transparent */
:is(
.text-gold,
.hero__title em,
.site-footer__brand .display,
.search-result__price,
.cart-drawer__shipping-msg b,
.product-card .price,
.product-card .price .amount,
.product-card .price ins,
.product-card .price ins .amount,
.blog-teasers__head a,
.sp-eta-modal__head h3,
.sp-eta-modal__card-eta strong,
.main-nav__list > li > a:hover,
.main-nav__list > .current-menu-item > a,
.filter-group__title,
.shop-sidebar .widget-title,
.shop-sidebar h3,
.single-product__cat,
.gold-grad
) > * {
background: transparent;
-webkit-text-fill-color: inherit;
color: inherit !important;
}
/* ----- Layout ---------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--container-px) 24px; }
.container--wide { max-width: none; padding: 0; }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--container-px); }
/* Sub-480 : on récupère 24px de largeur en passant le padding global à 12px.
`--container-px` n'étant pas accessible aux media queries, on overrride la
variable au scope `:root` pour qu'elle se propage à toutes les utilisations. */
@media (max-width: 480px) {
:root { --container-px: 12px; }
}
@media (max-width: 768px) {
.container,
.container-narrow { padding: 0 14px; }
}
.section { padding: var(--space-10) 24px; }
.section--tight { padding: 60px 24px; }
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1024px) {
.grid--6 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.grid--6, .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
}
/* ----- Boutons --------------------------------------------- */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
font-family: var(--font-display);
letter-spacing: 0;
font-size: 15px;
text-decoration: none;
border: none;
border-radius: 6px;
cursor: pointer;
transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
line-height: 1;
text-transform: uppercase;
}
.btn:hover { transform: translateY(-1px); }
.btn-gold,
.btn--primary {
background: var(--btn-bg);
color: var(--btn-fg);
}
.btn-gold:hover,
.btn--primary:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
.btn-ghost,
.btn--secondary {
background: transparent;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
border: 1px solid var(--gold);
}
.btn-ghost:hover,
.btn--secondary:hover { background: rgba(212, 166, 72, 0.08); color: var(--gold-soft); }
.btn--block { width: 100%; justify-content: center; }
.btn--lg { padding: 18px 28px; font-size: 16px; }
.btn--sm { padding: 10px 16px; font-size: 13px; }
/* Placeholder pattern (utilisable pour cards sans image) */
.ph {
background-color: #1a1a1a;
background-image: repeating-linear-gradient(45deg, rgba(212, 166, 72, 0.06) 0 8px, transparent 8px 16px);
border: 1px solid var(--line);
color: var(--text-mute);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono);
font-size: 11px;
text-align: center;
padding: 8px;
}
/* ============================================================
Top bar
============================================================ */
.topbar {
background: var(--btn-bg);
border-bottom: 1px solid rgba(0,0,0,0.18);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
color: #1a1208;
text-transform: none;
}
.topbar a {
color: #1a1208;
text-decoration: none;
transition: color .2s ease;
}
.topbar a:hover { color: #1a1208; text-decoration: underline; text-underline-offset: 3px; }
.topbar__inner {
max-width: var(--container);
margin: 0 auto;
padding: 7px 24px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.topbar__list {
display: flex;
gap: 12px;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: wrap;
align-items: center;
}
.topbar__sep { opacity: 0.45; }
.topbar__cta { color: #1a1208; font-weight: 600; }
.topbar__code {
display: inline-block;
background: transparent;
color: #1a1208;
padding: 0 2px;
border: 0;
border-bottom: 1px dashed rgba(26, 18, 8, 0.45);
border-radius: 0;
font: inherit;
font-weight: 700;
font-size: 1em;
margin: 0 2px;
letter-spacing: 0.06em;
cursor: pointer;
box-shadow: none;
transition: border-color .15s ease;
}
.topbar__code:hover { border-bottom-color: #1a1208; }
.topbar__code.is-copied { color: #1a3d1a; border-bottom-color: #1a3d1a; }
/* Toast — même registre visuel que .sp-eta-modal :
bordure dorée via padding-box/border-box, fond card, shadow profonde.
Position : top-center, bypass tous les overlays. */
.cbdco-toast {
position: fixed;
top: 20px;
left: 50%;
display: flex;
align-items: center;
gap: 9px;
padding: 9px 14px 9px 11px;
max-width: calc(100vw - 32px);
color: var(--text);
background:
linear-gradient(var(--card), var(--card)) padding-box,
var(--btn-bg) border-box;
border: 1.5px solid transparent;
border-radius: 999px;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
opacity: 0;
pointer-events: none;
transform: translate(-50%, 0) scale(0.96);
transform-origin: top center;
will-change: opacity, transform;
transition: opacity .18s ease-out, transform .22s cubic-bezier(.2, .8, .25, 1);
z-index: 2147483647;
}
.cbdco-toast::before {
content: '';
flex: 0 0 auto;
width: 22px;
height: 22px;
border-radius: 50%;
background:
url("data:image/svg+xml;utf8,") center / 14px 14px no-repeat,
var(--btn-bg);
box-shadow: 0 2px 8px rgba(212, 168, 75, 0.40);
}
.cbdco-toast__text { padding-top: 2px; }
.cbdco-toast.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
@media (max-width: 540px) {
.cbdco-toast { left: 16px; right: 16px; transform: translate(0, 0) scale(0.96); min-width: 0; }
.cbdco-toast.is-visible { transform: translate(0, 0) scale(1); }
}
.topbar__shipping { color: #1a1208; font-weight: 500; transition: color .2s; }
.topbar__shipping b,
.topbar__shipping bdi,
.topbar__shipping .woocommerce-Price-amount {
display: inline;
background: transparent;
color: #1a1208;
padding: 0;
border-radius: 0;
font-weight: 700;
font-size: 1em;
margin: 0 1px;
letter-spacing: 0.02em;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: rgba(26, 18, 8, 0.55);
cursor: pointer;
box-shadow: none;
transition: text-decoration-color .15s ease;
}
.topbar__shipping b:hover,
.topbar__shipping bdi:hover,
.topbar__shipping .woocommerce-Price-amount:hover { text-decoration-color: #1a1208; }
.topbar__shipping bdi .woocommerce-Price-currencySymbol { color: inherit; font-weight: inherit; }
.topbar__shipping.is-unlocked { color: #1a3d1a; font-weight: 700; }
.topbar__shipping.is-unlocked b,
.topbar__shipping.is-unlocked bdi,
.topbar__shipping.is-unlocked .woocommerce-Price-amount {
background: transparent;
box-shadow: none;
padding: 0;
color: #1a3d1a;
font-size: 1em;
}
.topbar__mobile {
display: none;
width: 100%;
text-align: center;
font-weight: 500;
color: #1a1208;
font-size: 12px;
}
.topbar__mobile a { color: #1a1208; text-decoration: none; }
.topbar__mobile a:hover { color: #1a1208; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 768px) {
.topbar { font-size: 13px; }
.topbar__inner { padding: 8px 14px; justify-content: center; }
.topbar__list--desktop { display: none !important; }
.topbar__mobile { display: block; }
}
/* ============================================================
Site header (logo + nav + actions)
============================================================ */
.site-header {
background: var(--bg-1);
border-bottom: 1px solid var(--line);
position: relative;
z-index: 1000;
}
html, body { overflow: visible; overflow-x: clip; }
/* Idem cart drawer + sidebar sticky. */
body.admin-bar .cart-drawer__panel { top: 32px; height: calc(100% - 32px); }
@media (max-width: 782px) { body.admin-bar .cart-drawer__panel { top: 46px; height: calc(100% - 46px); } }
body.admin-bar .shop-sidebar { top: 118px; }
@media (max-width: 782px) { body.admin-bar .shop-sidebar { top: 132px; } }
.site-header__top {
max-width: var(--container);
margin: 0 auto;
padding: 14px 24px 12px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
}
.site-header__brand {
display: flex; align-items: center; justify-content: center; gap: 12px;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
grid-column: 2;
}
.site-header__brand .display {
font-family: var(--font-display);
font-size: 28px;
font-weight: 600;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.site-header__brand img.custom-logo,
.site-header__brand img {
max-height: 110px;
width: auto;
height: auto;
/* Smoothing par défaut du navigateur : évite le crénelage sur logos
anti-aliasés downscalés (le `crisp-edges` précédent désactivait
le filtrage et produisait l'effet d'aliasing observé). */
image-rendering: auto;
}
.site-header__actions--left { justify-self: start; }
.site-header__actions--right { justify-self: end; }
.main-nav--centered {
border-top: 1px solid var(--line);
padding: 17px 24px 12px;
}
/* Header du drawer mobile (titre + croix) — caché par défaut en desktop. */
.main-nav__head { display: none; }
/* Pied du drawer mobile (Mon compte + Recherche) — caché par défaut en desktop. */
.main-nav__foot { display: none; }
/* Quand le drawer mobile est ouvert, le menu-toggle (hamburger) est caché :
la croix du drawer suffit pour fermer (évite le doublon visuel). */
body.cbdco-nav-open .menu-toggle { display: none; }
/* Item quiz "Trouve ton CBD" dans le menu mobile : en MAJUSCULES (uniformité
avec les autres items du menu mobile qui sont en uppercase). */
@media (max-width: 1024px) {
.main-nav.is-open .menu-item-quiz > a { text-transform: uppercase; }
}
/* Quand le drawer mobile est ouvert, on cache le floating cart (icône panier
en bas à droite) — sinon il chevauche le contenu du drawer et fait moche. */
body.cbdco-nav-open .cbdco-fc,
body.cbdco-nav-open .cbdco-floating-widgets { display: none !important; }
.main-nav__list {
display: flex;
justify-content: center;
gap: 36px;
list-style: none;
padding: 0;
margin: 0 auto;
max-width: var(--container);
font-size: 15px;
font-weight: 500;
color: #fff;
letter-spacing: 0.06em;
text-transform: uppercase;
flex-wrap: wrap;
}
.main-nav__list a {
color: inherit;
}
.main-nav__list a:hover,
.main-nav__list .current-menu-item > a { color: var(--gold); }
/* === Sous-menu MEGA-BAR : barre pleine largeur sous la nav principale ====
Sur desktop, le sous-menu d'un item du menu principal s'affiche comme une
bande horizontale juste sous la nav (full-width), pas comme une popup. */
.main-nav--centered { position: relative; }
.main-nav__list li { position: static; } /* on positionne par rapport à .main-nav, pas au li */
.main-nav__list .sub-menu {
position: absolute;
left: 0;
right: 0;
top: 100%;
width: 100%;
margin: 0;
padding: 14px 24px;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 28px;
background: var(--bg-1, #1a1a1a);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
box-shadow: 0 12px 32px rgba(0,0,0,0.35);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-4px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
z-index: 100;
}
/* Pont invisible : couvre uniquement la zone vide entre le bas du et le
haut du sous-menu (= padding-bottom du nav, ~12px). Pas plus haut, sinon il
couvrirait les items du menu principal et bloquerait les clics. */
.main-nav__list .sub-menu::before {
content: "";
position: absolute;
left: 0; right: 0;
top: -14px;
height: 14px;
}
.main-nav__list li:hover > .sub-menu,
.main-nav__list li:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition-delay: 0s;
}
.main-nav__list li:hover > .sub-menu *,
.main-nav__list li:focus-within > .sub-menu * { pointer-events: auto; }
.main-nav__list .sub-menu {
transition-delay: .25s; /* leave delay : laisse le temps au curseur de descendre */
}
.main-nav__list .sub-menu li {
display: block;
}
.main-nav__list .sub-menu a {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 8px 14px;
border-radius: 6px;
color: var(--text-dim);
text-transform: none;
letter-spacing: 0.04em;
transition: background .12s, color .12s;
}
.main-nav__list .sub-menu a:hover,
.main-nav__list .sub-menu .current-menu-item > a {
background: rgba(212, 168, 75, 0.08);
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
}
.main-nav__list .sub-menu .menu-item__title {
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--text);
}
.main-nav__list .sub-menu a:hover .menu-item__title { color: var(--gold); }
.main-nav__list .sub-menu .menu-item__desc {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--text-mute);
text-transform: none;
}
/* Indique visuellement les items qui ont un sous-menu (chevron ▾) */
.main-nav__list > .menu-item-has-children > a {
display: inline-flex;
align-items: center;
gap: 4px;
}
.main-nav__list .menu-item-has-children > a::after {
content: "";
display: inline-block;
width: 7px;
height: 7px;
border: 0;
border-right: 1.5px solid #fff;
border-bottom: 1.5px solid #fff;
transform: rotate(45deg);
transform-origin: 70% 70%;
transition: transform .25s cubic-bezier(.2,.8,.25,1), opacity .2s;
background: transparent;
pointer-events: none;
flex: 0 0 auto;
margin-left: 4px;
position: relative;
top: -2px;
opacity: 0.85;
}
/* Niveau 2 (mega-bar) : chevron INLINE (en flex) à la suite du titre.
On évite l'`position: absolute` qui créait une zone non cliquable en fin
de mot — ici le chevron est un vrai item flex dans la ligne du titre,
pointer-events: none pour que le hit-test traverse vers le . */
.main-nav__list .sub-menu .menu-item-has-children > a::after {
content: none;
}
.main-nav__list .sub-menu .menu-item-has-children > a .menu-item__title {
display: inline-flex;
align-items: center;
gap: 4px;
padding-right: 0;
}
.main-nav__list .sub-menu .menu-item-has-children > a .menu-item__title::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border: 0;
border-right: 1.5px solid #fff;
border-bottom: 1.5px solid #fff;
transform: rotate(45deg);
transform-origin: 70% 70%;
transition: transform .25s cubic-bezier(.2,.8,.25,1);
background: transparent;
pointer-events: none;
flex: 0 0 auto;
margin-left: 4px;
position: relative;
top: -1px;
opacity: 0.85;
}
.main-nav__list .sub-menu .menu-item-has-children:hover > a .menu-item__title::after,
.main-nav__list .sub-menu .menu-item-has-children:focus-within > a .menu-item__title::after {
transform: rotate(225deg);
top: 1px;
opacity: 1;
}
/* === Niveau 3 : 2e mega-bar pleine largeur, juste sous la mega-bar n° 2 ===
On conserve l'ancrage absolu par rapport à .main-nav (et non au li parent),
d'où la nécessité de remettre `position: static` sur le li niveau 2. */
.main-nav__list .sub-menu .menu-item { position: static; }
.main-nav__list .sub-menu .sub-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
margin: 0;
padding: 12px 24px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 24px;
background: var(--bg-1, #1a1a1a);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
box-shadow: 0 12px 32px rgba(0,0,0,0.45);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-4px);
transition: opacity .15s ease, transform .15s ease, visibility .15s;
z-index: 110;
}
/* Pont vertical : couvre uniquement le padding-bottom (12px) de la bar n°2
entre le texte des items et le haut de la bar n°3. PAS plus haut, sinon
le pont recouvrirait les items niveau 2 et intercepterait clics + hovers
→ "vibration" + fin de mot non cliquable. */
.main-nav__list .sub-menu .sub-menu::before {
content: "";
position: absolute;
left: 0; right: 0;
top: -12px;
height: 12px;
}
.main-nav__list .sub-menu .menu-item:hover > .sub-menu,
.main-nav__list .sub-menu .menu-item:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition-delay: 0s; /* apparition immédiate, leave-delay seulement */
}
.main-nav__list .sub-menu .sub-menu a {
display: inline-flex;
align-items: center;
padding: 8px 14px;
text-align: center;
}
.main-nav__list .sub-menu .sub-menu .menu-item__title {
font-size: 12px;
}
.main-nav__list .menu-item-has-children:hover > a::after,
.main-nav__list .menu-item-has-children:focus-within > a::after {
transform: rotate(225deg);
top: 1px;
opacity: 1;
}
/* Sur mobile / écrans <= 1024 : on revient à un comportement empilé classique
(le menu mobile a son propre rendu via .is-open). */
@media (max-width: 1024px) {
.main-nav__list .sub-menu {
position: static;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
flex-direction: column;
gap: 4px;
padding: 8px 0 8px 18px;
border: 0;
box-shadow: none;
background: transparent;
}
.main-nav__list .sub-menu::before { display: none; }
}
.site-header__actions { display: flex; gap: 14px; align-items: center; }
@media (min-width: 1025px) {
.site-header__actions--right { gap: 4px; }
}
/* === Live search ========================================================= */
.site-search {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 460px;
}
.site-search__icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
width: 26px;
height: 26px;
color: #fff;
z-index: 1;
}
.site-search input.site-search__input {
width: 100%;
background: var(--bg-2);
border: 1px solid var(--line);
color: #fff;
font-family: var(--font-body);
font-size: 14px;
padding: 14px 18px 14px 58px;
border-radius: 999px; /* même style "pill"/rond que le hover de .header-action */
transition: border-color .15s, background .15s;
}
.site-search input.site-search__input::placeholder { color: rgba(255, 255, 255, 0.7); }
.site-search input.site-search__input:focus {
outline: none;
border-color: transparent;
background: linear-gradient(var(--bg-3), var(--bg-3)) padding-box,
var(--btn-bg) border-box;
}
/* Croix native du : on supprime puis on en injecte une blanche */
.site-search input[type="search"]::-webkit-search-decoration,
.site-search input[type="search"]::-webkit-search-cancel-button,
.site-search input[type="search"]::-webkit-search-results-button,
.site-search input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: none;
appearance: none;
}
.site-search input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
height: 18px;
width: 18px;
margin-left: 8px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 14px 14px;
opacity: 0.85;
transition: opacity .15s;
}
.site-search input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; }
.site-search__results {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
max-height: 480px;
overflow-y: auto;
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: 8px;
box-shadow: 0 12px 32px rgba(0,0,0,0.45);
z-index: 100;
padding: 6px;
scrollbar-width: thin;
scrollbar-color: var(--gold) transparent;
}
.site-search__results::-webkit-scrollbar { width: 8px; }
.site-search__results::-webkit-scrollbar-track { background: transparent; }
.site-search__results::-webkit-scrollbar-thumb {
background: var(--gold-gradient);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
.site-search__results::-webkit-scrollbar-thumb:hover {
background: var(--gold-gradient);
background-clip: padding-box;
border: 1px solid transparent;
}
.search-result {
display: flex;
gap: 12px;
padding: 10px 12px;
border-radius: 6px;
color: var(--text);
text-decoration: none;
transition: background .12s;
}
.search-result:hover, .search-result:focus { background: var(--bg-3); color: var(--text); }
.search-result__media {
width: 48px; height: 48px;
flex-shrink: 0;
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: 4px;
overflow: hidden;
}
.search-result__media img { width: 100%; height: 100%; object-fit: cover; }
.search-result__body { flex: 1; min-width: 0; }
.search-result__title { font-size: 13px; font-weight: 500; line-height: 1.3; margin: 0 0 2px; color: var(--text); }
.search-result__price { font-size: 12px; color: var(--gold); font-weight: 600; }
.search-result__price del { color: var(--text-mute); margin-right: 4px; font-weight: 400; }
.search-result__more {
display: block;
padding: 12px;
text-align: center;
font-size: 12px;
font-weight: 500;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
border-top: 1px solid var(--line);
margin-top: 4px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.search-result__more:hover { color: var(--gold-soft); }
.site-search__empty {
padding: 18px 14px;
text-align: center;
color: #fff;
font-size: 13px;
}
.site-search__loading {
padding: 18px 14px;
text-align: center;
color: #fff;
font-size: 13px;
}
@media (max-width: 1024px) {
.site-search { display: none; }
}
/* === Cart drawer ========================================================= */
.cart-drawer {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
visibility: hidden;
}
.cart-drawer.is-open { pointer-events: auto; visibility: visible; }
.cart-drawer__overlay {
position: absolute; inset: 0;
background: rgba(8,5,2,0);
-webkit-backdrop-filter: blur(0px);
backdrop-filter: blur(0px);
transition:
background-color .42s cubic-bezier(.4,0,.2,1),
-webkit-backdrop-filter .42s cubic-bezier(.4,0,.2,1),
backdrop-filter .42s cubic-bezier(.4,0,.2,1);
cursor: pointer;
}
.cart-drawer.is-open .cart-drawer__overlay {
background: rgba(8,5,2,0.55);
-webkit-backdrop-filter: blur(4px) saturate(1.05);
backdrop-filter: blur(4px) saturate(1.05);
}
.cart-drawer__panel {
position: absolute;
top: 0; right: 0;
width: 100%;
max-width: 440px;
height: 100%;
background: var(--bg-1);
border-left: 1px solid var(--line-2);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition:
transform .35s cubic-bezier(.32,.72,0,1),
box-shadow .35s cubic-bezier(.32,.72,0,1);
box-shadow: -8px 0 30px rgba(0,0,0,0.3);
will-change: transform;
}
.cart-drawer.is-open .cart-drawer__panel {
transform: translateX(0);
box-shadow: -24px 0 80px rgba(0,0,0,0.6), -8px 0 24px rgba(0,0,0,0.4);
}
/* Entrée mise en scène : head, shipping, items et footer remontent en
cascade. Gated par .is-entering (posé puis retiré par le JS) pour ne
PAS rejouer la cascade quand renderItems re-rend les enfants après une
maj de quantité ou un add-to-cart. */
.cart-drawer.is-entering :is(
.cart-drawer__head,
.cart-drawer__shipping,
.cart-drawer__items > li,
.cart-drawer__empty,
.cart-drawer__foot
) {
animation: cbdco-cart-rise .32s cubic-bezier(.2,.85,.3,1) both;
will-change: opacity, transform;
}
.cart-drawer.is-entering .cart-drawer__head { animation-delay: .04s; }
.cart-drawer.is-entering .cart-drawer__shipping { animation-delay: .08s; }
.cart-drawer.is-entering .cart-drawer__empty { animation-delay: .12s; }
.cart-drawer.is-entering .cart-drawer__items > li:nth-child(1) { animation-delay: .12s; }
.cart-drawer.is-entering .cart-drawer__items > li:nth-child(2) { animation-delay: .16s; }
.cart-drawer.is-entering .cart-drawer__items > li:nth-child(3) { animation-delay: .19s; }
.cart-drawer.is-entering .cart-drawer__items > li:nth-child(4) { animation-delay: .21s; }
.cart-drawer.is-entering .cart-drawer__items > li:nth-child(n+5) { animation-delay: .23s; }
.cart-drawer.is-entering .cart-drawer__foot { animation-delay: .23s; }
@keyframes cbdco-cart-rise {
0% { opacity: 0; transform: translate3d(0, 12px, 0); }
100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* Header drawer — style header des modales : gradient sombre animé + particules dorées */
.cart-drawer__head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 18px;
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(216,183,104,.18);
background:
radial-gradient(circle at 20% 50%, rgba(216,183,104,.25) 0%, transparent 50%),
radial-gradient(circle at 80% 30%, rgba(160,124,44,.2) 0%, transparent 50%),
linear-gradient(135deg, #0f0d08 0%, #2d2618 50%, #1a1308 100%);
background-size: 200% 200%, 200% 200%, 100% 100%;
animation: cbdco-cart-head-shift 12s ease-in-out infinite;
}
@keyframes cbdco-cart-head-shift {
0%, 100% { background-position: 0% 50%, 100% 50%, 0 0; }
50% { background-position: 100% 50%, 0% 50%, 0 0; }
}
.cart-drawer__head::before,
.cart-drawer__head::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(circle, rgba(216,183,104,.55) 1px, transparent 1.5px);
background-size: 38px 38px;
opacity: .3;
animation: cbdco-cart-head-stars 8s linear infinite;
}
.cart-drawer__head::after {
background-size: 22px 22px;
opacity: .12;
animation-duration: 14s;
animation-direction: reverse;
}
@keyframes cbdco-cart-head-stars {
from { transform: translate(0, 0); }
to { transform: translate(-38px, -38px); }
}
.cart-drawer__head > * { position: relative; z-index: 1; }
.cart-drawer__head h2 {
margin: 0;
font-size: 16px;
font-weight: 700;
color: #faf3df;
letter-spacing: 0.02em;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.cart-drawer__close {
background: rgba(255,255,255,.08); border: 0;
color: #fff;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
cursor: pointer;
transition: background .15s, color .15s;
-webkit-tap-highlight-color: transparent;
}
.cart-drawer__close svg { stroke: #fff; color: #fff; }
.cart-drawer__close:hover { background: rgba(216,183,104,.25); color: #faf3df; }
.cart-drawer__close:hover svg { stroke: #faf3df; color: #faf3df; }
.cart-drawer__close:focus { outline: none; }
.cart-drawer__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Free-shipping progress — sobre, pas de barre dorée envahissante */
.cart-drawer__shipping {
padding: 14px 18px;
background: var(--bg-1);
border-bottom: 1px solid var(--line);
position: relative;
}
.cart-drawer__shipping-msg {
font-size: 14.5px;
font-weight: 600;
color: var(--text);
margin-bottom: 12px;
line-height: 1.4;
text-align: center;
}
.cart-drawer__shipping-msg b,
.cart-drawer__shipping-msg .woocommerce-Price-amount {
display: inline-block;
background: #1a1208;
color: #ffd966;
padding: 2px 9px;
border-radius: 5px;
font-weight: 600;
font-size: 1em;
margin: 0 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.cart-drawer__shipping-msg.is-unlocked {
color: #8fd694;
font-weight: 700;
}
.cart-drawer__shipping-msg.is-unlocked b {
background: transparent;
color: #8fd694;
box-shadow: none;
padding: 0;
}
.cart-drawer__progress {
width: 100%;
height: 8px;
background: var(--bg-3);
border-radius: 999px;
overflow: hidden;
border: 1px solid var(--line);
}
.cart-drawer__progress-bar {
height: 100%;
background: var(--btn-bg);
border-radius: 999px;
transition: width .35s cubic-bezier(.2,.8,.2,1);
box-shadow: 0 0 8px rgba(212, 168, 75, 0.4);
}
/* Body / items */
.cart-drawer__body {
flex: 1;
overflow-y: auto;
padding: 8px 12px;
position: relative;
scrollbar-width: thin;
scrollbar-color: #c8a268 transparent;
}
.cart-drawer__body::-webkit-scrollbar { width: 8px; }
.cart-drawer__body::-webkit-scrollbar-track { background: transparent; }
.cart-drawer__body::-webkit-scrollbar-thumb {
background: var(--btn-bg);
background-image: linear-gradient(135deg, #e2cb97 4%, #a88659 100%);
border-radius: 4px;
border: 1px solid rgba(0,0,0,0.15);
}
.cart-drawer__body::-webkit-scrollbar-thumb:hover {
background-image: linear-gradient(135deg, #efd9a8 4%, #c19868 100%);
}
.cart-drawer__items {
list-style: none; margin: 0; padding: 0;
}
.cart-drawer__item {
display: grid;
grid-template-columns: 72px 1fr auto;
gap: 12px;
padding: 14px 12px;
border-bottom: 1px solid var(--line);
align-items: center;
}
.cart-drawer__item:last-child { border-bottom: 0; }
.cart-drawer__item-img {
width: 72px; height: 72px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
}
.cart-drawer__item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-drawer__item-body { min-width: 0; }
.cart-drawer__item-title {
font-size: 13px; font-weight: 500;
color: var(--text);
margin: 0 0 4px;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cart-drawer__item-meta {
font-size: 11px;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
font-weight: 600;
letter-spacing: 0.04em;
margin: 0 0 8px;
}
.cart-drawer__item-actions {
display: flex; align-items: center; gap: 10px;
}
.cart-drawer__qty {
display: inline-flex; align-items: center;
background: var(--bg-2);
border: 1px solid var(--gold-2);
border-radius: 999px;
overflow: hidden;
}
.cart-drawer__qty button {
background: transparent;
border: 0;
color: var(--gold-soft);
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
font-size: 18px;
font-weight: 600;
line-height: 1;
transition: color .15s, background .15s;
}
.cart-drawer__qty button:hover { color: #1a1208; background: var(--btn-bg); }
.cart-drawer__qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.cart-drawer__qty span {
min-width: 32px;
text-align: center;
font-size: 14px;
font-weight: 700;
color: var(--text);
padding: 0 4px;
}
.cart-drawer__remove {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
background: transparent;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--text-mute);
cursor: pointer;
transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.cart-drawer__remove:hover {
color: #fff;
background: #d33b3b;
border-color: #d33b3b;
transform: rotate(90deg);
}
.cart-drawer__item-price {
font-size: 14px;
font-weight: 600;
background: transparent;
-webkit-text-fill-color: #fff;
color: #fff;
text-align: right;
min-width: 70px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.cart-drawer__item-price ins { background: transparent; text-decoration: none; color: #fff; -webkit-text-fill-color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2; }
.cart-drawer__item-price del { color: var(--text-mute); -webkit-text-fill-color: var(--text-mute); font-size: 11px; font-weight: 400; line-height: 1.2; opacity: 0.9; }
.cart-drawer__item-discount {
display: inline-block;
background: #d33b3b;
color: #fff;
-webkit-text-fill-color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
padding: 2px 6px;
border-radius: 4px;
line-height: 1;
}
a.cart-drawer__item-img { display: block; }
a.cart-drawer__item-title { color: inherit; text-decoration: none; display: block; transition: color .15s ease; }
a.cart-drawer__item-title:hover { color: var(--gold, #d4a84b); text-decoration: none; }
a.cart-drawer__item-img img { transition: opacity .15s ease; }
a.cart-drawer__item-img:hover img { opacity: 0.85; }
/* Le hidden attribute doit gagner sur le display:flex de loading/empty/items. */
.cart-drawer__loading[hidden],
.cart-drawer__empty[hidden],
.cart-drawer__items[hidden],
.cart-drawer__foot[hidden] { display: none !important; }
/* Loading */
.cart-drawer__loading {
display: flex; align-items: center; justify-content: center;
padding: 60px 0;
}
.cart-drawer__spinner {
width: 32px; height: 32px;
border: 3px solid var(--line);
border-top-color: var(--gold);
border-radius: 50%;
animation: cbdco-spin .8s linear infinite;
}
@keyframes cbdco-spin { to { transform: rotate(360deg); } }
/* Empty state */
.cart-drawer__empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 60px 24px; text-align: center;
color: var(--text-mute);
gap: 16px;
min-height: 100%;
}
.cart-drawer__empty svg { color: var(--text-mute); opacity: 0.4; }
.cart-drawer__empty p { margin: 0; font-size: 15px; color: var(--text-dim); }
.cart-drawer__empty .btn { margin-top: 8px; }
/* Footer / totals */
.cart-drawer__foot {
padding: 18px 24px 22px;
border-top: 1px solid var(--line);
background: var(--bg-2);
}
.cart-drawer__totals {
display: flex; flex-direction: column; gap: 6px;
margin-bottom: 14px;
}
.cart-drawer__totals-row {
display: flex; justify-content: space-between; align-items: baseline;
font-size: 13.5px;
color: var(--text-dim);
}
.cart-drawer__totals-row span:last-child,
.cart-drawer__totals-row .woocommerce-Price-amount { color: var(--text); font-weight: 500; }
.cart-drawer__totals-row [data-cart-shipping] { font-size: 12.5px; font-weight: 500; color: var(--text-mute); font-style: italic; }
.cart-drawer__totals-row [data-cart-shipping].is-free { color: #8fd694; font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; }
.cart-drawer__totals-row--total {
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid var(--line);
font-size: 13.5px;
}
.cart-drawer__totals-row--total strong:first-child {
color: var(--text);
font-weight: 600;
font-size: 13.5px;
}
.cart-drawer__totals-row--total strong:last-child,
.cart-drawer__totals-row--total .woocommerce-Price-amount {
font-size: 17px;
color: var(--gold-soft);
font-weight: 700;
}
/* Bouton "Commander" : un peu moins gros que la taille .btn par défaut */
.cart-drawer__foot > .btn {
padding: 12px 18px;
font-size: 13.5px;
}
.cart-drawer__view-cart {
display: block;
text-align: center;
margin-top: 10px;
font-size: 12px;
color: var(--text-mute);
letter-spacing: 0.04em;
}
.cart-drawer__view-cart:hover { color: var(--gold); }
/* Coupon : input + bouton — version discrète, alignée sur le style du checkout. */
.cart-drawer__coupon {
display: flex;
gap: 0;
margin-bottom: 4px;
padding: 2px;
background: var(--bg-1, #1a1a1a);
border: 1px solid var(--line);
border-radius: 8px;
position: relative;
transition: border-color .15s ease;
}
.cart-drawer__coupon:focus-within { border-color: var(--gold, #d4a84b); }
/* Quand la notice juste après est masquée → on rend l'espace en bas du pill. */
.cart-drawer__coupon:has(+ .cart-drawer__coupon-msg[hidden]) { margin-bottom: 8px; }
.cart-drawer__coupon::before {
content: "🎟";
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 13px;
line-height: 1;
pointer-events: none;
z-index: 1;
opacity: .7;
}
.cart-drawer__coupon-input {
flex: 1;
min-width: 0;
padding: 8px 10px 8px 32px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
color: var(--text);
font-family: inherit;
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
box-shadow: none !important;
}
.cart-drawer__coupon-input:focus,
.cart-drawer__coupon-input:focus-visible,
.cart-drawer__coupon-input:active {
outline: none !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.cart-drawer__coupon-input::placeholder {
color: var(--text-mute);
text-transform: none;
letter-spacing: 0;
font-weight: 400;
font-style: italic;
}
.cart-drawer__coupon-btn {
padding: 0 12px;
background: transparent;
border: 0;
border-radius: 6px;
color: var(--gold, #d4a84b);
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: color .15s ease, background .15s ease;
}
.cart-drawer__coupon-btn:hover { background: rgba(216,183,104,.15); }
.cart-drawer__coupon-btn:active { transform: scale(.98); }
/* Notice de validation du code promo — même rendu que le checkout (pill icône + close). */
.cart-drawer__coupon-msg {
margin: 14px 0 7px;
padding: 9px 12px;
font-size: 12.5px;
line-height: 1.4;
border-radius: 10px;
display: flex;
align-items: flex-start;
gap: 8px;
border: 1px solid transparent;
}
.cart-drawer__coupon-msg[hidden] { display: none !important; }
.cart-drawer__coupon-msg-icon {
flex: 0 0 auto;
width: 16px;
height: 16px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
margin-top: 1px;
color: #1a1208;
}
.cart-drawer__coupon-msg-text { flex: 1 1 auto; }
.cart-drawer__coupon-msg-close {
flex: 0 0 auto;
background: transparent;
border: 0;
color: inherit;
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
margin: -2px -2px 0 0;
opacity: .6;
transition: opacity .15s ease;
}
.cart-drawer__coupon-msg-close:hover { opacity: 1; }
.cart-drawer__coupon-msg.is-success {
background: rgba(212, 168, 75, 0.12);
color: var(--gold-soft);
border-color: rgba(212, 168, 75, 0.4);
}
.cart-drawer__coupon-msg.is-success .cart-drawer__coupon-msg-icon { background: var(--gold); }
.cart-drawer__coupon-msg.is-error {
background: rgba(215, 122, 106, 0.14);
color: #ee9d8e;
border-color: rgba(215, 122, 106, 0.4);
}
.cart-drawer__coupon-msg.is-error .cart-drawer__coupon-msg-icon { background: #d77a6a; color: #2a0c08; }
.cart-drawer__coupon-msg.is-info {
background: rgba(255, 255, 255, 0.04);
color: var(--text-dim);
border-color: var(--line);
}
.cart-drawer__coupon-msg.is-info .cart-drawer__coupon-msg-icon { background: var(--text-mute); }
/* Coupons appliqués — style identique à la ligne "Code promo" du checkout :
ligne plate avec label + bouton Retirer à gauche, montant en dégradé or à droite. */
.cart-drawer__coupons {
list-style: none;
margin: 0 0 10px;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.cart-drawer__coupon-item {
display: flex;
align-items: baseline;
gap: 8px;
padding: 0;
background: transparent;
border: 0;
font-size: 13.5px;
margin-top: 10px;
color: var(--text-dim);
}
.cart-drawer__coupon-item::before {
content: "Code promo :";
color: var(--text-dim);
font-weight: 500;
}
.cart-drawer__coupon-code {
color: var(--text);
font-weight: 600;
letter-spacing: 0.04em;
}
.cart-drawer__coupon-amount {
margin-left: auto;
background: var(--btn-bg);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
font-weight: 700;
font-size: 13.5px;
}
.cart-drawer__coupon-remove {
background: transparent;
border: 0;
color: var(--text-mute);
font-size: 0;
line-height: 1;
cursor: pointer;
padding: 2px 4px;
border-radius: 4px;
transition: color .15s, background .15s;
}
.cart-drawer__coupon-remove::after {
content: "[Retirer]";
font-size: 11px;
font-style: italic;
text-decoration: underline;
color: inherit;
}
.cart-drawer__coupon-remove:hover { color: #d77a6a; }
/* Responsive cart drawer */
@media (max-width: 480px) {
.cart-drawer__panel { max-width: 100%; }
.site-header__top {
padding: 8px 8px 6px;
gap: 6px;
}
.site-header__brand img.custom-logo,
.site-header__brand img { max-height: 88px; }
.site-header__actions { gap: 2px; }
.header-action {
width: 46px;
height: 46px;
}
.header-action svg { width: 24px; height: 24px; }
.header-action--cart .header-action__icon { width: 30px; height: 30px; }
.menu-toggle {
padding: 8px 10px;
}
.menu-toggle svg { width: 30px; height: 30px; }
}
.header-action {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
color: var(--text);
background: transparent;
border: 0;
border-radius: 50%;
cursor: pointer;
transition: background .15s, color .15s;
position: relative;
}
.header-action:hover { background: var(--bg-2); color: var(--gold); }
.header-action svg { width: 26px; height: 26px; color: inherit; }
.header-action--cart svg { color: var(--text); }
.header-action--cart:hover svg { color: var(--gold); }
/* Hover dégradé doré sur les icônes header (compte + panier) — on stamp le
gradient SVG global défini dans header.php via stroke: url(#…). Couvre tous
les enfants traçables (path, circle, line…) parce que stroke ne hérite
pas quand l'enfant porte stroke="currentColor" en attribut. */
.header-action:hover svg :is(path, circle, line, rect, polygon, polyline, ellipse) {
stroke: url(#cbdco-gold-grad);
}
/* Wrapper icône (sert de point d'animation isolé du label total) */
.header-action__icon-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
}
/* Quand le panier contient des items : bouton en pill icône + montant */
.header-action--cart.has-items {
width: auto;
min-width: 56px;
padding: 0 16px 0 12px;
gap: 8px;
border-radius: 999px;
background: var(--bg-2);
}
.header-action--cart.has-items:hover { background: var(--bg-3, rgba(255,255,255,.06)); }
.cart-total {
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
line-height: 1;
letter-spacing: .01em;
color: var(--text);
white-space: nowrap;
}
.cart-total[hidden] { display: none; }
/* Sur très petit écran, on cache le montant pour économiser la place */
@media (max-width: 480px) {
.header-action--cart.has-items { padding: 0; min-width: 56px; width: 56px; background: transparent; }
.cart-total { display: none; }
}
/* Bounce du panier dès qu'il y a un produit dedans */
.header-action--cart.has-items .header-action__icon-wrap { animation: cbdco-cart-bounce 2.2s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes cbdco-cart-bounce {
0%, 55%, 100% { transform: translateY(0) rotate(0); }
62% { transform: translateY(-5px) rotate(-8deg); }
70% { transform: translateY(0) rotate(6deg); }
78% { transform: translateY(-3px) rotate(-3deg); }
88% { transform: translateY(0) rotate(0); }
}
/* Cart icon "punch" quand le produit volant atterrit */
.header-action--cart.is-bumped { animation: cbdco-cart-punch .55s cubic-bezier(.25,1.5,.4,1) both; }
@keyframes cbdco-cart-punch {
0% { transform: scale(1); }
35% { transform: scale(1.32); }
60% { transform: scale(0.92); }
100% { transform: scale(1); }
}
/* Image volante (flower → cart). Animée par Web Animation API en JS. */
.fly-to-cart {
pointer-events: none;
border-radius: 50%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 12px 50px rgba(212,166,72,0.65), 0 0 0 4px var(--gold), 0 0 30px rgba(212,166,72,0.4);
will-change: transform, opacity;
}
.cart-count {
position: absolute;
top: -7px; right: -9px;
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 5px;
background: var(--btn-bg);
color: #1a1208;
font-family: var(--font-body);
font-size: 11.5px; font-weight: 800;
border-radius: 999px;
border: 2px solid var(--bg-1);
line-height: 1;
pointer-events: none;
}
.cart-count[hidden] { display: none; }
.menu-toggle {
display: none;
background: transparent;
border: 1px solid var(--line-2);
color: #fff;
padding: 8px 12px;
border-radius: 4px;
}
.menu-toggle svg { color: #fff; stroke: #fff; }
.menu-toggle svg line, .menu-toggle svg path, .menu-toggle svg rect { stroke: #fff; }
@media (max-width: 1024px) {
.site-header__top {
padding: 10px 10px 8px;
gap: 10px;
}
.site-header__brand img.custom-logo,
.site-header__brand img { max-height: 90px; }
.site-header__actions { gap: 4px; }
.header-action {
width: 48px;
height: 48px;
}
.header-action svg { width: 26px; height: 26px; }
.header-action--cart .header-action__icon { width: 32px; height: 32px; }
.menu-toggle {
display: inline-flex;
padding: 8px 12px;
}
.menu-toggle svg { width: 32px; height: 32px; }
.main-nav--centered { display: none; padding: 0; }
.main-nav--centered.is-open {
display: flex;
flex-direction: column;
padding: 0;
}
.main-nav--centered.is-open .main-nav__list { padding: 12px 16px 16px; }
/* Header du drawer mobile : gradient sombre + croix, calqué sur .cart-drawer__head */
.main-nav--centered .main-nav__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(216,183,104,.18);
background:
radial-gradient(circle at 20% 50%, rgba(216,183,104,.25) 0%, transparent 50%),
radial-gradient(circle at 80% 30%, rgba(160,124,44,.2) 0%, transparent 50%),
linear-gradient(135deg, #0f0d08 0%, #2d2618 50%, #1a1308 100%);
background-size: 200% 200%, 200% 200%, 100% 100%;
animation: cbdco-cart-head-shift 12s ease-in-out infinite;
}
.main-nav--centered .main-nav__head::before,
.main-nav--centered .main-nav__head::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(circle, rgba(216,183,104,.55) 1px, transparent 1.5px);
background-size: 38px 38px;
opacity: .3;
animation: cbdco-cart-head-stars 8s linear infinite;
}
.main-nav--centered .main-nav__head::after {
background-size: 22px 22px;
opacity: .12;
animation-duration: 14s;
animation-direction: reverse;
}
.main-nav--centered .main-nav__head > * { position: relative; z-index: 1; }
.main-nav--centered .main-nav__title {
margin: 0;
font-size: 16px;
font-weight: 700;
color: #faf3df;
letter-spacing: 0.02em;
text-transform: none;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.main-nav--centered .main-nav__close {
background: rgba(255,255,255,.08);
border: 0;
color: #fff;
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
flex: 0 0 36px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
cursor: pointer;
transition: background .15s, color .15s;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
}
.main-nav--centered .main-nav__close svg { stroke: #fff; color: #fff; }
.main-nav--centered .main-nav__close:hover { background: rgba(216,183,104,.25); color: #faf3df; }
.main-nav--centered .main-nav__close:hover svg { stroke: #faf3df; color: #faf3df; }
.main-nav--centered .main-nav__close:focus { outline: none; }
.main-nav--centered .main-nav__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.main-nav__list { flex-direction: column; gap: 0; }
.main-nav__list li { border-top: 1px solid var(--line); }
.main-nav__list > li:first-child { border-top: 0; }
.main-nav__list a { display: block; padding: 12px 0; }
}
/* Search header (in main-nav) */
.search-form {
display: flex;
background: var(--bg-2);
border: 1px solid var(--line);
max-width: 320px;
width: 100%;
}
.search-form input[type="search"] {
flex: 1;
background: transparent;
border: 0;
color: var(--text);
padding: 10px 14px;
outline: none;
font-size: 13px;
}
.search-form input::placeholder { color: var(--text-mute); }
.search-form button {
background: transparent;
border: 0;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
padding: 0 14px;
}
/* === Cart drawer — bandeau "paiement sécurisé" + icônes CB =============== */
.cart-drawer__pay {
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed var(--line);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.cart-drawer__pay-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0;
text-transform: uppercase;
color: var(--text-mute);
}
.cart-drawer__pay-label svg { width: 13px; height: 13px; opacity: 0.7; }
.cart-drawer__pay-icons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.cart-drawer__pay-icons .cbdco-pay-brand {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 22px;
background: #fff;
border-radius: 4px;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
overflow: hidden;
flex-shrink: 0;
line-height: 0;
}
.cart-drawer__pay-icons .cbdco-pay-brand svg { display: block; width: 100%; height: 100%; }
/* === Ligne combinée Livraison + Paiement sur la fiche produit ============ */
.sp-info-row {
display: flex;
flex-direction: column;
gap: 10px;
margin: 14px 0 22px;
clear: both;
}
.sp-info-row--pair { flex-direction: row; align-items: stretch; flex-wrap: wrap; gap: 10px; }
.sp-info-row--pair > .sp-eta,
.sp-info-row--pair > .sp-pay {
flex: 1 1 0;
min-width: 240px;
margin: 0;
}
/* Quand .sp-eta est dans une paire, on lui donne la même carte que .sp-pay
pour un rendu équilibré côte à côte. */
.sp-info-row--pair > .sp-eta {
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--card);
gap: 8px;
}
@media (max-width: 720px) {
.sp-info-row--pair { flex-direction: column; gap: 8px; }
.sp-info-row--pair > .sp-eta,
.sp-info-row--pair > .sp-pay { min-width: 0; }
}
.sp-pay {
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--card);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.sp-pay__label {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0;
text-transform: uppercase;
color: var(--text-mute);
white-space: nowrap;
}
.sp-pay__label svg { width: 12px; height: 12px; opacity: 0.75; }
.sp-pay__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
}
.sp-pay__list .cbdco-pay-brand {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 24px;
background: #fff;
border-radius: 4px;
border: 1px solid var(--line);
overflow: hidden;
line-height: 0;
}
.sp-pay__list .cbdco-pay-brand svg { display: block; width: 100%; height: 100%; }
@media (max-width: 720px) {
.sp-pay { padding: 10px 12px; gap: 6px; }
.sp-pay__label { font-size: 10px; letter-spacing: 0; }
.sp-pay__list .cbdco-pay-brand { width: 32px; height: 22px; }
}
/* === Cart drawer — adaptations mobile ==================================== */
@media (max-width: 600px) {
.cart-drawer__head { padding: 10px 16px; }
.cart-drawer__head h2 { font-size: 15px; letter-spacing: 0.04em; }
.cart-drawer__close { width: 30px; height: 30px; }
.cart-drawer__shipping { padding: 14px 18px; }
.cart-drawer__shipping-msg { font-size: 13px; margin-bottom: 10px; }
.cart-drawer__foot { padding: 14px 18px 18px; }
.cart-drawer__coupon { padding: 3px; border-radius: 10px; box-shadow: 0 2px 8px rgba(212,168,75,0.12); }
.cart-drawer__coupon::before { left: 11px; font-size: 14px; }
.cart-drawer__coupon-input {
padding: 10px 8px 10px 36px !important;
font-size: 12.5px;
letter-spacing: 0.04em;
}
.cart-drawer__coupon-input::placeholder { font-size: 12.5px; }
.cart-drawer__coupon-btn {
padding: 0 12px;
font-size: 11px;
letter-spacing: 0.06em;
}
.cart-drawer__totals-row { font-size: 12.5px; }
.cart-drawer__totals-row--total { font-size: 13px; }
.cart-drawer__totals-row--total strong:last-child,
.cart-drawer__totals-row--total .woocommerce-Price-amount { font-size: 18px; }
.cart-drawer__pay { margin-top: 12px; padding-top: 12px; gap: 6px; }
.cart-drawer__pay-label { font-size: 10px; letter-spacing: 0.12em; }
.cart-drawer__pay-icon { width: 36px; height: 24px; }
}
/* ============================================================
Hero
============================================================ */
.hero {
position: relative;
overflow: hidden;
background: var(--bg-0);
}
.hero__wordmark {
position: absolute;
inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: min(28vw, 380px);
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
opacity: 0.04;
white-space: nowrap;
pointer-events: none;
user-select: none;
letter-spacing: 0.02em;
}
.hero__corner {
position: absolute;
width: 24px; height: 24px;
pointer-events: none;
opacity: 0.5;
}
.hero__corner svg { width: 40px; height: 40px; }
.hero__corner--tl { top: 16px; left: 16px; }
.hero__corner--tr { top: 16px; right: 16px; }
.hero__corner--bl { bottom: 16px; left: 16px; }
.hero__corner--br { bottom: 16px; right: 16px; }
.hero__inner {
max-width: var(--container);
margin: 0 auto;
padding: 80px 24px 100px;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 40px;
align-items: center;
position: relative;
}
.hero__eyebrow {
display: flex; align-items: center; gap: 10px;
margin-bottom: 24px;
}
.hero__diamond {
width: 10px; height: 10px;
background: var(--gold);
transform: rotate(45deg);
flex-shrink: 0;
}
.hero__eyebrow span {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.3em;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
text-transform: uppercase;
}
.hero__title {
font-family: var(--font-display);
font-size: clamp(48px, 7vw, 96px);
margin: 0;
color: var(--text);
line-height: 0.95;
letter-spacing: 0.02em;
}
.hero__title em { color: var(--gold); font-style: normal; display: block; }
.hero__sub { margin-top: 24px; color: var(--text-dim); font-size: 16px; max-width: 480px; }
.hero__actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero__signals {
margin-top: 40px;
display: flex; gap: 32px;
font-size: 11px;
color: var(--text-mute);
font-family: var(--font-mono);
letter-spacing: 0.15em;
flex-wrap: wrap;
}
.hero__visual { position: relative; aspect-ratio: 1 / 1.1; }
.hero__visual .ph { position: absolute; inset: 0; font-size: 13px; }
.hero__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__frame {
position: absolute;
width: 24px; height: 24px;
pointer-events: none;
}
.hero__frame--tl { top: -8px; left: -8px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.hero__frame--tr { top: -8px; right: -8px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.hero__frame--bl { bottom: -8px; left: -8px; border-bottom: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.hero__frame--br { bottom: -8px; right: -8px; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); }
@media (max-width: 1024px) {
.hero__inner { grid-template-columns: 1fr; padding: 60px 24px 80px; }
.hero__visual { aspect-ratio: 1 / 1; max-width: 480px; }
}
/* ============================================================
Section head (eyebrow + title centré entouré de tirets)
============================================================ */
.section-head { text-align: center; margin-bottom: 56px; }
.section-head__eyebrow {
display: inline-flex; align-items: center; gap: 12px;
margin-bottom: 16px;
}
.section-head__rule { width: 32px; height: 1px; background: var(--gold); }
.section-head__sub {
color: var(--text-dim);
max-width: 600px;
margin: 16px auto 0;
font-size: 15px;
}
/* ============================================================
Range grid (12 catégories)
============================================================ */
.range-grid {
background: var(--bg-1);
padding: var(--space-10) 24px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.range-grid__inner { max-width: var(--container); margin: 0 auto; }
.range-grid__cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 1024px) { .range-grid__cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .range-grid__cards { grid-template-columns: repeat(2, 1fr); } }
.range-card {
background: var(--bg-2);
border: 1px solid var(--line);
padding: 20px;
position: relative;
transition: border-color .2s ease;
color: var(--text);
}
.range-card:hover { border-color: var(--gold); color: var(--text); }
.range-card__leaf { position: absolute; top: 12px; right: 12px; color: var(--gold); }
.range-card__media {
aspect-ratio: 1 / 1;
margin-bottom: 16px;
font-size: 10px;
background-color: #1a1a1a;
background-image: repeating-linear-gradient(45deg, rgba(212, 166, 72, 0.06) 0 8px, transparent 8px 16px);
border: 1px solid var(--line);
color: var(--text-mute);
display: flex; align-items: center; justify-content: center;
text-align: center;
font-family: var(--font-mono);
overflow: hidden;
}
.range-card__media img { width: 100%; height: 100%; object-fit: cover; }
.range-card__cat {
font-family: var(--font-mono);
font-size: 10px;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
letter-spacing: 0.2em;
text-transform: uppercase;
}
.range-card__title {
font-family: var(--font-display);
font-size: 22px;
margin: 4px 0 0;
color: var(--text);
letter-spacing: 0.02em;
line-height: 1;
}
.range-card__foot {
margin-top: 12px;
display: flex; justify-content: space-between; align-items: center;
font-size: 12px;
color: var(--text-dim);
}
.range-card__foot strong { color: var(--text); font-weight: 600; }
.range-card__cta { color: var(--gold); }
/* ============================================================
Promo banner (FÊTE DU GROSSISTE)
============================================================ */
.promo-banner {
max-width: var(--container);
margin: 0 auto;
background: linear-gradient(135deg, #1a1308 0%, #0a0a0a 60%);
border: 1px solid var(--gold-2);
padding: 48px;
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: 32px;
align-items: center;
position: relative;
overflow: hidden;
}
.promo-banner__ghost {
position: absolute;
right: -40px;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-display);
font-size: 360px;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
opacity: 0.08;
line-height: 1;
pointer-events: none;
}
.promo-banner__title {
font-family: var(--font-display);
font-size: 56px;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
line-height: 0.9;
margin: 0;
letter-spacing: 0.02em;
}
.promo-banner__big {
font-family: var(--font-display);
font-size: 80px;
color: var(--text);
margin-top: 8px;
line-height: 0.9;
}
.promo-banner__big small { font-size: 40px; }
.promo-banner__step { position: relative; border-left: 1px solid var(--line-2); padding-left: 32px; }
.promo-banner__step-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-mute);
letter-spacing: 0.2em;
}
.promo-banner__step-amount { font-size: 14px; color: var(--text-dim); margin-top: 6px; }
.promo-banner__step-pct {
font-family: var(--font-display);
font-size: 48px;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
margin-top: 4px;
line-height: 1;
}
@media (max-width: 1024px) {
.promo-banner { grid-template-columns: 1fr; padding: 32px; }
.promo-banner__step { border-left: 0; border-top: 1px solid var(--line-2); padding: 24px 0 0 0; }
}
/* ============================================================
Value props (4 colonnes filière intégrée)
============================================================ */
.value-props { background: var(--bg-0); padding: var(--space-10) 24px; }
.value-props__inner { max-width: var(--container); margin: 0 auto; }
.value-props__head { margin-bottom: 48px; }
.value-props__head h2 { margin: 8px 0 0; max-width: 800px; font-size: clamp(32px, 4vw, 56px); }
.value-props__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.value-props__cell {
padding: 32px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.value-props__cell h3 {
font-family: var(--font-display);
font-size: 22px;
margin: 16px 0 12px;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
letter-spacing: 0.02em;
}
.value-props__cell p { font-size: 14px; color: var(--text-dim); line-height: 1.6; margin: 0; }
.value-props__num {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-mute);
margin-top: 24px;
letter-spacing: 0.2em;
display: block;
}
@media (max-width: 1024px) { .value-props__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .value-props__grid { grid-template-columns: 1fr; } }
/* ============================================================
Stats
============================================================ */
.stats-band {
background: var(--bg-1);
padding: 60px 24px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.stats-band__inner { max-width: var(--container); margin: 0 auto; }
.stats-band__title { text-align: center; margin-bottom: 32px; }
.stats-band__items {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.stats-band__item { text-align: center; }
.stats-band__value {
font-family: var(--font-display);
font-size: 56px;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
letter-spacing: 0.02em;
line-height: 1;
}
.stats-band__label {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-dim);
letter-spacing: 0.25em;
margin-top: 4px;
text-transform: uppercase;
}
@media (max-width: 768px) {
.stats-band__items { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
.stats-band__value { font-size: 40px; }
}
/* ============================================================
Lead magnet (catalogue PDF)
============================================================ */
.lead-magnet { padding: 80px 24px; }
.lead-magnet__inner {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 48px;
align-items: center;
border: 1px solid var(--line);
padding: 48px;
background: var(--bg-2);
}
.lead-magnet__title { margin: 12px 0 0; font-size: clamp(36px, 5vw, 64px); }
.lead-magnet__sub { color: var(--text-dim); margin-top: 16px; max-width: 480px; }
.lead-magnet__form { display: flex; gap: 0; margin-top: 24px; max-width: 460px; }
.lead-magnet__form input[type="email"] {
flex: 1;
padding: 14px 16px;
background: var(--bg-0);
border: 1px solid var(--line-2);
border-right: none;
color: var(--text);
outline: none;
font-size: 14px;
}
.lead-magnet__visual {
aspect-ratio: 3 / 4;
font-size: 12px;
}
@media (max-width: 1024px) { .lead-magnet__inner { grid-template-columns: 1fr; padding: 32px; } }
/* ============================================================
Blog teasers
============================================================ */
.blog-teasers { background: var(--bg-0); padding: 80px 24px; }
.blog-teasers__inner { max-width: var(--container); margin: 0 auto; }
.blog-teasers__head {
display: flex; justify-content: space-between; align-items: end;
margin-bottom: 32px; gap: 24px; flex-wrap: wrap;
}
.blog-teasers__head h2 { margin: 0; font-size: clamp(32px, 4vw, 56px); }
.blog-teasers__head a { color: var(--gold); font-family: var(--font-mono); font-size: 13px; }
.blog-teasers__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.blog-teasers__card {
border: 1px solid var(--line);
padding: 24px;
background: var(--bg-2);
display: flex; flex-direction: column;
}
.blog-teasers__media {
aspect-ratio: 16 / 9;
margin-bottom: 16px;
font-size: 10px;
overflow: hidden;
}
.blog-teasers__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-teasers__cat {
font-family: var(--font-mono);
font-size: 10px;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
letter-spacing: 0.2em;
text-transform: uppercase;
}
.blog-teasers__title { font-size: 17px; margin: 8px 0 0; color: var(--text); line-height: 1.35; font-weight: 600; font-family: var(--font-body); }
.blog-teasers__title a { color: inherit; }
.blog-teasers__cta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-mute);
margin-top: 16px;
letter-spacing: 0.15em;
}
@media (max-width: 1024px) { .blog-teasers__cards { grid-template-columns: 1fr; } }
/* ============================================================
FAQ
============================================================ */
.faq-block { background: var(--bg-1); padding: var(--space-10) 24px; border-top: 1px solid var(--line); }
.faq-block__inner { max-width: var(--container-narrow); margin: 0 auto; }
.faq-block__head { text-align: center; margin-bottom: 48px; }
.faq-block__head h2 { margin: 8px 0 0; font-size: clamp(32px, 4vw, 56px); }
.faq-item {
border-top: 1px solid var(--line);
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 20px 0;
display: flex; justify-content: space-between; align-items: center; gap: 16px;
color: var(--text);
font-size: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span.faq-num {
font-family: var(--font-mono);
font-size: 12px;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
margin-right: 16px;
letter-spacing: 0.15em;
}
.faq-item summary::after {
content: "+";
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
font-size: 24px;
line-height: 1;
transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__answer { padding: 0 0 20px 36px; color: var(--text-dim); font-size: 14px; }
/* ============================================================
Footer trust pillars (remplace l'ancien CTA newsletter)
============================================================ */
.footer-pillars {
background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
border-top: 1px solid var(--line);
padding: 36px var(--container-px, 24px) 31px;
}
.footer-pillars__inner {
/* Aligné pile sur le contenu de .container (var(--container) - 2× padding latéral) */
max-width: calc(var(--container) - 2 * var(--container-px, 24px));
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 24px;
flex-wrap: wrap;
}
.footer-pillar {
display: flex;
align-items: center;
gap: 14px;
flex: 1 1 0;
min-width: 220px;
position: relative;
padding: 0;
}
.footer-pillar__icon {
margin-top: 0;
}
.footer-pillar__body {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.footer-pillar__sub {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.footer-pillar__title,
.footer-pillar__sub { word-break: break-word; overflow-wrap: anywhere; hyphens: auto; }
/* Séparateur retiré */
.footer-pillar__icon {
flex: 0 0 auto;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--gold);
}
.footer-pillar__icon svg { width: 22px; height: 22px; display: block; }
.footer-pillar__body { min-width: 0; }
.footer-pillar__title {
margin: 0;
font-family: var(--font-display, 'Inter', sans-serif);
font-size: 17px;
font-weight: 700;
color: var(--text, #f5f5f5);
line-height: 1.25;
letter-spacing: 0.005em;
/* 1 ligne fixe — garantit que tous les titres alignent leur baseline */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
min-height: 1.25em;
}
.footer-pillar__sub {
margin: 6px 0 0;
font-size: 14px;
color: var(--text-dim);
line-height: 1.45;
/* Force exactement 2 lignes pour tous : min + max identiques → bandeau parfaitement aligné */
min-height: calc(1.45em * 2);
max-height: calc(1.45em * 2);
}
@media (max-width: 1024px) {
.footer-pillar { flex: 1 1 calc(50% - 24px); min-width: 0; }
.footer-pillar:nth-child(2)::after { display: none; }
.footer-pillar:nth-child(3)::after,
.footer-pillar:nth-child(4)::after { display: none; }
}
@media (max-width: 560px) {
.footer-pillars { padding: 24px var(--container-px, 12px) 20px; }
.footer-pillars__inner { gap: 16px; }
.footer-pillar { flex: 1 1 100%; gap: 12px; }
.footer-pillar::after { display: none !important; }
.footer-pillar__icon { width: 36px !important; height: 36px !important; }
.footer-pillar__icon svg { width: 18px !important; height: 18px !important; }
.footer-pillar__title { font-size: 14px !important; line-height: 1.3 !important; min-height: 0 !important; }
.footer-pillar__sub {
font-size: 12.5px !important;
line-height: 1.4 !important;
min-height: 0 !important;
max-height: none !important;
margin-top: 4px !important;
}
}
/* ============================================================
Site footer
============================================================ */
.site-footer { background: #000; padding: 56px var(--container-px, 24px) 24px; border-top: 1px solid var(--line); }
.site-footer__inner {
/* Aligné pile sur le contenu de .container (qui a padding intérieur var(--container-px)
à gauche+droite via box-sizing border-box, donc largeur utile = var(--container) - 2× padding). */
max-width: calc(var(--container) - 2 * var(--container-px, 24px));
margin: 0 auto;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 48px;
}
.site-footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.site-footer__brand .display { font-family: var(--font-display); font-size: 22px; color: var(--gold); }
.site-footer__brand img.custom-logo,
.site-footer__brand img { max-height: 80px; width: auto; }
.site-footer__bio { color: #fff; font-size: 15px; line-height: 1.6; max-width: 380px; }
.site-footer h4,
.site-footer__col-title {
font-family: var(--font-mono);
font-size: 12px;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
letter-spacing: 0.25em;
margin: 0 0 16px;
text-transform: uppercase;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.site-footer a { color: #fff !important; font-size: 15px; line-height: 1.4; }
.site-footer a:hover { color: var(--gold) !important; }
/* Colonnes du footer en — neutralisées sur desktop (toujours
ouvertes, summary inerte), accordéon actif uniquement sur mobile. */
.site-footer__col { display: block; }
.site-footer__col > summary { list-style: none; cursor: default; }
.site-footer__col > summary::-webkit-details-marker { display: none; }
.site-footer__col > summary::marker { display: none; content: ''; }
.site-footer__col > summary > h4 { display: inline-block; margin: 0 0 16px; }
/* === Logos de paiement — sous la description du brand (1ère colonne footer) === */
.site-footer__payments {
margin-top: 18px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.site-footer__payments-label {
font-family: var(--font-mono);
font-size: 11px;
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-text-fill-color: #ffffff;
color: #ffffff;
letter-spacing: 0.25em;
text-transform: uppercase;
margin: 0;
}
.site-footer__payments-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.site-footer__payments-list .cbdco-pay-brand {
display: inline-flex;
width: 42px;
height: 28px;
border-radius: 4px;
overflow: hidden;
background: var(--bg-2);
border: 1px solid var(--line);
flex: 0 0 auto;
line-height: 0;
font-size: 0;
}
.site-footer__payments-list .cbdco-pay-brand svg { width: 100%; height: 100%; display: block; }
.site-footer__bottom {
max-width: var(--container);
margin: 32px auto 0;
padding-top: 24px;
border-top: 1px solid var(--line);
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
color: var(--text);
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.1em;
}
.site-footer__legal-links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 4px 14px;
}
.site-footer__legal-links a {
color: #fff !important;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.site-footer__legal-links a:hover { color: var(--gold) !important; }
/* Séparateurs · masqués : on s'appuie sur le gap pour aérer (moins chargé) */
.site-footer__legal-links span { display: none; }
@media (max-width: 1024px) { .site-footer__inner { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 900px) {
.site-footer { padding: 28px var(--container-px, 12px) 0; }
.site-footer__inner { grid-template-columns: 1fr; gap: 0; }
/* Accordéon mobile — chaque colonne (Catégories, Mon compte, Informations).
Pas de border-bottom : le chevron devant le titre signale déjà l'accordéon. */
.site-footer__col {
border-bottom: 0 !important;
border-image: none !important;
}
/* Filet du bottom en blanc (pas le var(--line) gris/doré desktop) */
.site-footer__bottom {
border-top-color: rgba(255,255,255,0.12) !important;
}
.site-footer__col > summary {
cursor: pointer;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 4px;
min-height: 14px;
position: relative;
gap: 10px;
line-height: 1;
}
.site-footer__col > summary > h4 {
margin: 0 !important;
padding: 0 !important;
font-size: 12px !important;
line-height: 1 !important;
font-weight: 400 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase;
/* Tout en blanc sur mobile — override le gradient doré desktop */
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: #fff !important;
color: #fff !important;
}
/* Chevron AVANT le titre (à gauche) — rotate au déroulé */
.site-footer__col > summary::before {
content: '';
display: inline-block;
width: 7px; height: 7px;
border-right: 1.5px solid #fff;
border-bottom: 1.5px solid #fff;
transform: rotate(-45deg);
transform-origin: 65% 65%;
transition: transform .25s ease;
flex-shrink: 0;
order: -1;
}
.site-footer__col[open] > summary::before { transform: rotate(45deg); }
/* Plus de chevron à droite */
.site-footer__col > summary::after { display: none; }
.site-footer__col > ul,
.site-footer__col > .menu-container,
.site-footer__col > .menu-container > ul,
.site-footer__col > div {
padding: 12px 4px 0 !important;
}
/* Logo + bio côte à côte (logo gauche, texte droite) */
.site-footer__inner > div:first-child {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-bottom: 4px;
}
.site-footer__brand {
margin: 0 !important;
flex: 0 0 auto;
}
.site-footer__brand img.custom-logo,
.site-footer__brand img {
/* 70×76 = multiples entiers du ratio source 175/190 (pas de sub-pixel) */
height: 70px;
width: 76px;
max-height: 70px;
max-width: 76px;
image-rendering: auto;
image-rendering: high-quality;
-ms-interpolation-mode: bicubic;
}
.site-footer__bio {
flex: 1 1 0;
min-width: 0;
margin: 0 !important;
font-size: 12.5px !important;
line-height: 1.4 !important;
}
/* Payments : ligne suivante, pleine largeur */
.site-footer__payments {
flex: 0 0 100%;
margin-top: 8px !important;
}
.site-footer__bio { font-size: 13px; line-height: 1.5; }
.site-footer h4,
.site-footer__col-title { margin-bottom: 8px; font-size: 10.5px; }
.site-footer ul { gap: 6px; }
.site-footer a { font-size: 13.5px; }
.site-footer__payments-list .cbdco-pay-brand { width: 36px; height: 24px; }
.site-footer__bottom {
margin-top: 27px !important;
padding-top: 22px !important;
padding-bottom: 22px !important;
gap: 12px;
flex-direction: column;
text-align: center;
align-items: center;
font-size: 11px;
}
.site-footer__legal-links {
justify-content: center !important;
gap: 6px 12px !important;
}
.site-footer__legal-links a { font-size: 10px !important; }
}
/* ============================================================
Breadcrumbs
============================================================ */
.woocommerce-breadcrumb, .breadcrumb {
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-mute);
max-width: var(--container);
margin-top: 26px;
margin-bottom: -5px;
padding: 0px 24px;
}
@media (max-width: 768px) {
.woocommerce-breadcrumb, .breadcrumb { font-size: 11px; }
}
.woocommerce-breadcrumb a,
.breadcrumb a { color: var(--text-dim); }
.woocommerce-breadcrumb a:hover { color: var(--gold); }
/* ============================================================
Page hero (pages internes hors front)
Sans image : gradient sombre animé + particules dorées (style header modale).
Avec image : le ::before remplace le visuel par l'image et ::after applique
le voile sombre — voir blocs --has-image plus bas.
============================================================ */
.page-hero {
position: relative;
padding: 28px 8px 24px;
margin: 24px 0 10px;
background:
radial-gradient(circle at 20% 50%, rgba(216,183,104,.22) 0%, transparent 50%),
radial-gradient(circle at 80% 30%, rgba(160,124,44,.18) 0%, transparent 50%),
linear-gradient(135deg, #0f0d08 0%, #2d2618 50%, #1a1308 100%);
background-size: 200% 200%, 200% 200%, 100% 100%;
animation: cbdco-page-hero-shift 14s ease-in-out infinite;
border-radius: 8px;
overflow: hidden;
isolation: isolate;
}
@keyframes cbdco-page-hero-shift {
0%, 100% { background-position: 0% 50%, 100% 50%, 0 0; }
50% { background-position: 100% 50%, 0% 50%, 0 0; }
}
/* Particules dorées flottantes — uniquement quand il n'y a pas d'image
personnalisée (sinon le ::before sert de calque image). */
.page-hero:not(.page-hero--has-image)::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(circle, rgba(216,183,104,.5) 1px, transparent 1.5px);
background-size: 38px 38px;
opacity: .22;
z-index: -1;
animation: cbdco-page-hero-stars 10s linear infinite;
}
@keyframes cbdco-page-hero-stars {
from { transform: translate(0, 0); }
to { transform: translate(-38px, -38px); }
}
.page-hero--has-image {
padding-top: 36px;
padding-bottom: 32px;
}
.page-hero--has-image::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
/* var() en cascade : si --hero-image-desktop n'est pas défini, fallback
à l'ancienne --hero-image (compat). */
background-image: var(--hero-image-desktop, var(--hero-image, none));
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media (max-width: 760px) {
.page-hero--has-image::before {
background-image: var(--hero-image-mobile, var(--hero-image-desktop, var(--hero-image, none)));
}
}
@media (max-width: 760px) {
/* La règle de taille du hero mobile vit dans responsive.css (source unique).
Ici on ne fait que repositionner l'image sur le haut. */
.page-hero--has-image::before { background-position: center top; }
}
.page-hero--has-image::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg,
rgba(0,0,0, calc(var(--hero-opacity-desktop, var(--hero-opacity, 0.55)) - 0.1)),
rgba(0,0,0, calc(var(--hero-opacity-desktop, var(--hero-opacity, 0.55)) + 0.15))
);
}
@media (max-width: 760px) {
/* Overlay sombre allégé sur mobile pour laisser respirer l'image de fond
(sinon avec 0.55 par défaut elle disparaît sous le voile noir). */
.page-hero--has-image::after {
background:
linear-gradient(180deg,
rgba(0,0,0, calc(var(--hero-opacity-mobile, 0.30) - 0.1)),
rgba(0,0,0, calc(var(--hero-opacity-mobile, 0.30) + 0.15))
);
}
}
.page-hero h1 {
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(22px, 2.6vw, 34px);
margin: 4px 0 4px;
color: var(--text);
letter-spacing: 0.01em;
line-height: 1.1;
text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.page-hero__inner { max-width: 720px; }
/* Toggle CSS-only de la description longue : input + label sont cachés
globalement, n'apparaissent que dans le @media mobile de responsive.css. */
.page-hero__descr-toggle,
.page-hero__descr-more { display: none !important; }
.page-hero__top {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.page-hero .eyebrow {
color: #fff;
text-shadow: 0 1px 8px rgba(0,0,0,0.6);
font-size: 11px;
}
.page-hero__descr {
color: #f5f5f5;
font-size: 14px;
line-height: 1.6;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
font-weight: 400;
margin-bottom: -28px;
max-width: 720px;
}
.page-hero__descr p { margin: 0 0 8px; }
.page-hero__descr p:last-child { margin: 0; }
/* h2 généré par l'IA dans le hero : fondu dans la prose, pas un gros titre.
Le hero a déjà son propre titre H1 au-dessus, donc le h2 ici sert juste
d'accroche éditoriale — on le rend plus discret, légèrement plus gros
que le texte courant et avec espacement minimal. */
.page-hero__descr h2,
.page-hero__descr h3 {
font-size: 16px;
font-weight: 600;
letter-spacing: 0;
line-height: 1.4;
margin: 0 0 6px;
color: inherit;
text-transform: none;
font-family: inherit;
}
/* Breadcrumb (dans le hero : blanc, aligné sur le bord gauche du titre) */
.page-hero .breadcrumb {
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #fff;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
margin: 0;
padding: 0;
max-width: none;
}
@media (max-width: 768px) {
.page-hero .breadcrumb { font-size: 11px; }
}
.page-hero .breadcrumb a { color: #fff; text-decoration: none; opacity: 0.85; }
.page-hero .breadcrumb a:hover { color: var(--gold); opacity: 1; }
.page-hero .breadcrumb .breadcrumb__sep { margin: 0 6px; color: #fff; opacity: 0.45; }
/* Hero des catégories produit : breadcrumb blanc pur, pas de padding gauche
(override du padding-left: 24px !important global). Eyebrow "X produits" en
blanc plutôt qu'en doré (override du dégradé .eyebrow global). */
body.tax-product_cat .page-hero .breadcrumb {
padding-left: 0 !important;
padding-right: 0 !important;
text-indent: 0;
}
body.tax-product_cat .page-hero .breadcrumb,
body.tax-product_cat .page-hero .breadcrumb a,
body.tax-product_cat .page-hero .breadcrumb a:visited,
body.tax-product_cat .page-hero .breadcrumb .breadcrumb__sep {
color: #fff !important;
opacity: 1 !important;
}
body.tax-product_cat .page-hero .eyebrow {
background: none !important;
-webkit-text-fill-color: #fff !important;
color: #fff !important;
}
.page-content { padding: 20px 0; }
.page-content > .container--wide { padding: 0; }
/* ============================================================
Cards génériques (utilisable partout)
============================================================ */
.card {
background: var(--bg-2);
border: 1px solid var(--line);
padding: 24px;
}
.card:hover { border-color: var(--line-2); }
/* ============================================================
WooCommerce — Products archive
============================================================ */
.shop-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
align-items: start;
}
.shop-layout--empty {
display: flex;
justify-content: center;
align-items: center;
min-height: 55vh;
grid-template-columns: 1fr;
gap: 0;
}
.shop-layout--empty .shop-main { width: 100%; }
.shop-layout--empty .cbdco-empty-products { min-height: 0; }
@media (max-width: 1023px) {
.shop-layout {
display: flex !important;
flex-direction: column !important;
grid-template-columns: 1fr;
gap: 16px;
align-items: stretch !important;
}
/* Sur mobile/tablette : Quiz (déplacé via JS dans .shop-layout) en haut,
puis Filtres+Trier, puis produits. */
.shop-layout > .cbdco-quiz-cat-cta--mobile-top {
order: 0 !important;
width: 100% !important;
flex: 1 1 100% !important;
display: flex !important;
padding: 10px 14px !important;
margin: 0 0 7px !important;
}
.shop-layout > .cbdco-quiz-cat-cta--mobile-top .cbdco-quiz-cat-cta__btn {
width: 100% !important;
padding: 6px 4px !important;
gap: 12px !important;
min-height: 44px !important;
align-items: center !important;
justify-content: flex-start !important;
font-size: 14.5px !important;
}
.shop-layout > .cbdco-quiz-cat-cta--mobile-top .cbdco-quiz-cat-cta__sparkle {
width: 30px !important; height: 30px !important;
flex: 0 0 30px !important;
}
.shop-layout > .cbdco-quiz-cat-cta--mobile-top .cbdco-quiz-cat-cta__sparkle svg {
width: 14px !important; height: 14px !important;
}
.shop-layout > .cbdco-quiz-cat-cta--mobile-top .cbdco-quiz-cat-cta__text {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 2px !important;
}
.shop-layout > .cbdco-quiz-cat-cta--mobile-top .cbdco-quiz-cat-cta__text strong { font-size: 14px !important; line-height: 1.2 !important; }
.shop-layout > .cbdco-quiz-cat-cta--mobile-top .cbdco-quiz-cat-cta__text small {
display: block !important;
font-size: 12px !important;
line-height: 1.3 !important;
color: #ffffff !important;
font-weight: 400 !important;
}
.shop-layout > .cbdco-quiz-cat-cta--mobile-top .cbdco-quiz-cat-cta__action {
flex: 0 0 auto !important;
font-size: 12px !important;
}
.shop-layout .shop-sidebar { order: 1 !important; }
.shop-layout .shop-main { order: 2 !important; }
/* Sidebar collapsible : par défaut on ne montre que le bouton "Filtres",
le contenu (.shop-filters) s'ouvre via le toggle JS. */
.shop-sidebar {
position: static !important;
top: auto !important;
max-height: none !important;
overflow: visible !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
gap: 0 !important;
}
/* Quand la sidebar contient AUSSI le sélecteur "Trier par" (mobile),
on les met côte à côte 50/50, le panneau filtres reste full width. */
.shop-sidebar.shop-sidebar--has-ordering {
display: grid !important;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"toggle ordering"
"filters filters"
"rating rating";
gap: 8px !important;
align-items: center !important;
margin-bottom: -22px;
margin-top: -6px;
}
.shop-sidebar--has-ordering > .shop-filters-toggle { grid-area: toggle; width: 100% !important; }
.shop-sidebar--has-ordering > form.woocommerce-ordering { grid-area: ordering; margin: 0 !important; width: 100% !important; }
.shop-sidebar--has-ordering > form.woocommerce-ordering select.orderby,
.shop-sidebar--has-ordering > form.woocommerce-ordering .cbdco-cardsel__btn { width: 100% !important; }
.shop-sidebar--has-ordering > .shop-filters { grid-area: filters; }
.shop-sidebar--has-ordering > .filter-rating-card { grid-area: rating; }
/* Bouton "Filtres" — fond gris avec fine bordure claire. */
.shop-sidebar .shop-filters-toggle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 10px 36px;
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--text);
text-transform: none;
border: 1px solid var(--line);
border-radius: 4px;
cursor: pointer;
background: var(--bg-3);
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.shop-sidebar .shop-filters-toggle:hover { color: var(--gold); }
/* Wrapper "Trier par" : on neutralise sa bordure/fond/padding propres
(sinon double bordure avec celle du bouton interne). */
.shop-sidebar--has-ordering form.woocommerce-ordering {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
}
/* Bouton interne "Trier par" : même style que le bouton Filtres. */
.shop-sidebar--has-ordering form.woocommerce-ordering.cbdco-cardsel-host .cbdco-cardsel__btn {
background: var(--bg-3) !important;
border: 1px solid var(--line) !important;
border-radius: 4px !important;
padding: 10px 36px !important;
font-size: 12.5px !important;
justify-content: center !important;
min-width: 0 !important;
}
.shop-sidebar .shop-filters-toggle:focus,
.shop-sidebar .shop-filters-toggle:focus-visible,
.shop-sidebar .shop-filters-toggle:active { outline: none !important; box-shadow: none !important; }
.shop-sidebar .shop-filters-toggle__caret {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
color: var(--gold);
pointer-events: none;
transition: transform .2s ease;
}
.shop-sidebar.is-open .shop-filters-toggle__caret { transform: translateY(-50%) rotate(180deg); }
.shop-sidebar > .shop-filters,
.shop-sidebar > .filter-rating-card { display: none !important; }
.shop-sidebar.is-open > .shop-filters {
display: flex !important;
flex-direction: column !important;
margin-top: 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 14px 14px 16px;
gap: 18px;
}
.shop-sidebar.is-open > .shop-filters > * { margin: 0 !important; }
.shop-sidebar.is-open > .shop-filters .filter-group,
.shop-sidebar.is-open > .shop-filters .filter-group__inner,
.shop-sidebar.is-open > .shop-filters .widget {
padding: 0 !important;
margin: 0 !important;
}
.shop-sidebar.is-open > .shop-filters h3,
.shop-sidebar.is-open > .shop-filters .filter-group__title {
font-size: 13px !important;
margin: 8px 0 10px !important;
}
/* Premier titre de section : un peu plus d'air pour ne pas être collé au
top du panneau (juste sous la barre toggle/tri). */
.shop-sidebar.is-open > .shop-filters > :first-child h3,
.shop-sidebar.is-open > .shop-filters > :first-child .filter-group__title,
.shop-sidebar.is-open > .shop-filters h3:first-child,
.shop-sidebar.is-open > .shop-filters .filter-group:first-child .filter-group__title {
margin-top: 4px !important;
}
.shop-sidebar.is-open > .shop-filters .filter-pills,
.shop-sidebar.is-open > .shop-filters .pa-pills { gap: 6px !important; }
.shop-sidebar.is-open > .shop-filters .filter-pills__btn,
.shop-sidebar.is-open > .shop-filters .pa-pill {
padding: 6px 10px !important;
font-size: 11.5px !important;
}
.shop-sidebar.is-open > .filter-rating-card {
display: flex !important;
margin-top: 10px;
}
}
/* Le bouton toggle n'existe que sur mobile — il est masqué sur desktop. */
@media (min-width: 1024px) {
.shop-sidebar .shop-filters-toggle { display: none; }
}
.shop-sidebar {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 22px 22px 24px;
display: flex;
flex-direction: column;
gap: 22px;
position: sticky;
top: 86px;
max-height: calc(100vh - 110px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--gold) transparent;
}
.shop-sidebar::-webkit-scrollbar { width: 6px; }
.shop-sidebar::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }
/* === Custom shop filters === */
.shop-filters {
display: flex;
flex-direction: column;
gap: 18px;
}
.shop-filters .filter-group + .filter-group { padding-top: 18px; border-top: 1px solid var(--line); }
/* Empty state — affiché quand la catégorie n'expose aucun attribut filtrable. */
.shop-filters__empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 22px 18px;
background: rgba(212, 168, 75, 0.04);
border: 1px dashed rgba(212, 168, 75, 0.28);
border-radius: 10px;
text-align: center;
}
.shop-filters__empty-icon {
color: var(--gold, #c9a36b);
opacity: 0.85;
}
.shop-filters__empty-title {
margin: 0;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--text, #f5f1e8);
letter-spacing: 0.2px;
}
.shop-filters__empty-text {
margin: 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-mute, #a0a0a0);
}
.filter-reset {
display: inline-flex; align-items: center; gap: 6px;
align-self: flex-start;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--text-dim);
padding: 6px 12px;
border: 1px solid var(--line);
border-radius: 999px;
text-decoration: none;
transition: all .15s ease;
}
.filter-reset:hover { color: var(--gold); border-color: var(--gold); background: rgba(212,166,72,0.08); }
.filter-group { display: flex; flex-direction: column; gap: 10px; }
.shop-sidebar .filter-group__title,
.filter-group__title {
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
margin: 0;
padding: 0;
border-bottom: 0;
}
h3.filter-group__title {
margin-bottom: 8px !important;
}
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--text);
text-decoration: none;
transition: all .15s ease;
cursor: pointer;
}
.filter-pill em {
font-style: normal;
font-size: 11px;
color: var(--text-mute);
font-weight: 600;
}
.filter-pill:hover { border-color: var(--gold); color: var(--gold); }
.filter-pill:hover em { color: var(--gold); }
.filter-pill.is-active {
background: var(--btn-bg);
border-color: transparent;
color: #1a1208;
font-weight: 600;
}
.filter-pill.is-active em { color: rgba(26,18,8,0.7); }
.filter-bins { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filter-bin {
display: flex; flex-direction: column; gap: 2px;
padding: 12px 14px;
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: 8px;
font-family: var(--font-body);
color: var(--text);
text-decoration: none;
transition: all .15s ease;
}
.filter-bin strong { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.filter-bin span { font-size: 11px; color: var(--text-mute); letter-spacing: 0.04em; }
.filter-bin:hover { border-color: var(--gold); color: var(--gold); }
.filter-bin:hover span { color: var(--gold); opacity: 0.85; }
.filter-bin.is-active {
background: var(--btn-bg);
border-color: transparent;
color: #1a1208;
}
.filter-bin.is-active span { color: rgba(26,18,8,0.7); }
/* === Filtre par note === */
.filter-rating { display: flex; flex-direction: column; gap: 6px; }
.filter-rating-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: 8px;
font-family: var(--font-body);
font-size: 13px;
color: var(--text);
text-decoration: none;
transition: all .15s ease;
}
.filter-rating-row:hover {
border-color: var(--gold);
color: var(--gold);
}
.filter-rating-row.is-active {
background: var(--btn-bg);
border-color: transparent;
color: #1a1208;
font-weight: 600;
}
.filter-rating__stars {
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
font-size: 14px;
letter-spacing: 1px;
line-height: 1;
}
.filter-rating-row.is-active .filter-rating__stars {
background: none;
-webkit-text-fill-color: #1a1208;
color: #1a1208;
}
.filter-rating__label { flex: 1; }
.filter-rating-row em {
font-style: normal;
font-size: 11px;
color: var(--text-mute);
font-weight: 600;
}
.filter-rating-row:hover em { color: var(--gold); }
.filter-rating-row.is-active em { color: rgba(26,18,8,0.7); }
/* Sheen doré générique (réutilisable partout via .filter-rating-card, .sp-trust, etc.) */
@keyframes cbdco-sheen {
0% { left: -40%; }
60% { left: 110%; }
100% { left: 110%; }
}
/* === Bloc réassurance "Note moyenne" sous les filtres === */
.filter-rating-card {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
margin-top: 0px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
position: relative;
overflow: hidden;
}
.filter-rating-card::before {
content: '';
position: absolute;
top: 0; left: -40%;
width: 40%;
height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(226, 203, 151, 0.10) 45%, rgba(226, 203, 151, 0.20) 50%, rgba(226, 203, 151, 0.10) 55%, transparent 100%);
pointer-events: none;
transform: skewX(-18deg);
animation: cbdco-sheen 7s 1s ease-in-out infinite;
z-index: 0;
}
.filter-rating-card > * { position: relative; z-index: 1; }
.filter-rating-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 50%;
background: var(--btn-bg);
border: 1px solid var(--gold);
color: #1a1208;
box-shadow: 0 2px 10px rgba(212, 168, 75, 0.30);
}
.filter-rating-card__body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.filter-rating-card__head {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.filter-rating-card__avg {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
letter-spacing: 0;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
}
.filter-rating-card__stars {
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
font-size: 14px;
letter-spacing: 1px;
line-height: 1;
}
.filter-rating-card__sub {
font-size: 11px;
color: var(--text-mute);
letter-spacing: 0.04em;
line-height: 1.4;
}
@media (max-width: 1023px) {
.shop-sidebar { position: static; max-height: none; overflow: visible; }
}
/* === Filtre prix dual range === */
.filter-price { display: flex; flex-direction: column; gap: 12px; }
.filter-price__values {
display: flex;
justify-content: space-between;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.filter-price__track {
position: relative;
height: 28px;
margin: 0 8px;
}
.filter-price__track::before {
content: "";
position: absolute;
left: 0; right: 0; top: 50%;
height: 4px;
transform: translateY(-50%);
background: var(--bg-3);
border-radius: 2px;
}
.filter-price__range {
position: absolute;
top: 50%;
height: 4px;
transform: translateY(-50%);
background: var(--btn-bg);
border-radius: 2px;
left: 0; right: 0;
}
.filter-price__track input[type="range"] {
position: absolute;
left: 0; top: 0;
width: 100%;
height: 28px;
margin: 0;
background: transparent;
-webkit-appearance: none;
appearance: none;
pointer-events: none;
z-index: 2;
}
.filter-price__track input[type="range"]::-webkit-slider-runnable-track {
background: transparent;
height: 4px;
}
.filter-price__track input[type="range"]::-moz-range-track {
background: transparent;
height: 4px;
}
.filter-price__track input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--gold);
border: 2px solid var(--bg-1);
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
cursor: pointer;
pointer-events: auto;
margin-top: -7px;
}
.filter-price__track input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--gold);
border: 2px solid var(--bg-1);
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
cursor: pointer;
pointer-events: auto;
}
.filter-price__btn {
background: var(--btn-bg);
color: #1a1208;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 9px 14px;
border: 0;
border-radius: 6px;
cursor: pointer;
transition: transform .15s ease;
}
.filter-price__btn:hover { transform: translateY(-1px); }
/* On masque les widgets non-pertinents : catégories, derniers articles, méta, recherche. */
.shop-sidebar .widget_product_categories,
.shop-sidebar .widget_categories,
.shop-sidebar .widget_recent_entries,
.shop-sidebar .widget_meta,
.shop-sidebar .widget_search { display: none; }
.shop-sidebar .widget { margin: 0; }
.shop-sidebar .widget-title,
.shop-sidebar h3 {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
}
.shop-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
font-family: var(--font-body);
font-size: 14px;
letter-spacing: 0;
}
.shop-sidebar ul li {
padding: 8px 0;
border-bottom: 1px dashed var(--line);
color: var(--text-dim);
}
.shop-sidebar ul li:last-child { border-bottom: 0; }
.shop-sidebar ul li a {
color: var(--text-dim);
text-decoration: none;
transition: color .15s ease;
}
.shop-sidebar ul li a:hover { color: var(--gold); }
.shop-sidebar ul li.chosen a,
.shop-sidebar ul li.current-cat a { color: var(--gold); }
.shop-sidebar ul li .count {
float: right;
color: var(--text-mute);
font-size: 12px;
letter-spacing: 0;
}
/* WC Price Filter */
.shop-sidebar .price_slider_wrapper { padding-top: 4px; }
.shop-sidebar .price_slider {
background: var(--bg-3);
height: 4px;
border-radius: 2px;
margin: 16px 0 18px;
position: relative;
}
.shop-sidebar .ui-slider-range {
position: absolute;
background: linear-gradient(90deg, var(--gold-2), var(--gold), var(--gold-soft));
height: 4px;
border-radius: 2px;
}
.shop-sidebar .ui-slider-handle {
position: absolute;
top: -7px;
width: 18px;
height: 18px;
background: var(--gold);
border: 2px solid var(--bg-0);
border-radius: 50%;
cursor: pointer;
margin-left: -9px;
outline: none;
}
.shop-sidebar .price_slider_amount {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--text-dim);
}
.shop-sidebar .price_slider_amount .price_label { flex: 1 1 auto; }
.shop-sidebar .price_slider_amount .price_label span {
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
font-weight: 600;
}
.shop-sidebar .price_slider_amount .button {
background: var(--btn-bg);
color: #1a1208;
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 8px 14px;
border: 0;
cursor: pointer;
}
.shop-sidebar .price_slider_amount .button:hover { transform: translateY(-1px); }
/* Active filters widget */
.shop-sidebar .woocommerce-widget-layered-nav-list__item--chosen a::before {
content: "✕";
background: var(--gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold);
margin-right: 6px;
font-size: 10px;
}
.shop-toolbar {
display: flex; justify-content: flex-end; align-items: center;
background: transparent;
border: 0;
padding: 0;
margin-bottom: 8px;
font-family: var(--font-body);
}
.woocommerce-result-count { display: none; }
.woocommerce-ordering {
margin: 0;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 4px 6px;
transition: border-color .15s ease;
}
.woocommerce-ordering:hover { border-color: var(--gold); }
.woocommerce-ordering select {
background: transparent;
color: var(--text);
border: 0;
padding: 8px 32px 8px 14px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px 12px;
transition: color .15s ease;
}
.woocommerce-ordering select:hover,
.woocommerce-ordering select:focus,
.woocommerce-ordering select:focus-visible {
color: var(--gold);
outline: none;
box-shadow: none;
border-color: transparent;
}
.woocommerce-ordering select option {
background: var(--bg-2);
color: var(--text);
font-family: var(--font-body);
}
/* Quand le custom dropdown est appliqué : on garde le wrapper natif tel quel
et on neutralise le visuel du .cbdco-cardsel__btn (transparent + petit padding)
pour qu'il ait la même tête que le select WC d'origine. Seule la liste
déroulée hérite du style cbdco-cardsel. */
.woocommerce-ordering.cbdco-cardsel-host .cbdco-cardsel { width: auto; }
.woocommerce-ordering.cbdco-cardsel-host .cbdco-cardsel__btn {
background: transparent;
border: 0;
padding: 8px 32px 8px 14px;
color: var(--text);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
width: auto;
min-width: 0;
max-width: 100%;
justify-content: flex-start;
border-radius: 0;
}
@media (min-width: 769px) {
.woocommerce-ordering.cbdco-cardsel-host .cbdco-cardsel__btn { min-width: 220px; }
}
.woocommerce-ordering.cbdco-cardsel-host .cbdco-cardsel__btn:hover { color: var(--gold); }
.woocommerce-ordering.cbdco-cardsel-host .cbdco-cardsel__btn:focus { box-shadow: none; outline: none; }
.woocommerce-ordering.cbdco-cardsel-host .cbdco-cardsel__label {
flex: 1;
text-align: left;
}
.woocommerce-ordering.cbdco-cardsel-host .cbdco-cardsel__caret {
color: var(--gold);
right: 10px;
}
/* Liste déroulée : on garde le style cbdco-cardsel d'origine
(options centrées, fond bg-2, hover doré, state actif gold-soft).
Pas de scroll interne : les 6 options doivent être visibles d'un coup. */
.woocommerce-ordering.cbdco-cardsel-host .cbdco-cardsel__list {
max-height: none;
overflow: visible;
}
.woocommerce-ordering.cbdco-cardsel-host .cbdco-cardsel__opt { text-align: left; font-size: 13px; }
.woocommerce ul.products,
ul.products {
list-style: none; padding: 0; margin: 0 0 48px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.shop-main > ul.products:last-child { margin-bottom: 0; }
/* Neutralise le clearfix legacy de WC qui crée des grid items fantômes. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { display: none !important; }
@media (max-width: 1279px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
/* Reset des défauts WooCommerce float-layout pour passer en grid pur.
!important nécessaire car WC charge .columns-N li.product avec spécificité (0,0,3,2). */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product {
width: auto !important;
float: none !important;
margin: 0 !important;
clear: none;
background: var(--bg-2);
border: 1px solid var(--line);
padding: 0;
display: flex; flex-direction: column;
transition: border-color .2s ease, background .2s ease;
position: relative;
}
ul.products li.product:hover {
border-color: transparent;
background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
var(--btn-bg) border-box;
}
.product__media-wrap {
position: relative;
overflow: hidden;
}
.product__media {
aspect-ratio: 1 / 1;
background-color: #1a1a1a;
background-image: repeating-linear-gradient(45deg, rgba(212, 166, 72, 0.06) 0 8px, transparent 8px 16px);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
border-bottom: 1px solid var(--line);
}
.product__media img { width: 100%; height: 100%; object-fit: cover; margin: 0 !important; }
/* Override le margin par défaut WC qui casse l'aspect carré des cards. */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img { margin: 0 !important; }
/* Badges (top-left / top-right corners) */
.product__badges {
position: absolute; top: 10px; z-index: 2;
display: flex; flex-direction: column; gap: 6px;
pointer-events: none;
}
.product__badges--start { left: 10px; align-items: flex-start; }
.product__badges--end { right: 10px; align-items: flex-end; }
.badge {
display: inline-block;
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.08em;
padding: 5px 10px;
border-radius: 4px;
line-height: 1;
text-transform: uppercase;
pointer-events: auto;
}
.badge--featured,
.badge--new,
.badge--limited {
background: var(--gold-soft);
color: #1a1208;
border: 1px solid var(--gold);
}
.badge--sale {
background: #d33b3b;
color: #fff;
font-weight: 700;
}
ul.products li.product a { color: var(--text); }
.product__body { padding: 20px 22px 6px; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.product__cat {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-mute);
font-weight: 500;
margin-bottom: 8px;
opacity: 0.85;
}
.product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3,
ul.products li.product .woocommerce-loop-product__title {
font-family: var(--font-display);
font-size: 0.9rem;
color: var(--text);
margin: 6px 0 8px;
line-height: 1.2;
letter-spacing: 0.02em;
}
.product__rating {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
margin-bottom: 12px;
}
.product__rating .stars { color: var(--gold); letter-spacing: 1px; }
.product__rating .reviews { color: var(--text-mute); letter-spacing: 0.05em; }
/* Étoiles : __track wrap les __bg + __fg pour que la width % du __fg se
calcule sur la largeur des étoiles uniquement (sinon les __avg/__count
du parent .cbdco-stars gonflent la base de calcul). */
.cbdco-stars__track { position: relative; display: inline-block; vertical-align: middle; line-height: 1; }
.cbdco-stars__track .cbdco-stars__bg { display: inline-block; }
.cbdco-stars__track .cbdco-stars__fg {
position: absolute;
top: 0;
left: 0;
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
/* Dégradé doré sur les étoiles "remplies" dans les cards loop */
.product__rating--cbdco .cbdco-stars__fg {
background: var(--btn-bg);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Popover "aperçu des derniers avis" sur les pills rating (hover) */
.cbdco-rating-popover {
position: fixed;
z-index: 1000;
width: 320px;
max-width: calc(100vw - 16px);
background: var(--bg-2);
border: 1px solid var(--line-2);
border-radius: 10px;
box-shadow: 0 16px 40px rgba(0,0,0,0.5);
padding: 14px 14px 12px;
color: var(--text);
font-size: 13px;
line-height: 1.45;
pointer-events: auto;
animation: cbdco-pop-in .14s ease-out;
}
.cbdco-rating-popover[hidden] { display: none; }
.cbdco-rating-popover::after {
content: "";
position: absolute;
left: var(--cbdco-pop-arrow, 50%);
transform: translateX(-50%) rotate(45deg);
width: 10px; height: 10px;
background: var(--bg-2);
border: 1px solid var(--line-2);
}
.cbdco-rating-popover[data-placement="top"]::after {
bottom: -6px;
border-top: 0;
border-left: 0;
}
.cbdco-rating-popover[data-placement="bottom"]::after {
top: -6px;
border-bottom: 0;
border-right: 0;
}
.cbdco-rating-popover__loading {
color: var(--text-mute);
font-size: 13px;
text-align: center;
padding: 6px 0;
}
.cbdco-rating-popover__empty { text-align: center; padding: 4px 6px 2px; }
.cbdco-rating-popover__empty-icon { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.cbdco-rating-popover__empty-title {
color: var(--gold-soft);
font-weight: 600;
font-size: 14px;
margin-bottom: 4px;
}
.cbdco-rating-popover__empty-sub {
color: var(--text-mute);
font-size: 12.5px;
line-height: 1.4;
}
.cbdco-rating-popover__head {
display: flex; align-items: baseline; gap: 4px;
font-size: 16px;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
}
.cbdco-rating-popover__head strong {
font-size: 22px;
font-weight: 700;
color: var(--gold-soft);
}
.cbdco-rating-popover__head span:nth-of-type(1) {
color: var(--text-mute);
font-size: 13px;
}
.cbdco-rating-popover__count {
color: var(--text-mute);
font-size: 12px;
margin-left: 4px;
}
.cbdco-rating-popover__list {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 12px;
max-height: 320px;
overflow-y: auto;
}
.cbdco-rating-popover__item {
border-left: 2px solid var(--gold-2);
padding-left: 10px;
}
.cbdco-rating-popover__row {
display: flex; align-items: center; gap: 8px;
margin-bottom: 4px;
flex-wrap: wrap;
}
.cbdco-rating-popover__author {
font-weight: 600;
color: var(--text);
font-size: 12.5px;
}
.cbdco-rating-popover__date {
color: var(--text-mute);
font-size: 11.5px;
margin-left: auto;
}
.cbdco-rating-popover__text {
margin: 0;
color: var(--text-dim);
font-size: 13px;
line-height: 1.45;
}
@keyframes cbdco-pop-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Bloc rating en overlay bas de la photo — pill compact centré (lisibilité max) */
.product__rating--overlay {
position: absolute;
left: 50%; bottom: 12px;
transform: translateX(-50%);
margin: 0 !important;
padding: 6px 12px;
background: rgba(15,15,15,0.78);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(212,168,75,0.25);
border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
white-space: nowrap;
z-index: 2;
box-shadow: 0 4px 14px rgba(0,0,0,0.35);
cursor: help;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.product__rating--overlay[data-rating-preview]:hover {
transform: translateX(-50%) translateY(-1px);
border-color: rgba(212,168,75,0.55);
box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.product__rating--overlay .cbdco-stars__avg {
color: #f5f5f5;
line-height: 1;
}
/* Centre les étoiles + la note via flex (sinon les ★ ont une baseline plus
haute que les chiffres et apparaissent décalés vers le bas) */
.product__rating--overlay .cbdco-stars {
display: inline-flex;
align-items: center;
gap: 3px;
}
.product__rating--overlay .cbdco-stars__track {
display: inline-flex;
align-items: center;
line-height: 1;
/* Le glyphe ★ Unicode est dessiné dans la moitié haute de sa boîte → on
remonte physiquement de 2px pour que le centre visuel coïncide avec
le centre du chiffre "4,0". */
transform: translateY(-2px);
}
.product__rating--overlay .cbdco-stars__bg,
.product__rating--overlay .cbdco-stars__fg {
line-height: 1;
}
/* "À partir de" + prix au gramme */
.product__price-row { margin: 0 0 20px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; }
.product__price-label {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-mute);
align-self: center;
}
.product__price-amount {
color: var(--text);
font-family: var(--font-display);
letter-spacing: 0.02em;
line-height: 1;
display: inline-flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 10px;
}
.product__price-now {
display: inline-flex; align-items: baseline; gap: 2px;
font-size: 20px;
font-weight: 600;
color: #fff;
font-family: var(--font-display);
letter-spacing: 0.02em;
line-height: 1;
}
.product__price-was {
display: inline-flex; align-items: baseline; gap: 2px;
font-size: 13px;
color: var(--text-mute);
text-decoration: line-through;
font-weight: 400;
}
.product__price-amount .product__price-unit {
font-size: 12px;
color: var(--text-dim);
letter-spacing: 0.05em;
font-weight: 400;
}
.product__price-was .product__price-unit { font-size: 10px; }
/* Tailles réduites sur mobile : avec 2 cartes par ligne, 26px déborde
et créait des retours à la ligne disgracieux. */
@media (max-width: 768px) {
.product__price-row { gap: 2px; margin: 0 0 10px; }
.product__price-label { font-size: 10px; letter-spacing: 0.05em; }
.product__price-now,
ul.products .product__price,
ul.products li.product .price { font-size: 17px !important; }
.product__price-now { gap: 1px; }
.product__price-was { font-size: 12px; }
.product__price-amount {
gap: 6px;
flex-wrap: wrap;
}
.product__price-amount .product__price-unit { font-size: 11px; }
.product__price-was .product__price-unit { font-size: 9.5px; }
}
@media (max-width: 480px) {
.product__price-now,
ul.products .product__price,
ul.products li.product .price { font-size: 15px !important; }
.product__price-was { font-size: 11px; }
.product__price-amount .product__price-unit { font-size: 10px; }
.product__price-was .product__price-unit { font-size: 9px; }
/* Card body : compactage agressif pour éviter les cartes hautes sur 2 cols.
Plus d'espacement réduit + titre limité à 2 lignes (clamp). */
ul.products li.product .product__body { padding: 14px 12px 4px; }
ul.products li.product .product__cat { margin-bottom: 4px; font-size: 9.5px; }
/* Titre clampé sur 2 lignes max avec ellipsis. Le line-clamp doit être
appliqué UNIQUEMENT au interne (qui contient le texte) — l'appliquer
sur le en plus crée des conflits de rendu (3e ligne fantôme visible). */
ul.products li.product .product__title,
ul.products li.product .woocommerce-loop-product__title {
margin: 2px 0 6px;
font-size: 13.5px;
line-height: 1.18;
}
ul.products li.product .product__title a,
ul.products li.product .woocommerce-loop-product__title a {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
hyphens: none;
}
/* Pills : compactage léger (police + padding) — wrap autorisé pour les
cards étroites en 2-cols mobile. */
ul.products li.product .product__pills {
gap: 3px;
margin: 0 0 18px;
}
ul.products li.product .product__cta {
padding: 0 9px 12px;
}
ul.products li.product .product__pills .pill {
font-size: 8.5px;
padding: 3px 6px;
letter-spacing: 0.06em;
gap: 2px;
}
ul.products li.product .product__pills .pill__icon { font-size: 9px; }
/* Prix compact : "À partir de" sur sa propre ligne (petite police),
puis prix actuel + prix barré côte à côte sur la ligne suivante. */
.product__price-row {
flex-direction: column;
flex-wrap: nowrap;
gap: 7px;
margin: 4px 0 22px;
justify-content: center;
align-items: center;
}
.product__price-label {
display: block;
font-size: 9px;
letter-spacing: 0.05em;
line-height: 1;
}
.product__price-amount {
flex-wrap: nowrap;
gap: 6px;
justify-content: center;
}
}
/* Prix produit simple — UNIQUEMENT dans les listes/grilles produit (archives WC,
catégories, recherche). Le scope `ul.products` garantit que la règle ne fuit
pas sur la page produit unique (qui rend le prix dans .summary .price).
20px blanc pour cohérence avec .product__price-now (variables). */
ul.products .product__price,
ul.products li.product .price {
color: #fff;
font-family: var(--font-display);
font-size: 20px !important;
font-weight: 600;
margin: 0 0 8px;
letter-spacing: 0.02em;
line-height: 1;
}
ul.products .product__price .woocommerce-Price-amount,
ul.products .product__price .woocommerce-Price-currencySymbol,
ul.products .product__price bdi,
ul.products .product__price ins,
ul.products li.product .price .woocommerce-Price-amount,
ul.products li.product .price ins { color: #fff !important; text-decoration: none; }
ul.products li.product .price del,
ul.products .product__price del { color: var(--text-mute); font-size: 0.7em; margin-right: 6px; font-weight: 400; }
/* Barre rouge inclinée pour les prix barrés (cards loop + fiche produit + drawer + bundle).
text-decoration natif est toujours horizontal, on overlay un ::after rotaté. */
.product__price-was,
.card-cta__regular,
ul.products li.product .price del,
ul.products .product__price del,
.single-product .summary > .price del,
.single-product .atc-regular,
.cbdco-cell__regular,
.cart-drawer__item-price del {
text-decoration: none !important;
position: relative;
display: inline-block;
}
.product__price-was::after,
.card-cta__regular::after,
ul.products li.product .price del::after,
ul.products .product__price del::after,
.single-product .summary > .price del::after,
.single-product .atc-regular::after,
.cbdco-cell__regular::after,
.cart-drawer__item-price del::after {
content: "";
position: absolute;
top: 50%;
left: -1px;
right: -1px;
height: 1.5px;
background: #d33b3b;
transform: translateY(-50%) rotate(-10deg);
transform-origin: center;
pointer-events: none;
}
/* Pills (CBD% + INDOOR/GREENHOUSE + intensité). Wrap autorisé sur les cards du
loop (cards étroites en mobile 2-cols), nowrap sur la fiche single (plus large). */
.product__pills {
display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;
margin: 0 0 28px;
max-width: 100%;
}
.product__pills .pill { white-space: nowrap; }
.single-product .product__pills { flex-wrap: nowrap; overflow: hidden; }
.pill {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
font-weight: 600;
padding: 5px 9px;
border-radius: 999px;
text-transform: uppercase;
line-height: 1;
}
.pill__icon { font-size: 11px; line-height: 1; }
.pill--cbd {
background: rgba(212, 166, 72, 0.14);
color: var(--gold-soft);
border: 1px solid var(--gold-2);
}
.pill--culture {
background: rgba(76, 175, 80, 0.16);
color: #8fd694;
border: 1px solid rgba(76, 175, 80, 0.45);
}
.pill--sale {
background: #d33b3b;
color: #fff;
border: 1px solid transparent;
font-weight: 700;
}
.pill--thc {
background: rgba(56, 134, 197, 0.16);
color: #8ec3ec;
border: 1px solid rgba(56, 134, 197, 0.55);
}
.pill--intensity-leger {
background: rgba(76, 175, 80, 0.14);
color: #8fd694;
border: 1px solid rgba(76, 175, 80, 0.45);
}
.pill--intensity-fort {
background: rgba(232, 138, 51, 0.14);
color: #f4b27a;
border: 1px solid rgba(232, 138, 51, 0.50);
}
.pill--intensity-puissant {
background: rgba(213, 75, 75, 0.16);
color: #f0a3a3;
border: 1px solid rgba(213, 75, 75, 0.55);
}
/* CTA + variation select */
.product__cta { padding: 0 22px 22px; margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.card-variation-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
/* Pages catégorie + produits similaires/upsells : pas d'espace entre le