/* ==========================================================================
   Monde Apicole — Thème SOMBRE (additif).
   Toutes les règles sont conditionnées à html[data-theme="dark"] :
   AUCUN impact sur le mode clair. Bascule via le bouton de la navbar
   (persistée en localStorage, défaut = préférence système).
   ========================================================================== */

/* ---------- 1) Bascule des tokens globaux (style.css) ---------- */
html[data-theme="dark"] {
  /* Surfaces (étaient claires) → sombres */
  --white:        #1A1712;   /* cartes / surfaces */
  --honey-cream:  #1A1712;
  --zinc-50:      #141210;
  --zinc-100:     #201C16;
  --zinc-200:     #2C271F;
  --zinc-300:     #3A342A;
  /* Texte (étaient foncés) → clairs */
  --zinc-900:     #ECE5D5;
  --zinc-950:     #F5EFE1;
  --text-dark:    #F5EFE1;
  --text-mid:     #CBC2B0;
  --text-light:   #9A9080;
  --bee-black:    #F5EFE1;
  --bee-brown:    #ECE5D5;
  /* Bordures */
  --border:       #2C271F;
  --border-strong:#3A342A;
  /* Tokens sémantiques des pages à style inline (a-propos, services) */
  --bg:          #100E0B;
  --bg-alt:      #16130F;
  --surface:     #1A1712;
  --surface-2:   #221E18;
  --text:        #F5EFE1;
  --text-muted:  #CBC2B0;
  --text-subtle: #9A9080;
  /* Ombres plus profondes */
  --shadow-sm:    0 1px 2px rgba(0,0,0,.45);
  --shadow-md:    0 1px 3px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.45);
  --shadow-lg:    0 6px 14px rgba(0,0,0,.5), 0 20px 40px rgba(0,0,0,.55);
  color-scheme: dark;
}

/* Fond de page plus profond que les cartes */
html[data-theme="dark"] body { background: #100E0B; color: var(--text-dark); }

/* ---------- 2) Composants déjà sombres (préserver / adapter) ---------- */
/* Boutons & pastilles d'accent : surface légèrement relevée + texte clair */
html[data-theme="dark"] .btn-dark,
html[data-theme="dark"] .btn-cart,
html[data-theme="dark"] .btn-add-cart,
html[data-theme="dark"] .qty-btn:hover,
html[data-theme="dark"] .overlay-btn:hover,
html[data-theme="dark"] .lang-switch button[aria-pressed="true"] {
  background: #2C271F; color: var(--text-dark); border-color: #3A342A;
}
html[data-theme="dark"] .btn-add-cart:hover,
html[data-theme="dark"] .btn-cart:hover { background: var(--honey-600); color: #17150F; }

/* Icônes / avatars sombres → honey pour rester visibles */
html[data-theme="dark"] .why-icon,
html[data-theme="dark"] .author-avatar { background: var(--honey-600); color: #17150F; }

/* Badges produit (ancien système) */
html[data-theme="dark"] .product-card .badge { background: #2C271F; color: var(--honey-300); }

/* Sections sombres : restent sombres, texte clair */
html[data-theme="dark"] .promo-banner,
html[data-theme="dark"] .newsletter,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .scroll-top { background: #15120E; }
html[data-theme="dark"] .scroll-top { color: var(--honey-300); border: 1px solid #3A342A; }

/* Barres du hamburger */
html[data-theme="dark"] .nav-hamburger span { background: var(--text-dark); }

/* Navbar : fond translucide sombre */
html[data-theme="dark"] .navbar { background: rgba(16,14,11,.82); border-bottom-color: var(--border); }
html[data-theme="dark"] .navbar.scrolled { background: rgba(16,14,11,.95); }

/* Champs de formulaire / inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #1A1712; color: var(--text-dark); border-color: var(--border);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--text-light); }

/* Dropdown nav / menu mobile */
html[data-theme="dark"] .nav-dropdown,
html[data-theme="dark"] .mobile-menu,
html[data-theme="dark"] .cart-sidebar { background: #15120E; border-color: var(--border); }

/* Bannière de page (.page-hero) — boutique.css force un fond #fff en dur */
html[data-theme="dark"] .page-hero { background: #100E0B; border-bottom-color: var(--border); }
html[data-theme="dark"] .page-hero .breadcrumb span:not(:last-child) { color: var(--text-light); }

/* ---------- 3) Composants premium cloisonnés (tokens locaux) ---------- */
html[data-theme="dark"] .heroxp {
  --bg:#120F0B; --surface:#1A1712; --surface-2:#221E18; --border:#2C271F;
  --text:#F5EFE1; --muted:#B4AB98;
}
html[data-theme="dark"] .pcxp {
  --surface:#1A1712; --surface-2:#221E18; --border:#2C271F;
  --text:#F5EFE1; --muted:#B4AB98; --accent:#F9CB6F; --honey-soft:rgb(249 188 56 / .12);
}
html[data-theme="dark"] .ribbons-xp,
html[data-theme="dark"] .trust-xp,
html[data-theme="dark"] .testi-xp {
  --surface:#1A1712; --surface-2:#1E1A14; --border:#2C271F;
  --text:#F5EFE1; --muted:#B4AB98; --accent:#F9CB6F;
}
html[data-theme="dark"] .trust-xp.features-band { background: #16130F; }

/* ---------- 4) Bouton bascule de thème (navbar) ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid var(--border, #E4E4E7);
  color: var(--text-mid, #52525B); font-size: 1.05rem; line-height: 1;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  flex-shrink: 0;
}
.theme-toggle:hover { color: var(--honey-600, #C8870A); border-color: var(--honey-400, #F5A623); transform: translateY(-1px); }
.theme-toggle .ico-sun  { display: none; }
.theme-toggle .ico-moon { display: inline; }
html[data-theme="dark"] .theme-toggle .ico-sun  { display: inline; }
html[data-theme="dark"] .theme-toggle .ico-moon { display: none; }