/* Logo SimECOS animé (stéthoscope + mot-symbole + tracé ECG relié au pavillon).
   Usage : <div class="sxl" style="--h:110px"> ... </div>  (voir LogoAnim dans index.html)
   Variante fond clair : ajouter la classe .sxl-light (images -navy). Le logo (stétho + mot + tracé) apparaît UNE SEULE FOIS (10,5 s, état final conservé) ;
   seul le battement sarcelle de l'ECG tourne ensuite en boucle (sxlBeat, 4,8 s). Vitesse = ÷1,5 par rapport à la v1 (choix d'Arthur 10/10/2026).
   Trait vert : dasharray 70 2000 (écart > longueur du tracé) — avec 70 930 le motif se répétait et, en fin de boucle,
   le trait réapparaissait au début ET à la fin du tracé (« il revient en arrière »). Désactivé si prefers-reduced-motion.
   Ne pas remettre « infinite » sur les animations d'apparition : le logo disparaissait et se redessinait toutes les 7 s. */
.sxl{--h:110px;--sxl-teal:#2FD3B3;--sxl-base:rgba(140,163,190,.4);position:relative;width:fit-content;max-width:100%;margin:0 auto calc(var(--h)*.22)}
.sxl-light{--sxl-teal:#2E9D88;--sxl-base:rgba(23,58,94,.34)}
.sxl-row{display:flex;align-items:center;gap:calc(var(--h)*.2)}
.sxl-mark{position:relative;height:var(--h);aspect-ratio:492/520}
.sxl-mark img{height:100%;width:100%;display:block;animation:sxlMark 10.5s both}
.sxl-ping{position:absolute;left:87.4%;top:78.8%;width:calc(var(--h)*.2);aspect-ratio:1;margin:calc(var(--h)*-.1) 0 0 calc(var(--h)*-.1);border-radius:50%;border:2px solid var(--sxl-teal);opacity:0;animation:sxlPing 10.5s both}
.sxl-word{height:calc(var(--h)*.42);aspect-ratio:1200/212;display:block;animation:sxlWord 10.5s both}
.sxl-ecg{position:absolute;left:0;top:calc(var(--h)*.788);width:calc(var(--h)*3.526);height:calc(var(--h)*.38);overflow:visible;display:block;pointer-events:none}
.sxl-ecg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.sxl-ecg .b{stroke:var(--sxl-base);stroke-width:11;stroke-dasharray:1000;stroke-dashoffset:0;animation:sxlDraw 10.5s both}
.sxl-ecg .p{stroke:var(--sxl-teal);stroke-width:19;stroke-dasharray:70 2000;stroke-dashoffset:70;opacity:0;animation:sxlBeat 4.8s linear infinite,sxlVis 10.5s both}
.sxl-ecg circle{fill:var(--sxl-teal);opacity:0;transform-box:fill-box;transform-origin:center;animation:sxlDot 10.5s both}
@keyframes sxlMark{0%{clip-path:inset(0 0 100% 0);transform:scale(.94)}22%{clip-path:inset(0 0 0 0);transform:scale(1)}34%{transform:scale(1)}38%{transform:scale(1.06)}43%{transform:scale(1)}47%{transform:scale(1.04)}52%,100%{transform:scale(1);clip-path:inset(0 0 0 0)}}
@keyframes sxlPing{0%,20%{opacity:0;transform:scale(.6)}22%{opacity:.9;transform:scale(.6)}40%{opacity:0;transform:scale(3.2)}100%{opacity:0;transform:scale(3.2)}}
@keyframes sxlWord{0%,16%{clip-path:inset(0 100% 0 0);transform:translateX(-18px);opacity:.2}38%{clip-path:inset(0 0 0 0);transform:translateX(0);opacity:1}100%{clip-path:inset(0 0 0 0);transform:none;opacity:1}}
@keyframes sxlBeat{to{stroke-dashoffset:-1000}}
@keyframes sxlDraw{0%,22%{stroke-dashoffset:1000}58%,100%{stroke-dashoffset:0}}
@keyframes sxlVis{0%,56%{opacity:0}62%,100%{opacity:1}}
@keyframes sxlDot{0%,21%{opacity:0;transform:scale(.4)}24%{opacity:1}30%,100%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .sxl,.sxl *{animation:none!important}
  .sxl-ecg .b{stroke-dashoffset:0}.sxl-ecg .p{display:none}.sxl-ecg circle{opacity:1}.sxl-ping{display:none}
}