/* ==========================================================================
   My Poppers — thème custom (child Hummingbird / Bootstrap 5.3)
   Charte : magenta #E6007E + noir + blanc. Moderne, responsive, marché poppers.
   Chargé automatiquement par le cœur (FrontController → /assets/css/custom.css).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ----------------------------------------------------------------------------
   1. Tokens de marque + surcharge des variables Bootstrap/Hummingbird
   -------------------------------------------------------------------------- */
:root,
:root[data-bs-theme="light"],
:root[data-bs-theme="dark"] {
  --mp-magenta: #e6007e;
  --mp-magenta-dark: #c10068;
  --mp-magenta-light: #ff3da6;
  --mp-ink: #14141a;
  --mp-black: #0e0e12;
  --mp-grey: #6b6b76;
  --mp-line: #ececf1;
  --mp-bg-soft: #faf7f9;

  /* Recolore tout ce que Bootstrap dérive du primary */
  --bs-primary: var(--mp-magenta);
  --bs-primary-rgb: 230, 0, 126;
  --bs-primary-text-emphasis: var(--mp-magenta-dark);
  --bs-link-color: var(--mp-magenta);
  --bs-link-color-rgb: 230, 0, 126;
  --bs-link-hover-color: var(--mp-magenta-dark);
  --bs-link-hover-color-rgb: 193, 0, 104;
  --bs-focus-ring-color: rgba(230, 0, 126, .3);
  --bs-body-font-family: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--bs-body-font-family);
  color: var(--mp-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----------------------------------------------------------------------------
   2. Boutons
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-primary:visited {
  --bs-btn-bg: var(--mp-magenta);
  --bs-btn-border-color: var(--mp-magenta);
  --bs-btn-hover-bg: var(--mp-magenta-dark);
  --bs-btn-hover-border-color: var(--mp-magenta-dark);
  --bs-btn-active-bg: var(--mp-magenta-dark);
  --bs-btn-active-border-color: var(--mp-magenta-dark);
  --bs-btn-disabled-bg: var(--mp-magenta);
  --bs-btn-disabled-border-color: var(--mp-magenta);
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 999px;
  padding-inline: 1.4em;
  box-shadow: 0 4px 14px rgba(230, 0, 126, .25);
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(230, 0, 126, .35);
}
.btn-outline-primary {
  --bs-btn-color: var(--mp-magenta);
  --bs-btn-border-color: var(--mp-magenta);
  --bs-btn-hover-bg: var(--mp-magenta);
  --bs-btn-hover-border-color: var(--mp-magenta);
  --bs-btn-active-bg: var(--mp-magenta-dark);
  border-radius: 999px;
  font-weight: 600;
}
.btn-secondary { border-radius: 999px; }

/* Bouton « Ajouter au panier » bien visible */
.add-to-cart,
.product-add-to-cart .btn,
button[data-button-action="add-to-cart"] {
  text-transform: none;
  font-weight: 600;
}

/* ----------------------------------------------------------------------------
   3. En-tête / navigation
   -------------------------------------------------------------------------- */
.header,
#header {
  background: #fff;
  box-shadow: 0 1px 0 var(--mp-line);
}
.header-top { padding-block: .4rem; }
#_desktop_logo img,
.header-logo img,
.logo img { max-height: 46px; width: auto; }

/* Icônes header (compte, panier) */
.header .material-icons,
.header .cart-preview .header,
.blockcart .material-icons { color: var(--mp-ink); transition: color .15s ease; }
.header a:hover .material-icons { color: var(--mp-magenta); }

/* Menu catégories : soulignement magenta au survol */
.main-menu .nav-link,
#_desktop_top_menu .nav-link,
.menu .nav-link {
  font-weight: 500;
  position: relative;
}
.main-menu .nav-link::after,
#_desktop_top_menu .nav-link::after {
  content: "";
  position: absolute;
  left: .8rem; right: .8rem; bottom: .25rem;
  height: 2px;
  background: var(--mp-magenta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.main-menu .nav-link:hover::after,
#_desktop_top_menu .nav-link:hover::after { transform: scaleX(1); }

/* Barre de recherche */
.search-widget input[type="text"],
.ps-search input {
  border-radius: 999px;
  border: 1px solid var(--mp-line);
}
.search-widget input:focus { border-color: var(--mp-magenta); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }

/* ----------------------------------------------------------------------------
   4. Bandeau de réassurance (blockreassurance) — livraison discrète, paiement, 18+
   -------------------------------------------------------------------------- */
.block-reassurance,
#block-reassurance {
  background: var(--mp-bg-soft);
  border-block: 1px solid var(--mp-line);
}
.block-reassurance ul { margin: 0; }
.block-reassurance li { border: 0 !important; }
.block-reassurance .block-reassurance-item span { font-weight: 500; color: var(--mp-ink); }
.block-reassurance img,
.block-reassurance svg { filter: none; }

/* ----------------------------------------------------------------------------
   5. Grille & cartes produits
   -------------------------------------------------------------------------- */
.product-miniature {
  background: #fff;
  border: 1px solid var(--mp-line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
  height: 100%;
}
.product-miniature:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(20, 20, 26, .10);
  border-color: transparent;
}
.product-miniature .thumbnail-container,
.product-miniature .product-thumbnail { display: block; overflow: hidden; }
.product-miniature img {
  width: 100%; height: auto;
  transition: transform .35s ease;
}
.product-miniature:hover img { transform: scale(1.05); }

.product-miniature .product-title,
.product-miniature .product-title a {
  font-weight: 600;
  color: var(--mp-ink);
  font-size: .98rem;
  line-height: 1.3;
}
.product-miniature .product-title a:hover { color: var(--mp-magenta); }

/* Prix */
.product-price-and-shipping .price,
.product-miniature .price,
.current-price .price {
  color: var(--mp-magenta);
  font-weight: 700;
  font-size: 1.1rem;
}
.regular-price { color: var(--mp-grey); text-decoration: line-through; font-weight: 500; }

/* Flags (Promo, Nouveau, Pack) */
.product-flags { top: .6rem; left: .6rem; }
.product-flag {
  background: var(--mp-magenta);
  color: #fff;
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: .28em .7em;
  box-shadow: 0 4px 10px rgba(230, 0, 126, .3);
}
.product-flag.discount,
.product-flag.on-sale { background: var(--mp-black); }
.product-flag.new { background: var(--mp-magenta); }

/* ----------------------------------------------------------------------------
   6. Page produit
   -------------------------------------------------------------------------- */
.product-prices .current-price .price,
.product-price .current-price-value { color: var(--mp-magenta); font-weight: 700; }
.product-actions .add-to-cart { min-width: 240px; }
.product-variants .input-container label { border-radius: 10px; }
.tabs .nav-tabs .nav-link.active { color: var(--mp-magenta); border-bottom-color: var(--mp-magenta); }

/* ----------------------------------------------------------------------------
   7. Titres de section / catégories
   -------------------------------------------------------------------------- */
h1, h2, .h1, .h2 { font-weight: 700; letter-spacing: -.01em; color: var(--mp-ink); }
.featured-products .section-title,
.products-section-title,
h2.products-section-title {
  text-align: center;
  font-weight: 800;
  text-transform: none;
  margin-bottom: 1.6rem;
}
.featured-products .section-title::after,
.products-section-title::after {
  content: "";
  display: block;
  width: 56px; height: 3px;
  background: var(--mp-magenta);
  margin: .6rem auto 0;
  border-radius: 3px;
}

/* Bloc catégorie / fil d'ariane */
.breadcrumb a { color: var(--mp-grey); }
.breadcrumb a:hover { color: var(--mp-magenta); }

/* ----------------------------------------------------------------------------
   8. Pied de page (sombre, marqué)
   -------------------------------------------------------------------------- */
.footer,
#footer,
.footer-container {
  background: var(--mp-black);
  color: #cfcfd6;
}
#footer a,
.footer a { color: #cfcfd6; }
#footer a:hover,
.footer a:hover { color: var(--mp-magenta-light); }
#footer h3,
.footer h3,
.footer .h3 { color: #fff; font-weight: 600; letter-spacing: .02em; }
.footer .links li a::before { color: var(--mp-magenta); }

/* ----------------------------------------------------------------------------
   9. Divers : liens, focus, alertes
   -------------------------------------------------------------------------- */
a { color: var(--mp-magenta); }
a:hover { color: var(--mp-magenta-dark); }
:focus-visible { outline: 2px solid var(--mp-magenta); outline-offset: 2px; }
.form-control:focus,
.form-select:focus { border-color: var(--mp-magenta); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.page-item.active .page-link { background: var(--mp-magenta); border-color: var(--mp-magenta); }
.alert-success { --bs-alert-color: var(--mp-magenta-dark); }

/* ----------------------------------------------------------------------------
   10. Responsive (ultra-responsive : mobile-first refinements)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  #_desktop_logo img, .logo img { max-height: 40px; }
  .product-miniature { border-radius: 14px; }
}
@media (max-width: 767.98px) {
  h1, .h1 { font-size: 1.5rem; }
  .btn-primary { padding-block: .7em; }
  .product-miniature .product-title a { font-size: .92rem; }
  /* CTA panier collant en bas sur fiche produit */
  .product-actions .add-to-cart { width: 100%; }
}
@media (max-width: 575.98px) {
  .block-reassurance { text-align: center; }
  .product-price-and-shipping .price { font-size: 1.05rem; }
}

/* Confort de lecture / images fluides partout */
img { max-width: 100%; height: auto; }