/* ---------------------------------------------------------------------------
   Le mur d'images : trois rangées de photographies qui défilent en continu,
   posées sur un plan incliné — la vision d'un mur d'écrans vu de biais.
   --------------------------------------------------------------------------- */
.mur{position:relative;isolation:isolate;overflow:hidden;padding:64px 0 70px;background:#07080b;border-top:1px solid var(--line)}
.mur:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 0%,#ff30491f,transparent 62%)}
.mur-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;padding:0 5%;margin-bottom:34px}
.mur-heading h2{font-size:clamp(40px,6vw,86px);line-height:.92;letter-spacing:-2px;margin-top:16px}
.mur-heading h2 em{font-style:normal;color:var(--red)}
.mur-heading p{max-width:300px;font-size:11px;line-height:1.9;color:#a9adb8}

/* la scène inclinée */
.mur-scene{position:relative;perspective:1400px;perspective-origin:50% 42%;padding:10px 0 22px;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mur-plan{display:grid;gap:clamp(10px,1.1vw,18px);transform:rotateX(11deg) rotateZ(-1.2deg);transform-style:preserve-3d}
.mur-rangee{display:flex;gap:clamp(10px,1.1vw,18px);width:max-content;will-change:transform;
  animation:mur-defile var(--duree,74s) linear infinite}
.mur-rangee:nth-child(2){animation-direction:reverse;animation-duration:var(--duree2,92s)}
.mur-rangee:nth-child(3){animation-duration:var(--duree3,64s)}
.mur-vignette{position:relative;flex:0 0 auto;width:clamp(150px,17vw,270px);aspect-ratio:4/3;padding:0;overflow:hidden;
  border:1px solid #ffffff1a;background:#101217;cursor:pointer;
  box-shadow:0 18px 40px #00000073;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s,border-color .4s}
.mur-vignette img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) brightness(.78);transition:filter .5s,transform .9s}
.mur-vignette:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#07080bbf,transparent 58%);opacity:.9;transition:opacity .4s}
.mur-vignette b{position:absolute;left:12px;bottom:10px;z-index:2;font:600 7px/1.6 var(--sans);letter-spacing:1.6px;text-transform:uppercase;
  color:#e7e9ef;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.mur-vignette:hover,.mur-vignette:focus-visible{transform:translateZ(60px) scale(1.04);border-color:#ff30497a;box-shadow:0 26px 60px #000000a6,0 0 0 1px #ff304940}
.mur-vignette:hover img,.mur-vignette:focus-visible img{filter:saturate(1.05) brightness(1);transform:scale(1.05)}
.mur-vignette:hover:after,.mur-vignette:focus-visible:after{opacity:.55}
.mur-vignette:hover b,.mur-vignette:focus-visible b{opacity:1;transform:none}

/* la ligne de balayage, comme sur un mur de LED */
.mur-scan{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,#ff304926 48%,#ffffff14 50%,#ff304926 52%,transparent);
  width:42%;animation:mur-scan 11s linear infinite}

.mur-pied{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:24px 5% 0;font-size:8px;letter-spacing:1.5px;color:#7d8290;text-transform:uppercase}
.mur-pied .underlink{font-size:9px;color:#dcdfe6;text-transform:none;letter-spacing:0}

@keyframes mur-defile{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes mur-scan{from{transform:translateX(-120%)}to{transform:translateX(340%)}}

/* une rangée survolée ralentit, la section en pause s'arrête */
.mur-rangee:hover,.mur-rangee:focus-within{animation-play-state:paused}
.mur.is-offscreen .mur-rangee,.mur.is-offscreen .mur-scan,
.motion-paused .mur-rangee,.motion-paused .mur-scan{animation-play-state:paused}

@media(max-width:760px){
  .mur{padding:40px 0 46px}
  .mur-heading{padding:0 7%;display:block}
  .mur-heading h2{font-size:11vw;margin-top:14px}
  .mur-heading p{max-width:none;margin-top:16px;font-size:10px}
  .mur-plan{transform:rotateX(7deg)}
  .mur-vignette{width:44vw}
  .mur-pied{padding:18px 7% 0;font-size:7px}
}
@media(prefers-reduced-motion:reduce){
  .mur-rangee{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .mur-scan{display:none}
  .mur-plan{transform:none}
}