/* Logo animé du cabinet : Ψ doré sur rond bleu, reflet qui traverse de gauche à droite, bordure qui respire.
   Réutilisable partout : <span class="la"><span class="la-mark"></span></span>   (taille : --la-size, 44px par défaut)
   Apparition : classe is-in (le rond grandit depuis un point en une seconde, puis le Ψ doré apparaît pendant une autre seconde) ; disparition : is-out (le Ψ s'efface, puis le rond se réduit en point).
   Sans mouvement si le visiteur a demandé de réduire les animations. Image du logo : /outils/logo-mark.png (même forme que le logo du site). */
.la{--la-size:44px;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;width:var(--la-size);height:var(--la-size);border-radius:50%;
  background:linear-gradient(150deg,#27466E,#16273D);
  border:max(1px,calc(var(--la-size) * .026)) solid rgba(255,255,255,.42);
  box-shadow:0 8px 18px -6px rgba(10,14,22,.5),inset 0 1px 0 rgba(255,255,255,.25);
  animation:la-border 3.6s ease-in-out infinite}
.la-mark{display:block;width:58%;height:58%;
  background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 62%) 130% 0/260% 100% no-repeat,
             linear-gradient(140deg,#FFF8E7 0%,#F3E0A8 26%,#C9A227 60%,#7A5C1E 100%);
  -webkit-mask:url("/outils/logo-mark.png") center/contain no-repeat;mask:url("/outils/logo-mark.png") center/contain no-repeat;
  animation:la-shine 4.8s ease-in-out infinite}
@keyframes la-shine{0%{background-position:130% 0,0 0}55%,100%{background-position:-40% 0,0 0}}
@keyframes la-border{0%,100%{border-color:rgba(255,255,255,.16);box-shadow:0 8px 18px -6px rgba(10,14,22,.5),inset 0 1px 0 rgba(255,255,255,.25),0 0 0 0 rgba(255,255,255,0)}
  50%{border-color:rgba(255,255,255,.78);box-shadow:0 8px 18px -6px rgba(10,14,22,.5),inset 0 1px 0 rgba(255,255,255,.25),0 0 14px 1px rgba(190,210,240,.45)}}
.la.is-in{animation:la-in 1s cubic-bezier(.2,.85,.25,1) both,la-border 3.6s ease-in-out 1s infinite}
.la.is-in .la-mark{animation:la-mark-in 1s ease-out 1s both,la-shine 4.8s ease-in-out 2s infinite}
@keyframes la-in{0%{transform:scale(.04);opacity:0;filter:brightness(3)}30%{opacity:1}75%{transform:scale(1.06);filter:brightness(1.2)}100%{transform:scale(1);opacity:1;filter:none}}
@keyframes la-mark-in{0%{opacity:0;transform:scale(.7);filter:brightness(2.2)}100%{opacity:1;transform:scale(1);filter:none}}
.la.is-out{animation:la-out .7s cubic-bezier(.6,0,.8,.4) .6s both}
.la.is-out .la-mark{animation:la-mark-out .6s ease-in both}
@keyframes la-mark-out{to{opacity:0;transform:scale(.7);filter:brightness(2.2)}}
@keyframes la-out{0%{transform:scale(1);opacity:1;filter:none}35%{transform:scale(1.06);filter:brightness(1.3)}100%{transform:scale(.04);opacity:0;filter:brightness(3)}}
@media (prefers-reduced-motion:reduce){.la,.la-mark,.la.is-in,.la.is-in .la-mark{animation:none}.la::before{opacity:.8}.la-mark{background-position:130% 0,0 0}.la.is-out{opacity:0}}
