/* Mockup t-shirt : par face, couleur masquée par la silhouette photo, impression, puis ombres/reflets du tissu par-dessus. */
.mock{position:relative;width:300px;max-width:100%;aspect-ratio:880/1168;container-type:inline-size;touch-action:pan-y;}
.mock.turnable{cursor:grab;user-select:none;-webkit-user-select:none;}
.mock.dragging{cursor:grabbing;}
.mock-tilt{position:absolute;inset:0;
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.mock.hover .mock-tilt{transition:transform .08s linear;}
.face{position:absolute;inset:0;isolation:isolate;--img:url(/img/shirt.webp);}
.face > *{position:absolute;}
.face img{-webkit-user-drag:none;pointer-events:none;}
.mock-shadow{inset:0;width:100%;filter:brightness(0) blur(16px);opacity:.75;transform:translateY(5%) scale(.94);}
.mock-color,.mock-sheen,.l-tex{
  -webkit-mask:var(--img) center/100% 100% no-repeat;mask:var(--img) center/100% 100% no-repeat;}
.mock-color{inset:0;background:var(--shirt,#111114);transition:background .35s ease;}
/* Assombrit la face pendant qu'elle tourne, pour lire la rotation */
.mock-color::after{content:'';position:absolute;inset:0;background:#000;opacity:var(--turn-shade,0);}
.mock-shade{inset:0;width:100%;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.2) brightness(1.06);}
.mock-hl{inset:0;width:100%;mix-blend-mode:screen;filter:grayscale(1) brightness(.22) contrast(1.7);opacity:calc(var(--hl,1) * .7);}
.mock-sheen{inset:0;mix-blend-mode:soft-light;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--sx,50%) var(--sy,30%),rgba(255,255,255,.9),rgba(255,255,255,0) 45%);}
.mock.hover .mock-sheen{opacity:.55;}
.mock.dragging .mock-sheen{opacity:0;}

/* Impression face */
.mock-print{left:30%;width:40%;top:21.5%;height:46%;display:flex;flex-direction:column;align-items:center;}
.p-brand{display:block;height:5.1cqw;width:auto;margin:.15cqw 0;}
.p-line{width:72%;height:.38cqw;margin:1.3cqw 0 1cqw;}
.p-devise{display:block;height:2.28cqw;width:auto;margin:.03cqw 0;}
.p-art{position:relative;width:29cqw;aspect-ratio:3/4;margin-top:1.2cqw;}
.p-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
/* Fond d'origine en fondu doux : garde le papier, les couleurs et cache les défauts du détourage */
.p-bg{-webkit-mask:radial-gradient(ellipse 47% 49% at 50% 47%,#000 52%,transparent 100%);
  mask:radial-gradient(ellipse 47% 49% at 50% 47%,#000 52%,transparent 100%);
  filter:brightness(.92) saturate(1.15);opacity:.7;}
.p-art.txt .p-bg{
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(transparent,#000 6%,#000 94%,transparent);
  mask-composite:intersect;}
.p-art.sharp .p-bg{-webkit-mask:none;mask:none;}
.mock:not(.light) .p-art.cut .p-bg{display:none;}
.mock.light .p-bg{mix-blend-mode:multiply;filter:none;opacity:1;}
.mock.light .p-fg{display:none;}
.mock.light .p-art.cutlight .p-bg{display:none;}
.mock.light .p-art.cutlight .p-fg{display:block;mix-blend-mode:multiply;}
.p-name{font-family:var(--f-d);font-weight:700;font-size:3cqw;letter-spacing:.22em;padding-left:.22em;margin-top:.2cqw;}

/* Impression dos : haut du dos, sous l'encolure */
.back-print{left:27%;width:46%;top:17%;display:flex;flex-direction:column;align-items:center;text-align:center;}
.b-brand{display:block;height:6cqw;width:auto;margin:.2cqw 0;}
.b-line{width:40%;height:.38cqw;margin:1.8cqw 0 2.4cqw;}
/* Largeur fixe et retour à la ligne standard (pas de balance) : reproductible à l'identique dans le fichier d'impression */
.b-quote{font-family:var(--f-s);font-style:italic;font-size:2.65cqw;line-height:1.45;width:40cqw;max-width:40cqw;}
.b-quote.long{font-size:2.2cqw;}
.b-src{font-family:var(--f-d);font-size:1.45cqw;letter-spacing:.16em;text-transform:uppercase;margin-top:1.8cqw;}
.b-name{font-family:var(--f-d);font-weight:700;font-size:2.4cqw;letter-spacing:.22em;padding-left:.22em;margin-top:3cqw;}

/* Grain jersey : visible seulement dans la loupe (à taille normale il crée un moiré) */
.l-tex{inset:0;background:url(/img/jersey.jpg) 0 0/22% auto repeat;
  mix-blend-mode:screen;filter:brightness(.28) contrast(2.1);opacity:calc(.65 * var(--texk,0));}
.mock.light .l-tex{mix-blend-mode:multiply;filter:brightness(1.04) contrast(1.35);opacity:calc(.26 * var(--texk,0));}

/* Loupe */
.mock.zooming{cursor:none;}
.loupe{position:absolute;left:0;top:0;width:200px;height:200px;border-radius:50%;overflow:hidden;
  pointer-events:none;z-index:5;background:var(--bg);opacity:0;transform:scale(.55);
  transition:opacity .22s ease,transform .32s cubic-bezier(.2,1.4,.4,1);
  box-shadow:0 22px 60px rgba(0,0,0,.65),0 0 0 1.5px rgba(238,234,222,.6),0 0 0 6px rgba(11,11,15,.35);}
.mock.zooming .loupe{opacity:1;transform:scale(1);}
.loupe-inner{position:absolute;left:0;top:0;container-type:inline-size;--texk:2.6;}
.loupe-inner .mock-shadow{display:none;}
.loupe-inner .l-tex{background-size:30% auto;}
.loupe-glass{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.2),rgba(255,255,255,0) 38%),
             radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 72%,rgba(0,0,0,.14) 100%);}

@media (prefers-reduced-motion:reduce){.mock-tilt{transform:none!important;transition:none;}}