/* =========================================================================
CBD PURPLE — Méga-menu
Tokens & styles portés depuis la maquette « Refonte CRO » (pixel-fidèle).
Tout est préfixé .cbd- pour ne pas entrer en collision avec le thème.
========================================================================= */
.cbd-menu {
--cbd-magenta: rgb(88, 53, 170);
--cbd-violet: #7c43e8;
--cbd-purple: #9747ff;
--cbd-red: #d81e36;
--cbd-text: #211726;
--cbd-text-2: #6a5d72;
--cbd-muted: #9a8fa3;
--cbd-line: #ece7f0;
--cbd-bg-soft: #faf7fc;
--cbd-bg-tint: #f6eefb;
--cbd-grad: rgb(88, 53, 170);
--cbd-r-lg: 24px;
--cbd-sh-lg: 0 10px 30px rgba(124,67,232,.14), 0 30px 60px rgba(26,15,36,.10);
--cbd-font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
font-family: var(--cbd-font);
}
.cbd-menu *, .cbd-menu *::before, .cbd-menu *::after { box-sizing: border-box; }
.cbd-menu a { text-decoration: none; color: inherit; }
.cbd-menu ul { list-style: none; margin: 0; padding: 0; }
.cbd-hot {
font-style: normal; font-size: 9px; font-weight: 800; color: var(--cbd-red);
vertical-align: super; margin-left: 3px; letter-spacing: .04em;
}
/* ---- visibilité par device ---- */
.cbd-burger { display: none; }
@media (max-width: 1024px) {
.cbd-nav.hide-mobile { display: none; }
.cbd-burger.only-mobile { display: inline-grid; }
}
@media (min-width: 1025px) {
.cbd-burger.only-mobile { display: none !important; }
}
/* ========================== NAV DESKTOP ============================== */
.cbd-nav-row { display: flex; align-items: center; gap: 4px; }
.cbd-nav-item { position: static; display: flex; align-items: center; }
.cbd-nav-item:first-child .cbd-nav-link { padding-left: 0; }
.cbd-nav-link {
position: relative; display: inline-flex; align-items: center; gap: 4px;
padding: 13px 14px; font-size: 15px; font-weight: 600; color: var(--cbd-text-2);
transition: color .15s; cursor: pointer; background: none; border: 0;
}
.cbd-nav-link:hover { color: var(--cbd-magenta); }
.cbd-caret { transition: transform .2s; opacity: .6; }
.cbd-nav-item.has-mega:hover .cbd-caret { transform: rotate(180deg); }
/* ---- Méga-menu (full-width, 2 zones) ---- */
.cbd-mega {
position: absolute;
left: 50%;
width: 100vw;
margin-left: calc(-50vw - 8px);
right: auto;
top: 100%;
z-index: 55;
background: radial-gradient(50% 120% at 12% 0%, rgba(187, 58, 176, .10), transparent 60%), radial-gradient(55% 130% at 92% 10%, rgba(46, 166, 179, .10), transparent 60%), linear-gradient(180deg, var(--bg-tint) 0%, #fff 70%);
border-top: 1px solid var(--cbd-line);
box-shadow: 0 24px 48px rgba(26,15,36,.14);
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity .18s, transform .18s, visibility .18s;
}
.cbd-nav-item.has-mega:hover .cbd-mega,
.cbd-nav-item.has-mega:focus-within .cbd-mega {
opacity: 1; visibility: visible; transform: translateY(0);
}
.cbd-mega-inner {
max-width: 1280px; margin: 0 auto; padding: 28px clamp(16px,4vw,40px);
display: grid; grid-template-columns: 1fr 300px; gap: 36px; align-items: start;
}
.cbd-mega-cols { display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: start; }
.cbd-mega-col { min-width: 130px; }
.cbd-mega-col h4 {
font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
color: var(--cbd-muted); margin: 0 0 12px;
}
.cbd-mega-link {
display: block; text-align: left; padding: 6px 0; font-size: 14.5px;
font-weight: 500; color: var(--cbd-text); transition: color .15s;
}
.cbd-mega-link:hover { color: var(--cbd-magenta); }
.cbd-mega-img { display: block; margin-bottom: 12px; border-radius: 12px; overflow: hidden; }
.cbd-mega-img img { width: 100%; height: auto; display: block; }
.cbd-mega-all {
display: inline-flex; align-items: center; gap: 6px; align-self: end;
font-size: 14px; font-weight: 700; color: var(--cbd-magenta); padding: 6px 0;
}
/* ---- Carte produit mise en avant (design minimaliste) ---- */
.cbd-mega-feat {
position: relative; display: block; text-align: left; border-radius: var(--cbd-r-lg);
overflow: hidden; border: 1px solid var(--cbd-line); background: var(--cbd-bg-soft);
transition: transform .18s, box-shadow .2s;
}
.cbd-mega-feat:hover { transform: translateY(-3px); box-shadow: var(--cbd-sh-lg); }
.cbd-mega-feat-media { display: block; }
.cbd-mega-feat-media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.cbd-mega-feat-tag {
position: absolute; top: 12px; left: 12px; background: var(--cbd-grad); color: #fff;
font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 99px;
}
.cbd-mega-feat-body { display: block; padding: 14px 16px; }
.cbd-mega-feat-body strong { display: block; font-size: 16px; }
.cbd-mega-feat-body em {
display: block; font-style: normal; font-size: 13px; color: var(--cbd-text-2); margin-top: 2px;
}
.cbd-mega-feat-price { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.cbd-mega-feat-price b { font-size: 18px; font-weight: 800; color: var(--cbd-text); }
.cbd-mega-feat-price s { font-size: 13px; color: var(--cbd-muted); }
.cbd-mega-feat-go {
display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
font-size: 13.5px; font-weight: 700; color: var(--cbd-magenta);
}
/* =========================================================================
STYLE MINIMALISTE — menu déroulant simple (porté depuis la maquette CRO).
Activé quand le module est réglé sur « Minimaliste » :
.cbd-menu[data-cbd-style="minimal"]. Un petit dropdown aligné sous la
rubrique, liste de liens + « Tout voir ». Aucun panneau pleine largeur,
aucune carte produit mise en avant.
========================================================================= */
.cbd-menu[data-cbd-style="minimal"] .cbd-nav-item { position: relative; }
/* Un onglet qui porte un dropdown (méga décoché) doit ancrer ce dropdown,
même quand le style global est « méga ». */
.cbd-nav-item--drop { position: relative; }
.cbd-drop {
position: absolute; left: 0; top: 100%; z-index: 55; min-width: 240px;
background: #fff; border: 1px solid var(--cbd-line); border-radius: 0 0 12px 12px;
box-shadow: 0 20px 40px rgba(26,15,36,.14); padding: 8px;
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity .18s, transform .18s, visibility .18s;
}
.cbd-nav-item.has-mega:hover .cbd-drop,
.cbd-nav-item.has-mega:focus-within .cbd-drop {
opacity: 1; visibility: visible; transform: translateY(0);
}
.cbd-drop-link {
display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 9px;
font-size: 14.5px; font-weight: 500; color: var(--cbd-text);
transition: background .12s, color .12s; white-space: nowrap;
}
.cbd-drop-link:hover { background: var(--cbd-bg-tint); color: var(--cbd-magenta); }
.cbd-drop-all {
display: inline-flex; align-items: center; gap: 6px; width: 100%; padding: 10px 12px;
margin-top: 4px; border-top: 1px solid var(--cbd-line);
font-size: 13.5px; font-weight: 700; color: var(--cbd-magenta);
}
/* =========================================================================
Forçage des couleurs : certains thèmes surchargent a / a:hover / h4 / etc.
Ces règles (spécificité .cbd-menu + !important) garantissent la priorité.
Modifiez ici si vous voulez d'autres teintes.
========================================================================= */
.cbd-menu .cbd-nav-link { color: var(--cbd-text-2) !important; }
.cbd-menu .cbd-nav-link:hover,
.cbd-menu .cbd-nav-item.has-mega:hover > .cbd-nav-link { color: var(--cbd-magenta) !important; }
.cbd-menu .cbd-mega-col h4 { color: var(--cbd-muted) !important; }
.cbd-menu .cbd-mega-link { color: var(--cbd-text) !important; }
.cbd-menu .cbd-mega-link:hover { color: var(--cbd-magenta) !important; }
.cbd-menu .cbd-mega-all,
.cbd-menu .cbd-mega-all:hover { color: var(--cbd-magenta) !important; }
.cbd-menu .cbd-mega-feat,
.cbd-menu .cbd-mega-feat-body strong { color: var(--cbd-text) !important; }
.cbd-menu .cbd-mega-feat-body em { color: var(--cbd-text-2) !important; }
.cbd-menu .cbd-mega-feat-price b { color: var(--cbd-text) !important; }
.cbd-menu .cbd-mega-feat-price s { color: var(--cbd-muted) !important; }
.cbd-menu .cbd-mega-feat-go { color: var(--cbd-magenta) !important; }
/* style minimaliste */
.cbd-menu .cbd-drop-link { color: var(--cbd-text) !important; }
.cbd-menu .cbd-drop-link:hover { color: var(--cbd-magenta) !important; }
.cbd-menu .cbd-drop-all,
.cbd-menu .cbd-drop-all:hover { color: var(--cbd-magenta) !important; }
/* mobile */
.cbd-menu .cbd-mm-row { color: var(--cbd-text) !important; }
.cbd-menu .cbd-mm-all { color: var(--cbd-magenta) !important; }
.cbd-menu .cbd-mm-group { color: var(--cbd-muted) !important; }
.cbd-menu .cbd-mm-back { color: var(--cbd-magenta) !important; }
/* ========================== BURGER + DRAWER MOBILE =================== */
.cbd-burger {
place-items: center; color: var(--cbd-text); padding: 4px;
background: none; border: 0; cursor: pointer;
}
.cbd-mm-overlay {
position: fixed; inset: 0; z-index: 1000; background: rgba(26,15,36,.45);
backdrop-filter: blur(2px); opacity: 0; transition: opacity .2s;
}
.cbd-mm-overlay[hidden] { display: none; }
.cbd-mm-overlay.is-open { opacity: 1; }
.cbd-mm {
position: absolute; left: 0; top: 0; bottom: 0; width: min(86vw, 360px);
background: #fff; display: flex; flex-direction: column;
transform: translateX(-100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
box-shadow: 0 0 40px rgba(26,15,36,.2);
}
.cbd-mm-overlay.is-open .cbd-mm { transform: translateX(0); }
.cbd-mm-top {
display: flex; align-items: center; justify-content: space-between;
padding: 18px; border-bottom: 1px solid var(--cbd-line);
}
.cbd-mm-title { font-size: 17px; font-weight: 800; }
.cbd-menu .cbd-mm-logo,
.cbd-mm-top .cbd-mm-logo {
height: 34px !important;
max-height: 40px !important;
width: auto !important;
max-width: calc(100% - 48px);
object-fit: contain;
display: block;
}
.cbd-icon-btn { background: none; border: 0; color: var(--cbd-text); cursor: pointer; padding: 4px; display: grid; place-items: center; flex: 0 0 auto; }
/* champ recherche (comme la maquette) */
.cbd-mm-search {
display: flex; align-items: center; gap: 10px; margin: 14px 16px;
padding: 11px 15px; background: var(--cbd-bg-soft); border-radius: 99px; color: var(--cbd-muted);
}
.cbd-mm-search input { border: 0; background: none; outline: none; flex: 1; font-size: 15px; color: var(--cbd-text); }
/* viewport : le panneau racine est dans le flux, les enfants glissent par-dessus */
.cbd-mm-viewport { flex: 1; overflow: hidden; position: relative; }
.cbd-mm-track { position: relative; height: 100%; }
.cbd-mm-panel[data-level="0"] { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cbd-mm-panel[data-level="1"] {
position: absolute; inset: 0; background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
transform: translateX(100%); visibility: hidden;
transition: transform .26s cubic-bezier(.4,0,.2,1), visibility .26s;
}
.cbd-mm-panel[data-level="1"].is-active { transform: translateX(0); visibility: visible; }
.cbd-mm-nav { display: flex; flex-direction: column; padding: 8px; }
.cbd-mm-row {
display: flex; align-items: center; justify-content: space-between;
padding: 15px 14px; font-size: 16px; font-weight: 600; color: var(--cbd-text);
border-radius: 12px; background: none; border: 0; width: 100%; text-align: left; cursor: pointer;outline: none !important;
}
.cbd-mm-row:hover { background: var(--cbd-bg-tint); }
.cbd-mm-row svg { color: var(--cbd-muted); flex: 0 0 auto; }
.cbd-mm-sub { font-weight: 500; font-size: 15px; padding-block: 12px; }
.cbd-mm-all { color: var(--cbd-magenta); font-weight: 700; }
.cbd-mm-group {
padding: 14px 14px 6px; font-size: 11px; font-weight: 800; text-transform: uppercase;
letter-spacing: .07em; color: var(--cbd-muted);
}
.cbd-mm-back {
display: inline-flex; align-items: center; gap: 6px; margin: 12px 8px 0;
padding: 8px 12px; font-size: 14px; font-weight: 700; color: var(--cbd-magenta);
background: var(--cbd-bg-tint); border: 0; border-radius: 99px; cursor: pointer;
}
.cbd-mm-head { padding: 14px 18px 4px; font-size: 18px; font-weight: 800; }
/* pied mobile (ex: téléphone) */
.cbd-mm-foot { padding: 16px; border-top: 1px solid var(--cbd-line); display: flex; flex-direction: column; gap: 10px; }
.cbd-mm-cta {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
padding: 13px 16px; border: 1.5px solid var(--cbd-line); border-radius: 99px;
font-size: 16px; font-weight: 700; color: var(--cbd-text); transition: border-color .15s, color .15s;
}
.cbd-mm-cta:hover { border-color: var(--cbd-magenta); color: var(--cbd-magenta); }
@media (prefers-reduced-motion: reduce) {
.cbd-mm, .cbd-mm-panel, .cbd-mm-overlay { transition: none; }
}
/* =========================================================================
THÈME "OKIHIGH" — skin alternatif du méga-menu.
Activé quand le module est réglé sur Okihigh dans le BO :
.cbd-menu[data-cbd-theme="okihigh"]. Ne charge aucun fichier
supplémentaire : on surcharge les variables de marque + quelques
règles ciblées. Le thème "purple" (par défaut) reste inchangé.
DA : maquette Okihigh (header). Fond blanc, dégradé bleu → rose →
orange en accent, soulignement dégradé sous l'onglet, CTA/accents Oki.
========================================================================= */
.cbd-menu[data-cbd-theme="okihigh"] {
--cbd-magenta: #2E6BF0; /* accent / hover (bleu Okihigh) */
--cbd-violet: #E93A9C;
--cbd-purple: #F7941D;
--cbd-red: #E5352C;
--cbd-text: #17171C;
--cbd-text-2: #3A3944; /* libellés de nav */
--cbd-muted: #8A889A;
--cbd-line: #ECEAF0;
--cbd-bg-soft: #F4F3F8;
--cbd-bg-tint: #F4F3F8;
--cbd-grad: linear-gradient(90deg, #2E6BF0 0%, #E93A9C 55%, #F7941D 100%);
--cbd-r-lg: 20px;
--cbd-sh-lg: 0 10px 30px rgba(23,23,28,.10), 0 30px 60px rgba(23,23,28,.12);
--cbd-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
/* ---- Liens de nav : plus compacts + soulignement dégradé ---- */
.cbd-menu[data-cbd-theme="okihigh"] .cbd-nav-link {
font-size: 13px;
font-weight: 700;
}
.cbd-menu[data-cbd-theme="okihigh"] .cbd-nav-link::after {
content: "";
position: absolute;
left: 14px; right: 14px; bottom: 0;
height: 3px; border-radius: 3px 3px 0 0;
background: var(--cbd-grad);
opacity: 0; transform: scaleX(.4); transform-origin: center;
transition: opacity .18s ease, transform .18s ease;
}
.cbd-menu[data-cbd-theme="okihigh"] .cbd-nav-item:first-child .cbd-nav-link::after { left: 0; }
.cbd-menu[data-cbd-theme="okihigh"] .cbd-nav-link:hover::after,
.cbd-menu[data-cbd-theme="okihigh"] .cbd-nav-item:hover > .cbd-nav-link::after,
.cbd-menu[data-cbd-theme="okihigh"] .cbd-nav-item.has-mega:focus-within > .cbd-nav-link::after {
opacity: 1; transform: scaleX(1);
}
/* Le caret hérite du bleu au survol (pas de rose) */
.cbd-menu[data-cbd-theme="okihigh"] .cbd-caret { opacity: .55; }
/* ---- Méga-panneau : surface blanche épurée (au lieu du radial violet) ---- */
.cbd-menu[data-cbd-theme="okihigh"] .cbd-mega {
background: #fff;
border-top: 1px solid var(--cbd-line);
box-shadow: 0 24px 48px rgba(23,23,28,.12);
}
.cbd-menu[data-cbd-theme="okihigh"] .cbd-mega-col h4 {
font-weight: 800;
}
/* ---- Carte produit mise en avant : titre en Baloo 2, tag dégradé (via --cbd-grad) ---- */
.cbd-menu[data-cbd-theme="okihigh"] .cbd-mega-feat-body strong {
font-family: 'Baloo 2', var(--cbd-font);
font-weight: 800;
}
.cbd-menu[data-cbd-theme="okihigh"] .cbd-mega-feat-tag {
font-weight: 800;
}
/* ---- Dropdown "minimaliste" : coins arrondis + ombre Okihigh ---- */
.cbd-menu[data-cbd-theme="okihigh"] .cbd-drop {
border-radius: 16px;
box-shadow: 0 18px 44px rgba(23,23,28,.14);
padding: 8px;
}
.cbd-menu[data-cbd-theme="okihigh"] .cbd-drop-link { border-radius: 10px; font-weight: 600; }
/* ---- Drawer mobile : overlay + titre Okihigh ---- */
.cbd-menu[data-cbd-theme="okihigh"] .cbd-mm-overlay { background: rgba(15,15,20,.45); }
.cbd-menu[data-cbd-theme="okihigh"] .cbd-mm-title,
.cbd-menu[data-cbd-theme="okihigh"] .cbd-mm-head {
font-family: 'Baloo 2', var(--cbd-font);
font-weight: 800;
}
/* ---- Astuce perf/typo : les polices Okihigh (Baloo 2 + Plus Jakarta Sans)
sont supposées déjà chargées par le thème de la boutique. Sinon, ajoute
dans le du thème :
(un preconnect est préférable à un @import ici, pour la performance). */