/* ============================================================
   Changement de dimension
   Un voile aux couleurs de la destination s'ouvre depuis le point
   cliqué, la page suivante se peint dessous, puis le voile se
   retire. Sans JavaScript, les liens restent des liens.
   ============================================================ */
.dim-voile{position:fixed;inset:0;z-index:9998;pointer-events:none;background:var(--dim-couleur,#111)}
.dim-voile--projet,.dim-voile--retour{
  clip-path:circle(0px at var(--dim-x,50%) var(--dim-y,50%));
  transition:clip-path .62s cubic-bezier(.7,0,.3,1);
}
.dim-voile--projet.dim-voile--ouvert,.dim-voile--retour.dim-voile--ouvert{clip-path:circle(165vmax at var(--dim-x,50%) var(--dim-y,50%))}
.dim-voile--design{transform:translateX(-101%);transition:transform .58s cubic-bezier(.7,0,.3,1)}
.dim-voile--design.dim-voile--ouvert{transform:none}

/* à l'arrivée, le voile est posé avant le premier rendu, puis se retire */
html[data-arrivee]::before{content:"";position:fixed;inset:0;z-index:9999;background:var(--dim-couleur,#111);pointer-events:none}
html[data-arrivee="projet"].dim-sortie::before{animation:dim-iris .8s cubic-bezier(.7,0,.3,1) forwards}
html[data-arrivee="retour"].dim-sortie::before{animation:dim-iris-gauche .8s cubic-bezier(.7,0,.3,1) forwards}
html[data-arrivee="design"].dim-sortie::before{animation:dim-glisse .62s cubic-bezier(.7,0,.3,1) forwards}
html[data-arrivee="fusion"].dim-sortie::before{animation:dim-pouf .9s cubic-bezier(.6,0,.2,1) forwards}
@keyframes dim-pouf{from{clip-path:circle(165vmax at 50% 50%)}to{clip-path:circle(0 at 50% 50%)}}
@keyframes dim-iris{from{clip-path:circle(165vmax at 72% 38%)}to{clip-path:circle(0 at 72% 38%)}}
@keyframes dim-iris-gauche{from{clip-path:circle(165vmax at 22% 30%)}to{clip-path:circle(0 at 22% 30%)}}
@keyframes dim-glisse{to{transform:translateX(101%)}}
html[data-arrivee] .section--hero .wrap{animation:dim-monter .9s .25s cubic-bezier(.2,.8,.2,1) both}
@keyframes dim-monter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html[data-arrivee]::before{display:none}
  html[data-arrivee] .section--hero .wrap{animation:none}
  .dim-voile{display:none}
}