/* ==========================================================================
   Odin Key — brand.css
   Habillage de la maquette Claude Design (navy #000055 · violet #5005CD ·
   vert #00E182 · Sora / IBM Plex Sans) par-dessus la structure et le responsive
   existants. Chargé EN DERNIER : ne redéfinit que couleurs, fonds et habillage,
   jamais les breakpoints (640 / 767 / 900 / 1024) déjà en place.
   Fonctionne en clair ET en sombre ([data-theme="dark"]).
   ========================================================================== */

/* ---- Marque (logo écu + mot-symbole) -------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 11px; line-height: 1; text-decoration: none; }
.brand__mark { width: 32px; height: 32px; flex: 0 0 auto; display: block; }
.brand__word { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: #fff; white-space: nowrap; }
.brand--on-light .brand__word { color: var(--navy-900); }
.hdr__logo:hover .brand__word { color: #fff; }

/* ---- Bandeau du haut : violet --------------------------------------------- */
.topbar { background: var(--purple-500); }
.topbar__code { background: #fff; color: var(--purple-500); }
.topbar__code svg { color: var(--purple-500); }
.topbar__i svg, .topbar__i--amber svg, .topbar__i--green svg { color: var(--brand-green); }

/* ---- En-tête : navy ---------------------------------------------------------- */
.hdr, [data-theme="dark"] .hdr { background: var(--navy-900); border-bottom: 1px solid rgba(255,255,255,.08); }
.hdr__in { padding-block: 16px; }
.hdr__search svg { color: rgba(255,255,255,.65); }
.hdr__search input {
  height: 44px; border: 0; border-radius: var(--radius-md); background: rgba(255,255,255,.1); color: #fff;
}
.hdr__search input::placeholder { color: rgba(255,255,255,.58); opacity: 1; }
.hdr__search input:focus, [data-theme="dark"] .hdr__search input:focus {
  background: rgba(255,255,255,.14); border: 0; box-shadow: 0 0 0 2px var(--brand-green);
}
@media (min-width: 641px) {
  .hdr__search { flex: 1 1 auto; max-width: 560px; }
}
.hdr__iconbtn, .hdr__burger { color: #fff; }
.hdr__iconbtn:hover { background: rgba(255,255,255,.1); color: var(--brand-green); }
.hdr__cart:hover { background: rgba(255,255,255,.1); }
.hdr__cart-total { color: #fff; }
.hdr__cart-ico { background: var(--brand-green); color: var(--navy-900); }
.hdr__count { background: var(--navy-900); color: #fff; border: 2px solid var(--brand-green); }

/* Barre de catégories */
.nav, [data-theme="dark"] .nav { background: var(--navy-800); border-top: 1px solid rgba(255,255,255,.08); }
.nav__all { background: var(--color-primary); color: #fff; }
.nav__link, [data-theme="dark"] .nav__link { color: rgba(255,255,255,.86); }
.nav__link:hover, .nav__link--active,
[data-theme="dark"] .nav__link:hover, [data-theme="dark"] .nav__link--active { color: #fff; border-color: var(--brand-green); }
.odinkey-nav-ico { background: rgba(255,255,255,.12) !important; color: var(--brand-green); }
.odinkey-nav-chevron { color: rgba(255,255,255,.6); }

/* Menu mobile off-canvas : en-tête navy */
.mnav__head { background: var(--navy-900); border-bottom: 0; }
.mnav__logo .brand__mark { width: 26px; height: 26px; }
.mnav__logo .brand__word { font-size: 18px; }
.mnav__close { color: #fff; }
.mnav__close:hover { background: rgba(255,255,255,.12); }
.mnav__row, .mnav__row--home { color: var(--text-strong); }
.mnav__row:hover, .mnav__kid:hover, .mnav__expand:hover { background: var(--surface-sunken); }
.mnav__kid { color: var(--text-muted); }
.mnav .odinkey-nav-ico { background: var(--navy-900) !important; }
@media (max-width: 640px) {
  .hdr { background: var(--navy-900); }
  .brand__mark { width: 26px; height: 26px; }
  .brand__word { font-size: 18px; }
}

/* ---- Héro (vitrine) : navy + formes géométriques ----------------------------- */
.showcase { background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-700) 100%); }
.showcase::before {
  content: ""; position: absolute; left: -60px; top: -60px; width: 420px; height: 420px;
  background: var(--purple-500); opacity: .5; clip-path: polygon(0 0, 62% 0, 0 62%); pointer-events: none;
}
.showcase::after {
  content: ""; position: absolute; right: -40px; bottom: -100px; width: 520px; height: 520px;
  background: var(--brand-green); opacity: .14; clip-path: polygon(100% 100%, 35% 100%, 100% 35%); pointer-events: none;
}
.showcase__in { position: relative; z-index: 1; }
.hero__pill-live {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(0,225,130,.4); background: rgba(0,225,130,.12); color: var(--brand-green);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.hero__pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-green); }
.showcase__title { margin-top: 16px; line-height: 1.08; }
.showcase__title em { color: var(--brand-green); }
.showcase__sub { color: rgba(255,255,255,.76); font-size: 17px; line-height: 1.6; max-width: 520px; margin: 16px auto 0; }
.scard__badge--promo, .scard__badge--hot { background: var(--brand-green); color: var(--navy-900); }
.scard__badge--best { background: var(--purple-500); color: #fff; }
.scard__badge--new { background: #fff; color: var(--navy-900); }

/* Bureau large : texte à gauche, 4 cartes à droite (comme la maquette) */
@media (min-width: 1025px) {
  .showcase__in {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas: "head grid" "cta grid"; column-gap: 56px; row-gap: 28px; align-items: center;
    padding-block: 56px;
  }
  .showcase__head { grid-area: head; text-align: left; margin: 0; align-self: end; }
  .showcase__sub { margin-left: 0; }
  .showcase__grid { grid-area: grid; grid-template-columns: repeat(2, 1fr); }
  .scard { aspect-ratio: 4 / 3; }
  .showcase__cta { grid-area: cta; margin-top: 0; align-self: start; flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* Mobile : le texte du héro + CTA, puis le carrousel (les 4 cartes restent masquées) */
@media (max-width: 640px) {
  .showcase { display: block; }
  .showcase__grid { display: none; }
  .showcase__in { padding: 26px var(--gutter) 18px; }
  .showcase__head { text-align: left; margin-bottom: 0; }
  .showcase__title { font-size: 28px; }
  .showcase__sub { font-size: 14px; margin: 12px 0 0; }
  .showcase__cta { margin-top: 18px; justify-content: flex-start; gap: 12px; }
  .showcase__chips { display: none; }
  .mhero { margin-top: 4px; }
  .mhero__cta { background: var(--color-primary); }
  .mhero__dot.is-active { background: var(--brand-green); }
  .mhero__dot { background: rgba(255,255,255,.35); }
}

/* ---- Barre de réassurance : navy ---------------------------------------------- */
.trust { background: var(--navy-800); border: 0; }
.trust__in { padding-block: 26px; }
.trust .chk-trust__ico { background: transparent; color: var(--brand-green); width: auto; height: auto; }
.trust .chk-trust__title { color: #fff; }
.trust .chk-trust__sub { color: rgba(255,255,255,.62); }

/* ---- Sections, catégories, cartes produit ----------------------------------------- */
.sec__head h2 { font-weight: 800; }
.sec__link { color: var(--purple-500); }
.cat { background: var(--surface-sunken); border: 0; border-radius: 14px; }
.cat:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cat__ico { background: transparent !important; color: var(--purple-500); width: auto; height: auto; }
.cat__label { color: var(--text-strong); }
.cat__count { color: var(--text-muted); }

.chk-pcard { border-radius: var(--radius-lg); }
.chk-pcard__plat { color: var(--text-muted); }
.chk-pcard__disc { background: var(--brand-green); color: var(--navy-900); }
.chk-pcard__add { background: var(--color-primary); }
.chk-pcard__add:hover { background: var(--color-primary-hover); }
.chk-price__now { color: var(--text-strong); }
.chk-price__now--sale { color: var(--text-strong); }
.chk-price__cur { color: var(--text-muted); }
.chk-badge--discount, .chk-badge--sale { background: var(--brand-green); color: var(--navy-900); }
.chk-badge--new { background: var(--navy-900); }
.chk-badge--out { background: var(--surface-sunken); color: var(--text-muted); }
.pdp__save { background: color-mix(in srgb, var(--brand-green) 18%, transparent); color: var(--green-600); }

/* ---- Bannière promo : navy + violet ------------------------------------------------ */
.promo { background: radial-gradient(600px 300px at 85% 20%, rgba(80,5,205,.75), transparent 60%), var(--navy-900); }
.promo__key { border-color: rgba(0,225,130,.6); color: var(--brand-green); }

/* ---- Avis (section navy, affichée uniquement avec de vrais avis Odin Key) ---------- */
.revband { background: var(--navy-900); position: relative; overflow: hidden; }
.revband .sec__head h2 { color: #fff; }
.revband .sec__head p { color: rgba(255,255,255,.7); }
.revband .rev { background: var(--navy-800); border: 0; }
.revband .rev__txt { color: rgba(255,255,255,.85); }
.revband .rev__name { color: #fff; }
.revband .rev__stars, .revband .rev__meta { color: var(--brand-green); }

/* ---- Pied de page : navy ------------------------------------------------------------ */
.ft { background: var(--navy-800); border-top: 3px solid var(--brand-green); }
.ft__badge-ico { color: var(--brand-green); }
.ft__contact a:hover { color: var(--brand-green); }
.ft__contact a svg { color: var(--brand-green); }
.ft .brand__mark { width: 28px; height: 28px; }
.ft .brand__word { font-size: 19px; }
.ft__paylabel svg { color: var(--brand-green); }

/* ---- Bandeau de bienvenue mobile -------------------------------------------------- */
.mwelcome { background: var(--navy-900); }
.mwelcome__dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-green); margin-top: 5px; }

/* ---- Boutons --------------------------------------------------------------------------- */
.chk-btn--secondary { --_bg: var(--navy-900); }
.chk-btn--secondary:hover { --_bg: var(--navy-700); }
[data-theme="dark"] .chk-btn--secondary { --_bg: var(--navy-700); }

/* ---- Mode sombre : textes qui référençaient directement l'échelle --ink-* ------------- */
[data-theme="dark"] .cat__label,
[data-theme="dark"] .rev__name,
[data-theme="dark"] .facet h3,
[data-theme="dark"] .pdp__opt-label,
[data-theme="dark"] .pdp__spec span:last-child,
[data-theme="dark"] .revrow__name,
[data-theme="dark"] .cli__title,
[data-theme="dark"] .chk-rating__score,
[data-theme="dark"] .chk-crumbs__current,
[data-theme="dark"] .chk-trust__title { color: var(--text-strong); }
[data-theme="dark"] .rev__txt,
[data-theme="dark"] .revrow p { color: var(--text-body); }
[data-theme="dark"] .pdp__reassure,
[data-theme="dark"] .cat,
[data-theme="dark"] .rev { background: var(--surface-sunken); }
[data-theme="dark"] .pdp__spec { border-bottom-color: var(--border); }
[data-theme="dark"] .pdp__delivery { background: var(--status-success-tint); }
[data-theme="dark"] .pdp__delivery p { color: var(--text-body); }
[data-theme="dark"] .chk-price__now,
[data-theme="dark"] .chk-price__now--sale,
[data-theme="dark"] .chk-price__cur { color: var(--brand-green); }
[data-theme="dark"] .pdp__save { color: var(--brand-green); }
[data-theme="dark"] .cat__ico { color: var(--brand-green); }
[data-theme="dark"] .sec__link { color: var(--brand-green); }
[data-theme="dark"] .revband .rev { background: var(--navy-800); }

@media (prefers-reduced-motion: reduce) {
  .cat, .chk-pcard, .scard, .chk-btn { transition: none; }
}

/* ---- Correctifs de structure (hérités du clone) ------------------------------------------ */
/* La classe WordPress `body.page` (pages statiques, dont l'accueil) rencontrait le composant
   `.page` du kit (padding 12px mobile) : le contenu perdait 12px de chaque côté. */
body.page { padding: 0; max-width: none; }
@media (max-width: 640px) {
  .hdr__cart-total { display: none; }   /* mobile : icône + pastille seulement (maquette) */
  .hdr__row1 { gap: 6px; }
}

/* Conteneur de page (fiche produit, boutique) : marge latérale sur bureau/tablette ;
   le mobile (≤640px) garde ses 12px définis dans components.css. */
@media (min-width: 641px) {
  .page { padding-inline: var(--gutter); }
}

/* ---- Sélecteur région / devise ----------------------------------------------------------- */
.hdr__curr, [data-theme="dark"] .hdr__curr { color: #fff; background: transparent; border-color: rgba(255,255,255,.3); padding: 7px 11px; }
.hdr__curr:hover, [data-theme="dark"] .hdr__curr:hover { color: var(--brand-green); border-color: var(--brand-green); }
.hdr__curr svg { flex: 0 0 auto; }
.mnav__row--btn { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--font-body); }
.currmodal__title { color: var(--text-strong); }

/* ---- Logo LOGO-02 (bouclier clé bicolore) : couleurs par contexte ---------------------------- */
.bm-a { fill: var(--bm-a, #00E182); }
.bm-b { fill: var(--bm-b, #FFFFFF); }
.bm-c { fill: var(--bm-c, #000055); }
.brand--on-light { --bm-a: #000055; --bm-b: #5005CD; --bm-c: #FFFFFF; }
.ft .brand { --bm-c: #0A0A3D; }

/* ---- Sélecteurs langue / drapeau + devise (en-tête et menu mobile) ------------------------ */
.hdr__curr { display: none; } /* ancien bouton unique, remplacé par .odk-dd */
.odk-dd { position: relative; }
.odk-dd__btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; border-radius: 999px; padding: 8px 10px; cursor: pointer; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 1; white-space: nowrap; }
.odk-dd__btn:hover { color: var(--brand-green); }
.odk-dd__btn:focus-visible, .odk-dd__item:focus-visible, .mnav__chip:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 2px; }
.odk-dd__btn svg { flex: 0 0 auto; transition: transform .15s ease; }
.odk-dd__btn[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.odk-flag { display: inline-block; width: 22px; height: 16px; flex: 0 0 auto; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.odk-dd__btn .odk-flag { box-shadow: 0 0 0 1px rgba(255,255,255,.28); }
.odk-dd__menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; margin: 0; padding: 6px; list-style: none; background: #fff; color: #0B0B1A; border: 1px solid #E6E6F0; border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,85,.22); z-index: 200; }
[data-theme="dark"] .odk-dd__menu { background: #10104A; color: #fff; border-color: rgba(255,255,255,.2); }
.odk-dd__menu[hidden] { display: none; }
.odk-dd__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; background: none; border-radius: 8px; color: inherit; font-family: var(--font-body); font-size: 14px; line-height: 1.2; text-decoration: none; cursor: pointer; text-align: left; }
.odk-dd__item b { font-family: var(--font-display); font-weight: 700; min-width: 40px; }
.odk-dd__item span { opacity: .82; }
.odk-dd__item:hover { background: #F5F5FB; }
[data-theme="dark"] .odk-dd__item:hover { background: rgba(255,255,255,.1); }
.odk-dd__item.is-current { font-weight: 700; background: rgba(80,5,205,.09); }
.odk-dd__item.is-current::after { content: "\2713"; margin-left: auto; color: #5005CD; font-weight: 700; }
[data-theme="dark"] .odk-dd__item.is-current { background: rgba(0,225,130,.12); }
[data-theme="dark"] .odk-dd__item.is-current::after { color: var(--brand-green); }
.odk-dd__more { margin-top: 4px; padding-top: 4px; border-top: 1px solid #E6E6F0; }
[data-theme="dark"] .odk-dd__more { border-top-color: rgba(255,255,255,.18); }
@media (max-width: 980px) { .odk-dd__btn { padding: 8px 6px; font-size: 13px; } .odk-dd__lbl { max-width: 78px; overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 640px) { .odk-dd { display: none; } }

/* Menu mobile : langues et devises en pastilles */
.mnav__pick { padding: 10px 10px 4px; }
.mnav__pick-title { margin: 6px 0 8px; font-family: var(--font-display); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.mnav__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.mnav__chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: 999px; color: var(--ink-900); font-family: var(--font-body); font-size: 14px; text-decoration: none; cursor: pointer; }
.mnav__chip.is-current { border-color: #5005CD; background: rgba(80,5,205,.08); font-weight: 700; }