/* ==========================================================================
   EFFETS 3D — alphamtldesign inc.
   Actif seulement quand effets-3d.js ajoute la classe .fx3d sur <html>.
   Sans JavaScript, ou avec « réduire les animations », le site reste statique.
   ========================================================================== */

/* --- Scène 3D du hero (canvas injecté par le script) -------------------- */
.fx3d .hero-3d-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.fx3d .hero-3d-canvas.is-ready{opacity:1}
.fx3d .hero:after{content:"";position:absolute;inset:auto 0 0 0;height:160px;z-index:1;pointer-events:none;background:linear-gradient(to bottom,transparent,rgba(4,10,16,.55))}

/* --- Carrousel 3D des produits ------------------------------------------ */
.fx3d .hero-studio{isolation:isolate}
.fx3d .studio-panel{z-index:3}
.fx-orbit{position:absolute;inset:0;pointer-events:none}
.fx-item{position:absolute;left:0;top:0;isolation:isolate;will-change:transform,filter;transform-origin:50% 50%}
.fx-view{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .22s}
.fx-view.on{opacity:1}
.fx-ink{position:absolute;inset:0;background:var(--ink,#1687ff);mix-blend-mode:multiply;opacity:.94;
  -webkit-mask:var(--mask) center/contain no-repeat;mask:var(--mask) center/contain no-repeat;clip-path:inset(0 0 100% 0)}
.fx-item.printed .fx-ink{animation:fx-print 1.1s cubic-bezier(.55,0,.3,1) forwards}
.fx-scan{position:absolute;left:4%;right:4%;top:0;height:2px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,transparent,#fff 20%,#fff 80%,transparent);box-shadow:0 0 12px 3px rgba(22,135,255,.85),0 0 30px 6px rgba(236,0,140,.35)}
.fx-item.printed .fx-scan{animation:fx-scan 1.1s cubic-bezier(.55,0,.3,1) forwards}
/* « Votre logo ici » : apparaît une fois l'article imprimé */
.fx-logo{position:absolute;z-index:2;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.fx-logo svg{display:block;width:100%;height:auto}
.fx-item.printed .fx-logo.ok{opacity:1;transform:translate(-50%,-50%) scale(1);transition:opacity .4s .95s,transform .5s cubic-bezier(.3,1.6,.5,1) .95s}
@keyframes fx-print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fx-scan{0%{top:0;opacity:0}10%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}

/* --- Panneau studio en profondeur --------------------------------------- */
.fx3d .hero-studio{perspective:1300px;perspective-origin:50% 40%}
.fx3d .studio-panel{
  transform-style:preserve-3d;
  -webkit-backdrop-filter:none;backdrop-filter:none; /* le flou aplatit la 3D */
  background:linear-gradient(145deg,rgba(31,68,99,.94),rgba(7,17,29,.96));
  transform:rotateX(var(--srx,0deg)) rotateY(var(--sry,0deg)) translateY(var(--sty,0px));
  will-change:transform
}
.fx3d .studio-top{transform:translateZ(18px)}
.fx3d .production-card,.fx3d .studio-badge{transition:box-shadow .3s}
.fx3d .production-card.main{transform:translateZ(55px)}
.fx3d .production-card.mini.left{transform:translateZ(90px)}
.fx3d .production-card.mini.right{transform:translateZ(120px)}
.fx3d .studio-badge{transform:translateZ(150px) rotate(3deg)}
.fx3d .studio-panel:before{ /* reflet qui suit la souris */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(520px circle at var(--gx,70%) var(--gy,20%),rgba(143,200,255,.20),transparent 60%);
  transform:translateZ(1px)
}
.fx3d .live-dot:before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#39d98a;box-shadow:0 0 0 0 rgba(57,217,138,.6);animation:fx3d-pulse 1.8s infinite;vertical-align:1px}
@keyframes fx3d-pulse{70%{box-shadow:0 0 0 9px rgba(57,217,138,0)}100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}

/* --- Entrée du hero ------------------------------------------------------ */
.fx3d .hero-copy>*{opacity:0;transform:translateY(34px) rotateX(-28deg);transform-origin:50% 100%;animation:fx3d-rise .95s cubic-bezier(.2,.75,.2,1) forwards}
.fx3d .hero-copy{perspective:900px}
.fx3d .hero-copy>*:nth-child(1){animation-delay:.05s}
.fx3d .hero-copy>*:nth-child(2){animation-delay:.16s}
.fx3d .hero-copy>*:nth-child(3){animation-delay:.3s}
.fx3d .hero-copy>*:nth-child(4){animation-delay:.42s}
.fx3d .hero-copy>*:nth-child(5){animation-delay:.54s}
.fx3d .hero-studio{opacity:0;animation:fx3d-studio 1.3s cubic-bezier(.2,.75,.2,1) .25s forwards}
@keyframes fx3d-rise{to{opacity:1;transform:none}}
@keyframes fx3d-studio{from{opacity:0;transform:translateX(60px) rotateY(-24deg)}to{opacity:1;transform:none}}

/* --- Apparition au défilement ------------------------------------------- */
.fx3d .r3d{opacity:0;transform:perspective(1000px) translateY(46px) rotateX(16deg) scale(.97);transform-origin:50% 0;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.75,.2,1);transition-delay:var(--r3d-delay,0s)}
.fx3d .r3d.r3d-in{opacity:1;transform:none}
.fx3d .r3d-left{transform:perspective(1000px) translateX(-60px) rotateY(18deg)}
.fx3d .r3d-right{transform:perspective(1000px) translateX(60px) rotateY(-18deg)}

/* --- Cartes inclinables -------------------------------------------------- */
.fx3d .tilt3d{transform-style:preserve-3d;will-change:transform}
.fx3d .tilt3d.r3d-in{transition:opacity .8s ease var(--r3d-delay,0s),transform .6s cubic-bezier(.2,.75,.2,1) var(--r3d-delay,0s),box-shadow .3s}
.fx3d .tilt3d.is-tilting{transition:transform .08s linear,box-shadow .3s;box-shadow:0 30px 70px rgba(7,17,29,.18)}
.fx3d .tilt3d>h3,.fx3d .tilt3d>.category-code,.fx3d .tilt3d>.service-number{transform:translateZ(30px)}
.fx3d .tilt3d>a{transform:translateZ(22px)}
.fx3d .tilt3d .product-visual{transform:translateZ(18px)}
.fx3d .tilt3d .tilt3d-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(400px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),transparent 55%);mix-blend-mode:soft-light;z-index:3}
.fx3d .dark-section .tilt3d .tilt3d-glare{background:radial-gradient(400px circle at var(--gx,50%) var(--gy,50%),rgba(121,186,255,.22),transparent 55%);mix-blend-mode:normal}
.fx3d .tilt3d.is-tilting .tilt3d-glare{opacity:1}
.fx3d .service-card,.fx3d .product-card,.fx3d .process-step{position:relative}

/* --- Images qui flottent ------------------------------------------------- */
.fx3d .embroidery-home-media img,.fx3d .software-screen img{transform:perspective(1200px) rotateX(var(--prx,0deg)) rotateY(var(--pry,0deg)) translateY(var(--pty,0px));transition:transform .2s linear;will-change:transform}

/* les éléments qui arrivent de côté ne doivent pas créer de défilement horizontal */
.fx3d main{overflow-x:clip}

/* --- Pages intérieures (Services, Réalisations) ------------------------ */
.fx3d .page-hero{position:relative;overflow:hidden}
.fx3d .page-hero>.container{position:relative;z-index:2}
.fx-stage{position:absolute;z-index:1;top:0;bottom:0;right:max(24px,calc((100% - 1180px)/2));width:min(500px,40%);pointer-events:none}
.fx-stage-real{perspective:1000px;perspective-origin:50% 45%}
.fx-stage-real:after{content:"";position:absolute;left:8%;right:8%;bottom:12%;height:60px;border-radius:50%;background:radial-gradient(closest-side,rgba(22,135,255,.35),transparent);filter:blur(6px)}
.fx-ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.fx-photo{position:absolute;left:0;top:0;box-sizing:border-box;padding:7px;border-radius:14px;background:#ecf3f8;box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 0 1px rgba(143,200,255,.25);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fx-photo img{width:100%;height:100%;object-fit:contain;border-radius:9px;display:block}
.fx-stage-atelier:after{content:"";position:absolute;left:12%;right:12%;bottom:14%;height:46px;border-radius:50%;background:radial-gradient(closest-side,rgba(22,135,255,.3),transparent)}
.fx-center{filter:drop-shadow(0 22px 26px rgba(0,0,0,.45))}
@media(min-width:1100px){
  .fx3d .page-hero.fx-has-stage .container>h1,.fx3d .page-hero.fx-has-stage .container>p{max-width:56%}
}
@media(max-width:1099px){.fx-stage{display:none}}
.fx3d .feature-box,.fx3d .price-note,.fx3d .embroidery-products article{position:relative}
.fx3d .real-carte{position:relative}
.fx3d .real-carte.tilt3d.is-tilting{box-shadow:0 30px 70px rgba(7,17,29,.2)}
.fx3d .real-vue:not([hidden]){animation:fx-fade .35s ease}
.fx3d .real-vue:not([hidden]) figure{animation:fx-zoom3d .6s cubic-bezier(.2,.8,.2,1)}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
@keyframes fx-zoom3d{from{opacity:0;transform:perspective(1200px) rotateX(16deg) translateY(50px) scale(.84)}to{opacity:1;transform:none}}

/* --- Page Contact : carte d'affaires 3D -------------------------------- */
.fx-stage-carte{perspective:1100px}
.fx-carte{position:absolute;left:50%;top:50%;width:min(360px,90%);aspect-ratio:1.75;transform-style:preserve-3d;will-change:transform}
.fx-carte-face{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 0 1px rgba(143,200,255,.25);overflow:hidden}
.fx-carte-recto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(145deg,#ffffff,#dcecff)}
.fx-carte-recto img{width:84%;height:auto;filter:drop-shadow(0 2px 3px rgba(7,17,29,.3))}
.fx-carte-recto span{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#086bc8}
.fx-carte-verso{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:22px 26px;background:linear-gradient(145deg,#0c2033,#07111d);color:#fff}
.fx-carte-verso:before{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;border:2px solid rgba(22,135,255,.5);box-shadow:0 0 30px rgba(22,135,255,.4)}
.fx-carte-verso p{margin:0;display:flex;flex-direction:column;gap:2px}
.fx-carte-verso b{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#79baff}
.fx-carte-verso span{font-size:15px;font-weight:600;white-space:nowrap}
.fx3d .contact-form,.fx3d .contact-card{position:relative}

/* --- Cellulaire : les éléments arrivent par le bas (rien ne sort de l'écran) */
@media (max-width:760px){
  .fx3d .r3d-left,.fx3d .r3d-right{transform:perspective(1000px) translateY(40px) rotateX(12deg)}
}

/* Mobile : moins de profondeur pour garder un rendu propre */
@media (max-width:760px){
  .fx3d .production-card.main{transform:translateZ(30px)}
  .fx3d .production-card.mini.left{transform:translateZ(45px)}
  .fx3d .production-card.mini.right{transform:translateZ(60px)}
}

/* Accessibilité : respect du réglage système */
@media (prefers-reduced-motion:reduce){
  .fx3d .hero-copy>*,.fx3d .hero-studio,.fx3d .r3d{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}
}