/* ============================================================
   NEY'KRÉA — LE PERSONNALISATEUR
   Le visiteur écrit son texte, choisit un support, une couleur et une
   technique : il voit le rendu changer en direct.
   C'est le métier de Nelly, fait par le visiteur, sans une seule photo.
   Tout est en SVG + CSS : ça tourne sur mobile et ça passe en WordPress.
   ============================================================ */

#perso{background:var(--cream-l);padding:110px 0;overflow:hidden}
#perso .pz-head{max-width:640px;margin:0 auto 56px;text-align:center}
#perso .pz-head h2{margin-bottom:16px}

.pz{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;max-width:1180px;margin:0 auto}

/* ---------- la scène ---------- */
.pz-stage{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.pz-stage::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.7),transparent 60%)}
.pz-support{width:70%;height:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.16));transition:opacity .45s}
.pz-support:not(.on){display:none}
.pz-support .fabric{fill:var(--pz-color,#FFFFFF);transition:fill .45s}
.pz-support .seam{stroke:rgba(0,0,0,.13);stroke-width:1.3;fill:none}
.pz-support .glassy{fill:rgba(255,255,255,.14)}

/* ---------- le marquage ---------- */
.pz-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(var(--pz-shift,0));
  width:min(46%,300px);text-align:center;pointer-events:none;line-height:1.05}
.pz-mark span{display:block;font-family:'Inter',sans-serif;font-weight:700;letter-spacing:.02em;
  font-size:clamp(.9rem,2.1vw,1.45rem);text-transform:uppercase;word-break:break-word;
  color:var(--pz-ink,#BB7E3C);transition:color .4s}

/* --- DTF : opaque, couleurs franches, très léger relief --- */
.pz[data-tech="dtf"] .pz-mark span{
  text-shadow:0 1px 0 rgba(0,0,0,.22),0 2px 3px rgba(0,0,0,.14)}

/* --- DTF UV : sur support rigide, marquage brillant --- */
.pz[data-tech="dtfuv"] .pz-mark span{
  background:linear-gradient(115deg,var(--pz-ink,#BB7E3C) 30%,#FFF0D6 48%,var(--pz-ink,#BB7E3C) 62%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}

/* --- Sublimation : les couleurs entrent DANS la matière, aucun relief --- */
.pz[data-tech="subli"] .pz-mark span{
  mix-blend-mode:multiply;opacity:.88;text-shadow:none;font-weight:600}

/* --- Flex pailleté : la texture accroche la lumière --- */
.pz[data-tech="flex"] .pz-mark span{
  background:linear-gradient(100deg,var(--pz-ink,#BB7E3C),#FFE9B8 25%,var(--pz-ink,#BB7E3C) 45%,#FFF7E2 62%,var(--pz-ink,#BB7E3C) 80%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:pzGlint 5.5s linear infinite;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
@keyframes pzGlint{to{background-position:280% 0}}

/* --- Vinyle adhésif : à plat, mat, lettres découpées --- */
.pz[data-tech="vinyl"] .pz-mark span{
  text-shadow:none;font-weight:800;letter-spacing:.05em}

/* ---------- le panneau de réglages ---------- */
.pz-panel{display:flex;flex-direction:column;gap:26px}
.pz-field label{display:block;font-family:'Inter';font-weight:600;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-d);margin-bottom:10px}
.pz-field input{width:100%;padding:15px 18px;border:1px solid var(--line);border-radius:4px;
  background:var(--white);font-family:'Inter';font-size:1rem;color:var(--ink);transition:border-color .25s}
.pz-field input:focus{outline:none;border-color:var(--gold)}

.pz-row{display:flex;flex-wrap:wrap;gap:8px}
.pz-chip{font-family:'Inter';font-weight:600;font-size:.78rem;padding:9px 15px;border:1px solid var(--line);
  border-radius:999px;background:var(--white);color:var(--muted);cursor:pointer;transition:.22s}
.pz-chip:hover{border-color:var(--gold-l);color:var(--ink)}
.pz-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}

.pz-swatch{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  padding:0;transition:.22s;position:relative}
.pz-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--gold-d)}

.pz-note{font-size:.86rem;color:var(--muted);line-height:1.6;min-height:3em;
  border-left:2px solid var(--line-gold);padding-left:14px}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .pz{grid-template-columns:1fr;gap:34px}
  .pz-stage{aspect-ratio:4/3}
  .pz-support{width:60%}
  .pz-mark{width:min(52%,240px)}
}
@media (prefers-reduced-motion:reduce){
  .pz[data-tech="flex"] .pz-mark span{animation:none}
  .pz-support,.pz-mark span{transition:none}
}

/* ===== Retours Nelly 12/08 ===== */

/* 1. Fond du hero : la video noir et blanc fournie par Nelly */
.hero .hero-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:0;pointer-events:none}
.hero .ph.img-ph{z-index:0}
@media (prefers-reduced-motion:reduce){.hero .hero-video{display:none}}

/* 2. Le « t » de "ressemblent" etait coupe : Caveat en italique deborde de sa
   boite, et .line-mask{overflow:hidden} tranchait au bord.
   Le clipping se fait sur la padding-box du h1 : en lui donnant un padding
   droit, le texte se termine plus tot et le glyphe a la place de deborder
   sans etre coupe. */
.hero-content h1.line-mask{padding-right:.22em}

/* 3. Une photo par technique (la meme image restait affichee pour les 5) */
#transfert .tf-piece-photo{background-image:url('img/photos/tech-dtf.webp');
  background-size:cover;background-position:center;transition:background-image .45s ease}
#transfert[data-tech="0"] .tf-piece-photo{background-image:url('img/photos/tech-dtf.webp')}
#transfert[data-tech="1"] .tf-piece-photo{background-image:url('img/photos/tech-dtfuv.webp')}
#transfert[data-tech="2"] .tf-piece-photo{background-image:url('img/photos/tech-sublimation.webp')}
#transfert[data-tech="3"] .tf-piece-photo{background-image:url('img/photos/tech-flex.webp')}
#transfert[data-tech="4"] .tf-piece-photo{background-image:url('img/photos/tech-vinyle.webp')}