/* ==========================================================================
   THÈME & HEADER — chargé après style.css et auth-modal.css
   1. Header à deux niveaux (recherche + thème / navigation)
   2. Logo selon le thème
   3. Thème sombre : variables + corrections des couleurs codées en dur
   ========================================================================== */

/* ── 1. Header à deux niveaux ─────────────────────────────────────────── */
:root { --lc-topbar-h: 68px; }
@media (max-width: 991.98px) { :root { --lc-topbar-h: 64px; } }

/* Collé en haut avec un décalage négatif égal au niveau 1 :
   au défilement, la barre de recherche sort de l'écran et la navigation reste. */
.lc-header {
  position: sticky;
  top: calc(-1 * var(--lc-topbar-h));
  z-index: 1030;
}

.lc-topbar {
  height: var(--lc-topbar-h);
  background: var(--ab-canvas);
  /* Pas de trait entre les deux niveaux : il traverserait le logo à cheval */
  transition: background .35s ease;
}
.lc-topbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Barre de recherche */
.lc-topsearch {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 640px;
  min-width: 0;
  height: 48px;
  padding: 0 5px 0 16px;
  border-radius: 14px;
  background: var(--ab-surface-soft);
  border: 1px solid var(--ab-hairline);
  transition: border-color .2s, box-shadow .2s, background .35s;
}
.lc-topsearch:focus-within {
  border-color: var(--ab-ink);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}
.lc-topsearch-icon { font-size: 17px; color: var(--ab-muted); flex-shrink: 0; }
.lc-topsearch-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
  color: var(--ab-ink);
}
.lc-topsearch-input::placeholder { color: var(--ab-muted); opacity: 1; }
.lc-topsearch-input::-webkit-search-cancel-button { cursor: pointer; }
.lc-topsearch-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--ab-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}
.lc-topsearch-btn:hover { background: var(--ab-primary-dark); }
.lc-topsearch-btn:focus-visible { outline: 2px solid var(--ab-primary); outline-offset: 2px; }
.lc-topsearch-btn-icon { display: none; font-size: 16px; }

/* Bouton clair / sombre */
.lc-theme-toggle {
  margin-left: auto;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--ab-hairline);
  background: transparent;
  color: var(--ab-ink);
  font-size: 18px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.lc-theme-toggle:hover { background: var(--ab-surface-soft); }
.lc-theme-toggle:focus-visible { outline: 2px solid var(--ab-primary); outline-offset: 2px; }

/* Bureau : recherche et liens centrés sur le même axe, logo à cheval sur les deux niveaux */
@media (min-width: 992px) {
  /* Niveau 1 : recherche au centre, bouton thème à droite */
  .lc-topbar-inner { display: grid; grid-template-columns: 1fr minmax(0, 640px) 1fr; }
  .lc-topsearch { grid-column: 2; width: 100%; }
  .lc-theme-toggle { grid-column: 3; justify-self: end; margin-left: 0; }

  /* Niveau 2 : Accueil → Contact au centre de la page (loin des icônes de droite) */
  .lc-navbar > .container { position: relative; }
  .lc-navbar .navbar-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* Logo : grand et centré verticalement sur l'ensemble du header.
     --hp (0 → 1) suit le défilement : le logo remonte dans la navbar et rétrécit
     à mesure que la barre de recherche disparaît (sinon il serait coupé). */
  .lc-navbar .lc-navbar-logo { height: 64px; }
  .lc-navbar .lc-brand {
    transform-origin: left center;
    transform:
      translateY(calc(-0.5 * var(--lc-topbar-h) * (1 - var(--hp, 0))))
      scale(calc(1 - .375 * var(--hp, 0)));
  }
}
/* Mobile : la recherche prend toute la largeur, bouton réduit à une flèche */
@media (max-width: 575.98px) {
  .lc-topsearch { flex: 1 1 auto; height: 44px; padding-left: 12px; }
  .lc-topsearch-btn { width: 36px; height: 34px; padding: 0; }
  .lc-topsearch-btn-label { display: none; }
  .lc-topsearch-btn-icon { display: inline; }
  .lc-theme-toggle { width: 40px; height: 40px; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .lc-topsearch { flex: 1 1 auto; }
}

/* La loupe de la navbar ne sert que lorsque la barre de recherche a disparu */
.lc-header:not(.is-stuck) .lc-search-trigger { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lc-topbar, .lc-topsearch, .lc-theme-toggle, .lc-topsearch-btn { transition: none; }
}


/* ── 2. Logo selon le thème ───────────────────────────────────────────── */
.logo-on-dark { display: none; }
html[data-theme="dark"] .logo-on-light { display: none; }
html[data-theme="dark"] .logo-on-dark { display: inline-block; }


/* ── 3. Thème sombre ──────────────────────────────────────────────────── */
html[data-theme="dark"] {
  color-scheme: dark;
  --ab-primary-pale:   #4a1d27;
  --ab-ink:            #f2f2f3;
  --ab-body:           #d4d4d8;
  --ab-muted:          #a1a1aa;
  --ab-muted-soft:     #8b8b94;
  --ab-hairline:       #34343a;
  --ab-hairline-soft:  #2a2a30;
  --ab-canvas:         #17171a;
  --ab-surface-soft:   #212126;
  --ab-surface-strong: #2a2a30;
  --ab-success:        #4ade80;
  --ab-error:          #ff7b6b;
  --shadow-card: 0 0 0 1px rgba(255,255,255,.04), 0 4px 12px rgba(0,0,0,.5);

  --lx-bg:       #0f0f12;
  --lx-bg-2:     #141418;
  --lx-border:   #2c2c33;
  --lx-muted:    #a1a1aa;
  --lx-ink:      #f2f2f3;
  --lx-shadow:   0 8px 32px rgba(0,0,0,.45);
  --lx-shadow-h: 0 16px 48px rgba(0,0,0,.55);
}
html[data-theme="dark"] .lc-topsearch:focus-within { box-shadow: 0 0 0 3px rgba(255,255,255,.08); }

/* Cartes et blocs qui avaient un fond blanc codé en dur */
html[data-theme="dark"] .shop-card,
html[data-theme="dark"] .prod-card { background: var(--ab-canvas); }
html[data-theme="dark"] .shop-cover-default,
html[data-theme="dark"] .prod-ph-maison,
html[data-theme="dark"] .bs-hero-maison { background: var(--ab-surface-soft); }
html[data-theme="dark"] .shop-save-btn,
html[data-theme="dark"] .prod-action-btn { background: rgba(23,23,26,.88); color: var(--ab-ink); }
html[data-theme="dark"] .shop-save-btn:hover,
html[data-theme="dark"] .prod-action-btn:hover { background: var(--ab-surface-strong); }

/* Bouton « fantôme » et textes Bootstrap foncés */
html[data-theme="dark"] .text-dark { color: var(--ab-ink) !important; }
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light { background-color: var(--ab-canvas) !important; }

/* Fenêtre « Bienvenue sur Zando na Tshombo » (couleurs forcées en !important) */
html[data-theme="dark"] #authModal .modal-content { background: var(--ab-canvas); box-shadow: 0 25px 70px rgba(0,0,0,.6) !important; }
html[data-theme="dark"] #authModal .auth-modal-title { color: var(--ab-ink) !important; }
html[data-theme="dark"] #authModal .auth-modal-sub { color: var(--ab-muted) !important; }
html[data-theme="dark"] #authModal .btn-modal-outline { background: transparent; border-color: var(--ab-hairline); color: var(--ab-ink) !important; }
html[data-theme="dark"] #authModal .btn-modal-outline:hover { background: var(--ab-surface-soft); border-color: var(--ab-muted-soft); color: var(--ab-ink) !important; }
html[data-theme="dark"] #authModal .auth-modal-divider { color: var(--ab-muted); }
html[data-theme="dark"] #authModal .auth-modal-divider::after { border-bottom-color: var(--ab-hairline); }

/* Bouton Google et alertes */
html[data-theme="dark"] .btn-google { background: var(--ab-canvas); color: var(--ab-ink); border-color: var(--ab-hairline); }
html[data-theme="dark"] .btn-google:hover { background: var(--ab-surface-soft); }
html[data-theme="dark"] .lc-alert-success { background: rgba(74,222,128,.10); border-color: rgba(74,222,128,.25); }
html[data-theme="dark"] .lc-alert-error   { background: rgba(255,123,107,.10); border-color: rgba(255,123,107,.25); }

/* Les logos Mobile Money gardent leur pastille blanche (lisibilité des marques) */

/* Pastille TikTok noire : contour pour rester visible sur fond sombre */
html[data-theme="dark"] .footer-social-tiktok { box-shadow: 0 0 0 1px rgba(255,255,255,.28); }