/* ═══ Chargement MK : le logo se remplit d'orange (comme une charge), les métiers défilent ═══ */
.mk-loader{gap:22px!important;background:#f4f2ed!important}
html[data-mode="dark"] .mk-loader{background:#15171b!important}
.mkl-stage{position:relative;width:200px;max-width:54vw;aspect-ratio:535/466;animation:mklIn .5s ease-out both}
.mkl-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.mkl-base{filter:grayscale(1);opacity:.16}
html[data-mode="dark"] .mkl-base{opacity:.22;filter:grayscale(1) brightness(1.6)}
.mkl-fill{clip-path:inset(100% 0 0 0);animation:mklFill 2.2s cubic-bezier(.65,0,.35,1) infinite}
/* reflet qui traverse le logo une fois plein */
.mkl-stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%) no-repeat;background-size:250% 100%;
  -webkit-mask:url(/logo-mk.png) center/contain no-repeat;mask:url(/logo-mk.png) center/contain no-repeat;animation:mklShine 2.2s ease-in-out infinite}
@keyframes mklFill{0%{clip-path:inset(100% 0 0 0)}55%{clip-path:inset(0 0 0 0)}80%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes mklShine{0%,52%{background-position:120% 0}78%,100%{background-position:-20% 0}}
@keyframes mklIn{from{opacity:0;transform:scale(.94)}}
/* les métiers défilent */
.mkl-jobs{position:relative;height:22px;width:240px;overflow:hidden;text-align:center}
.mkl-jobs span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;opacity:0;transform:translateY(10px);
  font:600 12px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#6b6e76;animation:mklJob 8.8s infinite}
html[data-mode="dark"] .mkl-jobs span{color:#979ba6}
.mkl-jobs span i{font-size:16px;color:#E8692A}
.mkl-jobs span:nth-child(2){animation-delay:2.2s}.mkl-jobs span:nth-child(3){animation-delay:4.4s}.mkl-jobs span:nth-child(4){animation-delay:6.6s}
@keyframes mklJob{0%{opacity:0;transform:translateY(10px)}5%,22%{opacity:1;transform:none}27%,100%{opacity:0;transform:translateY(-10px)}}
/* fine barre de progression sous les métiers */
.mkl-line{width:120px;height:3px;border-radius:3px;background:rgba(232,105,42,.15);overflow:hidden}
.mkl-line i{display:block;width:40%;height:100%;border-radius:3px;background:#E8692A;animation:mklLine 1.3s ease-in-out infinite}
@keyframes mklLine{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}

/* ── petit chargement dans les blocs : le même logo qui se remplit ── */
.mk-spin{display:flex;justify-content:center;padding:6px 0}
.mk-spin .mk-spin-badge{position:relative!important;width:58px!important;height:50px!important;background:none!important;animation:none!important;border-radius:0!important;opacity:1!important}
.mk-spin .mk-spin-badge>svg{display:none!important}
.mk-spin .mk-spin-badge:before{content:"";position:absolute;inset:0;background:url(/logo-mk.png) center/contain no-repeat;filter:grayscale(1);opacity:.18}
.mk-spin .mk-spin-badge>img{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain;clip-path:inset(100% 0 0 0);animation:mklFill 1.8s cubic-bezier(.65,0,.35,1) infinite;border-radius:0!important;box-shadow:none!important;background:none!important}
@media(prefers-reduced-motion:reduce){.mkl-fill,.mk-spin .mk-spin-badge>img{animation:none;clip-path:none}.mkl-stage:after,.mkl-line i{animation:none}.mkl-jobs span{animation:none}.mkl-jobs span:first-child{opacity:1;transform:none}}