/* ptbackdrop — Expérience Noël (layout ptb-nx + cartes ptb-cards + filtre) et
   MODE SOMBRE GLOBAL du site (html.ptb-dark) avec bouton dans l'en-tête.
   Chargé sur tout le site (le bouton + le thème), les classes ptb-nx/ptb-cards
   n'agissent que là où le module les active. */

/* ============================================================
   1) GRILLE RESSERRÉE + LARGEUR — base Noël (body.ptb-nx)
   ============================================================ */
body.ptb-nx #js-product-list .products.row{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(185px,1fr));
  gap:10px;margin-left:0;margin-right:0}
body.ptb-nx #js-product-list .products.row > .js-product-miniature{
  width:auto;max-width:none;flex:none;padding:0;margin:0;float:none}
@media (max-width:480px){
  body.ptb-nx #js-product-list .products.row{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px}}
body.ptb-nx #wrapper .container{max-width:1720px;width:96%}

/* ============================================================
   2) TRAITEMENT CARTE — portrait plein cadre + petites pastilles (body.ptb-cards)
   ============================================================ */
body.ptb-cards .product-miniature .thumbnail-container{position:relative}
body.ptb-cards .product-miniature .thumbnail-top{position:relative;overflow:hidden;border-radius:10px}
body.ptb-cards .product-miniature .thumbnail.product-thumbnail{display:block;margin:0}
body.ptb-cards .product-miniature .thumbnail.product-thumbnail img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center;display:block;border-radius:10px}
body.ptb-cards .product-miniature .product-flags{
  position:absolute;top:8px;left:8px;right:auto;bottom:auto;width:auto;margin:0;padding:0;list-style:none;z-index:3}
body.ptb-cards .product-miniature .product-flag{
  position:static;float:none;display:inline-block;min-height:0;margin:0 0 4px 0;padding:3px 9px;border-radius:7px;
  font-size:10px;font-weight:800;letter-spacing:.03em;line-height:1.5;text-transform:uppercase;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35)}
body.ptb-cards .product-miniature .product-flag.on-sale,
body.ptb-cards .product-miniature .product-flag.hit-flag{background:#d9463c !important;background-image:none !important}
body.ptb-cards .product-miniature .product-flag.new{background:#2f8f60 !important;background-image:none !important}
body.ptb-cards .product-miniature .wishlist-button-add{top:7px;right:7px}
body.ptb-cards .product-miniature .wishlist-button-add ~ .wishlist-button-add{display:none}

/* ============================================================
   3) BARRE FILTRE (chips) — Noël
   ============================================================ */
.ptb-qf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 16px}
.ptb-qf-chips{display:flex;flex-wrap:wrap;gap:8px}
.ptb-qf-chip{display:inline-block;border:1px solid #dcdcdc;background:#f4f4f2;color:#222;border-radius:999px;
  padding:7px 15px;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer;text-decoration:none;
  transition:background .15s,color .15s,border-color .15s}
.ptb-qf-chip:hover{border-color:#222;color:#111;text-decoration:none}
.ptb-qf-chip:focus-visible{outline:2px solid #1f6b48;outline-offset:2px}
.ptb-qf-chip.on{background:#1f6b48;color:#fff;border-color:#1f6b48}
.ptb-qf-chip.ptb-qf-hit.on{background:#c8453b;color:#fff;border-color:#c8453b}
.ptb-qf-count{font-size:13px;color:#7a7a7a;white-space:nowrap;margin-left:auto}

/* ============================================================
   4) BOUTON THÈME dans l'en-tête (à côté du drapeau / de la devise)
   ============================================================ */
.ptb-theme-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:10px;
  width:34px;height:30px;padding:0;border:1px solid #d6d6d6;background:#fff;border-radius:999px;
  font-size:15px;line-height:1;cursor:pointer;vertical-align:middle;transition:border-color .15s,background .15s}
.ptb-theme-toggle:hover{border-color:#8a8a8a}
.ptb-theme-toggle:focus-visible{outline:2px solid #1f6b48;outline-offset:2px}

/* ============================================================
   5) MODE SOMBRE GLOBAL (tout le site) — html.ptb-dark, par inversion
   Couvre chaque page/élément ; les médias sont ré-inversés pour garder
   leurs vraies couleurs.
   ============================================================ */
html.ptb-dark{background:#0f0d0c}
html.ptb-dark body{background:#ffffff;filter:invert(1) hue-rotate(180deg)}
html.ptb-dark img,
html.ptb-dark video,
html.ptb-dark iframe,
html.ptb-dark canvas,
html.ptb-dark object,
html.ptb-dark embed,
html.ptb-dark [style*="background-image"]{filter:invert(1) hue-rotate(180deg)}

@media (prefers-reduced-motion:reduce){.ptb-qf-chip,.ptb-theme-toggle{transition:none}}

/* ============================================================
   6) SURVOL DU MENU HAUT — trait lumineux (tous) + particules saisonnières
      (🥚 Pâques, 🍂 automne, ❄️ Noël). Classes/particules ajoutées par le JS.
   ============================================================ */
.sf-menu.menu-content > li > a{position:relative;overflow:visible}
.sf-menu.menu-content > li > a::after{content:"";position:absolute;left:50%;right:50%;bottom:4px;height:2px;border-radius:2px;
  background:currentColor;box-shadow:0 0 8px currentColor;opacity:.9;pointer-events:none;
  transition:left .3s cubic-bezier(.4,0,.2,1),right .3s cubic-bezier(.4,0,.2,1)}
.sf-menu.menu-content > li > a:hover::after,
.sf-menu.menu-content > li > a:focus::after{left:12px;right:12px}
.sf-menu.menu-content > li > a.ptb-season:hover{text-shadow:0 0 14px currentColor}
.ptb-mp{position:absolute;top:2px;left:var(--x,50%);font-size:12px;line-height:1;opacity:0;pointer-events:none;z-index:1;will-change:transform,opacity}
.sf-menu.menu-content > li > a.ptb-season:hover .ptb-mp{animation:ptbfall 1.25s ease-in var(--dl,0s) infinite}
@keyframes ptbfall{
  0%{opacity:0;transform:translateY(-2px) rotate(0) scale(.55)}
  15%{opacity:.95}
  100%{opacity:0;transform:translateY(30px) translateX(var(--dx,0)) rotate(var(--r,80deg)) scale(1)}}
html.ptb-dark .ptb-mp{filter:invert(1) hue-rotate(180deg)}
@media (prefers-reduced-motion:reduce){
  .sf-menu.menu-content > li > a::after{transition:none}
  .sf-menu.menu-content > li > a.ptb-season:hover .ptb-mp{animation:none;opacity:0}}