/* SOURCE CLUB — page Branding (complète /produits/produits.css)
   Le nom saisi par le visiteur s'affiche sur les maquettes ([data-brand]). Rien n'est envoyé. */

/* ---------- photo produit + marquage ---------- */
.br-shot{container-type:inline-size;position:relative;aspect-ratio:2/3;background:#efeeea;overflow:hidden;isolation:isolate}
.br-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.br-mark{position:absolute;left:50%;top:61%;width:34%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.5em;color:#e9efe6;text-align:center;font-size:5.4cqw;z-index:2}
.br-mark b{font:700 calc(1em * var(--k,1))/1 var(--display);letter-spacing:.12em;text-transform:uppercase;max-width:100%;white-space:nowrap;text-shadow:0 1px 0 #ffffff26,0 -1px 0 #0000004d}
.br-mark i{display:block;width:36%;height:1px;background:currentColor;opacity:.6}
.br-mark small{font:.42em var(--mono);letter-spacing:.25em;opacity:.75}

/* ---------- HERO ---------- */
.br-hero-vis{position:relative;border:1px solid var(--edge);background:radial-gradient(ellipse at 50% 70%,#5a110d55,transparent 65%),#0c0a09;padding:34px;display:grid;place-items:center}
.br-hero-vis .br-shot{width:min(100%,340px);box-shadow:0 30px 80px #000c}
.br-laser{position:absolute;left:30%;right:30%;top:50%;height:2px;background:var(--red);box-shadow:0 0 12px 2px #ff342e,0 0 40px 6px #ff342e66;opacity:0;z-index:3}
.br-state{position:absolute;top:22px;left:22px;font:8px var(--mono);letter-spacing:1.2px;padding:7px 9px;border:1px solid #ffffff2a;color:var(--soft);background:#0c0a09cc}
.br-state.on{border-color:#ff342e88;background:var(--red);color:#fff;opacity:0}
.br-hero-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 hero : 6 s en boucle */
.br-hero-vis.is-live .br-mark{animation:br-reveal 6s linear infinite}
.is-live .br-laser{animation:br-laser 6s linear infinite}
.is-live .br-state.off{animation:br-off 6s ease infinite}
.is-live .br-state.on{animation:br-on 6s ease infinite}
@keyframes br-reveal{0%,14%{clip-path:inset(0 0 100% 0);opacity:1}44%{clip-path:inset(0 0 0 0)}88%{clip-path:inset(0 0 0 0);opacity:1}96%,100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes br-laser{0%,12%{opacity:0;transform:translateY(-60%)}15%{opacity:1;transform:translateY(-60%)}44%{opacity:1;transform:translateY(1400%)}47%,100%{opacity:0;transform:translateY(1400%)}}
@keyframes br-off{0%,40%{opacity:1}46%,92%{opacity:0}98%,100%{opacity:1}}
@keyframes br-on{0%,40%{opacity:0;transform:translateY(-4px)}46%,90%{opacity:1;transform:none}96%,100%{opacity:0}}

/* ---------- ESSAIE AVEC TON NOM ---------- */
.br-try{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;margin-top:36px}
.br-try label{display:flex;flex-direction:column;gap:10px;font:9px var(--mono);letter-spacing:1.2px;color:#c18e7b}
.br-try input{width:min(340px,82vw);min-height:54px;padding:12px 16px;background:#110d0c;border:1px solid #ffffff2a;border-radius:0;color:var(--cream);font:700 26px/1 var(--display);letter-spacing:1px;text-transform:uppercase}
.br-try input::placeholder{color:#5d4d45}
.br-try input:focus{outline:2px solid var(--red);outline-offset:2px;border-color:transparent}
.br-try p{font:8px var(--mono);letter-spacing:1px;color:var(--dim);margin:0 0 6px}

.br-places{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.br-place{min-width:0;margin:0;border:1px solid var(--edge);background:var(--card);display:flex;flex-direction:column}
.br-stage{aspect-ratio:1/1;display:grid;place-items:center;position:relative;overflow:hidden;border-bottom:1px solid var(--edge);background:radial-gradient(ellipse at 50% 80%,#5a110d44,transparent 65%),#0c0a09}
.br-place figcaption{padding:18px 20px 20px}
.br-place figcaption strong{display:block;font:600 26px/1 var(--display);color:var(--cream);text-transform:uppercase}
.br-place figcaption small{display:block;font-size:13px;color:var(--soft);margin-top:7px}
.br-place figcaption span{font:8px var(--mono);color:var(--red);letter-spacing:1px}

/* produit */
.br-stage .br-shot{width:52%;box-shadow:0 20px 50px #000a}
/* étiquette */
.br-tag{container-type:inline-size;width:46%;aspect-ratio:3/5;background:#eeeae7;color:#171211;position:relative;padding:22% 10% 10%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;box-shadow:0 24px 50px #000b;transform-origin:50% 0}
.br-tag:before{content:'';position:absolute;top:8%;left:50%;width:11%;aspect-ratio:1;border-radius:50%;background:#0c0a09;transform:translateX(-50%)}
.br-tag:after{content:'';position:absolute;bottom:100%;left:50%;width:1px;height:60px;background:#7d6a60}
.br-tag b{font:700 calc(16cqw * var(--k,1))/1 var(--display);letter-spacing:.08em;text-transform:uppercase;text-align:center;white-space:nowrap;max-width:100%}
.br-tag i{display:block;width:30%;height:2px;background:var(--red);margin-top:8%}
.br-tag small{font:7px var(--mono);letter-spacing:.2em;white-space:nowrap;color:#6d605b;margin-top:6%}
.br-code{width:70%;height:16%;margin-top:auto;background:repeating-linear-gradient(90deg,#171211 0 2px,transparent 2px 4px,#171211 4px 5px,transparent 5px 8px)}
.is-live .br-tag{animation:br-swing 4s ease-in-out infinite}
@keyframes br-swing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
/* packaging : boîte en vue isométrique (SVG) + face avant en HTML */
.br-box{container-type:inline-size;width:52%;aspect-ratio:120/130;position:relative;filter:drop-shadow(0 24px 40px #000c)}
.br-box svg{position:absolute;inset:0;width:100%;height:100%}
.br-face{position:absolute;left:0;top:15.4%;width:75%;height:84.6%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%;padding:0 8%}
.br-face b{font:700 calc(10cqw * var(--k,1))/1 var(--display);color:var(--cream);letter-spacing:.1em;text-transform:uppercase;text-align:center;max-width:100%;white-space:nowrap;margin-top:-18%}
.br-face small{font:6px var(--mono);letter-spacing:.25em;color:var(--soft)}
.is-live .br-box{animation:br-float 5s ease-in-out infinite}
@keyframes br-float{0%,100%{transform:none}50%{transform:translateY(-8px)}}

@media(max-width:1100px){
  .br-places{grid-template-columns:1fr 1fr}.br-places>:last-child{grid-column:1/-1}
  .br-places>:last-child .br-stage{aspect-ratio:2/1}
  .br-places>:last-child .br-box{width:26%}
}
@media(max-width:760px){
  .br-hero-vis{padding:24px}
  .br-places{grid-template-columns:1fr}
  .br-places>:last-child .br-stage{aspect-ratio:1/1}
  .br-places>:last-child .br-box{width:50%}
  .br-try input{width:100%}.br-try label{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .br-laser{display:none}
  .br-state.off{display:none}.br-state.on{opacity:1}
}