/* =============================================================================
   Header — Plein Sud (custom pixel-perfect, 3 rangées)
   1) .ps-topbar (sombre)  2) .ps-header__main (crème)  3) .ps-nav (crème)
   N'utiliser QUE les tokens (var(--ps-*) / var(--rt-*)).
   ============================================================================= */

/* box-sizing sur tous les composants Plein Sud (évite les débordements en mobile) */
.ps-topbar, .ps-topbar__inner,
.ps-header, .ps-header__main, .ps-header__inner,
.ps-nav, .ps-nav__inner, .ps-drawer__panel,
.ps-search, .ps-search__input,
.ps-hero, .ps-hero__inner, .ps-hero__content,
.ps-reassure, .ps-reassure__inner {
  box-sizing: border-box;
}

/* Sélecteur devise flottant ShopBuilder + marquee builder : masqués */
.switcher-list,
.switcher-btn-wrapper,
.elementor-element-17879f9,
.elementor-element-d7636ce {
  display: none !important;
}

/* =============================== 1. TOP BAR ================================= */
.ps-topbar {
  background: var(--ps-ink);
  font-family: var(--ps-font-body);
  font-size: 13px;
  color: #cfc9bd;
}
.ps-topbar__inner {
  max-width: var(--ps-container);
  margin: 0 auto;
  padding: 0 20px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.ps-topbar__left {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ps-pill { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ps-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ps-gold); flex: 0 0 auto; }
.ps-topbar__right { display: flex; align-items: center; gap: 16px; }
.ps-cur { color: var(--ps-gold); font-weight: 600; letter-spacing: 0.03em; }
.ps-lang { display: inline-flex; align-items: center; background: rgba(255,255,255,0.08); border-radius: var(--ps-radius-pill); padding: 3px; }
.ps-lang__btn { background: none; border: 0; padding: 3px 12px; font: inherit; font-size: 12px; color: #cfc9bd; cursor: pointer; border-radius: var(--ps-radius-pill); transition: color .2s, background .2s; }
.ps-lang__btn.is-active { background: var(--ps-gold); color: var(--ps-ink); font-weight: 600; }

/* ============================ 2. HEADER PRINCIPAL ========================== */
.ps-header__main {
  background: var(--ps-cream);
}
.ps-header__inner {
  max-width: var(--ps-container);
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.ps-logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.ps-logo img { height: 48px; width: auto; display: block; }

/* Barre de recherche (pill + bouton or) */
.ps-search {
  flex: 0 1 560px;
  max-width: 560px;
  position: relative;
  display: flex;
  align-items: center;
}
.ps-search__input {
  width: 100%;
  box-sizing: border-box;
  height: 52px;
  padding: 0 60px 0 22px;
  border-radius: var(--ps-radius-pill);
  background: var(--ps-cream-soft);
  border: 1.5px solid var(--ps-line);
  font-family: var(--ps-font-body);
  font-size: 15px;
  color: var(--ps-ink);
}
.ps-search__input::placeholder { color: var(--ps-muted); }
.ps-search__input:focus { outline: none; border-color: var(--ps-gold); }
.ps-search__btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  max-width: 40px;
  padding: 0 !important;
  border: 0;
  border-radius: 50%;
  background-color: var(--ps-gold);
  /* loupe blanche en background (fallback fiable) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  color: var(--ps-white);
  cursor: pointer;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ps-search__btn svg { width: 18px; height: 18px; stroke: #fff; color: #fff; }

/* Actions droite (FAQ, Compte, Favoris, Panier) */
.ps-header__actions {
  flex: 0 0 auto;
  margin-left: auto;          /* colle le bloc à droite, comme la maquette */
  display: flex;
  align-items: center;
  gap: 30px;
}
.ps-action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  color: var(--ps-ink);
  text-decoration: none;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  transition: color .2s;
}
.ps-action svg { width: 23px; height: 23px; }
.ps-action:hover { color: var(--ps-gold); }

/* Badge (favoris / panier) */
.ps-badge {
  position: absolute;
  top: -6px;
  right: 50%;
  transform: translateX(18px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ps-terracotta);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.ps-badge[hidden] { display: none; }

/* Bouton panier (pill sombre) */
.ps-cart {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  background: var(--ps-ink);
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: var(--ps-radius-pill);
  transition: background .2s;
}
/* Verrou : le bouton panier reste sombre en permanence (une CSS mini-panier tierce
   le repassait en clair au repos, d'où un pill « vide » visible seulement au survol). */
.ps-header .ps-cart { background: var(--ps-ink) !important; color: #fff !important; }
.ps-header .ps-cart:hover { background: #1c1a18 !important; }
.ps-cart:hover { background: #1c1a18; color: #fff; }
.ps-cart svg { width: 22px; height: 22px; }
.ps-cart__text { display: flex; flex-direction: column; line-height: 1.15; }
.ps-cart__label { font-size: 10px; opacity: .7; letter-spacing: .04em; }
.ps-cart__total { font-size: 14px; font-weight: 700; }
.ps-cart__total .amount { color: #fff; }
.ps-cart .ps-badge { top: -4px; right: -4px; transform: none; }

/* =============================== 3. NAV ==================================== */
.ps-nav {
  background: var(--ps-cream);
  border-top: 1px solid var(--ps-line);
}
.ps-nav__inner {
  max-width: var(--ps-container);
  margin: 0 auto;
  padding: 0 20px;
}
.ps-nav__menu {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 54px;
  flex-wrap: wrap;
}
.ps-nav__menu > li > a {
  display: inline-block;
  padding: 8px 0;
  font-family: var(--ps-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ps-ink);
  text-decoration: none;
  transition: color .2s;
}
.ps-nav__menu > li > a:hover,
.ps-nav__menu > li.current-menu-item > a { color: var(--ps-gold); }
/* Accents des 2 derniers items : À PROPOS (or) · LE MAGAZINE (terracotta) */
.ps-nav__menu > li:nth-last-child(2) > a { color: var(--ps-gold-dark); }
.ps-nav__menu > li:last-child > a { color: var(--ps-terracotta); }

/* Sous-menu (PHARMACIE ⌄) */
.ps-nav__menu li { position: relative; }
.ps-nav__menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow-card);
  padding: 8px 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all .2s;
  z-index: 50;
}
.ps-nav__menu > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ps-nav__menu .sub-menu a {
  display: block;
  padding: 8px 18px;
  font-size: 14px;
  color: var(--ps-body);
  text-decoration: none;
}
.ps-nav__menu .sub-menu a:hover { color: var(--ps-gold); background: var(--ps-cream); }

/* ============================ 4. BURGER + DRAWER =========================== */
.ps-burger {
  display: none;                /* visible en mobile uniquement */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 9px;
  background: none;
  border: 0;
  cursor: pointer;
  order: 1;
}
.ps-burger span { display: block; height: 2px; width: 100%; background: var(--ps-ink); border-radius: 2px; transition: transform .25s, opacity .25s; }
.ps-drawer[aria-expanded="true"] { }

.ps-drawer { position: fixed; inset: 0; z-index: 1000; visibility: hidden; }
.ps-drawer.is-open { visibility: visible; }
.ps-drawer__overlay { position: absolute; inset: 0; background: rgba(42,39,36,.5); opacity: 0; transition: opacity .3s; }
.ps-drawer.is-open .ps-drawer__overlay { opacity: 1; }
.ps-drawer__panel {
  position: absolute; top: 0; left: 0; height: 100%;
  width: min(86vw, 340px);
  background: var(--ps-surface);
  box-shadow: var(--ps-shadow);
  transform: translateX(-100%);
  transition: transform .3s ease;
  padding: 24px 22px;
  overflow-y: auto;
}
.ps-drawer.is-open .ps-drawer__panel { transform: translateX(0); }
.ps-drawer__close { position: absolute; top: 10px; right: 14px; font-size: 30px; line-height: 1; background: none; border: 0; color: var(--ps-ink); cursor: pointer; }
.ps-drawer__menu { list-style: none; margin: 40px 0 0; padding: 0; }
.ps-drawer__menu > li { border-bottom: 1px solid var(--ps-line); }
.ps-drawer__menu > li > a {
  display: block; padding: 14px 4px;
  font-family: var(--ps-font-body); font-size: 15px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--ps-ink); text-decoration: none;
}
.ps-drawer__menu > li:nth-last-child(2) > a { color: var(--ps-gold-dark); }
.ps-drawer__menu > li:last-child > a { color: var(--ps-terracotta); }
.ps-drawer__links { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.ps-drawer__links a { display: flex; align-items: center; gap: 10px; color: var(--ps-body); text-decoration: none; font-size: 14px; }
.ps-drawer__links svg { width: 20px; height: 20px; }
.ps-drawer__foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ps-line); display: flex; align-items: center; gap: 16px; font-size: 14px; }
.ps-drawer__lang strong { color: var(--ps-ink); }
body.ps-drawer-open { overflow: hidden; }

/* =============================== 5. RESPONSIVE ============================= */

/* Tablette + mobile : header compact + menu tiroir */
@media (max-width: 991px) {
  .ps-burger { display: flex; }
  .ps-nav { display: none; }

  .ps-header__inner { flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 14px 16px; }
  .ps-logo { order: 2; margin-right: auto; }
  .ps-logo img { height: 42px; }
  .ps-header__actions { order: 3; margin-left: 0; gap: 16px; }
  .ps-header__actions .ps-action { display: none; }   /* → dans le drawer */
  .ps-cart { padding: 9px 14px; }
  .ps-cart__label { display: none; }
  .ps-search { order: 4; flex: 1 1 100%; max-width: 100%; }

  /* Top bar : on masque les pills (info reprise dans la section réassurance) */
  .ps-topbar__left { display: none; }
  .ps-topbar__inner { justify-content: flex-end; min-height: 36px; }
}

/* Petit mobile */
@media (max-width: 480px) {
  .ps-cart__total { font-size: 13px; }
  .ps-logo img { height: 38px; }
}

/* =============================================================================
   Header responsive Plein Sud sur TOUS les écrans.
   Blusho masque .header-desktop en ≤1024px et rend .header-mobile (vide chez nous).
   On force NOTRE header (qui a déjà burger + drawer à ≤991px) et on masque le
   header mobile natif + la barre d'icônes flottante Blusho/ShopBuilder (hors design).
   ============================================================================= */
@media (max-width: 1024px) {
  .header-desktop { display: block !important; }
  .header-mobile { display: none !important; }
}
.menu-icon-wrapper,
.rt-cart-float-inner,
.rtsb-cart-float-menu { display: none !important; }