/* SOURCE CLUB — page Customisations (complète /produits/produits.css)
   Gourde en SVG : couleur (--bc), finition (data-finish), bouchon (data-cap), format (data-size).
   Tout se passe dans la page, rien n'est envoyé tant que le visiteur ne clique pas sur la demande. */

.cz-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- la gourde ---------- */
.cz-bottle{display:block;width:100%;height:100%;overflow:visible;--bc:#4f7a5a}
.cz-bottle .cz-scale{transform-box:fill-box;transform-origin:50% 100%;transition:transform .6s cubic-bezier(.3,1.3,.4,1)}
.cz-bottle[data-size=s] .cz-scale{transform:scale(.84,.78)}
.cz-bottle[data-size=l] .cz-scale{transform:scale(1.06,1.12)}
.cz-bottle .cz-body,.cz-bottle .cz-capbase{fill:var(--bc);transition:fill .5s ease}
.cz-bottle .cz-layer{opacity:0;transition:opacity .45s ease}
.cz-bottle[data-finish=mat] .cz-mat,.cz-bottle[data-finish=brillant] .cz-gloss,.cz-bottle[data-finish=brosse] .cz-brush{opacity:1}
.cz-bottle[data-cap=bambou] .cz-wood,.cz-bottle[data-cap=inox] .cz-steel{opacity:1}
.cz-shadow{fill:#000;opacity:.45;transform-box:fill-box;transform-origin:50% 50%;transition:transform .6s ease}
.cz-bottle[data-size=s] .cz-shadow{transform:scaleX(.84)}
.cz-bottle[data-size=l] .cz-shadow{transform:scaleX(1.06)}

/* ---------- CONFIGURATEUR ---------- */
.cz-lab{display:grid;grid-template-columns:1.05fr 1fr;gap:18px;margin-top:44px}
.cz-stage{position:relative;border:1px solid var(--edge);background:radial-gradient(ellipse at 50% 75%,#5a110d4d,transparent 62%),#0c0a09;min-height:560px;display:grid;place-items:center;overflow:hidden}
.cz-stage .cz-bottle{width:auto;height:380px;aspect-ratio:200/420}
.cz-stage-tag{position:absolute;left:18px;top:18px;font:8px var(--mono);letter-spacing:1.2px;color:var(--soft)}
.cz-controls{border:1px solid var(--edge);background:var(--card);padding:28px 26px;display:flex;flex-direction:column;gap:26px}
.cz-controls fieldset{border:0;margin:0;padding:0;min-width:0}
.cz-controls legend{font:9px var(--mono);letter-spacing:1.3px;color:#c18e7b;margin-bottom:12px;padding:0;display:flex;gap:10px}
.cz-controls legend b{color:var(--cream);font-weight:400}
.cz-opts{display:flex;flex-wrap:wrap;gap:8px}
.cz-opts input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cz-opts label{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #ffffff22;color:#cdbbb0;font:10px var(--mono);letter-spacing:.6px;transition:border-color .2s,background .2s,color .2s}
.cz-opts label:hover{border-color:#ff342e77;color:#fff}
.cz-opts input:checked+label{border-color:var(--red);background:#ff342e1c;color:#fff}
.cz-opts input:focus-visible+label{outline:2px solid var(--red);outline-offset:2px}
.cz-colors label{width:44px;height:44px;padding:0;border-radius:50%;justify-content:center;border:2px solid transparent;background:padding-box var(--c);box-shadow:inset 0 0 0 1px #ffffff2a}
.cz-colors input:checked+label{border-color:#fff;background:padding-box var(--c);box-shadow:0 0 0 3px var(--red)}
.cz-colors label span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cz-mini{width:14px;height:14px;border-radius:3px;flex:0 0 14px;background:var(--m)}
.cz-summary{margin-top:auto;padding-top:22px;border-top:1px solid var(--edge)}
.cz-summary small{font:8px var(--mono);letter-spacing:1.2px;color:var(--soft)}
.cz-summary p{font:600 22px/1.15 var(--display);color:var(--cream);text-transform:uppercase;margin:8px 0 18px;letter-spacing:.3px}
.cz-summary .ds-cta{width:100%;justify-content:space-between}

/* ---------- CE QU'ON PEUT TOUCHER ---------- */
.cz-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.cz-tile{min-width:0;margin:0;border:1px solid var(--edge);background:var(--card);display:flex;flex-direction:column}
.cz-tile-vis{height:170px;border-bottom:1px solid var(--edge);display:flex;align-items:center;justify-content:center;gap:12px;background:#0c0a09;position:relative;overflow:hidden}
.cz-tile figcaption{padding:16px 18px 18px}
.cz-tile strong{display:block;font:600 24px/1 var(--display);color:var(--cream);text-transform:uppercase}
.cz-tile small{display:block;font-size:13px;color:var(--soft);margin-top:6px}
.cz-dots i{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px #ffffff22}
.is-live .cz-dots i{animation:cz-pop 3.6s ease infinite;animation-delay:calc(var(--i)*.6s)}
@keyframes cz-pop{0%,30%,100%{transform:none}12%{transform:translateY(-12px) scale(1.15)}}
.cz-mats i{width:52px;height:52px;border-radius:4px;box-shadow:inset 0 0 0 1px #ffffff1a}
.cz-mats .m1{background:linear-gradient(135deg,#3a302e,#241e1d)}
.cz-mats .m2{background:repeating-linear-gradient(0deg,#ffffff14 0 1px,transparent 1px 3px),linear-gradient(90deg,#6f6966,#c9c4c0 45%,#77716e)}
.cz-mats .m3{background:repeating-radial-gradient(ellipse at 20% 120%,#00000026 0 2px,transparent 2px 6px),linear-gradient(90deg,#a87d52,#c9a173 50%,#9b7148)}
.is-live .cz-mats i{animation:cz-tilt 4s ease-in-out infinite;animation-delay:calc(var(--i)*.4s)}
@keyframes cz-tilt{0%,100%{transform:none}50%{transform:rotate(-6deg) translateY(-4px)}}
.cz-sizes{align-items:flex-end!important;padding-bottom:30px}
.cz-sizes i{width:26px;border-radius:9px 9px 6px 6px;background:#3a302e;position:relative;transform-origin:50% 100%}
.cz-sizes i:before{content:'';position:absolute;left:28%;right:28%;top:-10px;height:10px;border-radius:2px 2px 0 0;background:#544744}
.cz-sizes i:nth-child(1){height:58px}.cz-sizes i:nth-child(2){height:82px;background:var(--red)}.cz-sizes i:nth-child(3){height:106px}
.is-live .cz-sizes i{animation:cz-grow 3s cubic-bezier(.3,1.4,.5,1) infinite;animation-delay:calc(var(--i)*.25s)}
@keyframes cz-grow{0%,60%,100%{transform:none}25%{transform:scaleY(1.1)}}
.cz-fin i{width:64px;height:64px;border-radius:50%;position:relative;overflow:hidden}
.cz-fin .f1{background:radial-gradient(circle at 40% 35%,#5d514d,#2a2322 70%)}
.cz-fin .f2{background:radial-gradient(circle at 35% 30%,#fff 0 6%,#ff8a80 9%,#e2332c 35%,#7a1411 80%)}
.cz-fin .f2:after{content:'';position:absolute;top:-30%;bottom:-30%;width:30%;left:-60%;background:linear-gradient(90deg,transparent,#ffffff66,transparent);transform:skewX(-20deg)}
.is-live .cz-fin .f2:after{animation:cz-shine 3s ease-in-out infinite}
@keyframes cz-shine{0%,40%{transform:translateX(0) skewX(-20deg)}80%,100%{transform:translateX(560%) skewX(-20deg)}}

@media(max-width:1100px){
  .cz-lab{grid-template-columns:1fr}
  .cz-stage{min-height:460px}
  .cz-tiles{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .cz-stage{min-height:380px}
  .cz-stage .cz-bottle{height:270px}
  .cz-colors label{width:40px;height:40px}
  .cz-controls{padding:22px 18px;gap:22px}
  .cz-tiles{grid-template-columns:1fr 1fr;gap:12px}
  .cz-tile-vis{height:130px;gap:7px}
  .cz-dots i{width:15px;height:15px}
  .cz-tile figcaption{padding:14px}
  .cz-tile small{font-size:12px}
  .cz-tile strong{font-size:20px}
  .cz-mats i{width:38px;height:38px}
  .cz-fin i{width:50px;height:50px}
}
@media(max-width:380px){.cz-tiles{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .cz-bottle *{transition:none!important}
}

/* ---------- HERO : mosaïque « n'importe quel produit » ---------- */
.cz-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border:1px solid var(--edge);background:#0c0a09;padding:8px;position:relative}
.cz-cell{position:relative;aspect-ratio:1;overflow:hidden;background:#efeeea;isolation:isolate}
.cz-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cz-tint{position:absolute;inset:0;mix-blend-mode:color;opacity:0;z-index:1}
.cz-cell small{position:absolute;left:8px;bottom:7px;z-index:2;font:7px var(--mono);letter-spacing:1px;color:#fff;background:#0c0a09b3;padding:4px 6px}
.cz-mosaic.is-live .cz-tint{animation:cz-tint 9s ease infinite;animation-delay:calc(var(--i)*-1.1s)}
@keyframes cz-tint{0%,8%{opacity:0;background:#e2332c}14%,26%{opacity:.75;background:#e2332c}34%,46%{opacity:.75;background:#22314f}54%,66%{opacity:.75;background:#c8a77e}74%,86%{opacity:.75;background:#4f7a5a}94%,100%{opacity:0;background:#4f7a5a}}
.cz-idea{background:#120e0d!important;display:grid;place-items:center;border:1px dashed #ff342e77}
.cz-idea svg{width:62%;height:62%;color:#eeeae7;overflow:visible}
.cz-idea small{background:var(--red)!important}
.cz-draw{stroke-dasharray:var(--len);stroke-dashoffset:0}
.cz-mosaic.is-live .cz-draw,.cz-unique.is-live .cz-draw{animation:cz-draw 6s ease infinite}
@keyframes cz-draw{0%{stroke-dashoffset:var(--len)}45%,85%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
.cz-mosaic-foot{grid-column:1/-1;display:flex;justify-content:space-between;font:7px var(--mono);letter-spacing:1.2px;color:var(--dim);padding:6px 2px 2px}

/* ---------- DÉMO ---------- */
.cz-demo-badge{position:absolute;right:18px;top:18px;font:8px var(--mono);letter-spacing:1.2px;color:#fff;background:var(--red);padding:6px 9px}
.cz-demo-note{display:flex;align-items:center;gap:14px;margin-top:22px;padding:16px 20px;border:1px dashed #ff342e66;font-size:14px;color:#d2b6a5;line-height:1.5}
.cz-demo-note b{color:var(--cream);font-weight:500}
.cz-demo-note .ds-ico{width:43px;flex:0 0 43px}

/* ---------- PRODUIT UNIQUE ---------- */
.cz-unique{min-width:0;margin:0;grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr;border:1px solid #ff342e44;background:radial-gradient(ellipse at 20% 50%,#5a110d55,transparent 60%),var(--card2)}
.cz-unique-vis{position:relative;min-height:260px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:26px;border-right:1px solid var(--edge);background:linear-gradient(#ffffff05 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,#ffffff05 1px,transparent 1px) 0 0/24px 24px}
.cz-unique-vis svg{width:100%;max-height:200px;overflow:visible}
.cz-unique-vis .cz-arrow{font:22px var(--mono);color:var(--red)}
.cz-unique-vis small{position:absolute;bottom:12px;font:7px var(--mono);letter-spacing:1.2px;color:var(--dim)}
.cz-unique-vis small:first-of-type{left:26px}.cz-unique-vis small:last-of-type{right:26px}
.cz-unique-txt{padding:30px 30px;display:flex;flex-direction:column;justify-content:center}
.cz-unique-txt span{font:9px var(--mono);color:var(--red);letter-spacing:1px}
.cz-unique-txt strong{font:700 clamp(32px,3.2vw,46px)/.92 var(--display);color:var(--cream);text-transform:uppercase;margin-top:12px}
.cz-unique-txt p{font-size:15px;color:var(--soft);line-height:1.6;margin:14px 0 0;max-width:420px}
.cz-proto{opacity:0}
.cz-unique.is-live .cz-proto{animation:cz-proto 6s ease infinite}
@keyframes cz-proto{0%,45%{opacity:0;transform:translateY(8px)}58%,88%{opacity:1;transform:none}96%,100%{opacity:0}}

/* ---------- LA DERNIÈRE MARCHE ---------- */
.cz-ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;align-items:end}
.cz-rung{border:1px solid var(--edge);background:var(--card);padding:22px;display:flex;flex-direction:column}
.cz-rung.is-top{border-color:#ff342e66;background:radial-gradient(ellipse at 50% 0,#5a110d66,transparent 70%),var(--card2)}
.cz-rung span{font:9px var(--mono);color:var(--red);letter-spacing:1px}
.cz-rung strong{font:700 30px/.95 var(--display);color:var(--cream);text-transform:uppercase;margin-top:10px}
.cz-rung small{font-size:13px;color:var(--soft);margin-top:8px;line-height:1.5}
.cz-rung .ds-pile{min-height:0;padding:18px 0 16px}
.cz-rung .ds-pile .bx{width:18px;height:20px}
.cz-rung a{margin-top:14px;font:9px var(--mono);letter-spacing:.6px;color:#fff;border-bottom:1px solid var(--red);align-self:flex-start;padding-bottom:5px}
.cz-rung:nth-child(1) .ds-pile{height:40px}.cz-rung:nth-child(2) .ds-pile{height:110px}.cz-rung:nth-child(3) .ds-pile{height:200px}

@media(max-width:1100px){
  .cz-unique{grid-template-columns:1fr}
  .cz-unique-vis{border-right:0;border-bottom:1px solid var(--edge)}
}
@media(max-width:760px){
  .cz-mosaic{gap:5px;padding:5px}
  .cz-cell small{font-size:6px;left:5px;bottom:5px;padding:3px 4px}
  .cz-unique-vis{min-height:200px;padding:18px}
  .cz-unique-txt{padding:22px 18px}
  .cz-ladder{grid-template-columns:1fr}
  .cz-rung .ds-pile{height:auto!important}
  .cz-demo-note{font-size:13px;padding:14px}
}
@media(prefers-reduced-motion:reduce){
  .cz-tint{opacity:0}
  .cz-proto{opacity:1}
}