/* MF International v2 : les scènes 3D, une par page. */
.exp{position:relative;display:grid;grid-template-columns:minmax(240px,.85fr) minmax(0,1.75fr) minmax(200px,.68fr);align-items:center;gap:12px;padding:30px var(--marge) 78px;min-height:min(calc(100vh - var(--haut)),820px);overflow:hidden;border-bottom:1px solid var(--g2);background:var(--blanc)}
.exp.deux{grid-template-columns:minmax(260px,.9fr) minmax(0,1.3fr)}
[data-page="chemises"] .exp,[data-page="chaussures"] .exp,[data-page="polos"] .exp,[data-page="ensembles"] .exp{grid-template-columns:minmax(210px,.56fr) minmax(0,2fr) minmax(190px,.52fr)}
.exp.deux .exp-fiche{display:none}
.exp-texte{position:relative;z-index:6}
.exp-texte h1{font-stretch:75%;font-weight:500;font-size:clamp(40px,5vw,78px);line-height:.96;letter-spacing:-.015em;margin:16px 0 18px}
.exp-texte h1 b{font-weight:800}
.exp-texte p{max-width:34ch;color:var(--t2);font-size:17px;margin-bottom:24px}
.exp-fiche{position:relative;z-index:6;transition:opacity .3s,transform .4s var(--doux)}
.exp-fiche.sort{opacity:0;transform:translateY(8px)}
.exp-fiche .num{font-size:12px;letter-spacing:.16em;color:var(--g3);font-weight:600}
.exp-fiche h2{font-stretch:75%;font-weight:600;font-size:clamp(22px,2vw,30px);line-height:1.08;margin:10px 0 6px}
.exp-fiche .coul{color:var(--t2);margin-bottom:10px}
.exp-fiche .prix{font-size:17px;font-weight:600;margin-bottom:18px}
.exp-cmd{position:absolute;left:0;right:0;bottom:22px;z-index:7;display:flex;align-items:center;justify-content:center;gap:14px}
.exp.en-pause .barres button.actif i::after{animation-play-state:paused}
.exp button{-webkit-tap-highlight-color:transparent}
.exp.sombre{background:var(--noir);color:var(--blanc);border-bottom-color:#222}
.exp.sombre .exp-texte p,.exp.sombre .exp-fiche .coul{color:#bdbdbd}
.exp.sombre .barres button i{background:#3a3a3a}.exp.sombre .barres button i::after{background:var(--blanc)}
.exp.sombre .btn-pause{border-color:var(--blanc)}
.exp.sombre .btn.plein{background:var(--blanc);color:var(--noir);border-color:var(--blanc)}
.rayon-suite{padding-block:clamp(50px,7vw,96px)}

/* Chemises : le portant */
.portant{position:relative;height:min(64vh,600px);perspective:1300px;perspective-origin:50% 38%}
.tringle{position:absolute;left:-40%;right:-40%;top:5.2%;height:11px;border-radius:6px;background:linear-gradient(#fafafa 0%,#b9bcc1 28%,#5d6066 55%,#a9adb3 78%,#e6e7e9 100%);box-shadow:0 12px 20px rgba(0,0,0,.16);z-index:30}
.rail{position:absolute;inset:0;transform-style:preserve-3d}
.pend{position:absolute;left:50%;top:4%;width:0;height:90%;transform-style:preserve-3d;transform-origin:50% 0;transition:transform 1.05s var(--doux),opacity .6s;cursor:pointer}
.cintre{position:absolute;left:0;top:0;height:100%;aspect-ratio:666/960;transform:translateX(-50%);transform-origin:50% 2%;isolation:isolate;filter:drop-shadow(0 18px 14px rgba(0,0,0,.2))}
.cintre img{width:100%;height:100%}
.cintre .relief{position:absolute;inset:0;mix-blend-mode:screen;opacity:.16;clip-path:inset(15.5% 0 0 0)}
.teinte{position:absolute;inset:0;-webkit-mask-image:url(assets/d/chemise.webp);mask-image:url(assets/d/chemise.webp);-webkit-mask-size:100% 100%;mask-size:100% 100%;mix-blend-mode:multiply;clip-path:inset(15.5% 0 0 0)}
.pend.face .cintre{animation:balancer 1.9s ease-out}
@keyframes balancer{0%{transform:translateX(-50%) rotate(0)}18%{transform:translateX(-50%) rotate(4.5deg)}40%{transform:translateX(-50%) rotate(-3deg)}62%{transform:translateX(-50%) rotate(1.6deg)}82%{transform:translateX(-50%) rotate(-.7deg)}100%{transform:translateX(-50%) rotate(0)}}

/* Polos : l'anneau */
.anneau-scene{position:relative;height:min(64vh,600px)}
.anneau{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 34%}
.buste{position:absolute;left:50%;bottom:16%;width:0;height:78%;transition:transform 1.2s var(--doux),opacity .9s,filter .9s;cursor:pointer}
.buste img{position:absolute;left:0;bottom:0;height:100%;width:auto;max-width:none;transform:translateX(-50%);-webkit-box-reflect:below 2px linear-gradient(transparent 68%,rgba(0,0,0,.22))}
.anneau-sol{position:absolute;left:6%;right:6%;bottom:15.5%;height:1px;background:linear-gradient(90deg,transparent,var(--g2) 20%,var(--g2) 80%,transparent)}

/* Ensembles : les suspendus */
[data-page="ensembles"] .exp{perspective:1300px;perspective-origin:50% 30%}
.suspendus{position:relative;height:min(66vh,620px);transform-style:preserve-3d;transform:rotateY(var(--rx,0deg)) rotateX(var(--ry,0deg));transition:transform .5s ease-out}
.fil{position:absolute;left:50%;top:var(--y);width:0;height:62%;transform:translate3d(var(--x),0,var(--z));transition:transform 1.15s var(--doux),filter .8s,opacity .8s;filter:blur(1.4px) saturate(.75);opacity:.72;cursor:pointer}
.fil::before{content:"";position:absolute;left:0;bottom:calc(100% - 6px);width:1px;height:70vh;background:#b9b9b9}
.balance{position:absolute;left:0;top:0;height:100%;transform:translateX(-50%);transform-origin:50% 0;animation:osciller 5.5s ease-in-out infinite;animation-delay:var(--d)}
.balance img{height:100%;width:auto;max-width:none;filter:drop-shadow(0 20px 16px rgba(0,0,0,.2))}
.fil.face{transform:translate3d(0,14px,210px);filter:none;opacity:1}
@keyframes osciller{0%,100%{transform:translateX(-50%) rotate(-2.2deg)}50%{transform:translateX(-50%) rotate(2.2deg)}}

/* Chaussures : la vitrine */
.vitrine{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:34px 10px;perspective:1100px;padding:8px 0 14px}
.paire{position:relative;aspect-ratio:4/3;display:grid;place-items:end center;cursor:pointer;z-index:1}
.pivot{display:block;width:92%;transition:transform .9s var(--doux),filter .9s;filter:brightness(.42) saturate(.6)}
.pivot img{width:100%;filter:drop-shadow(0 14px 10px rgba(0,0,0,.5))}
.tablette{position:absolute;left:2%;right:2%;bottom:-9px;height:2px;background:linear-gradient(90deg,transparent,#5a5a5a 25%,#5a5a5a 75%,transparent)}
.paire.face{z-index:3}
.paire.face .pivot{filter:none;animation:pivoter 3s ease-in-out infinite alternate}
@keyframes pivoter{0%{transform:translateZ(150px) scale(1.34) rotateY(-28deg)}100%{transform:translateZ(150px) scale(1.34) rotateY(28deg)}}
.faisceau{position:absolute;left:0;top:0;width:0;height:0;transition:transform 1s var(--doux);pointer-events:none;z-index:0}
.faisceau::before{content:"";position:absolute;width:min(46vw,540px);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,255,255,.2),rgba(255,255,255,.06) 55%,transparent)}

/* Accueil : le prisme */
.prisme-scene{position:relative;height:min(66vh,620px);perspective:1700px;display:grid;place-items:center}
.prisme{position:relative;width:min(40vw,500px);height:92%;transform-style:preserve-3d;transition:transform 1.3s var(--doux)}
.face-p{position:absolute;inset:0;display:grid;place-items:center;background:var(--g1);border:1px solid var(--g2);border-radius:20px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:filter .9s}
.face-p:not(.face){filter:brightness(.9)}
.face-p .mot{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-stretch:62%;font-weight:800;font-size:clamp(90px,13vw,210px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px #cfcfcf;white-space:nowrap}
.face-p .objet{position:relative;height:66%;max-width:84%;margin-top:-12%;display:grid;place-items:center;isolation:isolate;filter:drop-shadow(0 24px 18px rgba(0,0,0,.18));transition:transform 1.2s var(--doux)}
.face-p .objet img{max-height:100%;max-width:100%;height:auto;width:auto;grid-area:1/1}
.face-p .objet .teinte{grid-area:1/1;position:absolute;inset:0;mix-blend-mode:multiply}
.face-p .objet .teinte{-webkit-mask-size:100% 100%;mask-size:100% 100%}
.face-p.face .objet{animation:flotter 3s ease-in-out infinite alternate}
@keyframes flotter{0%{transform:translateY(0)}100%{transform:translateY(-12px)}}
.cartel{position:absolute;left:14px;right:14px;bottom:14px;background:var(--blanc);border-radius:12px;padding:14px 16px;display:block}
.cartel b{display:block;font-stretch:75%;font-size:22px;font-weight:600}
.cartel small{color:var(--t2);font-size:13.5px}

/* Commander : le téléphone */
.tel-scene{height:min(68vh,640px);perspective:1400px;display:grid;place-items:center}
.tel{width:min(290px,64vw);aspect-ratio:9/18.6;border-radius:42px;background:#0a0a0a;padding:11px;transform:rotateY(var(--tourne,-20deg)) rotateX(5deg);transition:transform 1.3s var(--doux);box-shadow:0 50px 70px -30px rgba(0,0,0,.45),0 0 0 1.5px #2b2b2b inset}
.tel-ecran{position:relative;height:100%;border-radius:32px;background:var(--blanc);overflow:hidden}
.tel-ecran::before{content:"";position:absolute;left:50%;top:9px;width:78px;height:20px;border-radius:20px;background:#0a0a0a;transform:translateX(-50%);z-index:3}
.ecran{position:absolute;inset:0;padding:46px 18px 20px;display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--noir);transform:translateX(100%);opacity:0;transition:transform .75s var(--doux),opacity .5s}
.ecran.actif{transform:none;opacity:1}
.ecran.passe{transform:translateX(-100%)}
.ecran small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t2);font-weight:600}
.e-photo{background:var(--g1);border-radius:14px;height:46%;display:grid;place-items:end center;overflow:hidden}
.e-photo img{height:96%}
.e-pastilles{display:flex;gap:7px}.e-pastilles i{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.2)}
.e-btn{margin-top:auto;background:var(--noir);color:var(--blanc);border-radius:8px;text-align:center;padding:12px;font-weight:600}
.e-ligne{display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--g2);padding-bottom:12px}
.e-ligne img{width:52px;aspect-ratio:4/5;object-fit:cover;border-radius:8px}
.e-ligne span{color:var(--t2);font-size:12px}.e-ligne b{display:block;color:var(--noir);font-size:13px}
.e-total{display:flex;justify-content:space-between;font-size:15px}
.e-gros{font-size:26px;font-stretch:75%}
.e-code{display:flex;gap:10px;margin-top:6px}
.e-code i{width:42px;height:48px;border:1.5px solid var(--g2);border-radius:10px;position:relative}
.ecran.actif .e-code i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--noir);opacity:0;animation:point .3s forwards}
.ecran.actif .e-code i:nth-child(1)::after{animation-delay:.7s}.ecran.actif .e-code i:nth-child(2)::after{animation-delay:1.1s}.ecran.actif .e-code i:nth-child(3)::after{animation-delay:1.5s}.ecran.actif .e-code i:nth-child(4)::after{animation-delay:1.9s}
@keyframes point{to{opacity:1}}
.e-ok{width:54px;height:54px;border-radius:50%;background:var(--noir);color:var(--blanc);display:grid;place-items:center;font-size:24px;margin:14px auto 4px}
.ecran .e-ok+b{text-align:center;font-size:16px}
.e-suivi{list-style:none;margin-top:10px}
.e-suivi li{position:relative;padding:9px 0 9px 26px;color:var(--g3);border-left:2px solid var(--g2);margin-left:6px}
.e-suivi li::before{content:"";position:absolute;left:-7px;top:13px;width:12px;height:12px;border-radius:50%;background:var(--g2)}
.e-suivi li.f{color:var(--noir);font-weight:600;border-left-color:var(--noir)}.e-suivi li.f::before{background:var(--noir)}
.etapes-liste{list-style:none;counter-reset:e;margin-top:6px;max-width:440px}
.etapes-liste li{position:relative;counter-increment:e;padding:14px 0 14px 62px;border-top:1px solid var(--g2);cursor:pointer;opacity:.45;transition:opacity .5s}
.etapes-liste li::before{content:"0" counter(e);position:absolute;left:0;top:10px;font-stretch:62%;font-weight:800;font-size:38px;line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--noir)}
.etapes-liste li.actif{opacity:1}.etapes-liste li.actif::before{color:var(--noir)}
.etapes-liste b{display:block;font-stretch:75%;font-size:21px;font-weight:600}
.etapes-liste span{color:var(--t2);font-size:15px}

@media(max-width:980px){
  .exp,.exp.deux{grid-template-columns:1fr;gap:4px;padding:24px var(--marge) 76px;min-height:0}
  .exp-texte h1{margin:10px 0 10px}.exp-texte p{margin-bottom:10px;font-size:16px}
  .portant,.anneau-scene,.suspendus,.prisme-scene{height:50vh;min-height:330px}
  .exp-fiche{display:grid;grid-template-columns:1fr auto;align-items:end;gap:2px 14px;padding-top:8px}
  .exp-fiche .num,.exp-fiche h2,.exp-fiche .coul,.exp-fiche .prix{grid-column:1}.exp-fiche .prix{margin:0}
  .exp-fiche .btn{grid-column:2;grid-row:2/5;min-height:46px;padding:0 16px}
  .exp-fiche h2{font-size:20px}
  .vitrine{grid-template-columns:repeat(2,1fr);gap:28px 8px;margin-top:8px}
  .prisme{width:min(76vw,420px)}
  .tel-scene{height:auto;padding:14px 0 6px}.tel{width:min(250px,60vw)}
  .barres button{width:14px}
  [data-page="ensembles"] .fil{height:54%}
  [data-page="chemises"] .exp,[data-page="chaussures"] .exp,[data-page="polos"] .exp,[data-page="ensembles"] .exp{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.balance,.paire.face .pivot,.face-p.face .objet,.pend.face .cintre{animation:none!important}.paire.face .pivot{transform:translateZ(130px) scale(1.2)}}