/* STICK-IN · Paliers panier */
.stickin-paliers { --pal-green: #81c39e; --pal-dark: #202328; background: #f2f3f1; border: 1px solid #e1e3df; border-radius: 10px; padding: 16px 18px 12px; margin: 16px 0; font-size: 14px; color: var(--pal-dark); }
.stickin-paliers--modal { margin: 12px 0 0; }
.stickin-paliers__msg { margin: 0 0 12px; line-height: 1.45; }
.stickin-paliers__code { font-family: ui-monospace, Menlo, Consolas, monospace; background: #fff; border: 1px dashed var(--pal-green); border-radius: 4px; padding: 1px 6px; font-weight: 700; }
.stickin-paliers__track { position: relative; height: 8px; background: #dcdfda; border-radius: 99px; margin: 8px 10px 0; }
.stickin-paliers__fill { position: absolute; inset: 0 auto 0 0; background: var(--pal-green); border-radius: 99px; transition: width .4s ease; }
.stickin-paliers__dot { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #fff; border: 2px solid #c3c7c1; font-size: 11px; line-height: 16px; text-align: center; color: #fff; font-weight: 700; }
.stickin-paliers__dot.is-reached { background: var(--pal-green); border-color: var(--pal-green); }
.stickin-paliers__steps { position: relative; list-style: none; margin: 8px 10px 0; padding: 0; height: 44px; }
.stickin-paliers__steps li { position: absolute; transform: translateX(-50%); text-align: center; font-size: 12px; line-height: 1.25; width: max-content; max-width: 110px; color: #6b7177; }
.stickin-paliers__steps li:last-child { transform: translateX(-100%); text-align: right; }
.stickin-paliers__steps li strong { display: block; color: var(--pal-dark); }
.stickin-paliers__steps li.is-reached strong { color: #3f8a61; }
.stickin-paliers__steps li { overflow-wrap: break-word; hyphens: auto; }
.stickin-paliers__steps li.is-tight { font-size: 11px; }
.stickin-paliers__done { margin: 6px 0 0; font-size: 13px; color: #3f8a61; }
.stickin-paliers__gift { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e1e3df; }
.stickin-paliers__btn { border: 0; border-radius: 6px; background: var(--pal-dark); color: #fff; padding: 9px 14px; font-weight: 600; cursor: pointer; }
.stickin-paliers__btn:hover { background: #000; }
.stickin-paliers__btn--ghost { background: transparent; color: var(--pal-dark); border: 1px solid #c3c7c1; }
/* Fenêtre de choix */
body.stickin-paliers-open { overflow: hidden; }
.stickin-paliers-pick { position: fixed; inset: 0; z-index: 1100; background: rgba(23, 25, 28, .6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.stickin-paliers-pick__box { background: #fff; border-radius: 12px; width: min(860px, 100%); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.stickin-paliers-pick__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: #202328; color: #fff; font-size: 16px; }
.stickin-paliers-pick__close { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.stickin-paliers-pick__search { margin: 12px 18px 0; padding: 9px 12px; border: 1px solid #c3c7c1; border-radius: 6px; }
.stickin-paliers-pick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; padding: 14px 18px 18px; overflow-y: auto; }
.stickin-paliers-pick__item { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; background: #f7f8f6; border: 2px solid transparent; border-radius: 8px; padding: 10px; cursor: pointer; font-size: 12.5px; line-height: 1.3; color: #202328; }
.stickin-paliers-pick__item:hover, .stickin-paliers-pick__item.is-current { border-color: #81c39e; background: #fff; }
.stickin-paliers-pick__item img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.stickin-paliers-pick__name { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.stickin-paliers-pick__var { color: #6b7177; }
@media (max-width: 575px) {
  .stickin-paliers { padding: 14px 12px 10px; }
  .stickin-paliers-pick { padding: 0; align-items: flex-end; }
  .stickin-paliers-pick__box { border-radius: 12px 12px 0 0; max-height: 92vh; }
  .stickin-paliers-pick__grid { grid-template-columns: repeat(2, 1fr); }
}
/* Fiche produit : rappel des paliers sous « Ajouter au panier » */
.stk-pal-hint { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: #f2f3f1; border: 1px dashed #c3c7c1; color: #202328; font-size: 14px; line-height: 1.35; }
.stk-pal-hint[hidden] { display: none; }
.stk-pal-hint.is-win { background: #eaf3ee; border: 1px solid #81c39e; color: #2f6b4a; font-weight: 600; }

/* Fenêtre « Ajouté au panier » sur mobile : barre des paliers déplacée sous l'article (paliers.js) */
.stickin-paliers--modal-sm { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e6e9e6; }

/* revendeur : tarif revendeur (remplace les paliers) */
.stk-pro-bar { background: #f4faf6; border: 2px solid #81c39e; }
.stk-pro-bar__title { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 700; font-size: 16px; color: #202328; }
.stk-pro-bar__ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #81c39e; color: #202328; font-size: 14px; }
.stk-pro-bar__chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 8px; padding: 0; }
.stk-pro-chip { display: flex; align-items: baseline; gap: 6px; background: #fff; border: 1px solid #cfe3d6; border-radius: 999px; padding: 6px 14px; color: #202328; }
.stk-pro-chip b { font-size: 17px; color: #2f6e4b; }
.stk-pro-chip.is-base { background: #202328; border-color: #202328; color: #fff; }
.stk-pro-chip.is-base b { color: #81c39e; }
.stk-pro-bar__note { margin: 0; font-size: 12px; color: #5b605c; }
/* revendeur : titre et pastilles sur une seule ligne (retour à la ligne seulement si la place manque), note dessous */
.stk-pro-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; }
.stk-pro-bar__title { margin: 0; white-space: nowrap; }
.stk-pro-bar__chips { margin: 0; flex-wrap: nowrap; }
.stk-pro-chip { padding: 4px 12px; white-space: nowrap; }
.stk-pro-chip b { font-size: 15px; }
.stk-pro-bar__note { flex-basis: 100%; }
@media (max-width: 767px) { .stk-pro-bar__chips { flex-wrap: wrap; } }
.stickin-paliers--modal.stk-pro-bar .stk-pro-bar__chips { flex-wrap: wrap; }