/* ---------------------------------------------------------------------------
   Simulateur de scène : le visiteur dépose ses visuels sur les écrans,
   allume les projecteurs et choisit la couleur. Tout est joué par le navigateur.
   --------------------------------------------------------------------------- */
.simulateur{--simu-rgb:255,48,73;--simu-power:.72;--simu-speed:9s;position:relative;isolation:isolate;overflow:hidden;
  padding:70px 5% 78px;background:#06070a;border-top:1px solid var(--line)}
.simulateur:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 0%,rgba(var(--simu-rgb),.12),transparent 60%)}
.simu-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:34px}
.simu-heading h2{font-size:clamp(40px,6.2vw,92px);line-height:.9;letter-spacing:-2.4px;margin-top:16px}
.simu-heading h2 em{font-style:normal;color:rgb(var(--simu-rgb))}
.simu-heading p{max-width:330px;font-size:11px;line-height:1.95;color:#a9adb8}

/* ----------------------------------------------------------------- la scène */
.simu-scene{position:relative;isolation:isolate;aspect-ratio:1.95;min-height:430px;overflow:hidden;border:1px solid #ffffff1f;
  background:radial-gradient(ellipse at 50% 75%,#1a1d29 0,#080a10 58%,#05060a 100%)}
.simu-top{position:absolute;top:18px;left:22px;right:22px;z-index:9;display:flex;justify-content:space-between;
  font-size:7px;letter-spacing:1.6px;color:#9aa0ad}
.simu-top b{color:rgb(var(--simu-rgb));font-weight:600}

/* la structure et les lyres */
.simu-pont{position:absolute;left:4%;right:4%;top:var(--pont-y,50px);height:30px;z-index:5;pointer-events:none;
  transform:perspective(900px) rotateX(13deg);transform-style:preserve-3d}
.simu-pont i{position:absolute;left:0;right:0;display:block}
.simu-pont-fond{top:3px;height:4px;background:linear-gradient(180deg,#2c3340,#171c25);box-shadow:0 0 0 1px #0a0d13}
.simu-pont-face{top:12px;height:5px;background:linear-gradient(180deg,#5b6474,#2a3140 62%,#1b212c);box-shadow:0 1px 0 #0a0d13}
.simu-pont-haut{top:0;height:3px;background:linear-gradient(180deg,#6d7686,#39404e)}
.simu-pont-bas{bottom:0;height:4px;background:linear-gradient(180deg,#4e5663,#20262f)}
.simu-pont-diag{top:4px;height:22px;
  background:repeating-linear-gradient(58deg,transparent 0 13px,#5c6472 13px 15px,transparent 15px 28px),
             repeating-linear-gradient(-58deg,transparent 0 13px,#454c59 13px 15px,transparent 15px 28px);
  opacity:.85}
.simu-tour{position:absolute;top:calc(var(--pont-y,50px) - 6px);bottom:26%;width:16px;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,#1b212c,#4b5362 46%,#20262f),
             repeating-linear-gradient(60deg,transparent 0 11px,#5c647233 11px 13px,transparent 13px 24px);
  box-shadow:0 0 0 1px #0a0d1366}
.simu-tour-g{left:2.5%}.simu-tour-d{right:2.5%}
.simu-lyres{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .45s}
.simu-lyre{position:absolute;top:calc(var(--pont-y,50px) + 16px);left:var(--x);transform:translateX(-50%);transform-style:preserve-3d}
/* le crochet qui tient l'appareil au pont */
.simu-lyre .crochet{display:block;width:9px;height:9px;margin:0 auto;border-radius:2px;
  background:linear-gradient(180deg,#767f8e,#2b313c);box-shadow:0 0 0 1px #0a0d13}
/* l'étrier pivote : la tête et le faisceau suivent */
.simu-lyre .etrier{position:relative;display:block;width:30px;height:12px;margin:0 auto;transform-origin:50% 0;
  animation:simu-balaye var(--simu-speed) var(--d,0s) ease-in-out infinite alternate}
.simu-lyre .etrier:before,.simu-lyre .etrier:after{content:'';position:absolute;top:0;width:4px;height:22px;border-radius:2px;
  background:linear-gradient(180deg,#5d6676,#242a35)}
.simu-lyre .etrier:before{left:0}.simu-lyre .etrier:after{right:0}
/* la tête, inclinée vers la scène */
.simu-lyre .tete{position:absolute;top:5px;left:50%;width:21px;height:24px;transform:translateX(-50%) rotateX(16deg);
  border-radius:5px 5px 7px 7px;background:linear-gradient(90deg,#11161f 0 16%,#49515f 46%,#2a303b 72%,#0f141c);
  box-shadow:0 1px 0 #ffffff1a inset,0 0 0 1px #0a0d13;z-index:2}
.simu-lyre .lentille{position:absolute;left:3px;right:3px;bottom:1px;height:6px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%,#fff,rgba(var(--simu-rgb),.95) 60%,rgba(var(--simu-rgb),.4));
  box-shadow:0 0 14px 3px rgba(var(--simu-rgb),calc(var(--simu-power) * .9))}
.simu-lyre b{position:absolute;top:26px;left:50%;width:150px;height:min(420px,52vh);margin-left:-75px;transform-origin:50% 0;
  clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(var(--simu-rgb),.8),rgba(var(--simu-rgb),.12) 68%,transparent);
  opacity:calc(var(--simu-power) * .8)}
.simu-scene[data-effets~=beams] .simu-lyres{opacity:1}

/* les écrans */
.simu-ecran{position:absolute;z-index:3;overflow:hidden;background:#0a0c12;border:3px solid #10151d;
  box-shadow:0 0 0 1px #ffffff26,0 0 60px rgba(var(--simu-rgb),.16);transition:box-shadow .5s}
.simu-ecran img{width:100%;height:100%;object-fit:cover;display:block}
.simu-ecran:after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),#0006 calc(25% - 1px) 25%),
             repeating-linear-gradient(0deg,transparent 0 3px,#0002 3px 4px)}
.simu-scene{--ecran-l:52%;--ecran-h:46%;--ecran-y:23%;--cote-l:15%;--cote-h:36%;--cote-y:28%;--cote-x:5%;--cote-angle:25deg}
.simu-centre{left:calc(50% - var(--ecran-l) / 2);width:var(--ecran-l);top:var(--ecran-y);height:var(--ecran-h);
  transition:left .6s,width .6s,top .6s,height .6s}
.simu-cote{top:var(--cote-y);width:var(--cote-l);height:var(--cote-h);filter:brightness(.62);
  transition:top .6s,width .6s,height .6s,transform .6s,opacity .4s}
.simu-cote-g{left:var(--cote-x);transform:perspective(620px) rotateY(var(--cote-angle))}
.simu-cote-d{right:var(--cote-x);transform:perspective(620px) rotateY(calc(var(--cote-angle) * -1))}
.simu-scene[data-dispo=unique] .simu-cote{opacity:0;pointer-events:none}
.simu-scene[data-dispo=pano]{--ecran-h:34%;--ecran-y:29%}
.simu-scene[data-dispo=pano] .simu-cote{opacity:0;pointer-events:none}
.simu-scene[data-dispo=triptyque]{--cote-l:calc(var(--ecran-l) * .62);--cote-h:var(--ecran-h);--cote-y:var(--ecran-y);--cote-x:3%;--cote-angle:0deg}
.simu-scene[data-dispo=totems]{--cote-l:7%;--cote-h:52%;--cote-y:19%;--cote-x:4%;--cote-angle:14deg}

/* la rampe de PAR au sol */
.simu-pars{position:absolute;left:14%;right:14%;bottom:19%;height:26px;z-index:5;display:flex;justify-content:space-between;
  align-items:flex-end;pointer-events:none;opacity:0;transition:opacity .45s}
.simu-par{position:relative;width:26px;height:21px;transform:rotate(var(--angle,0deg));transform-origin:50% 100%}
.simu-par i{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:24px;height:17px;border-radius:5px 5px 3px 3px;
  background:linear-gradient(180deg,#272c37,#0d1117);box-shadow:0 0 0 1px #ffffff1f;z-index:2}
.simu-par i:after{content:'';position:absolute;inset:3px 3px 4px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#fff,rgba(var(--simu-rgb),.95) 62%,rgba(var(--simu-rgb),.35));
  box-shadow:0 0 12px 2px rgba(var(--simu-rgb),.7)}
.simu-par b{position:absolute;bottom:14px;left:50%;width:120px;height:min(270px,34vh);margin-left:-60px;
  clip-path:polygon(44% 100%,56% 100%,100% 0,0 0);filter:blur(4px);mix-blend-mode:screen;
  background:linear-gradient(0deg,rgba(var(--simu-rgb),.8),rgba(var(--simu-rgb),.25) 45%,transparent 82%);
  opacity:calc(.2 + var(--simu-power) * .4)}
.simu-scene[data-effets~=par] .simu-pars{opacity:1}

/* les barres de LED */
.simu-barres{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .45s}
.simu-barre{position:absolute;display:flex;gap:3px;padding:2px;overflow:hidden;border-radius:4px;
  background:linear-gradient(180deg,#171b24,#0b0e14);box-shadow:0 0 0 1px #ffffff1f}
.simu-barre-haut{left:9%;right:9%;top:76px;height:13px}
.simu-barre-bas{left:16%;right:16%;bottom:28%;height:12px}
.simu-barre i{flex:0 0 auto;border-radius:50%;
  background:repeating-linear-gradient(45deg,#ffffff0a 0 1px,transparent 1px 3px),radial-gradient(circle at 50% 42%,#262b35,#10131a 72%);
  animation:simu-cob 2.3s linear infinite;animation-delay:calc(var(--i) * -.09s)}
.simu-scene[data-effets~=barres] .simu-barres{opacity:1}

/* les blinders */
.simu-blinders{position:absolute;left:0;right:0;bottom:24%;height:46px;z-index:6;display:flex;justify-content:space-evenly;
  align-items:flex-end;pointer-events:none;opacity:0;transition:opacity .45s}
.simu-blinder{position:relative;width:clamp(48px,6vw,84px);height:38px;border-radius:4px;border:1px solid #ffffff24;
  background:repeating-linear-gradient(90deg,#272c38 0 7px,#151922 7px 14px)}
.simu-blinder:after{content:'';position:absolute;inset:3px;border-radius:3px;
  background:radial-gradient(ellipse at 50% 60%,#fff7e6,#ffc271 52%,#ff9440);opacity:.1;
  animation:simu-blind 3.2s ease-in-out infinite;animation-delay:var(--d,0s)}
.simu-scene[data-effets~=blinders] .simu-blinders{opacity:1}

/* le stroboscope */
.simu-strobe{position:absolute;inset:0;z-index:7;pointer-events:none;background:#eaf2ff;opacity:0;mix-blend-mode:screen}
.simu-scene[data-effets~=strobe] .simu-strobe{animation:simu-strobe .68s steps(1,end) infinite}

/* le wash et la fumée */
.simu-wash{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .5s}
.simu-wash:before,.simu-wash:after{content:'';position:absolute;top:8%;width:62%;height:92%;transform-origin:50% 0;
  background:radial-gradient(ellipse at 50% 0,rgba(var(--simu-rgb),.34),transparent 62%);animation:simu-wash 12s ease-in-out infinite alternate}
.simu-wash:before{left:-12%}.simu-wash:after{right:-12%;animation-delay:-6s}
.simu-scene[data-effets~=wash] .simu-wash{opacity:var(--simu-power)}
.simu-fumee{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .8s;
  background:radial-gradient(ellipse at 30% 80%,#ffffff12,transparent 55%),radial-gradient(ellipse at 70% 70%,#ffffff0e,transparent 52%);
  animation:simu-fumee 18s ease-in-out infinite alternate}
.simu-scene[data-effets~=fumee] .simu-fumee{opacity:1}

/* le sol et le public */
.simu-sol{position:absolute;left:-20%;right:-20%;top:70%;height:80%;z-index:1;transform:perspective(500px) rotateX(58deg);
  transform-origin:50% 0;border-top:1px solid #ffffff33;
  background:linear-gradient(180deg,rgba(var(--simu-rgb),.14),transparent 58%),
             repeating-linear-gradient(90deg,transparent 0 8%,#ffffff08 8% calc(8% + 1px)),
             repeating-linear-gradient(0deg,transparent 0 30px,#ffffff08 30px 31px)}
.simu-public{position:absolute;left:0;right:0;bottom:0;height:16%;z-index:8;pointer-events:none;
  background:linear-gradient(0deg,#04050a 35%,#04050a99 70%,transparent),
             repeating-linear-gradient(90deg,#0b0d14 0 18px,#0f121b 18px 36px);
  mask-image:linear-gradient(0deg,#000 58%,transparent);-webkit-mask-image:linear-gradient(0deg,#000 58%,transparent)}

/* la zone de dépôt par glisser-déposer */
.simu-scene.depot:after{content:attr(data-depot);position:absolute;inset:0;z-index:12;display:grid;place-items:center;
  background:#05070cd9;border:2px dashed rgba(var(--simu-rgb),.8);font:600 12px/1.6 var(--sans);letter-spacing:1.6px;
  text-transform:uppercase;color:#f0f2f7}

/* --------------------------------------------------------------- la console */
.simu-console{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:26px;padding:28px 0 0}
.simu-bloc{display:grid;gap:12px;align-content:start;min-width:0}
.simu-label{display:flex;justify-content:space-between;gap:10px;font-size:7px;letter-spacing:1.4px;color:#888d99;text-transform:uppercase}
.simu-label output{color:rgb(var(--simu-rgb));letter-spacing:0;font-size:9px}
.simu-depot{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;
  border:1px dashed #ffffff33;border-radius:6px;padding:13px 15px;font-size:10px;color:#c5c9d4;transition:border-color .3s,color .3s,background .3s}
.simu-depot:hover,.simu-depot:focus-within{border-color:rgba(var(--simu-rgb),.8);color:#fff;background:rgba(var(--simu-rgb),.07)}
.simu-depot svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.4;flex:0 0 auto}
.simu-effets,.simu-couleurs,.simu-dispos{display:flex;flex-wrap:wrap;gap:6px}
.simu-effets button,.simu-dispos button{border:1px solid #ffffff29;border-radius:30px;padding:9px 13px;font-size:9px;color:#bfc3cf;
  transition:background .25s,border-color .25s,color .25s}
.simu-effets button[aria-pressed=true],.simu-dispos button[aria-pressed=true]{background:rgba(var(--simu-rgb),.14);border-color:rgba(var(--simu-rgb),.6);color:#fff}
.simu-effets button:hover,.simu-dispos button:hover{border-color:#bacbf2;color:#fff}
.simu-couleurs button{width:28px;height:28px;border-radius:50%;border:1px solid #ffffff2e;background:rgb(var(--teinte));
  transition:transform .25s,box-shadow .25s}
.simu-couleurs button[aria-pressed=true]{transform:scale(1.18);box-shadow:0 0 0 2px #0a0c12,0 0 0 3px rgb(var(--teinte))}
.simu-couleurs button.arc{background:conic-gradient(from 0deg,#ff3049,#ffb547,#5de08a,#49b9ff,#9b6bff,#ff3049)}
.simu-intensite{width:100%;height:24px;margin:0;accent-color:rgb(var(--simu-rgb));cursor:pointer}
.simu-actions{display:flex;gap:8px;flex-wrap:wrap}
.simu-actions button{border:1px solid #ffffff29;border-radius:30px;padding:10px 14px;font-size:9px;color:#bfc3cf;min-height:38px}
.simu-actions button:hover{border-color:#bacbf2;color:#fff}
.simu-pied{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:26px;margin-top:26px;
  border-top:1px solid var(--line);font-size:8px;letter-spacing:1.4px;color:#7d8290;text-transform:uppercase}
.simu-pied .underlink{font-size:10px;color:#e7e9ef;text-transform:none;letter-spacing:0}

/* couleurs changeantes : chaque appareil balaie le spectre à son rythme */
.simu-scene.arc-en-ciel .simu-lyre b,.simu-scene.arc-en-ciel .simu-par i:after,
.simu-scene.arc-en-ciel .simu-par b,.simu-scene.arc-en-ciel .simu-wash:before,.simu-scene.arc-en-ciel .simu-wash:after{
  animation-name:simu-teinte,simu-balaye;animation-duration:12s,var(--simu-speed);animation-timing-function:linear,ease-in-out;
  animation-iteration-count:infinite,infinite;animation-direction:normal,alternate}
.simu-scene.arc-en-ciel .simu-par i:after{animation:simu-teinte 12s linear infinite;animation-delay:var(--d,0s)}
.simu-scene.arc-en-ciel .simu-par b{animation:simu-teinte-flou 12s linear infinite;animation-delay:var(--d,0s)}
.simu-scene.arc-en-ciel .simu-barre i{filter:hue-rotate(calc(var(--i) * 24deg))}

@keyframes simu-balaye{from{transform:rotate(var(--a,-20deg))}to{transform:rotate(var(--b,22deg))}}
@keyframes simu-wash{from{transform:rotate(-12deg) scaleX(.92)}to{transform:rotate(13deg) scaleX(1.12)}}
@keyframes simu-fumee{from{transform:translate3d(-2%,0,0) scale(1.02)}to{transform:translate3d(3%,-2%,0) scale(1.1)}}
@keyframes simu-teinte{from{filter:hue-rotate(0deg) saturate(1.15)}to{filter:hue-rotate(360deg) saturate(1.15)}}
@keyframes simu-teinte-flou{from{filter:blur(4px) hue-rotate(0deg)}to{filter:blur(4px) hue-rotate(360deg)}}
@keyframes simu-strobe{0%,7%{opacity:calc(var(--simu-power) * .8)}8%,22%{opacity:0}23%,28%{opacity:calc(var(--simu-power) * .6)}29%,100%{opacity:0}}
@keyframes simu-blind{0%,58%{opacity:.1}66%{opacity:1}73%{opacity:.22}80%{opacity:.9}100%{opacity:.1}}
@keyframes simu-cob{0%,70%{background:radial-gradient(circle at 50% 42%,#262b35,#10131a 72%);box-shadow:none}
  80%{background:radial-gradient(circle at 50% 42%,#fff7e6,rgba(var(--simu-rgb),.95) 55%,rgba(var(--simu-rgb),.4));box-shadow:0 0 16px 3px rgba(var(--simu-rgb),.8)}
  100%{background:radial-gradient(circle at 50% 42%,#262b35,#10131a 72%);box-shadow:none}}

.simulateur.is-paused *,.simulateur.is-offscreen *,.motion-paused .simulateur *{animation-play-state:paused!important}

@media(max-width:820px){
  .simulateur{padding:46px 7% 52px}
  .simu-heading{display:block}
  .simu-heading h2{font-size:11.5vw;margin-top:14px}
  .simu-heading p{max-width:none;margin-top:16px}
  .simu-scene{aspect-ratio:auto;min-height:340px;margin:0 -3%}
  .simu-centre{left:17%;right:17%;top:26%;height:38%}
  .simu-cote{width:13%;top:30%;height:30%}
  .simu-truss{top:42px}.simu-lyre{top:48px}
  .simu-barre-haut{top:58px;height:9px}.simu-barre-bas{bottom:31%;height:9px}
  .simu-pars{bottom:22%;height:20px}.simu-par{width:18px;height:15px}
  .simu-par i{width:17px;height:12px}.simu-par b{width:84px;margin-left:-42px;bottom:10px}
  .simu-blinders{bottom:27%;height:32px}.simu-blinder{height:26px}
  .simu-console{gap:22px}
}
@media(prefers-reduced-motion:reduce){.simulateur *{animation:none!important}}