/* SOURCE CLUB — pages Produits (dropshipping, branding…)
   Peu de texte, le reste en visuel. Animations en transform/opacity uniquement,
   lancées seulement à l'écran (.is-live) et coupées si prefers-reduced-motion. */
.ds{--cream:#eeeae7;--soft:#b39c8d;--dim:#7d6a60;--card:#110d0c;--card2:#1a1110;--edge:#ffffff17;padding-top:40px;padding-bottom:90px;overflow-x:clip}
.ds .breadcrumbs{margin-bottom:10px}
.ds-eyebrow{font:9px var(--mono);letter-spacing:1.6px;color:#c18e7b;display:flex;align-items:center;gap:10px}
.ds-eyebrow:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px #ff342e22}
.ds h2{font:700 clamp(40px,5vw,72px)/.92 var(--display);letter-spacing:-.5px;color:var(--cream);margin:18px 0 0;text-transform:uppercase}
.ds h2 span,.ds h1 span{color:var(--red)}
.ds-sub{font-size:15px;line-height:1.7;color:var(--soft);max-width:520px;margin:18px 0 0}
.ds-section{padding-top:120px}
.ds-cta{display:inline-flex;align-items:center;gap:28px;min-height:54px;padding:17px 22px;background:var(--red);color:#fff;font:700 10px var(--mono);letter-spacing:.6px;transition:transform .25s,box-shadow .25s}
.ds-cta span{font-size:18px;font-weight:400}
.ds-cta:hover{transform:translateY(-2px);box-shadow:0 14px 40px #ff342e40}
.ds-ghost{font:10px var(--mono);letter-spacing:.6px;color:#cfb09d;border-bottom:1px solid #693f2f;padding:8px 0}
.ds-ghost:hover{color:#fff;border-color:var(--red)}

/* ---------- boîte isométrique (fond SVG) ---------- */
.bx{display:block;width:26px;height:28px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 28'%3E%3Cpath d='M13 1 25 7.5 13 14 1 7.5Z' fill='%233d3230'/%3E%3Cpath d='M1 7.5 13 14v13L1 20.5Z' fill='%232a2322'/%3E%3Cpath d='M25 7.5 13 14v13l12-6.5Z' fill='%231d1817'/%3E%3Cpath d='M7 4.3 19 10.8' stroke='%23ff342e' stroke-width='2.2'/%3E%3Cpath d='M19 10.8v13' stroke='%23ff342e' stroke-width='2.2' opacity='.75'/%3E%3C/svg%3E") center/contain no-repeat}
.bx.lg{width:44px;height:48px}

/* ---------- HERO ---------- */
.ds-hero{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center;min-height:560px}
.ds-hero h1{font:700 clamp(62px,6.6vw,100px)/.88 var(--display);letter-spacing:-1px;color:var(--cream);margin:22px 0 0;text-transform:uppercase}
.ds-hero .ds-sub{font-size:16px;max-width:470px;margin-top:26px}
.ds-hero .ds-sub strong{color:var(--cream);font-weight:500}
.ds-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:34px}

.ds-scene{position:relative;aspect-ratio:1.18;border:1px solid var(--edge);background:radial-gradient(ellipse at 50% 60%,#5a110d55,transparent 62%),linear-gradient(#ffffff05 1px,transparent 1px) 0 0/34px 34px,linear-gradient(90deg,#ffffff05 1px,transparent 1px) 0 0/34px 34px,#0c0a09;overflow:hidden;isolation:isolate}
.ds-scene-row{position:absolute;left:7%;right:7%;top:50%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;transform:translateY(-30%)}
.ds-node{display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;z-index:2}
.ds-node small{font:9px var(--mono);letter-spacing:1.2px;color:var(--soft);text-align:center;line-height:1.6}
.ds-node small b{display:block;color:var(--cream);font-weight:400;font-size:9px}
.ds-scene .bx{width:36px;height:39px}
.ds-shelf{display:grid;grid-template-columns:repeat(3,36px);gap:5px 8px;padding:18px 18px 14px;border:1px solid #ffffff22;background:#151110;position:relative}
.ds-shelf:after{content:'';position:absolute;left:8px;right:8px;bottom:6px;height:2px;background:#ffffff14}
.ds-pin{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;border:1px solid #ff342e55;background:radial-gradient(circle,#ff342e22,transparent 70%);color:var(--red);position:relative}
.ds-pin svg{width:32px;height:32px}
.ds-pin:after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--red);opacity:0}
.ds-done{position:absolute;top:-30px;left:50%;font:8px var(--mono);letter-spacing:1px;color:#fff;background:var(--red);padding:5px 8px;white-space:nowrap;transform:translateX(-50%);opacity:0}
.ds-route{position:relative;height:28px;margin:0 6px;top:-14px}
.ds-route:before{content:'';position:absolute;left:0;right:0;top:50%;border-top:1px dashed #ff342e66}
.ds-route-label{position:absolute;left:50%;top:26px;transform:translateX(-50%);font:7px var(--mono);letter-spacing:1.2px;color:var(--dim);white-space:nowrap}
.ds-track{position:absolute;inset:0;opacity:0}
.ds-track .bx{position:absolute;left:-18px;top:-6px}
.ds-toast{position:absolute;left:50%;top:9%;width:min(300px,78%);display:flex;align-items:center;gap:12px;padding:12px 14px;background:#f2ece8;color:#1b1514;border-radius:12px;box-shadow:0 18px 40px #000a;transform:translate(-50%,-14px);opacity:0;z-index:3}
.ds-toast i{flex:0 0 32px;height:32px;border-radius:8px;background:var(--red);display:grid;place-items:center;color:#fff}
.ds-toast i svg{width:16px;height:16px}
.ds-toast strong{display:block;font:700 10px var(--mono);letter-spacing:.6px}
.ds-toast small{display:block;font-size:11px;color:#6d605b;margin-top:3px}
.ds-scene-foot{position:absolute;left:16px;right:16px;bottom:14px;display:flex;justify-content:space-between;font:7px var(--mono);letter-spacing:1.2px;color:var(--dim)}

/* timeline du hero : 7 s, en boucle */
.is-live .ds-toast{animation:ds-toast 7s cubic-bezier(.2,.8,.2,1) infinite}
.is-live .ds-pick{animation:ds-pick 7s ease infinite}
.is-live .ds-track{animation:ds-travel 7s cubic-bezier(.55,0,.35,1) infinite}
.is-live .ds-done{animation:ds-done 7s ease infinite}
.is-live .ds-pin:after{animation:ds-ping 7s ease-out infinite}
@keyframes ds-toast{0%{opacity:0;transform:translate(-50%,-14px)}6%,32%{opacity:1;transform:translate(-50%,0)}38%,100%{opacity:0;transform:translate(-50%,-8px)}}
@keyframes ds-pick{0%,12%{opacity:1;transform:none}17%{opacity:0;transform:translateY(-14px)}88%{opacity:0;transform:translateY(6px)}96%,100%{opacity:1;transform:none}}
@keyframes ds-travel{0%,15%{opacity:0;transform:translateX(0)}18%{opacity:1;transform:translateX(0)}70%{opacity:1;transform:translateX(100%)}73%,100%{opacity:0;transform:translateX(100%)}}
@keyframes ds-done{0%,71%{opacity:0;transform:translate(-50%,6px)}75%,92%{opacity:1;transform:translate(-50%,0)}97%,100%{opacity:0;transform:translate(-50%,0)}}
@keyframes ds-ping{0%,70%{opacity:0;transform:scale(1)}72%{opacity:1;transform:scale(1)}86%,100%{opacity:0;transform:scale(1.6)}}

/* ---------- LE PIÈGE DU GROS MOQ ---------- */
.ds-moq{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:18px;margin-top:50px}
.ds-moq article{border:1px solid var(--edge);background:var(--card);padding:24px 22px 22px;display:flex;flex-direction:column;min-height:330px}
.ds-moq article.is-bad{background:radial-gradient(ellipse at 50% 0,#4a0f0b55,transparent 70%),var(--card)}
.ds-moq h3{font:600 26px/1 var(--display);color:var(--cream);margin:0;text-transform:uppercase;letter-spacing:.2px}
.ds-moq h3 small{display:block;font:8px var(--mono);letter-spacing:1.3px;color:var(--soft);margin-bottom:9px;text-transform:none}
.ds-pile{flex:1;display:flex;flex-wrap:wrap;align-content:flex-end;gap:2px 3px;padding:26px 0 18px;min-height:150px}
.ds-pile .bx{width:22px;height:24px}
.ds-pile-empty{flex:1;display:grid;place-items:center;margin:26px 0 18px;border:1px dashed #ff342e44;color:#c18e7b;font:8px var(--mono);letter-spacing:1.2px;min-height:110px}
.ds-cash{font:8px var(--mono);letter-spacing:1.2px;color:var(--soft);display:flex;justify-content:space-between}
.ds-cash b{color:var(--cream);font-weight:400}
.ds-bar{height:6px;background:#ffffff10;margin-top:9px;overflow:hidden}
.ds-bar i{display:block;height:100%;width:var(--v);background:var(--red);transform-origin:0 50%}
.ds-note{font:8px var(--mono);letter-spacing:1px;color:var(--dim);margin-top:16px}
.js-ds .ds-pile .bx{opacity:0;transform:translateY(-18px)}
.js-ds .is-in .ds-pile .bx{animation:ds-drop .5s cubic-bezier(.3,1.4,.5,1) forwards;animation-delay:calc(var(--d,0)*22ms)}
.js-ds .ds-bar i{transform:scaleX(0)}
.js-ds .is-in .ds-bar i{transition:transform 1.2s cubic-bezier(.6,0,.2,1) .5s;transform:scaleX(1)}
@keyframes ds-drop{to{opacity:1;transform:none}}

/* ---------- LES 2 OPTIONS ---------- */
.ds-options{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:50px}
.ds-opt{border:1px solid var(--edge);background:var(--card);padding:30px 28px 28px;position:relative;overflow:hidden;isolation:isolate}
.ds-opt:before{content:'';position:absolute;width:320px;height:320px;border-radius:50%;right:-160px;top:-160px;border:1px solid #f44a2c22;box-shadow:0 0 0 40px #f44a2c06,0 0 0 80px #f44a2c03;z-index:-1}
.ds-opt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.ds-opt-head span{font:9px var(--mono);color:var(--red);letter-spacing:1px}
.ds-opt h3{font:700 clamp(36px,3.6vw,52px)/.9 var(--display);color:var(--cream);margin:14px 0 0;text-transform:uppercase}
.ds-tag{font:8px var(--mono);letter-spacing:1.1px;color:#fff;border:1px solid #ff342e88;background:#ff342e1f;padding:7px 9px;white-space:nowrap}
.ds-flow{list-style:none;margin:34px 0 0;padding:0;position:relative}
.ds-flow:before{content:'';position:absolute;left:21px;top:22px;bottom:22px;width:1px;background:#ffffff1a}
.ds-flow li{--i:0;display:flex;align-items:center;gap:18px;padding:9px 0;position:relative;color:#9c877b;font-size:15px;line-height:1.35}
.ds-flow li b{color:var(--cream);font-weight:500}
.ds-ico{flex:0 0 43px;height:43px;border-radius:50%;display:grid;place-items:center;border:1px solid #ffffff1f;background:#171211;color:#c9a998;position:relative;z-index:1}
.ds-ico svg{width:19px;height:19px}
.ds-flow li:nth-child(2){--i:1}.ds-flow li:nth-child(3){--i:2}.ds-flow li:nth-child(4){--i:3}
.is-live .ds-flow li .ds-ico{animation:ds-step 8s ease infinite;animation-delay:calc(var(--i)*2s)}
.is-live .ds-flow li>span:last-child{animation:ds-step-txt 8s ease infinite;animation-delay:calc(var(--i)*2s)}
@keyframes ds-step{0%,30%,100%{border-color:#ffffff1f;background:#171211;color:#c9a998;box-shadow:none}4%,24%{border-color:var(--red);background:var(--red);color:#fff;box-shadow:0 0 0 6px #ff342e22}}
@keyframes ds-step-txt{0%,30%,100%{transform:none}4%,24%{transform:translateX(4px)}}
.ds-flow li.is-key b{color:#fff}
.ds-speed{margin-top:30px;padding-top:22px;border-top:1px solid var(--edge)}
.ds-speed .ds-cash{margin-bottom:0}
.ds-speed p{font-size:13px;color:var(--soft);line-height:1.6;margin:14px 0 0}
.ds-pick-for{margin-top:12px;font:9px var(--mono);letter-spacing:.8px;color:#cfb09d}

/* ---------- MONTER D'UN CRAN ---------- */
.ds-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px;align-items:end}
.ds-step{border:1px solid var(--edge);background:var(--card);padding:22px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;transform-origin:50% 100%}
.ds-step:nth-child(1){min-height:170px}.ds-step:nth-child(2){min-height:240px}.ds-step:nth-child(3){min-height:310px;background:radial-gradient(ellipse at 50% 100%,#5a110d66,transparent 70%),var(--card2);border-color:#ff342e44}
.ds-step span{font:9px var(--mono);color:var(--red);letter-spacing:1px}
.ds-step strong{font:700 34px/.95 var(--display);color:var(--cream);text-transform:uppercase;margin-top:12px}
.ds-step small{font-size:13px;color:var(--soft);margin-top:8px;line-height:1.5}
.ds-step a{margin-top:16px;font:9px var(--mono);letter-spacing:.6px;color:#fff;border-bottom:1px solid var(--red);align-self:flex-start;padding-bottom:5px}
.ds-step-boxes{display:flex;gap:4px;margin-bottom:auto;padding-bottom:20px;flex-wrap:wrap}
.js-ds .ds-step{opacity:0;transform:scaleY(.6)}
.js-ds .is-in .ds-step{transition:transform .8s cubic-bezier(.3,1.2,.4,1),opacity .5s;opacity:1;transform:none}
.js-ds .is-in .ds-step:nth-child(2){transition-delay:.15s}.js-ds .is-in .ds-step:nth-child(3){transition-delay:.3s}

/* ---------- FIN ---------- */
.ds-final{margin-top:120px;border:1px solid #ff342e44;background:radial-gradient(ellipse at 85% 50%,#5a110d66,transparent 55%),var(--card);padding:56px 50px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.ds-final h2{margin:0;font-size:clamp(40px,4.4vw,64px)}
.ds-final p{font-size:14px;color:var(--soft);margin:16px 0 0;max-width:520px;line-height:1.7}
.ds-small{font:8px var(--mono);letter-spacing:1px;color:var(--dim);margin-top:22px;line-height:1.8}

/* ---------- PROCESS EN 3 ÉTAPES (branding, customisations) ---------- */
.br-proc{list-style:none;margin:50px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
.br-proc li{border:1px solid var(--edge);background:var(--card);padding:26px 24px;position:relative}
.br-proc .ds-ico{width:43px;margin-bottom:22px}
.br-proc span{font:9px var(--mono);color:var(--red);letter-spacing:1px}
.br-proc strong{display:block;font:700 30px/.95 var(--display);color:var(--cream);text-transform:uppercase;margin-top:10px}
.br-proc p{font-size:14px;color:var(--soft);line-height:1.6;margin:10px 0 0}
.br-proc li:not(:last-child):after{content:'';position:absolute;top:47px;left:calc(100% + 1px);width:16px;height:1px;background:var(--red);transform-origin:0 50%}
.br-proc li:nth-child(2){--i:1}.br-proc li:nth-child(3){--i:2}
.br-proc.is-live .ds-ico{animation:br-step 6s ease infinite;animation-delay:calc(var(--i,0)*2s)}
@keyframes br-step{0%,30%,100%{border-color:#ffffff1f;background:#171211;color:#c9a998;box-shadow:none}5%,26%{border-color:var(--red);background:var(--red);color:#fff;box-shadow:0 0 0 6px #ff342e22}}
.br-aside{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:18px;border-left:2px solid var(--red);background:#21120e;padding:18px 22px;font-size:14px;color:#d2b6a5}

/* ---------- AUTRES CHEMINS ---------- */
.br-links{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:50px}
.br-links a{border:1px solid var(--edge);background:var(--card);padding:26px 24px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;transition:border-color .25s,transform .25s}
.br-links a:hover{border-color:#ff342e88;transform:translateY(-2px)}
.br-links small{display:block;font:9px var(--mono);letter-spacing:1px;color:#c18e7b}
.br-links strong{display:block;font:700 30px/1 var(--display);color:var(--cream);text-transform:uppercase;margin-top:12px}
.br-links em{font-style:normal;font-size:22px;color:var(--red)}

@media(max-width:760px){.br-proc,.br-links{grid-template-columns:1fr}.br-proc li:not(:last-child):after{display:none}}

/* apparition au scroll */
.js-ds .ds-reveal{opacity:0;transform:translateY(24px)}
.js-ds .ds-reveal.is-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}

@media(max-width:1100px){
  .ds-hero{grid-template-columns:1fr;gap:44px;min-height:0}
  .ds-moq{grid-template-columns:1fr 1fr}.ds-moq article.is-bad{grid-column:1/-1}
}
@media(max-width:760px){
  .ds{padding-top:24px;padding-bottom:50px}
  .ds-hero h1{font-size:clamp(52px,15vw,72px)}
  .ds-hero .ds-sub{font-size:15px}
  .ds-section{padding-top:80px}
  .ds h2{font-size:clamp(38px,11vw,52px)}
  .ds-sub{font-size:14px}
  .ds-scene{aspect-ratio:.95}
  .ds-scene-row{left:5%;right:5%}
  .ds-shelf{grid-template-columns:repeat(3,22px);gap:3px 4px;padding:10px 9px 8px}
  .ds-scene .bx{width:22px;height:24px}
  .ds-track .bx{left:-11px;top:2px}
  .ds-pin{width:58px;height:58px}
  .ds-node small{font-size:8px}
  .ds-moq,.ds-options,.ds-steps{grid-template-columns:1fr;margin-top:34px}
  .ds-moq article{min-height:0;padding:20px 18px}
  .ds-pile{min-height:0;padding:18px 0 14px}
  .ds-pile-empty{min-height:64px;margin:18px 0 14px}
  .ds-opt{padding:24px 20px}
  .ds-flow li{font-size:14px;gap:14px}
  .ds-step:nth-child(n){min-height:0}
  .ds-final{grid-template-columns:1fr;padding:34px 22px;margin-top:80px}
  .ds-cta{width:100%;justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){
  .ds *,.ds *:before,.ds *:after{animation:none!important;transition:none!important}
  .js-ds .ds-reveal,.js-ds .ds-pile .bx,.js-ds .ds-step{opacity:1;transform:none}
  .js-ds .ds-bar i{transform:none}
  .ds-toast{opacity:1;transform:translate(-50%,0)}
  .ds-track{opacity:1;transform:translateX(50%)}
}