/* Vision Plus — panorama des métiers (page « Campagne ADS », sous « Une communication adaptée à chaque activité »).
   Image 3D pleine largeur (assets/sante/metiers-*.webp) et couches légères par-dessus :
   voile « projecteur » et halo sur l'univers survolé, lignes de lumière qui circulent (SVG), centre qui respire,
   zones de survol (SVG), étiquettes, poussières de lumière.
   Parallaxe à la souris, bascule au défilement, apparition, carrousel mobile : assets/pages/metiers.js.
   Positions générées par outils/metiers/generer_panorama.py (coordonnées de l'image 1983 x 793).
   Animations : transform et opacity uniquement (sauf les impulsions SVG), arrêtées hors de l'écran. */

@property --hx{syntax:"<percentage>";inherits:false;initial-value:50%}
@property --hy{syntax:"<percentage>";inherits:false;initial-value:50%}
@property --hw{syntax:"<percentage>";inherits:false;initial-value:20%}
@property --hh{syntax:"<percentage>";inherits:false;initial-value:30%}

.mt{position:relative;width:100vw;margin:clamp(4px,1vw,14px) calc(50% - 50vw) clamp(40px,5vw,72px)}
/* halo bleu sous la scène : profondeur */
.mt::before{content:"";position:absolute;left:8%;right:8%;top:22%;bottom:-6%;pointer-events:none;z-index:-1;
  background:radial-gradient(50% 50% at 50% 58%,rgba(30,110,255,.22),rgba(30,110,255,.06) 55%,transparent 75%)}
.mt-view{position:relative;max-width:2400px;margin:0 auto;overflow:hidden;perspective:1700px;perspective-origin:50% 35%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 91%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 91%,transparent);
  mask-composite:intersect}
.mt-rev{perspective:1700px;perspective-origin:50% 40%;transform-origin:50% 70%}
.mt-stage{position:relative;aspect-ratio:1983/793;transform-origin:50% 55%;will-change:transform;
  transform:translate3d(calc(var(--mx,0) * -9px),calc(var(--my,0) * -6px + var(--sy,0) * -22px),0)
            rotateX(calc(var(--my,0) * 1.5deg + var(--sy,0) * -3.2deg)) rotateY(calc(var(--mx,0) * -2.1deg)) scale(1.02)}
.mt-stage>picture{position:absolute;inset:0;display:block}
.mt-img{display:block;width:100%;height:100%;background:#0A1E40}
.mt-dim,.mt-halo,.mt-flow,.mt-hit,.mt-core,.mt-tags,.mt-dust{position:absolute}

/* ---------- apparition ---------- */
.mt-js .mt-rev{opacity:0;transform:translateY(46px) rotateX(10deg) scale(.96);transition:opacity 1.1s ease,transform 1.6s cubic-bezier(.16,.8,.2,1)}
.mt-js.is-in .mt-rev{opacity:1;transform:none}

/* ---------- projecteur et halo sur l'univers actif ---------- */
.mt-dim{inset:0;pointer-events:none;background:rgba(2,7,18,.4);opacity:0;
  -webkit-mask-image:radial-gradient(var(--hw) var(--hh) at var(--hx) var(--hy),transparent 58%,#000 100%);
  mask-image:radial-gradient(var(--hw) var(--hh) at var(--hx) var(--hy),transparent 58%,#000 100%);
  transition:opacity .5s ease,--hx .65s cubic-bezier(.3,.7,.2,1),--hy .65s cubic-bezier(.3,.7,.2,1),--hw .65s ease,--hh .65s ease}
.mt[data-on] .mt-dim{opacity:1}
.mt-halo{left:var(--x);top:var(--y);width:var(--w);height:var(--h);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(140,210,255,.3),rgba(40,140,255,.12) 58%,rgba(40,140,255,0));mix-blend-mode:screen;
  opacity:0;transition:opacity .45s ease}
.mt-halo.is-on{opacity:1}

/* ---------- lignes de lumière ---------- */
.mt-flow,.mt-hit{inset:0;width:100%;height:100%}
.mt-flow{pointer-events:none;overflow:visible}
.mt-flow g{transition:opacity .45s ease}
.mt-flow path{fill:none;stroke-linecap:round}
.mt-ln{stroke:#8FD0FF;stroke-width:2.2;opacity:.34;stroke-dasharray:100 100;stroke-dashoffset:0;transition:opacity .45s ease,stroke-width .45s ease}
.mt-js .mt-ln{stroke-dashoffset:100}
.mt-js.is-in .mt-ln{stroke-dashoffset:0;transition:stroke-dashoffset 1.9s cubic-bezier(.4,.1,.2,1) calc(.45s + var(--n) * .13s),opacity .45s ease,stroke-width .45s ease}
.mt-pg,.mt-pc{stroke-dasharray:5 400;stroke-dashoffset:5;opacity:0}
.mt-pg{stroke:#3AA2FF;stroke-width:11;stroke-opacity:.42}
.mt-pc{stroke:#F2FBFF;stroke-width:3.4}
.mt.is-run .mt-pg,.mt.is-run .mt-pc{animation:mt-go var(--t) linear var(--d) infinite}
.mt.is-run .mt-in{animation-name:mt-back;animation-delay:calc(var(--d) + var(--t) * .5)}
@keyframes mt-go{0%{stroke-dashoffset:5;opacity:0}6%{opacity:1}60%{opacity:1}68%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes mt-back{0%{stroke-dashoffset:-100;opacity:0}6%{opacity:1}60%{opacity:1}68%,100%{stroke-dashoffset:5;opacity:0}}
.mt[data-on] .mt-flow g{opacity:.4}
.mt[data-on] .mt-flow g.is-on,.mt[data-on="hub"] .mt-flow g{opacity:1}
.mt-flow g.is-on .mt-ln,.mt[data-on="hub"] .mt-ln{opacity:.95;stroke-width:3.4}

/* ---------- centre de communication : respiration et onde ---------- */
.mt-core{left:49.42%;top:42.6%;width:8.6%;aspect-ratio:2.6;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:.7;
  background:radial-gradient(closest-side,rgba(170,225,255,.55),rgba(60,160,255,.22) 50%,rgba(60,160,255,0))}
.mt-core::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;box-shadow:0 0 0 2px rgba(150,215,255,.7),0 0 14px rgba(60,160,255,.8)}
.mt.is-run .mt-core{animation:mt-breath 4s ease-in-out infinite}
.mt.is-run .mt-core::after{animation:mt-ripple 4s ease-out infinite}
@keyframes mt-breath{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes mt-ripple{0%{transform:scale(.55);opacity:.9}70%,100%{transform:scale(1.75);opacity:0}}

/* ---------- zones de survol ---------- */
.mt-hit{z-index:1}
.mt-hit polygon{fill:transparent;pointer-events:all;cursor:pointer}

/* ---------- étiquettes ---------- */
.mt-tags{inset:0;margin:0;padding:0;list-style:none;pointer-events:none;z-index:2;
  transform:translate3d(calc(var(--mx,0) * 8px),calc(var(--my,0) * 6px),0)}
.mt-tags li{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%)}
.mt-tag{pointer-events:auto;display:inline-flex;align-items:center;gap:.55em;margin:0;padding:.5em 1em .5em .82em;border-radius:999px;white-space:nowrap;cursor:pointer;
  font:600 clamp(.74rem,.95vw,.98rem)/1 var(--f-display);letter-spacing:.01em;color:#fff;
  background:linear-gradient(180deg,rgba(18,40,74,.9),rgba(6,14,30,.92));border:1px solid rgba(150,210,255,.62);
  box-shadow:0 0 0 1px rgba(30,120,255,.2),0 0 18px rgba(40,150,255,.5),0 12px 26px -14px rgba(0,0,0,.9);
  opacity:0;transform:translateY(8px) scale(.94);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.mt-tag::before{content:"";flex:none;width:.5em;height:.5em;border-radius:50%;background:#A6E0FF;box-shadow:0 0 8px #3FA8FF,0 0 2px #fff}
.mt-tag-hub{font-size:clamp(.68rem,.82vw,.84rem);color:#D8EEFF}
.mt-tag.is-on,.mt-tag:focus-visible{opacity:1;transform:none}
.mt-tag:focus-visible{outline:2px solid #BCE4FF;outline-offset:3px}
.mt.is-intro .mt-tag{animation:mt-intro 2.6s ease calc(var(--i) * .16s) both}
.mt.is-intro .mt-tag.is-on,.mt.is-intro .mt-tag:focus-visible{animation:none}
@keyframes mt-intro{0%{opacity:0;transform:translateY(8px) scale(.94)}18%,68%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}

/* ---------- poussières de lumière (premier plan) ---------- */
.mt-dust{inset:0;pointer-events:none;z-index:3;transform:translate3d(calc(var(--mx,0) * 18px),calc(var(--my,0) * 13px),0)}
.mt-dust i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fff,rgba(120,200,255,.75) 40%,rgba(60,150,255,0) 70%)}
.mt.is-run .mt-dust i{animation:mt-mote var(--t) ease-in-out var(--d) infinite}
@keyframes mt-mote{0%{opacity:0;transform:translateY(6px)}30%{opacity:.9}70%{opacity:.55}100%{opacity:0;transform:translateY(-24px)}}

/* ---------- consignes ---------- */
.mt-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px auto 0;padding:0 24px;color:var(--mut);font-size:.84rem;text-align:center}
.mt-hint svg{width:16px;height:16px;flex:none;fill:none;stroke:#9FD3FF;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .mt-hint svg{transform:scaleX(-1)}
.mt-hint-s{display:none}
.mt-cards{display:none}

/* écrans tactiles (tablette) : étiquettes toujours visibles, un appui met l'univers en valeur */
@media (hover:none){
  .mt-hint-h{display:none}
  .mt-tag{opacity:.9;transform:none;font-size:clamp(.66rem,1.5vw,.86rem);padding:.62em .9em .62em .76em}
  .mt-tag.is-on{opacity:1;border-color:#BCE4FF;box-shadow:0 0 0 1px rgba(60,160,255,.5),0 0 22px rgba(60,170,255,.85)}
  .mt.is-intro .mt-tag{animation:none}
}

/* ---------- téléphone : vue d'ensemble animée + carrousel, un métier par carte ---------- */
@media (max-width:760px){
  .mt{margin-bottom:30px}
  .mt-dim{background:rgba(2,7,18,.52)}
  .mt-view{-webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 93%,transparent)}
  /* la scène pivote au défilement et suit le carrousel (assets/pages/metiers.js) ; marge de recadrage pour ne jamais montrer les bords */
  .mt-stage{transform:translate3d(calc(var(--mx,0) * -7px),calc(var(--sy,0) * -10px),0) rotateX(calc(var(--sy,0) * -3deg)) rotateY(calc(var(--mx,0) * -1.6deg)) scale(1.07)}
  .mt-dust{transform:translate3d(calc(var(--mx,0) * 12px),0,0)}
  .mt-tags,.mt-hint-h{display:none}
  .mt-ln{stroke-width:4}.mt-flow g.is-on .mt-ln{stroke-width:6}
  .mt-pg{stroke-width:22}.mt-pc{stroke-width:7}
  .mt-hint-s{display:flex;margin-top:10px;font-size:.78rem}
  .mt-cards{display:flex;gap:12px;margin:12px 0 0;padding:4px max(var(--m-gap,18px),env(safe-area-inset-left,0px)) 12px;list-style:none;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--m-gap,18px),env(safe-area-inset-left,0px));scrollbar-width:none;overscroll-behavior-x:contain;counter-reset:mt}
  .mt-cards::-webkit-scrollbar{display:none}
  .mt-card{flex:0 0 min(80%,340px);scroll-snap-align:center;counter-increment:mt;position:relative;border-radius:18px;overflow:hidden;
    border:1px solid rgba(150,200,250,.28);background:#071224;
    box-shadow:inset 0 1px 0 rgba(220,240,255,.14),0 0 22px -10px rgba(40,150,255,.6),0 24px 40px -28px rgba(0,0,0,.95);transition:border-color .35s ease,box-shadow .35s ease}
  .mt-card.is-on{border-color:rgba(170,220,255,.8);box-shadow:inset 0 1px 0 rgba(220,240,255,.22),0 0 26px -6px rgba(40,150,255,.85),0 24px 40px -28px rgba(0,0,0,.95)}
  .mt-crop{display:block;aspect-ratio:var(--ar,1.5);background:#0A1E40 url(../sante/metiers-1983.webp) no-repeat;background-size:var(--bs) auto;background-position:var(--bp)}
  .mt-card b{display:flex;align-items:center;gap:10px;padding:12px 16px 14px;font:600 1.02rem/1.2 var(--f-display);color:#fff}
  .mt-card b::before{content:counter(mt,decimal-leading-zero);font:600 .72rem/1 var(--f-display);letter-spacing:.08em;color:#86C4FF}
}

/* ---------- mouvement réduit : scène fixe, lignes allumées, pas d'impulsions ---------- */
@media (prefers-reduced-motion:reduce){
  .mt-stage,.mt-tags,.mt-dust{transform:none!important}
  .mt-js .mt-rev{opacity:1;transform:none;transition:none}
  .mt-js .mt-ln{stroke-dashoffset:0;transition:none}
  .mt-ln{opacity:.6}
  .mt-pg,.mt-pc,.mt-core,.mt-core::after,.mt-dust i,.mt-tag{animation:none!important}
  .mt-dust{display:none}
}