/* SOURCE CLUB — page Solutions / Particulier (complète /produits/produits.css)
   Hero : deux circuits. En magasin, l'étiquette grossit à chaque intermédiaire ; en direct, elle reste au prix usine. */

/* ---------- HERO : les deux circuits ---------- */
.pa-vis{border:1px solid var(--edge);background:radial-gradient(ellipse at 70% 80%,#5a110d44,transparent 60%),linear-gradient(#ffffff05 1px,transparent 1px) 0 0/34px 34px,linear-gradient(90deg,#ffffff05 1px,transparent 1px) 0 0/34px 34px,#0c0a09;padding:30px 34px 22px;display:flex;flex-direction:column;gap:46px}
.pa-prod{display:flex;align-items:center;gap:18px;padding-bottom:26px;border-bottom:1px solid var(--edge)}
.pa-prod img{width:92px;height:92px;object-fit:cover;background:#efeeea;flex:0 0 92px}
.pa-prod b{display:block;font:700 30px/.95 var(--display);color:var(--cream);text-transform:uppercase}
.pa-prod small{display:block;font:8px var(--mono);letter-spacing:1.2px;color:var(--soft);margin-top:8px}
.pa-lane{position:relative}
.pa-lane-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:56px}
.pa-lane-head b{font:700 28px/1 var(--display);color:var(--cream);text-transform:uppercase;letter-spacing:.3px}
.pa-lane-head small{font:8px var(--mono);letter-spacing:1.1px;color:var(--soft)}
.pa-lane.is-sc .pa-lane-head b{color:var(--red)}
.pa-track{position:relative;height:2px;margin-bottom:26px!important;background:#ffffff1f;margin:0 10px}
.pa-lane.is-sc .pa-track{background:var(--red)}
.pa-nodes{position:absolute;top:0;bottom:0;left:-6px;right:-6px;display:flex;justify-content:space-between;align-items:center}
.pa-node{position:relative;width:14px;height:14px;border-radius:50%;background:#0c0a09;border:1px solid #ffffff55}
.pa-node small{position:absolute;top:20px;left:50%;transform:translateX(-50%);font:8px var(--mono);letter-spacing:1px;color:var(--soft);white-space:nowrap}
.pa-node.end{background:var(--cream);border-color:var(--cream)}
.pa-lane.is-sc .pa-node{border-color:var(--red)}
.pa-lane.is-sc .pa-node.end{background:var(--red)}
.pa-move{position:absolute;inset:0;pointer-events:none}
.pa-tag{position:absolute;left:0;bottom:14px;transform:translateX(-50%);height:30px;min-width:42px;padding:0 11px;display:grid;place-items:center;background:var(--cream);color:#171211;font:700 15px/1 var(--mono);letter-spacing:.5px;white-space:nowrap}
.pa-tag:after{content:'';position:absolute;left:50%;top:100%;border:5px solid transparent;border-top-color:var(--cream);transform:translateX(-50%)}
.pa-lane.is-sc .pa-tag{background:var(--red);color:#fff}
.pa-lane.is-sc .pa-tag:after{border-top-color:var(--red)}
.pa-tag span{grid-area:1/1;opacity:0}
.pa-tag span:last-child{opacity:1}
.pa-foot{display:flex;justify-content:space-between;gap:14px;font:7px var(--mono);letter-spacing:1.2px;color:var(--dim);padding-top:6px;border-top:1px solid var(--edge)}

/* 8 s : le tag du magasin s'arrête à chaque étape et grossit ; le tag direct file à l'usine → chez toi */
.pa-vis.is-live .pa-lane:not(.is-sc) .pa-move{animation:pa-hops 8s cubic-bezier(.6,0,.3,1) infinite}
.pa-vis.is-live .pa-lane.is-sc .pa-move{animation:pa-direct 8s cubic-bezier(.6,0,.3,1) infinite}
.pa-vis.is-live .pa-tag span{animation:pa-s1 8s steps(1) infinite}
.pa-vis.is-live .pa-tag span:nth-child(1){animation-name:pa-s1}
.pa-vis.is-live .pa-tag span:nth-child(2){animation-name:pa-s2}
.pa-vis.is-live .pa-tag span:nth-child(3){animation-name:pa-s3}
.pa-vis.is-live .pa-tag span:nth-child(4){animation-name:pa-s4}
.pa-vis.is-live .pa-lane.is-sc .pa-tag span:nth-child(1){animation-name:pa-d1}
.pa-vis.is-live .pa-lane.is-sc .pa-tag span:nth-child(2){animation-name:pa-d2}
@keyframes pa-hops{0%,8%{transform:translateX(0)}18%,26%{transform:translateX(25%)}36%,44%{transform:translateX(50%)}54%,62%{transform:translateX(75%)}72%,96%{transform:translateX(100%)}100%{transform:translateX(0)}}
@keyframes pa-direct{0%,8%{transform:translateX(0)}30%,96%{transform:translateX(100%)}100%{transform:translateX(0)}}
@keyframes pa-s1{0%{opacity:1}18%,100%{opacity:0}}
@keyframes pa-s2{0%{opacity:0}18%{opacity:1}36%,100%{opacity:0}}
@keyframes pa-s3{0%{opacity:0}36%{opacity:1}54%,100%{opacity:0}}
@keyframes pa-s4{0%{opacity:0}54%,96%{opacity:1}100%{opacity:0}}
@keyframes pa-d1{0%{opacity:1}30%,100%{opacity:0}}
@keyframes pa-d2{0%{opacity:0}30%,96%{opacity:1}100%{opacity:0}}

/* ---------- MÊMES SERVICES ---------- */
.pa-table{margin-top:44px;border:1px solid var(--edge);background:var(--card)}
.pa-row{display:grid;grid-template-columns:1fr 150px 150px;align-items:center;border-bottom:1px solid var(--edge)}
.pa-row:last-child{border-bottom:0}
.pa-row>*{padding:18px 22px}
.pa-row.is-head{background:#0c0a09}
.pa-row.is-head span{font:9px var(--mono);letter-spacing:1.2px;color:var(--soft);text-align:center}
.pa-row.is-head span:first-child{text-align:left}
.pa-row.is-head span.sc{color:#fff;background:var(--red)}
.pa-label{display:flex;align-items:center;gap:16px;font-size:15px;color:var(--cream);line-height:1.35}
.pa-label small{display:block;font-size:12px;color:var(--soft);margin-top:3px}
.pa-label .ds-ico{width:43px;flex:0 0 43px}
.pa-mark{display:grid;place-items:center;height:100%}
.pa-mark.sc{background:#ff342e0d}
.pa-yes,.pa-no{width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
.pa-yes svg,.pa-no svg{width:15px;height:15px}
.pa-yes{background:var(--red);color:#fff}
.pa-mark:not(.sc) .pa-yes{background:#ffffff1a;color:var(--cream)}
.pa-no{border:1px solid #ffffff2a;color:#7d6a60}
.js-ds .pa-table .pa-yes,.js-ds .pa-table .pa-no{opacity:0;transform:scale(.4)}
.js-ds .pa-table.is-in .pa-yes,.js-ds .pa-table.is-in .pa-no{transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .3s;transition-delay:calc(var(--r)*90ms + var(--c)*180ms);opacity:1;transform:none}
.pa-note{font:8px var(--mono);letter-spacing:1px;color:var(--dim);margin-top:14px;line-height:1.8}

/* ---------- COMMENT ÇA MARCHE ---------- */
.pa-steps .ds-ico{width:43px}

@media(max-width:1100px){
  .pa-row{grid-template-columns:1fr 110px 110px}
}
@media(max-width:760px){
  .pa-vis{padding:22px 16px 16px;gap:34px}
  .pa-prod img{width:64px;height:64px;flex-basis:64px}
  .pa-prod b{font-size:22px}
  .pa-lane-head{flex-direction:column;gap:6px;margin-bottom:48px}
  .pa-lane-head b{font-size:22px}
  .pa-node small{font-size:6px;letter-spacing:.5px}
  .pa-tag{font-size:12px;height:24px;padding:0 7px;min-width:30px}
  .pa-row{grid-template-columns:1fr 62px 62px}
  .pa-row>*{padding:14px 10px}
  .pa-row>.pa-label{padding-left:14px}
  .pa-row.is-head span{font-size:7px;letter-spacing:.4px;padding:12px 4px}
  .pa-label{font-size:13px;gap:10px}
  .pa-label .ds-ico{display:none}
  .pa-yes,.pa-no{width:26px;height:26px}
}
@media(prefers-reduced-motion:reduce){
  .pa-move{transform:translateX(100%)}
}