/* ============================================================
Cbdconnection — Feuille de styles principale
Design dark luxury B2B — Bebas Neue + JetBrains Mono + Inter
Source : design/CBD.zip (app.jsx)
============================================================ */
/* ----- Variables ------------------------------------------- */
:root {
/* Palette El Mundo — reprise à l'identique du thème d'origine
`elmundocbd-2026` (theme.json), seule source de vérité des couleurs :
crème + blanc, texte anthracite, UN SEUL accent = vert forêt.
L'or (#f4a419) n'existe que pour les étoiles d'avis — jamais pour du
texte, un titre ou un lien sur fond clair. */
--bg-0: #f5f0e8; /* bg */
/* Surface des blocs : crème très clair plutôt que blanc pur — les boîtes
ressortent du fond de page sans trancher. Le header, lui, reste blanc
(déclaré explicitement) pour rester net au-dessus du contenu. */
--bg-1: #faf8f3; /* surface */
--bg-2: #ede8df; /* surface-2 */
--bg-3: #e0d8cc; /* surface-3 */
--card: #faf8f3;
--line: #d8d0c4; /* border */
--line-2: #c6bcae;
--text: #1a1a1a;
--text-dim: #5a5a5a;
--text-mute: #8a8a8a;
/* `--gold*` garde son nom historique (270+ usages hérités de
cbdconnection) mais porte désormais l'accent VERT du thème d'origine.
Renommer les variables casserait tout ; on retokenise à la place. */
--gold: #2d4a2d; /* accent */
--gold-2: #0f2a1e; /* accent-deep */
--gold-soft: #3a5c3a; /* accent-hover */
/* Dégradé d'accent 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é). */
/* APLAT, pas un vrai dégradé. Cette variable alimente ~166 blocs qui la
découpent sur du texte (`background-clip: text`). Le dégradé clair→foncé
sur des lettres donnait un vert délavé et sale, signalé sur à peu près
chaque titre du site. En mettant la même couleur aux deux extrémités, tous
ces textes deviennent d'un vert plein et net — sans avoir à reprendre les
166 règles une par une. Repasser à un vrai dégradé ici le rétablirait
partout d'un coup. */
--gold-gradient: linear-gradient(135deg, var(--gold) 0%, var(--gold) 100%);
--accent-soft: #e8f0e8; /* aplats verts très clairs sur fond crème */
--accent-light: #7ab87a; /* vert clair — LISIBLE UNIQUEMENT sur fond sombre */
--star: #f4a419; /* or : étoiles d'avis, rien d'autre */
--green: #2d4a2d;
--success: #3cb371;
--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 */
/* Boutons : aplat vert forêt du thème d'origine (pas de dégradé — c'est
l'écart de vert entre le dégradé clair et l'accent qui faisait tache). */
--btn-bg: var(--gold);
--btn-bg-hover: var(--gold-soft);
--btn-fg: #ffffff;
/* Bandeau promo : même sombre que le footer, texte blanc, accent vert clair. */
--topbar-bg: #1a2a1a;
--topbar-fg: #ffffff;
--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;
}
/* ----- Surfaces sombres ------------------------------------
Le vert forêt (#2d4a2d) est fait pour le fond crème ; sur un bloc sombre
il disparaît. Plutôt que de dupliquer des règles partout, on redéfinit les
jetons d'accent DANS le bloc sombre : tous les descendants qui utilisent
var(--gold*) basculent automatiquement sur le vert clair.
Toute nouvelle zone sombre doit être ajoutée à cette liste. */
.topbar,
.site-footer,
.hp-mood__side {
--gold: #7ab87a;
--gold-2: #4e7d4e;
--gold-soft: #c9e6c9;
/* Contexte sombre : aplat vert clair (lisible sur fond foncé), même principe. */
--gold-gradient: #2d4a2d;
--line: rgba(255,255,255,0.12);
--line-2: rgba(255,255,255,0.2);
--text: #ffffff;
--text-dim: rgba(255,255,255,0.72);
--text-mute: rgba(255,255,255,0.5);
}
/* ----- 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 .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,
.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: 11px 18px;
font-family: var(--font-display);
letter-spacing: 0.01em;
font-size: 13.5px;
font-weight: 600;
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.15;
text-transform: none;
}
.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(122,184,122, 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: #ffffff;
background-image: repeating-linear-gradient(45deg, rgba(122,184,122, 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(--topbar-bg);
border-bottom: 1px solid rgba(0,0,0,0.35);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Même échelle typo que la barre de réassurance juste en dessous. */
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--btn-fg);
text-transform: none;
}
/* Icônes SVG de la topbar : mêmes traits que .site-reassure__item svg. */
.topbar__icon {
width: 17px;
height: 17px;
flex: 0 0 auto;
color: var(--accent-light);
}
.topbar__list li,
.topbar__cta,
.topbar__shipping,
.topbar__mobile,
.topbar a[href^="tel:"] {
display: inline-flex;
align-items: center;
gap: 7px;
}
.topbar__sep { display: inline-block !important; }
/* Version mobile : le bandeau est forcé en `display:block; text-align:center`
par le CSS inline du thème — l'icône doit donc rester en flux inline. */
.topbar__mobile .topbar__icon {
display: inline-block !important;
vertical-align: -4px;
margin-right: 5px;
}
/* Bandeau un peu plus haut et texte moins gras : la barre respire, et le
gras est réservé aux valeurs (code promo, montant du franco). */
.topbar strong,
.topbar b,
.topbar .woocommerce-Price-amount,
.topbar .woocommerce-Price-amount * { font-weight: 500; }
.topbar a {
color: var(--btn-fg);
text-decoration: none;
transition: color .2s ease;
}
.topbar a:hover { color: var(--btn-fg); text-decoration: underline; text-underline-offset: 3px; }
/* Tel: pas d'underline au hover (numéro de téléphone n'est pas un lien
classique, l'underline parasitait le rendu propre du picto + numéro). */
.topbar a[href^="tel:"]:hover { text-decoration: none; }
.topbar__inner {
max-width: var(--container);
margin: 0 auto;
padding: 9px 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: var(--btn-fg); font-weight: 400; }
.topbar__code {
display: inline-block;
background: transparent;
/* Le code promo est l'accent doré du bandeau noir (repris de la bannière). */
color: var(--gold-soft);
padding: 0 2px;
border: 0;
border-bottom: 1px dashed rgba(245,240,232,0.45);
border-radius: 0;
font: inherit;
font-weight: 500;
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: var(--gold-soft); }
.topbar__code.is-copied { color: #8ed18e; border-bottom-color: #8ed18e; }
/* 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(122,184,122, 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: var(--btn-fg); font-weight: 400; transition: color .2s; }
.topbar__shipping b,
.topbar__shipping bdi,
.topbar__shipping .woocommerce-Price-amount {
display: inline;
background: transparent;
color: var(--btn-fg);
padding: 0;
border-radius: 0;
font-weight: 500;
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(9,25,11, 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: var(--btn-fg); }
.topbar__shipping bdi .woocommerce-Price-currencySymbol { color: inherit; font-weight: inherit; }
/* « Livraison gratuite débloquée ! » : vert CLAIR. C'était `#1a3d1a`, un vert
foncé posé sur la topbar `#1a2a1a` — donc vert sur vert, illisible. */
.topbar__shipping.is-unlocked { color: var(--accent-light); font-weight: 500; }
.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: var(--accent-light);
font-size: 1em;
}
.topbar__mobile {
display: none;
width: 100%;
text-align: center;
font-weight: 500;
color: var(--btn-fg);
font-size: 12px;
}
.topbar__mobile a { color: var(--btn-fg); text-decoration: none; }
.topbar__mobile a:hover { color: var(--btn-fg); 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; }
}
/* Tablet portrait (ex: Surface Pro 912px) — on garde uniquement le bloc promo/code,
on cache le bloc téléphone/horaires et le compteur de livraison. */
@media (min-width: 769px) and (max-width: 1024px) {
.topbar__inner { justify-content: center; }
.topbar__list--desktop:first-of-type { display: none !important; }
.topbar__list--desktop > li:not(.topbar__cta) { display: none !important; }
}
/* ============================================================
Site header (logo + nav + actions)
============================================================ */
.site-header {
background: #ffffff;
border-bottom: 1px solid var(--line);
position: relative;
z-index: 1000;
}
html, body { overflow: visible; overflow-x: clip; }
/* Supprime tout indicateur "ajouté au panier" injecté par WooCommerce :
le lien ET le pseudo ::after de coche sur le bouton. */
.added_to_cart.wc-forward,
.added_to_cart { display: none !important; }
.button.added::after,
.add_to_cart_button.added::after,
.single_add_to_cart_button.added::after,
button.added::after { content: none !important; display: none !important; }
.button.added,
.add_to_cart_button.added,
.single_add_to_cart_button.added,
button.added {
color: var(--btn-fg) !important;
-webkit-text-fill-color: var(--btn-fg) !important;
opacity: 1 !important;
visibility: visible !important;
}
.card-cta.added .card-cta__label,
.card-cta.added .card-cta__label-full,
.card-cta.added .card-cta__label-short,
.card-cta.added .card-cta__prices,
.card-cta.added .card-cta__price,
.card-cta.added .woocommerce-Price-amount,
.card-cta.added .woocommerce-Price-currencySymbol {
color: var(--btn-fg) !important;
-webkit-text-fill-color: var(--btn-fg) !important;
opacity: 1 !important;
visibility: visible !important;
}
/* 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;
}
/* ============================================================
BARRE DE RÉASSURANCE — bande fine sous le header, sur toutes les pages
(le markup est dans header.php ; le CSS doit donc vivre ici et pas dans
homepage.css, qui n'est chargé que sur l'accueil).
============================================================ */
.site-reassure {
padding: 0 !important;
background: var(--bg-1);
border-bottom: 1px solid var(--line);
}
.site-reassure__inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
.site-reassure__list {
list-style: none;
margin: 0;
padding: 11px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px 26px;
flex-wrap: wrap;
}
.site-reassure__item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14.5px;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--text-dim);
white-space: nowrap;
}
.site-reassure__item svg {
width: 20px;
height: 20px;
flex: 0 0 auto;
color: var(--gold);
}
/* Sous 1100px on garde la ligne unique mais on la fait défiler plutôt que de
la casser en deux — la bande reste une bande. */
@media (max-width: 1100px) {
.site-reassure__list {
flex-wrap: nowrap;
justify-content: flex-start;
gap: 22px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
}
.site-reassure__list::-webkit-scrollbar { display: none; }
}
@media (max-width: 768px) {
.site-reassure__list { padding: 9px 0; gap: 18px; }
.site-reassure__item { font-size: 11.5px; gap: 6px; }
.site-reassure__item svg { width: 16px; height: 16px; }
}
.site-header__actions--left { justify-self: start; }
.site-header__actions--right { justify-self: end; }
/* ============================================================
HEADER DESKTOP — barre unique : logo à gauche, menu au centre,
actions à droite (recherche, compte, fidélité, panier).
Le markup reste inchangé : `.site-header__top` passe en
`display: contents` pour que ses 3 enfants deviennent des items
flex de `.site-header`, où on les réordonne avec `order`.
Mobile (<=1024px) et tunnel panier/commande ne sont pas touchés.
============================================================ */
@media (min-width: 1025px) {
body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header--centered {
display: flex;
align-items: center;
gap: 24px;
/* Contenu calé EXACTEMENT sur la grille du site (topbar, sections) :
le container fait --container de large, gouttière de 24px comprise.
Sans le `+ 24px`, la barre débordait de 48px sur grand écran et le
logo/panier tombaient plus à l'extérieur que la topbar. */
padding: 8px max(24px, calc((100% - var(--container)) / 2 + 24px));
}
body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header--centered .site-header__top {
display: contents;
}
/* 1 — Logo */
/* Logo et bloc d'icônes prennent la même part d'espace de chaque côté :
c'est ce qui fait tomber le menu au milieu de la barre. */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header__brand {
order: 1;
grid-column: auto;
justify-content: flex-start;
flex: 0 0 auto;
}
/* Sans ça, le logo (élément flex) se fait comprimer par sa colonne et
reste minuscule quel que soit le max-height qu'on lui donne. */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header__brand > * { flex: 0 0 auto; }
/* Le fichier logo (1080×300) porte une marge transparente : 11% de sa
hauteur à gauche/droite et 22% en haut/bas. Rendu tel quel, le dessin
paraît petit et décollé du bord. On agrandit donc l'image et on rogne
la marge morte en marges négatives — le dessin est alors aligné pile
sur la gouttière du site et la barre ne grandit pas pour autant. */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header__brand img.custom-logo,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header__brand img {
max-height: 74px;
margin: -16px -8px;
}
body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header__brand .display { font-size: 26px; }
/* 2 — Menu, au centre, sur la même ligne */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav--centered {
order: 2;
flex: 1 1 auto;
min-width: 0;
border-top: 0;
padding: 0;
/* La mega-bar des sous-menus doit rester pleine largeur : on la fait
se positionner par rapport à `.site-header` (déjà en relative) et
non plus par rapport à la nav, qui n'est plus qu'une colonne. */
position: static;
}
/* La nav occupe toute la hauteur de la barre et ses items aussi : sans ça,
il reste un vide entre le bas d'un item et le haut de la mega-bar, et le
sous-menu se referme quand la souris descend dedans. */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav--centered {
display: flex;
align-items: stretch;
/* Centrage EXACT sur la page, quel que soit le poids du logo à gauche
et du groupe d'icônes à droite : la nav est hors flux, centrée sur
la fenêtre. Les sous-menus, eux, s'ancrent sur leur (qui est
en position:relative), donc ils suivent bien leur item. */
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
bottom: 0;
}
/* Menu centré et bien présent : c'est lui le repère de navigation de la
barre, il passe devant le reste en taille et en graisse. */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list {
gap: 9px;
font-size: 14.5px;
font-weight: 500;
letter-spacing: 0.01em;
text-transform: none;
flex-wrap: nowrap;
white-space: nowrap;
width: 100%;
margin: 0;
justify-content: center;
align-items: stretch;
}
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li {
display: flex;
align-items: center;
}
/* Item de menu : chaque entrée EST une pastille, en permanence — pas un
effet au survol. Le survol/la page courante ne fait que passer la
pastille en vert plein.
Le , lui, reste sur toute la hauteur de la barre : c'est lui qui
porte le survol du déroulant, donc pas de trou entre la pastille et le
panneau. */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li > a {
position: relative;
display: flex;
align-items: center;
padding: 6px 12px;
border-radius: 8px;
/* Exactement la même matière que les icônes de droite : rien au repos,
pastille crème au survol. Le contour permanent faisait tache dans une
barre où plus aucun autre élément n'est encadré. */
background: transparent;
border: 1px solid transparent;
color: var(--text);
transition: background .18s ease, color .18s ease, border-color .18s ease;
}
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li:hover > a,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li:focus-within > a,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li.current-menu-item > a,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li.current-menu-parent > a,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li.current-menu-ancestor > a {
background: var(--bg-2);
border-color: var(--line-2);
color: var(--gold);
-webkit-text-fill-color: var(--gold);
}
/* Page courante : pastille pleine, pour qu'on sache où on est. */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li.current-menu-item > a,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li.current-menu-parent > a,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li.current-menu-ancestor > a {
background: var(--gold);
border-color: var(--gold);
color: #ffffff;
-webkit-text-fill-color: #ffffff;
}
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li.current-menu-item > a > *,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li.current-menu-parent > a > *,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li.current-menu-ancestor > a > * {
color: #ffffff;
-webkit-text-fill-color: #ffffff;
background: none;
}
/* Chevron : il se retourne quand le panneau est ouvert. */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li.menu-item-has-children > a::after {
width: 6px;
height: 6px;
transform-origin: 50% 50%;
transform: rotate(45deg) translate(-1px, -1px);
margin-left: 7px;
}
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li.menu-item-has-children:hover > a::after,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li.menu-item-has-children:focus-within > a::after {
transform: rotate(225deg) translate(-1px, -1px);
}
/* 3 — Recherche puis 4 — icônes */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header__actions--left { order: 3; flex: 0 0 auto; }
body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header__actions--right {
order: 4;
flex: 0 0 auto;
}
/* Recherche : pastille icône dans la barre. Au clic, elle ne s'étire PAS
dans la ligne (ça écrasait le menu) : le formulaire sort du flux et
s'ouvre en boîte flottante sous le header, alignée à droite sur la
gouttière du site. L'input occupe toute la pastille (l'icône est en
pointer-events:none) donc un clic n'importe où la focus. Aucun JS. */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header__actions--left {
flex: 1 1 auto;
justify-content: flex-end;
/* La loupe appartient visuellement au groupe d'icônes de droite : on
annule le gap du header pour qu'elle soit espacée comme le reste. */
margin-right: -18px;
}
body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header__actions--left .site-search {
width: 44px;
max-width: none;
}
body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header__actions--left .site-search__icon {
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
}
body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header__actions--left .site-search input.site-search__input {
height: 44px;
padding: 0 14px;
font-size: 0;
cursor: pointer;
background: transparent;
border-color: transparent;
border-radius: 999px;
transition: background .15s;
}
body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header__actions--left .site-search:hover input.site-search__input {
background: var(--bg-2);
}
/* Sur desktop, la loupe n'ouvre plus un champ dans la barre : elle ouvre
la modale de recherche AJAX (cf. responsive.css + main.js). Le champ du
header reste dans le DOM comme zone cliquable, jamais déplié. */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header__actions--left .site-search__results {
display: none !important;
}
/* ---- Sous-menus : déroulant simple sous l'item parent ----------------
(et non plus une barre pleine largeur sous le header) */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li { position: relative; }
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li > .sub-menu {
top: calc(100% + 9px);
left: 0;
right: auto;
width: max-content;
min-width: 210px;
max-width: 320px;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 0;
padding: 8px;
/* Aplat très légèrement crème (ni blanc pur, ni dégradé). */
background: #faf7f0;
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 18px 34px rgba(15, 42, 30, 0.16);
}
/* Dernier item : le panneau s'ouvre vers la gauche pour ne pas déborder. */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li:last-child > .sub-menu {
left: auto;
right: 0;
}
/* Le pont invisible doit couvrir l'espace entre le bas de l'item et le
haut du panneau, sinon le survol se coupe en descendant. */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list .sub-menu::before {
top: -14px;
height: 14px;
}
/* Entrées : une par ligne, alignées à gauche, pastille au survol. */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li > .sub-menu > li > a {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
text-align: left;
padding: 7px 11px;
border-radius: 8px;
font-size: 14.5px;
}
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list .sub-menu .menu-item__title {
font-size: 14.5px;
font-weight: 500;
letter-spacing: 0.01em;
}
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list .sub-menu a:hover,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list .sub-menu .current-menu-item > a {
background: var(--accent-soft);
-webkit-text-fill-color: currentColor;
color: var(--gold);
}
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list .sub-menu a:hover .menu-item__title { color: var(--gold); }
/* Niveau 3 : sort sur le côté du panneau parent. */
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list .sub-menu li { position: relative; }
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list .sub-menu .sub-menu {
top: -10px;
left: calc(100% + 8px);
right: auto;
width: max-content;
min-width: 190px;
max-width: 300px;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 2px;
padding: 10px;
background: #faf7f0;
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 18px 34px rgba(15, 42, 30, 0.16);
}
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list .sub-menu .sub-menu::before {
top: 0;
left: -10px;
right: auto;
width: 10px;
height: 100%;
}
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list .sub-menu .sub-menu a {
display: flex;
align-items: center;
width: 100%;
text-align: left;
padding: 9px 12px;
border-radius: 9px;
}
/* Sous la taille confortable, on resserre le menu plutôt que de casser
la ligne (le logo et les icônes ne bougent pas). */
@media (max-width: 1279px) {
body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header--centered { gap: 14px; }
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list { gap: 4px; font-size: 12.5px; letter-spacing: 0.03em; }
body:not(.woocommerce-cart):not(.woocommerce-checkout) .main-nav__list > li > a { padding: 5px 9px; border-radius: 7px; }
body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header__brand img.custom-logo,
body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header__brand img { max-height: 64px; margin: -14px -7px; }
}
}
.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: var(--text);
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, #ffffff);
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(122,184,122, 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 currentColor;
border-bottom: 1.5px solid currentColor;
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 currentColor;
border-bottom: 1.5px solid currentColor;
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, #ffffff);
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: var(--text);
z-index: 1;
}
.site-search input.site-search__input {
width: 100%;
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--text);
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: var(--text-dim); }
.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: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 11px 16px;
margin: 10px auto 4px;
width: calc(100% - 16px);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: #ffffff;
-webkit-text-fill-color: #ffffff;
background: var(--gold);
border: 1px solid var(--gold);
border-radius: 8px;
text-decoration: none !important;
text-transform: none;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.search-result__more:hover {
background: var(--gold-soft);
border-color: var(--gold-soft);
color: #fff;
}
.search-result__price .price-from {
display: inline-block;
margin-right: 4px;
font-size: 0.85em;
font-weight: 400;
color: var(--text-mute);
}
.site-search__empty {
padding: 18px 14px;
text-align: center;
color: var(--text);
font-size: 13px;
}
.site-search__loading {
padding: 18px 14px;
text-align: center;
color: var(--text);
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(3,7,3,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(3,7,3,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 */
/* Tête sobre, aux couleurs du site : aplat crème + filet vert. L'ancien
fond (dégradé animé + pluie de points verts) venait du thème sombre et
n'appartenait à aucune autre surface du site. */
.cart-drawer__head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 18px;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--line);
background: var(--bg-2);
}
@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: none; }
@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: 15px;
/* 700 + ombre portée : trop appuyé pour un simple titre de tiroir. */
font-weight: 600;
color: var(--text);
letter-spacing: 0.01em;
text-shadow: none;
}
.cart-drawer__close,
.cart-drawer__close.cart-drawer__close {
background: rgba(245,240,232,0.064); border: 0;
color: var(--text);
width: 30px !important; height: 30px !important;
min-width: 30px !important; min-height: 30px !important;
max-width: 30px !important; max-height: 30px !important;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
cursor: pointer;
transition: background .15s, color .15s;
-webkit-tap-highlight-color: transparent;
padding: 0;
}
.cart-drawer__close svg { width: 16px; height: 16px; }
.cart-drawer__close svg { stroke: currentColor; color: var(--text); }
.cart-drawer__close:hover { background: rgba(122,184,122,.25); color: var(--gold); }
.cart-drawer__close:hover svg { stroke: var(--gold); color: var(--gold); }
.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;
background: transparent;
color: var(--green);
-webkit-text-fill-color: var(--green);
padding: 0;
border-radius: 0;
font-weight: 700;
font-size: 1em;
margin: 0 2px;
box-shadow: none;
}
.cart-drawer__shipping-msg.is-unlocked {
color: var(--green);
font-weight: 700;
}
.cart-drawer__shipping-msg.is-unlocked b {
background: transparent;
color: var(--green);
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(45, 74, 45, 0.30);
}
/* ============================================================
CDP (Cart Drawer Progression) — composant propre, UX clair :
header avec emoji + montant + nom de la cible
track avec rail + fill animé + nodes ronds aux seuils
============================================================ */
.cdp {
padding: 15px 12px 18px 15px;
background: linear-gradient(180deg, var(--bg-1, #ede8df) 0%, var(--bg, #f5f0e8) 100%);
border-bottom: 1px solid var(--line, rgba(245,240,232,0.048));
}
.cdp:not(.cdp--gifts) {
padding: 20px 12px 0px 15px;
}
.cdp__head {
font-size: 13px;
font-weight: 500;
color: var(--text-dim);
text-align: center;
line-height: 1.4;
margin-bottom: 22px;
}
.cdp__head b {
color: var(--green) !important;
-webkit-text-fill-color: var(--green) !important;
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
font-weight: 800;
font-size: 1.05em;
}
.cdp__target {
color: var(--text);
-webkit-text-fill-color: var(--text);
font-weight: 700;
}
.cdp__head .is-flash {
animation: cdp-flash .6s cubic-bezier(.2,.9,.3,1.1) both;
}
@keyframes cdp-flash {
0% { opacity: 0; transform: translateY(-4px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Track : rail + fill, gère les nodes en absolute */
.cdp__track {
position: relative;
height: 6px;
margin: 0 26px 26px 8px;
}
.cdp:not(.cdp--gifts) .cdp__track {
margin: 0 26px 21px 8px;
}
.cdp__rail {
position: absolute;
inset: 0;
/* Le rail était en crème à 5,6% d'opacité — invisible sur le fond clair du
tiroir (reste du thème sombre d'origine). Vert désaturé translucide :
on voit la piste vide sans qu'elle concurrence le remplissage. */
background: rgba(45, 74, 45, 0.13);
border-radius: 999px;
}
.cdp__fill {
position: absolute;
inset: 0 auto 0 0;
width: 0%;
/* Vert du site (--gold), pas le vert pâle #7ab87a qui n'est lisible que
sur fond sombre. Léger dégradé interne pour garder du relief. */
background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 100%);
border-radius: 999px;
box-shadow: 0 0 8px rgba(45, 74, 45, 0.30);
transition: width 1s cubic-bezier(.4,1.2,.4,1);
}
/* Nodes : circles 32px, centered on rail, emoji + check */
.cdp__node {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
z-index: 2;
color: inherit;
text-decoration: none;
transition: transform .25s ease;
cursor: default;
}
a.cdp__node { cursor: pointer; }
.cdp__node:hover { transform: translate(-50%, -50%) scale(1.12); }
.cdp__node-circle {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg, #f5f0e8);
border: 2px solid rgba(245,240,232,0.144);
transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
position: relative;
}
.cdp__node-emoji {
font-size: 14px;
line-height: 1;
transition: opacity .25s ease, transform .25s ease;
filter: grayscale(0.6);
opacity: 0.65;
}
.cdp__node-check {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 800;
color: var(--btn-fg);
opacity: 0;
transform: scale(0.4);
transition: opacity .35s ease, transform .35s cubic-bezier(.3,1.5,.4,1);
}
/* État atteint : cercle doré plein, emoji caché, check visible */
.cdp__node.is-reached .cdp__node-circle {
background: linear-gradient(135deg, #aedcae, #7ab87a);
border-color: #7ab87a;
box-shadow: 0 0 0 4px rgba(122,184,122,0.18), 0 4px 12px rgba(122,184,122,0.35);
}
.cdp__node.is-reached .cdp__node-emoji {
opacity: 0;
transform: scale(0.4);
}
.cdp__node.is-reached .cdp__node-check {
opacity: 1;
transform: scale(1);
}
/* État "prochain à atteindre" : pulse doré */
.cdp__node.is-next .cdp__node-circle {
border-color: rgba(122,184,122,0.7);
animation: cdp-node-pulse 1.8s ease-in-out infinite;
}
.cdp__node.is-next .cdp__node-emoji {
opacity: 1;
filter: none;
}
@keyframes cdp-node-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(122,184,122,0.5); }
60% { box-shadow: 0 0 0 10px rgba(122,184,122,0); }
}
/* Burst au moment du déblocage (classe temporaire ajoutée par JS) */
.cdp__node.is-just-reached .cdp__node-circle {
animation: cdp-node-burst .7s cubic-bezier(.2,1.5,.4,1);
}
@keyframes cdp-node-burst {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(122,184,122,0.8); }
45% { transform: scale(1.45); box-shadow: 0 0 0 18px rgba(122,184,122,0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(122,184,122,0); }
}
/* Label sous le node : montant € */
.cdp__node-amount {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
font-size: 11px;
font-weight: 700;
color: var(--text-dim);
white-space: nowrap;
line-height: 1;
transition: color .3s ease;
}
.cdp__node.is-reached .cdp__node-amount,
.cdp__node.is-next .cdp__node-amount {
color: var(--green);
}
/* "Encore X€" stylé compact dans le résumé totaux */
.cart-drawer__ship-pending {
color: var(--text-dim);
font-size: 0.92em;
font-style: italic;
}
.cart-drawer__ship-pending b {
font-style: normal;
color: var(--green);
-webkit-text-fill-color: var(--green);
background: transparent;
padding: 0;
margin: 0;
box-shadow: none;
font-weight: 700;
}
/* Body / items */
.cart-drawer__body {
flex: 1;
overflow-y: auto;
padding: 8px 12px;
position: relative;
scrollbar-width: thin;
scrollbar-color: #6ac671 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: #2d4a2d;
border-radius: 4px;
border: 1px solid rgba(0,0,0,0.15);
}
.cart-drawer__body::-webkit-scrollbar-thumb:hover {
background-image: linear-gradient(135deg, #b4e3b8 4%, #68c16f 100%);
}
.cart-drawer__items {
list-style: none; margin: 0; padding: 0;
}
.cart-drawer__item {
display: grid;
grid-template-columns: 62px 1fr auto;
gap: 11px;
padding: 11px 10px;
border-bottom: 1px solid var(--line);
align-items: center;
}
.cart-drawer__item:last-child { border-bottom: 0; }
.cart-drawer__item-img {
width: 62px; height: 62px;
background: #fff;
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: 14px; font-weight: 500;
color: var(--text);
margin: 0 0 4px;
line-height: 1.3;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
}
.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;
margin-top: 7px;
}
.cart-drawer__item-body:has(.cart-drawer__item-meta) .cart-drawer__item-actions {
margin-top: -4px;
}
.cart-drawer__qty {
display: inline-flex; align-items: center;
/* Même discrétion que le bouton de fermeture du tiroir : un filet vert
très dilué. C'était `--gold-2` (#0f2a1e), un vert quasi noir qui
cerclait le sélecteur beaucoup trop fort pour un simple contrôle. */
background: var(--bg-1);
border: 1px solid rgba(45, 74, 45, 0.18);
border-radius: 999px;
overflow: hidden;
}
.cart-drawer__qty button {
background: transparent;
border: 0;
color: var(--gold-soft);
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
font-size: 16px;
font-weight: 600;
line-height: 1;
transition: color .15s, background .15s;
}
.cart-drawer__qty button:hover { color: var(--btn-fg); background: var(--btn-bg); }
.cart-drawer__qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.cart-drawer__qty span {
min-width: 26px;
text-align: center;
font-size: 13.5px;
font-weight: 700;
color: var(--text);
padding: 0 2px;
}
.cart-drawer__remove {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px;
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: var(--text);
background: #d33b3b;
border-color: #d33b3b;
transform: rotate(90deg);
}
.cart-drawer__item-price {
font-size: 14px;
font-weight: 600;
background: transparent;
-webkit-text-fill-color: var(--text);
color: var(--text);
text-align: right;
min-width: 70px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
/* Ordre visuel : badge réduction → del → ins (top → bottom). Aligné sur la
page /panier/ qui montre nativement del avant ins. */
.cart-drawer__item-discount { order: 0; margin-bottom: 3px; }
.cart-drawer__item-price del { order: 1; background: transparent; text-decoration: line-through; 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-price ins { order: 2; background: transparent; text-decoration: none; color: var(--text); -webkit-text-fill-color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.2; }
.cart-drawer__item-discount {
display: inline-block;
background: #d33b3b;
color: var(--text);
-webkit-text-fill-color: var(--text);
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, var(--green)); 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: var(--green); 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, #ffffff);
border: 1px solid var(--line);
border-radius: 8px;
position: relative;
transition: border-color .15s ease;
}
.cart-drawer__coupon:focus-within { border-color: var(--gold, #7ab87a); }
/* 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, #7ab87a);
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(122,184,122,.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: var(--btn-fg);
}
.cart-drawer__coupon-msg-text { flex: 1 1 auto; }
.cart-drawer__coupon-msg-close {
flex: 0 0 auto;
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
max-width: 20px;
max-height: 20px;
padding: 0;
margin: 0 0 0 4px;
border: 0;
border-radius: 50%;
background: rgba(245,240,232,0.064);
color: inherit;
font-size: 0;
line-height: 0;
cursor: pointer;
opacity: .6;
transition: opacity .15s ease, background .15s ease;
position: relative;
}
.cart-drawer__coupon-msg-close::before,
.cart-drawer__coupon-msg-close::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 9px;
height: 1.5px;
background: currentColor;
border-radius: 1px;
}
.cart-drawer__coupon-msg-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.cart-drawer__coupon-msg-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.cart-drawer__coupon-msg-close:hover { opacity: 1; background: rgba(245,240,232,0.128); }
/* Croix rondes centrées : harmonise toutes les croix du checkout WC blocks +
notices avec le rendu du drawer (cercle 20px + barres dessinées en pseudo). */
.wc-block-components-chip__remove,
.wc-block-components-chip__remove-icon,
.wc-block-components-notice-banner__close,
.wc-block-components-button--remove,
.wc-block-cart-item__remove-link {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
max-width: 20px !important;
max-height: 20px !important;
padding: 0 !important;
margin: 0 0 0 4px !important;
border: 0 !important;
border-radius: 50% !important;
background: rgba(245,240,232,0.064) !important;
color: inherit !important;
font-size: 0 !important;
line-height: 0 !important;
cursor: pointer !important;
opacity: .6;
transition: opacity .15s ease, background .15s ease;
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto;
}
.wc-block-components-chip__remove svg,
.wc-block-components-chip__remove-icon svg,
.wc-block-components-notice-banner__close svg {
display: none !important;
}
.wc-block-components-chip__remove::before,
.wc-block-components-chip__remove::after,
.wc-block-components-chip__remove-icon::before,
.wc-block-components-chip__remove-icon::after,
.wc-block-components-notice-banner__close::before,
.wc-block-components-notice-banner__close::after,
.wc-block-components-button--remove::before,
.wc-block-components-button--remove::after,
.wc-block-cart-item__remove-link::before,
.wc-block-cart-item__remove-link::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 9px;
height: 1.5px;
background: currentColor;
border-radius: 1px;
}
.wc-block-components-chip__remove::before,
.wc-block-components-chip__remove-icon::before,
.wc-block-components-notice-banner__close::before,
.wc-block-components-button--remove::before,
.wc-block-cart-item__remove-link::before { transform: translate(-50%, -50%) rotate(45deg); }
.wc-block-components-chip__remove::after,
.wc-block-components-chip__remove-icon::after,
.wc-block-components-notice-banner__close::after,
.wc-block-components-button--remove::after,
.wc-block-cart-item__remove-link::after { transform: translate(-50%, -50%) rotate(-45deg); }
.wc-block-components-chip__remove:hover,
.wc-block-components-chip__remove-icon:hover,
.wc-block-components-notice-banner__close:hover,
.wc-block-components-button--remove:hover,
.wc-block-cart-item__remove-link:hover { opacity: 1; background: rgba(245,240,232,0.128) !important; }
.cart-drawer__coupon-msg.is-success {
background: rgba(122,184,122, 0.12);
color: var(--gold-soft);
border-color: rgba(122,184,122, 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(245,240,232,0.032);
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: none;
color: var(--text, #1a1a1a);
-webkit-text-fill-color: var(--text, #1a1a1a);
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 des icônes header : le vert plein du site, pas un dégradé (le dégradé
clair→foncé sur un trait de 1,5px donnait un rendu sale). On doit viser les
enfants traçables un par un : `stroke` n'hérite pas quand l'enfant porte
stroke="currentColor" en attribut. */
.header-action:hover svg :is(path, circle, line, rect, polygon, polyline, ellipse) {
stroke: var(--gold);
}
/* 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(245,240,232,0.048)); }
.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(122,184,122,0.65), 0 0 0 4px var(--gold), 0 0 30px rgba(122,184,122,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: var(--btn-fg);
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: var(--text);
padding: 8px 12px;
border-radius: 4px;
}
.menu-toggle svg { color: var(--text); stroke: currentColor; }
.menu-toggle svg line, .menu-toggle svg path, .menu-toggle svg rect { stroke: currentColor; }
@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 var(--line);
background: var(--bg-2);
}
.main-nav--centered .main-nav__head::before,
.main-nav--centered .main-nav__head::after { content: none; }
.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: var(--text);
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(245,240,232,0.064);
border: 0;
color: var(--text);
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: currentColor; color: var(--text); }
.main-nav--centered .main-nav__close:hover { background: rgba(122,184,122,.25); color: var(--gold); }
.main-nav--centered .main-nav__close:hover svg { stroke: var(--gold); color: var(--gold); }
.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: auto;
height: auto;
background: transparent;
border: 0;
box-shadow: none;
overflow: visible;
flex-shrink: 0;
line-height: 1;
padding: 0 2px;
}
.cart-drawer__pay-icons .cbdco-pay-brand .fa-brands { font-size: 24px; }
.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-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--text);
white-space: nowrap;
}
.sp-pay__label svg { width: 14px; height: 14px; opacity: 0.9; color: var(--text); }
.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: auto;
height: auto;
background: transparent;
border: 0;
overflow: visible;
line-height: 1;
padding: 0 3px;
}
.sp-pay__list .cbdco-pay-brand .fa-brands { font-size: 28px; }
.sp-pay__list .cbdco-pay-brand svg { display: block; width: 100%; height: 100%; }
@media (max-width: 720px) {
.sp-pay { padding: 10px 12px; gap: 6px; justify-content: center; }
.sp-pay__label { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.sp-pay__label svg { width: 13px; height: 13px; }
.sp-pay__list .cbdco-pay-brand { width: 32px; height: 22px; }
.single-product .sp-eta,
.sp-eta {
display: block !important;
text-align: center;
font-size: 12px;
margin-bottom: 10px;
}
.sp-eta__icon {
display: inline-block !important;
width: 18px; height: 18px;
vertical-align: -4px;
margin-right: 6px;
}
.sp-eta__text { display: inline !important; flex: 0 1 auto !important; }
.sp-eta__link { display: inline-flex !important; margin-left: 6px; font-size: 11.5px; vertical-align: middle; }
}
/* === 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 14px !important; }
.cart-drawer__shipping-msg { font-size: 13px; margin-bottom: 10px; }
.cart-drawer__foot { padding: 14px 18px 18px; }
.cart-drawer__coupon { padding: 2px; border-radius: 8px; box-shadow: none; }
.cart-drawer__coupon::before { left: 9px; font-size: 12px; opacity: .7; }
.cart-drawer__coupon-input {
padding: 6px 8px 6px 28px !important;
font-size: 12px;
letter-spacing: 0.04em;
}
.cart-drawer__coupon-input::placeholder { font-size: 12px; }
.cart-drawer__coupon-btn {
padding: 0 10px;
font-size: 10.5px;
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: #ffffff;
background-image: repeating-linear-gradient(45deg, rgba(122,184,122, 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, #f5f0e8 0%, #f5f0e8 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); }
/* Accordéon FAQ : cartes blanches arrondies, séparées, sans liseré vert.
Le cadre vert qui apparaissait à l'ouverture était l'anneau de focus du
navigateur sur le — neutralisé plus bas. */
.faq-item {
background: #ffffff;
border: 1px solid var(--line);
border-radius: 12px;
margin-bottom: 10px;
padding: 0 18px;
transition: border-color .18s ease, background .18s ease;
}
.faq-item[open] {
background: var(--bg-1);
border-color: var(--line-2);
}
.faq-item summary:focus { outline: none; }
.faq-item summary:focus-visible {
outline: 2px solid var(--line-2);
outline-offset: 2px;
border-radius: 8px;
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 16px 0;
display: flex; justify-content: space-between; align-items: center; gap: 16px;
color: var(--text);
font-size: 14.5px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span.faq-num {
font-family: var(--font-mono);
font-size: 12px;
background: none;
-webkit-text-fill-color: var(--green);
color: var(--green);
margin-right: 16px;
letter-spacing: 0.15em;
}
.faq-item summary::after {
content: "+";
background: none;
-webkit-text-fill-color: var(--green);
color: var(--green);
font-size: 21px;
line-height: 1;
transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__answer { padding: 0 0 18px 36px; color: var(--text-dim); font-size: 14px; line-height: 1.6; }
/* ============================================================
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;
/* Cartes blanches, comme les autres blocs du site. */
padding: 16px 18px;
background: #ffffff;
border: 1px solid var(--line, #d8d0c4);
border-radius: 12px;
}
.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: 14.5px;
font-weight: 600;
color: var(--text, var(--text));
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: 2px 0 0;
font-size: 13.5px;
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: #1a2a1a;
padding: 56px var(--container-px, 24px) 24px;
border-top: 1px solid var(--line);
}
/* Zone sombre : le footer redéfinit localement les tokens de couleur pour que
TOUT ce qu'il contient (textes secondaires, filets, cartes) reste lisible sur
noir, sans avoir à surcharger chaque règle une par une. Même principe pour le
bandeau promo (.topbar). */
.site-footer {
--text: #ffffff;
--text-dim: rgba(255,255,255,0.74);
--text-mute: rgba(255,255,255,0.55);
--line: rgba(255,255,255,0.14);
--line-2: rgba(255,255,255,0.24);
--bg-0: #000000;
--bg-1: #1a1a1a;
--bg-2: #1b1e16;
--bg-3: #22261d;
--card: #1a1a1a;
color: var(--text);
}
.topbar {
--text: #ffffff;
--text-dim: rgba(255,255,255,0.78);
--text-mute: rgba(255,255,255,0.6);
--line: rgba(255,255,255,0.16);
}
.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; }
/* Titres de colonnes : blanc plein, police du site. Ils étaient en police
mono + `--gold-gradient` découpé sur le texte, ce qui donnait un dégradé
vert pâle → vert moyen sur le fond sombre — sale et peu lisible. */
.site-footer h4,
.site-footer__col-title {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-text-fill-color: #ffffff;
color: #ffffff;
letter-spacing: 0.18em;
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; }
/* Survol : vert CLAIR. `--gold` (#2d4a2d) est le vert foncé du site — sur le
fond sombre du footer, le lien devenait quasi invisible au survol. */
.site-footer a:hover { color: var(--accent-light) !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: auto;
height: auto;
overflow: visible;
background: transparent;
border: 0;
flex: 0 0 auto;
line-height: 1;
padding: 0 4px;
align-items: center;
}
.site-footer__payments-list .cbdco-pay-brand .fa-brands { font-size: 30px; }
.site-footer__payments-list .cbdco-pay-brand svg { width: 100%; height: 100%; display: block; }
/* Icônes Font Awesome (…) — rendu natif FA :
couleur dorée uniforme, pas de fond, pas de bordure. Pour CB/Monetico/Maestro
qui restent en SVG custom, on garde la teinte gold via filter (cf. plus bas). */
.cbdco-pay-brand .fa-brands {
line-height: 1;
color: var(--green);
display: inline-block;
width: 1.6em;
text-align: center;
overflow: visible;
}
.cbdco-pay-brand { align-items: center; justify-content: center; overflow: visible; }
.cbdco-pay-brand svg {
display: block;
color: var(--green);
width: auto;
}
.cart-drawer__pay-icons .cbdco-pay-brand svg { height: 16px; }
.sp-pay__list .cbdco-pay-brand svg { height: 18px; }
.site-footer__payments-list .cbdco-pay-brand svg { height: 20px; }
.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: 12px;
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: 12px;
letter-spacing: 0.06em;
text-transform: none;
}
.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(245,240,232,0.096) !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 currentColor;
border-bottom: 1.5px solid currentColor;
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: 10px;
}
.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(122,184,122,.22) 0%, transparent 50%),
radial-gradient(circle at 80% 30%, rgba(45,74,45,.18) 0%, transparent 50%),
linear-gradient(135deg, #f5f0e8 0%, #ede8df 50%, #f5f0e8 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(122,184,122,.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 (gauche-haut, pour cadrer
le sujet plutôt que le centrer sur le contenu coupé en mobile). */
.page-hero--has-image::before { background-position: 20% 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; }
.page-hero--account-logout .page-hero__inner { margin-top: -10px; }
@media (max-width: 600px) {
.page-hero--account-logout .page-hero__inner { margin-bottom: 21px; }
body.woocommerce-account:not(.logged-in) .page-hero--account-logout { margin-left: 18px; margin-right: 18px; }
body.woocommerce-account:not(.logged-in) .page-hero--account-logout > .container { padding-left: 16px !important; padding-right: 16px !important; }
}
/* 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 {
background: none !important;
-webkit-text-fill-color: var(--text) !important;
color: var(--text) !important;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
font-size: 13px;
}
.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: var(--text);
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: var(--text); 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: var(--text); 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: var(--text) !important;
opacity: 1 !important;
}
body.tax-product_cat .page-hero .eyebrow {
background: none !important;
-webkit-text-fill-color: var(--text) !important;
color: var(--text) !important;
}
/* ------------------------------------------------------------------
Lisibilité du hero : deux fonds possibles, donc deux couleurs de texte.
- Sans image : fond crème clair → texte sombre. `.page-hero__descr`
était resté en #f5f5f5 (héritage du thème sombre d'origine), donc
illisible ; on le repasse en var(--text).
- Avec image : `.page-hero--has-image::after` pose un voile noir
(0.45 à 0.70 d'opacité) prévu pour du texte clair, mais aucune règle
ne passait titre / fil d'Ariane / compteur en blanc. On le fait ici,
sinon toute image de catégorie rend l'en-tête illisible.
`-webkit-text-fill-color` est indispensable : plusieurs de ces éléments
portent un dégradé en background-clip, qui ignore `color` seul.
------------------------------------------------------------------ */
/* Hero sans image de catégorie : aplat vert du site (même valeur que la topbar
et le footer) au lieu du dégradé crème animé d'origine. Le texte passe donc
en clair, comme sur les autres zones vertes. Les particules du ::before, des
points vert pâle pensés pour le fond crème, sont désactivées. */
.page-hero:not(.page-hero--has-image) {
background: var(--topbar-bg);
animation: none;
}
.page-hero:not(.page-hero--has-image)::before { display: none; }
.page-hero:not(.page-hero--has-image) h1,
.page-hero:not(.page-hero--has-image) .eyebrow,
.page-hero:not(.page-hero--has-image) .breadcrumb,
.page-hero:not(.page-hero--has-image) .breadcrumb a,
.page-hero:not(.page-hero--has-image) .breadcrumb a:visited,
.page-hero:not(.page-hero--has-image) .breadcrumb .breadcrumb__sep,
body.tax-product_cat .page-hero:not(.page-hero--has-image) .eyebrow,
body.tax-product_cat .page-hero:not(.page-hero--has-image) .breadcrumb,
body.tax-product_cat .page-hero:not(.page-hero--has-image) .breadcrumb a,
body.tax-product_cat .page-hero:not(.page-hero--has-image) .breadcrumb a:visited,
body.tax-product_cat .page-hero:not(.page-hero--has-image) .breadcrumb .breadcrumb__sep {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background: none !important;
opacity: 1 !important;
}
.page-hero:not(.page-hero--has-image) .breadcrumb .breadcrumb__sep { opacity: 0.55 !important; }
.page-hero:not(.page-hero--has-image) .breadcrumb a:hover {
color: var(--accent-light) !important;
-webkit-text-fill-color: var(--accent-light) !important;
}
.page-hero:not(.page-hero--has-image) .page-hero__descr {
color: #f0f0f0;
text-shadow: none;
}
.page-hero--has-image h1,
.page-hero--has-image .eyebrow,
.page-hero--has-image .breadcrumb,
.page-hero--has-image .breadcrumb a,
.page-hero--has-image .breadcrumb a:visited,
.page-hero--has-image .breadcrumb .breadcrumb__sep,
body.tax-product_cat .page-hero--has-image .eyebrow,
body.tax-product_cat .page-hero--has-image .breadcrumb,
body.tax-product_cat .page-hero--has-image .breadcrumb a,
body.tax-product_cat .page-hero--has-image .breadcrumb a:visited,
body.tax-product_cat .page-hero--has-image .breadcrumb .breadcrumb__sep {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background: none !important;
opacity: 1 !important;
}
.page-hero--has-image .breadcrumb a:hover {
color: var(--accent-light) !important;
-webkit-text-fill-color: var(--accent-light) !important;
}
.page-hero--has-image .breadcrumb .breadcrumb__sep { opacity: 0.55 !important; }
.page-hero--has-image .page-hero__descr { color: #f0f0f0; }
.page-content { padding: 20px 0; }
.page-content > .container--wide { padding: 0; }
/* Catégories produit : si pas de pagination, on remonte la marge basse pour
éviter le vide entre le dernier produit et le footer. */
body.woocommerce.archive .page-content:not(:has(.woocommerce-pagination)) {
margin-bottom: -17px;
}
@media (max-width: 700px) {
body.woocommerce.archive .page-content:not(:has(.woocommerce-pagination)) {
margin-bottom: 1px;
}
}
/* ============================================================
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: 13px !important;
}
.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 .filter-group:first-child .filter-group__title {
margin-top: -3px !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;
margin-bottom: 19px;
}
}
/* 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(122,184,122, 0.04);
border: 1px dashed rgba(122,184,122, 0.28);
border-radius: 10px;
text-align: center;
}
.shop-filters__empty-icon {
color: var(--gold, var(--green));
opacity: 0.85;
}
.shop-filters__empty-title {
margin: 0;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--text, #e8f5e9);
letter-spacing: 0.2px;
}
.shop-filters__empty-text {
margin: 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-dim);
}
.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(122,184,122,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: var(--btn-fg);
font-weight: 600;
}
.filter-pill.is-active em { color: rgba(9,25,11,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: var(--btn-fg);
}
.filter-bin.is-active span { color: rgba(9,25,11,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: var(--btn-fg);
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: var(--btn-fg);
color: var(--btn-fg);
}
.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(9,25,11,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(201,230,201, 0.10) 45%, rgba(201,230,201, 0.20) 50%, rgba(201,230,201, 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: var(--btn-fg);
box-shadow: 0 2px 10px rgba(122,184,122, 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: var(--btn-fg);
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); }
@media (max-width: 1023px) {
.filter-price__btn,
button.filter-price__btn,
.shop-sidebar .filter-price__btn,
.shop-sidebar button.filter-price__btn {
font-size: 10.5px !important;
padding: 5px 10px !important;
letter-spacing: 0.06em !important;
min-height: 28px !important;
height: auto !important;
line-height: 1.2 !important;
}
}
/* 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: var(--btn-fg);
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(4, 1fr);
gap: 16px;
}
/* Sous 1500px la sidebar (280px + 32px de gouttière) laisse trop peu de place
pour 4 cartes lisibles : on repasse à 3 avant de tomber à 2 à 1279px. */
@media (max-width: 1499px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, 1fr); } }
.shop-main > ul.products:last-child { margin-bottom: 0; }
@media (max-width: 768px) { .shop-main > ul.products:last-child { margin-bottom: 22px; } }
/* 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;
/* Crème très clair (plus clair que le fond de page, sans aller au blanc
pur) : la carte ressort sans trancher. */
background: var(--card);
border: 1px solid var(--line);
/* Coins arrondis, comme le hero et les pastilles du header. `overflow`
masque les angles de l'image produit qui déborderaient du rayon. */
border-radius: 12px;
overflow: hidden;
padding: 0;
display: flex; flex-direction: column;
/* On ne transitionne PAS `background` : l'ancien survol passait d'une
couleur unie à un fond multi-couches (bordure dégradée), que le
navigateur ne sait pas interpoler — d'où l'éclair vert d'une demi-
seconde. Le survol ne touche plus qu'à la bordure et à l'ombre. */
transition: border-color .2s ease, box-shadow .2s ease;
position: relative;
}
ul.products li.product:hover {
border-color: var(--gold);
box-shadow: 0 10px 24px rgba(15, 42, 30, 0.08);
}
.product__media-wrap {
position: relative;
overflow: hidden;
}
.product__media {
aspect-ratio: 1 / 1;
background-color: #fff;
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;
}
/* Pastilles "Nouveau"/"Coup de cœur" : fond vert plein, texte blanc (le texte
était en anthracite sur du vert foncé, donc illisible). */
.badge--featured,
.badge--new,
.badge--limited {
background: var(--gold);
color: #ffffff;
-webkit-text-fill-color: #ffffff;
border: 1px solid var(--gold);
font-weight: 600;
}
.badge--featured *,
.badge--new *,
.badge--limited * { color: inherit; -webkit-text-fill-color: inherit; }
.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(--star); 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: 280px;
max-width: calc(100vw - 16px);
/* Fond blanc + ombre douce : le beige et l'ombre noire à 50 % (héritées du
thème sombre) donnaient l'impression d'un bloc qui déborde de la carte. */
background: #ffffff;
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(20, 40, 24, 0.14);
padding: 12px 12px 10px;
color: var(--text);
font-size: 12.5px;
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: #ffffff;
border: 1px solid var(--line);
}
.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: 14px;
margin-bottom: 8px;
padding-bottom: 7px;
border-bottom: 1px solid var(--line);
}
.cbdco-rating-popover__head strong {
/* La note dominait toute l'infobulle. */
font-size: 17px;
font-weight: 700;
color: var(--green, #2d4a2d);
}
.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(245,240,232,0.78);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(122,184,122,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(122,184,122,0.55);
box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.product__rating--overlay .cbdco-stars__avg {
color: var(--text);
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;
}
/* Ruban "offre du moment" (cadeaux / BOGO). Affiché À LA PLACE du nom de
catégorie (.product__cat) quand le produit a une offre en cours, collé en
bas de la photo : bandeau pleine largeur en haut du .product__body (qui a
un padding 20px haut / 22px côtés → marges négatives pour déborder). */
.product__offers {
align-self: stretch; /* sinon centré (le body est align-items:center) → ici pleine largeur */
margin: -20px -22px 8px; /* -20px haut = annule le padding-top du body → ruban COLLÉ au bas de la photo ; -22px côtés = pleine largeur carte */
display: flex; flex-direction: column;
}
.product__offer {
position: relative;
overflow: hidden;
display: flex; align-items: center; justify-content: center; gap: 6px;
margin-bottom: 10px;
padding: 9px 12px;
font-family: var(--font-display);
font-size: 12.5px; font-weight: 600;
letter-spacing: 0.02em; line-height: 1.15;
text-align: center;
/* Aplat vert très clair + texte vert foncé, comme la pastille de la fiche
produit. L'ancien ruban était un dégradé vert soutenu qui ondulait en
boucle, avec un reflet qui le balayait : beaucoup trop agressif sur une
grille de 20 cartes. */
color: #ffffff;
background: var(--green);
}
@keyframes cbdco-offer-bg {
0% { background-position: 0% 50%; }
100% { background-position: 300% 50%; }
}
/* Reflet brillant qui balaie le ruban en continu. */
.product__offer::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: -75%;
width: 50%;
display: none;
}
@keyframes cbdco-offer-shine {
0% { left: -75%; }
100% { left: 175%; }
}
@media (prefers-reduced-motion: reduce) {
.product__offer,
.product__offer::before,
.product__offer-ico { animation: none !important; }
.product__offer::before { display: none; }
}
/* Plusieurs offres empilées : fin séparateur. */
.product__offer + .product__offer { border-top: 1px solid rgba(255,255,255,0.25); }
/* Icône cadeau au trait, immobile. */
.product__offer-ico {
display: inline-flex;
align-items: center;
line-height: 1;
color: #ffffff;
}
.product__offer-ico svg { display: block; }
@keyframes cbdco-offer-ico {
0%, 100% { transform: rotate(0deg) scale(1); }
20% { transform: rotate(-14deg) scale(1.15); }
40% { transform: rotate(10deg) scale(1.1); }
60% { transform: rotate(-6deg) scale(1.12); }
80% { transform: rotate(4deg) scale(1.05); }
}
/* Fiche produit — bannière offre du moment (plus grande). */
.sp-offers { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; }
.sp-offer {
display: inline-flex; align-items: center; gap: 10px;
align-self: flex-start;
padding: 8px 13px;
border-radius: 10px;
font-family: var(--font-display);
font-size: 13px; font-weight: 600; line-height: 1.1;
/* Pastille d'offre : aplat vert TRÈS clair + texte vert foncé. L'ancien
dégradé vert soutenu portait un texte encre — illisible et beaucoup trop
agressif à côté du prix. */
color: #ffffff;
background: var(--green);
border: 1px solid var(--green);
box-shadow: none;
}
.sp-offer-ico { display: inline-flex; align-items: center; line-height: 1; color: #ffffff; }
.sp-offer-ico svg { display: block; }
/* "À 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; }
/* Produits simples (carte catalogue) : pas de sélecteur de format → le margin
de 20px sous le prix crée un gros vide avant le bouton. On le supprime. */
li.product.product-type-simple .product__price-row { margin-bottom: 0; }
.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: var(--text);
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 { font-size: 17px !important; }
ul.products .product__price,
ul.products li.product .price { font-size: 15px !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 { font-size: 15px !important; }
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; }
/* Ruban offre : collé au bas de la photo (-14px = padding-top mobile) + débord latéral (12px). */
ul.products li.product .product__offers { margin: -14px -12px 4px; }
ul.products li.product .product__offer { padding: 7px 10px; font-size: 11px; }
/* 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).
font-size scopé en min-width: 769px pour ne pas écraser les @media mobile
(qui sont en amont en source order avec même spécificité + !important). */
ul.products .product__price,
ul.products li.product .price {
color: var(--text);
font-family: var(--font-display);
font-weight: 600;
margin: 0 0 8px;
letter-spacing: 0.02em;
line-height: 1;
}
@media (min-width: 769px) {
ul.products .product__price,
ul.products li.product .price { font-size: 20px !important; }
}
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: var(--text) !important; text-decoration: none; }
ul.products li.product .price del,
ul.products .product__price del { color: var(--text-mute); font-size: 0.8em; margin-right: 6px; font-weight: 400; }
/* Force le gris sur les enfants du (.woocommerce-Price-amount et bdi
héritent du #fff !important de la règle plus haut sinon → prix barré blanc). */
ul.products li.product .price del,
ul.products li.product .price del *,
ul.products li.product .price del .woocommerce-Price-amount,
ul.products li.product .price del .woocommerce-Price-amount *,
ul.products li.product .price del bdi,
ul.products .product__price del,
ul.products .product__price del *,
ul.products .product__price del .woocommerce-Price-amount,
ul.products .product__price del .woocommerce-Price-amount *,
ul.products .product__price del bdi { color: var(--text-mute) !important; -webkit-text-fill-color: var(--text-mute) !important; }
/* 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);
/* (la barre passe en blanc dans le bouton vert — cf. .card-cta__regular) */
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;
/* Même arrondi que les boutons du site, pas une gélule. */
border-radius: 6px;
text-transform: uppercase;
line-height: 1;
}
.pill__icon { font-size: 11px; line-height: 1; }
.pill--cbd {
background: rgba(122,184,122, 0.14);
color: var(--gold-soft);
border: 1px solid var(--gold-2);
}
.pill--culture {
background: rgba(76, 175, 80, 0.16);
color: var(--green);
border: 1px solid rgba(76, 175, 80, 0.45);
}
.pill--sale {
background: #d33b3b;
color: #fff;
border: 1px solid transparent;
font-weight: 700;
}
/* Mention légale THC : bleu pâle sur bleu pâle, illisible et hors charte.
On la passe en vert clair du site, comme les autres pastilles. */
.pill--thc {
background: var(--accent-soft, #e8f0e8);
color: var(--green, #2d4a2d);
border: 1px solid var(--line, #d8d0c4);
}
/* Échelle d'intensité — héritée de la charte sombre, où le texte était pâle
sur fond noir : sur fond clair il devenait illisible. On garde la même
progression (vert → ambre → rouge → vert profond) avec des aplats teintés
très clairs et un texte foncé. */
.pill--intensity-leger {
background: var(--accent-soft);
color: var(--gold);
border: 1px solid rgba(45, 74, 45, 0.28);
}
.pill--intensity-fort {
background: rgba(244, 164, 25, 0.14);
color: #8a5a06;
border: 1px solid rgba(244, 164, 25, 0.55);
}
.pill--intensity-puissant {
background: rgba(196, 82, 63, 0.12);
color: var(--danger);
border: 1px solid rgba(196, 82, 63, 0.45);
}
/* Niveau ultime « Extrêmement puissant » : le plus appuyé de l'échelle. */
.pill--intensity-extreme {
background: var(--gold);
color: #ffffff;
border: 1px solid var(--gold-2);
box-shadow: 0 2px 10px rgba(15, 42, 30, 0.22);
font-weight: 700;
}
/* 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