/**
 * Folies Secrètes — Chrome global premium (Lot A)
 * Scope transversal : barre flottante, badge panier, footer socials + newsletter
 * Chargé via theme.yml (assets.css.all, priority 560)
 *
 * Hors scope : checkout fonctionnel, modules paiement, fichiers LOCKED
 * Ne pas modifier fs-cart-premium.css / fs-sticky-header-premium.css / fs-cookies-*.css
 */

:root {
  --fs-chrome-ivory: #fdfcfa;
  --fs-chrome-cream: #f5f0ea;
  --fs-chrome-ink: #1a1716;
  --fs-chrome-ink-soft: #4a4543;
  --fs-chrome-gold: #b8956b;
  --fs-chrome-plum: #5a3d48;
  --fs-chrome-plum-deep: #4a2f3a;
  --fs-chrome-line: rgba(26, 23, 22, 0.1);
  --fs-chrome-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fs-chrome-font-sans: "Manrope", system-ui, sans-serif;
}

/* ═══════════════════════════════════════
   1. Barre flottante droite Panda (#rightbar)
   Masquée partout sauf pages déjà gérées (checkout masque déjà)
   ═══════════════════════════════════════ */
body:not(#checkout):not(#order-confirmation) #rightbar,
body:not(#checkout):not(#order-confirmation) .rightbar_wrap,
body:not(#checkout):not(#order-confirmation) .st_right_bar:not(.checkout_header *),
body:not(#checkout):not(#order-confirmation) .st_rightbar,
body:not(#checkout):not(#order-confirmation) #st_sidebar_right {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* ═══════════════════════════════════════
   2. Badge panier — discret prune/or (header + rightbar résiduel)
   Surcharge customer-s1.css (#e74772) — chargé après stthemeeditor
   ═══════════════════════════════════════ */
#header_right_top .blockcart .fs-cart-badge-header,
#header_right_top .blockcart .amount_circle.fs-cart-badge-header,
#header_right_top .blockcart .ajax_cart_quantity.fs-cart-badge-header,
#st_header #header_right_top .blockcart .fs-cart-badge-header,
#st_header #header_right_top .blockcart .amount_circle.fs-cart-badge-header,
.ajax_cart_quantity,
.amount_circle.ajax_cart_quantity,
#header .blockcart .ajax_cart_quantity,
#st_header .blockcart .ajax_cart_quantity,
.blockcart .ajax_cart_quantity.amount_circle,
.shopping_cart_style_3 .ajax_cart_quantity,
#rightbar .ajax_cart_quantity,
#rightbar .fs-cart-badge-header,
.rightbar .ajax_cart_quantity,
.rightbar .fs-cart-badge-header {
  background: var(--fs-chrome-plum) !important;
  background-color: var(--fs-chrome-plum) !important;
  color: var(--fs-chrome-ivory) !important;
  border: 1px solid rgba(184, 149, 107, 0.45) !important;
  box-shadow: 0 1px 4px rgba(74, 47, 58, 0.22) !important;
  font-family: var(--fs-chrome-font-sans) !important;
  font-size: 0.625rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.15rem !important;
  min-width: 1.15rem !important;
  min-height: 1.15rem !important;
  padding: 0 0.25rem !important;
  border-radius: 999px !important;
}

.ajax_cart_quantity.lingge,
.amount_circle.lingge {
  background: var(--fs-chrome-plum) !important;
  color: var(--fs-chrome-ivory) !important;
}

/* Checkout : conserver style or existant (fs-checkout-premium.css) */
body#checkout .checkout_header .ajax_cart_quantity,
body#checkout #header_right_top .blockcart .fs-cart-badge-header,
body#order-confirmation .checkout_header .ajax_cart_quantity,
body#order-confirmation #header_right_top .blockcart .fs-cart-badge-header {
  background: var(--fs-chrome-gold) !important;
  border-color: var(--fs-chrome-ivory) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════
   3. Footer — réseaux sociaux (SVG CSS, remplace lettres brutes)
   ═══════════════════════════════════════ */
.fs-footer-socials {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.55rem !important;
  margin-top: 0.85rem !important;
}

.fs-footer-socials a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.15rem !important;
  height: 2.15rem !important;
  border-radius: 50% !important;
  border: 1px solid var(--fs-chrome-line) !important;
  background: rgba(253, 252, 250, 0.92) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  text-indent: -9999px !important;
  transition: border-color 0.22s var(--fs-chrome-ease), background 0.22s var(--fs-chrome-ease), transform 0.22s var(--fs-chrome-ease) !important;
}

.fs-footer-socials a::before {
  content: "" !important;
  display: block !important;
  width: 1rem !important;
  height: 1rem !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  opacity: 0.82 !important;
}

.fs-footer-socials a:hover {
  border-color: rgba(184, 149, 107, 0.45) !important;
  background: var(--fs-chrome-cream) !important;
  transform: translateY(-1px) !important;
}

.fs-footer-socials a:hover::before {
  opacity: 1 !important;
}

/* Ordre BO : Instagram, Facebook, Pinterest, TikTok */
.fs-footer-socials a:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a3d48' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='%235a3d48' stroke='none'/%3E%3C/svg%3E") !important;
}

.fs-footer-socials a:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235a3d48'%3E%3Cpath d='M14 8h3V5h-3c-2.2 0-4 1.8-4 4v2H8v3h3v7h3v-7h2.5l.5-3H14V9c0-.6.4-1 1-1z'/%3E%3C/svg%3E") !important;
}

.fs-footer-socials a:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235a3d48'%3E%3Cpath d='M12 3c-4.4 0-8 3.1-8 7 0 2.9 1.8 5.4 4.5 6.7L7.5 21l3.4-1.9c.4.1.7.1 1.1.1 4.4 0 8-3.1 8-7.2S16.4 3 12 3zm1.2 10.5h-1.5v-3.2L9.8 8.5h1.6l1.1 2.1 1.1-2.1h1.5l-1.9 1.8v3.2z'/%3E%3C/svg%3E") !important;
}

.fs-footer-socials a:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235a3d48'%3E%3Cpath d='M17.5 4.5c-.8 0-1.5.7-1.5 1.5v2.2l-3-1.7v6.1l3-1.7V13c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V6c0-.8-.7-1.5-1.5-1.5zm-5 3.2L9 9.4V7.2L6 5.5v6.1l3 1.7V11c0-.8.7-1.5 1.5-1.5V7.7z'/%3E%3C/svg%3E") !important;
}

/* ═══════════════════════════════════════
   4. Footer — newsletter CTA explicite
   ═══════════════════════════════════════ */
.fs-footer-newsletter-block {
  margin-top: 1.15rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid rgba(184, 149, 107, 0.22) !important;
}

.fs-footer-newsletter-block > strong {
  display: block !important;
  font-family: var(--fs-chrome-font-serif) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: #fffaf0 !important;
  letter-spacing: 0.02em !important;
}

.fs-footer-newsletter-block > p {
  margin: 0.45rem 0 0.85rem !important;
  font-family: var(--fs-chrome-font-sans) !important;
  font-size: 0.8125rem !important;
  line-height: 1.55 !important;
  color: rgba(255, 250, 240, 0.86) !important;
}

.fs-footer-mini-newsletter {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 0.5rem !important;
  margin-top: 0 !important;
}

.fs-footer-mini-newsletter input[type="email"],
.fs-footer-mini-newsletter input[name="email"],
.fs-footer-mini-newsletter #fs-footer-email {
  flex: 1 1 10rem !important;
  min-width: 0 !important;
  padding: 0.65rem 0.85rem !important;
  border: 1px solid var(--fs-chrome-line) !important;
  border-radius: 999px !important;
  background: var(--fs-chrome-ivory) !important;
  color: var(--fs-chrome-ink) !important;
  font-family: var(--fs-chrome-font-sans) !important;
  font-size: 0.8125rem !important;
}

.fs-footer-mini-newsletter #fs-footer-email::placeholder {
  color: rgba(26, 23, 22, 0.58) !important;
  opacity: 1 !important;
}

.fs-footer-mini-newsletter button[type="submit"] {
  flex: 0 0 auto !important;
  min-width: 8.5rem !important;
  padding: 0.65rem 1rem !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--fs-chrome-plum-deep) !important;
  color: var(--fs-chrome-ivory) !important;
  font-family: var(--fs-chrome-font-sans) !important;
  font-size: 0 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.22s var(--fs-chrome-ease), box-shadow 0.22s var(--fs-chrome-ease) !important;
  box-shadow: 0 4px 14px rgba(74, 47, 58, 0.18) !important;
}

.fs-footer-mini-newsletter button[type="submit"]::after {
  content: "S'inscrire" !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
}

.fs-footer-mini-newsletter button[type="submit"]:hover {
  background: var(--fs-chrome-plum) !important;
}

.fs-footer-mini-newsletter button[type="submit"]:focus-visible {
  outline: 2px solid rgba(184, 149, 107, 0.55) !important;
  outline-offset: 2px !important;
}

@media (max-width: 575.98px) {
  .fs-footer-mini-newsletter {
    flex-direction: column !important;
  }

  .fs-footer-mini-newsletter button[type="submit"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ═══════════════════════════════════════
   4. Flux vertical FO — Panda st-content + footer STSN
   Panda : .st-content { height:100%; overflow:hidden }
   Footer premium injecté après #st-container (customer1.js) :
   sans correction, #st-container reste ~viewport et le footer remonte sur le contenu.
   ═══════════════════════════════════════ */
body:not(#checkout):not(#order-confirmation) #st-container,
body:not(#checkout):not(#order-confirmation) .st-pusher,
body:not(#checkout):not(#order-confirmation) .st-content {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body:not(#checkout):not(#order-confirmation) .st-content-inner {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* ═══════════════════════════════════════
   5. PREOUV-21 — footer final avant ouverture
   Masquage temporaire socials + feedback newsletter
   Rollback : backup /home/fsadmin/foliessecretes/preouv21-footer-final-pre-action-20260605/
   ═══════════════════════════════════════ */
.fs-footer-socials {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.fs-footer-newsletter-block {
  display: block !important;
}

.fs-footer-newsletter-block .fs-footer-nl-alert {
  width: 100% !important;
  margin: 0 0 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 8px !important;
  font-family: var(--fs-chrome-font-sans) !important;
  font-size: 0.8125rem !important;
  line-height: 1.45 !important;
}

.fs-footer-newsletter-block .fs-footer-nl-alert.hidden {
  display: none !important;
}

.fs-footer-newsletter-block .fs-footer-nl-alert-danger {
  background: rgba(74, 47, 58, 0.35) !important;
  color: #fffaf0 !important;
  border: 1px solid rgba(184, 149, 107, 0.35) !important;
}

.fs-footer-newsletter-block .fs-footer-nl-alert-success {
  background: rgba(184, 149, 107, 0.22) !important;
  color: #fffaf0 !important;
  border: 1px solid rgba(184, 149, 107, 0.45) !important;
}